/* Dev-mode question-flow harness. Bone palette — light cream/gold to match
 * the rest of the mockup. Floating draggable panel; backdrop is click-through
 * so the tester can still see the page behind it.
 */

/* Hide-all toggle: Ctrl+Shift+D (desktop) or 700ms long-press on the
   vioverse logo (mobile). Wiped on the next toggle; persisted in
   localStorage so reloads stay hidden.
   Phase 43.5: the tier-toggle, six view-btn screen jumps, and the DEV
   Fresh button collapsed into the harness modal, so a single selector
   (#dev-harness-modal) now hides all nine dev-chrome controls.
   The navbar vault (.vault) and .nav-add-btn are consumer chrome; their
   visibility is owned by updateVault() and must not be coupled to the
   dev toggle. */
body.dev-hidden #dev-harness-modal { display: none !important; }

.dev-harness-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none; /* click-through — only the card is interactive */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dev-harness-backdrop.visible { display: block; }

.dev-harness-card {
  position: fixed;
  /* Default: left side of viewport, vertically centered. Overridden by
     inline top/left/transform from JS when a saved position exists in
     localStorage or the user has dragged the panel. */
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  width: min(540px, 94vw);
  height: auto;
  min-width: 380px;
  min-height: 240px;
  max-height: 92vh;
  /* `resize: both` paints the standard diagonal-grip handle in the
     bottom-right corner so the tester can stretch the panel wider or
     taller. Requires overflow: auto on the same element. */
  resize: both;
  overflow: auto;
  pointer-events: auto;
  background: #F3EFE7;          /* Bone Field */
  color: #1D2430;               /* ink-0 */
  border: 1px solid rgba(29, 36, 48, 0.12);
  border-radius: 10px;
  padding: 0 0 16px;
  box-shadow: 0 16px 40px rgba(29, 36, 48, 0.18), 0 2px 6px rgba(29, 36, 48, 0.08);
  font-size: 14px;
  line-height: 1.45;
}

/* Collapsed state — toggled by double-clicking the header. The title
   bar + shortcuts row stay visible (tier toggles, screen jumps, DEV
   Fresh remain reachable); the scenario form, actions, and advanced
   controls hide so the panel doesn't block Zone A/B/C/D after a
   harness-fired run. Persisted in localStorage. */
.dev-harness-card.collapsed {
  min-height: 0;
  height: auto;
  resize: none;
  overflow: hidden;
  padding-bottom: 0;
}
.dev-harness-card.collapsed > :not(.dev-harness-head):not(.dev-harness-shortcuts-row) {
  display: none;
}
.dev-harness-card.collapsed .dev-harness-head {
  border-bottom: none;
  border-radius: 10px;
}

/* --- Header (drag handle) --------------------------------------------- */
.dev-harness-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(29, 36, 48, 0.08);
  background: linear-gradient(180deg, #ECE4D4 0%, #E8DFCB 100%);
  border-radius: 10px 10px 0 0;
  cursor: grab;
  user-select: none;
}
.dev-harness-head.dragging { cursor: grabbing; }
.dev-harness-head .drag-grip {
  color: rgba(29, 36, 48, 0.35);
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 700;
  margin-right: 4px;
}
.dev-harness-badge {
  background: #D6584C;          /* --red */
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
}
.dev-harness-title {
  font-weight: 600;
  flex: 1;
  color: #1D2430;
}
/* (Modal-internal Fresh Session button removed — lives in the nav now.) */

/* --- Scenario picker row ---------------------------------------------- */
.dev-harness-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  flex-wrap: wrap;
}
.dev-harness-row label {
  font-weight: 600;
  font-size: 13px;
  color: #1D2430;
}
.dev-harness-row input[type="number"] {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid rgba(29, 36, 48, 0.2);
  background: #fff;
  color: #1D2430;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
.dev-harness-row input[type="number"]:focus {
  outline: none;
  border-color: #1D2430;
  box-shadow: 0 0 0 2px rgba(29, 36, 48, 0.1);
}
.dev-harness-load,
.dev-harness-run-all {
  padding: 6px 14px;
  background: #1D2430;          /* ink-0 */
  color: #fff;
  border: 1px solid #1D2430;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}
.dev-harness-load:hover,
.dev-harness-run-all:hover { background: #2a3344; }
.dev-harness-run-all {
  background: #2d7a4a;
  border-color: #2d7a4a;
}
.dev-harness-run-all:hover:not(:disabled) { background: #236139; }
.dev-harness-run-all:disabled,
.dev-harness-load:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dev-harness-count {
  color: rgba(29, 36, 48, 0.55);
  font-size: 12px;
  margin-left: auto;
}

/* --- Scenario form area ----------------------------------------------- */
.dev-harness-form {
  background: #fff;
  border: 1px solid rgba(29, 36, 48, 0.08);
  border-radius: 6px;
  padding: 12px;
  margin: 0 18px 14px;
  min-height: 80px;
}
.dev-harness-hint {
  color: rgba(29, 36, 48, 0.55);
  font-size: 13px;
  margin: 0;
}
.dev-harness-error {
  color: #a83226;
  font-size: 13px;
  margin: 0;
}
.dev-harness-desc {
  font-size: 13px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(29, 36, 48, 0.08);
  color: #1D2430;
}
.dev-harness-desc strong {
  color: #8a6a2b;              /* warm gold */
  margin-right: 4px;
}

.dev-harness-note {
  background: rgba(240, 180, 60, 0.15);
  border-left: 3px solid #c89030;
  color: #6a4a0a;
  font-size: 12px;
  padding: 7px 10px;
  margin-bottom: 12px;
  border-radius: 3px;
  line-height: 1.45;
}

.dev-harness-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(29, 36, 48, 0.5);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dev-harness-inputs { margin-bottom: 12px; }
.dev-harness-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.dev-harness-field label {
  min-width: 130px;
  font-size: 13px;
  color: rgba(29, 36, 48, 0.75);
}
.dev-harness-field input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid rgba(29, 36, 48, 0.2);
  background: #fff;
  color: #1D2430;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.dev-harness-field input:focus {
  outline: none;
  border-color: #1D2430;
  box-shadow: 0 0 0 2px rgba(29, 36, 48, 0.1);
}

.dev-harness-auto {
  background: #F7F3EB;
  border: 1px solid rgba(29, 36, 48, 0.06);
  border-radius: 4px;
  padding: 10px 12px;
}
.dev-harness-kv {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(29, 36, 48, 0.08);
  line-height: 1.4;
}
.dev-harness-kv:last-child { border-bottom: none; }
.dev-harness-kv-header {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(29, 36, 48, 0.45);
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(29, 36, 48, 0.1);
}
.dev-harness-kv .q {
  color: #1D2430;
  font-weight: 500;
  word-break: break-word;
}
.dev-harness-kv .k {
  color: rgba(29, 36, 48, 0.55);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  word-break: break-all;
}
.dev-harness-kv .v {
  color: #1D2430;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  word-break: break-word;
}
.dev-harness-kv .v em.raw {
  font-style: normal;
  color: rgba(29, 36, 48, 0.45);
  font-size: 11px;
}

/* --- Run All: progress indicator + results matrix -------------------- */
.dev-harness-running {
  font-size: 13px;
  color: #1D2430;
  padding: 20px 12px;
  text-align: center;
}
.dev-harness-running::before {
  content: '⟳';
  display: inline-block;
  margin-right: 8px;
  animation: dev-spin 1s linear infinite;
  color: #2d7a4a;
}
@keyframes dev-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.dev-harness-results-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dev-harness-results-head .dev-harness-section-label {
  flex: 1;
  margin-bottom: 0;
}
.dev-harness-copy-btn {
  padding: 4px 10px;
  background: #fff;
  color: #1D2430;
  border: 1px solid rgba(29, 36, 48, 0.25);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dev-harness-copy-btn:hover { background: #F7F3EB; border-color: #1D2430; }

/* Range/selection input — wider than the single-scenario number box so
   "1,2,5,18-24" fits without scrolling inside the field. */
#dev-run-selection {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid rgba(29, 36, 48, 0.25);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}

.dev-harness-selection-error {
  color: #a83226;
  font-size: 12px;
  padding: 0 14px 6px;
  min-height: 18px;
}

/* Continue button below the matrix — full width, matches copy-btn
   styling so the results panel reads as one consistent surface. */
.dev-harness-continue {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
  background: #fff;
  color: #1D2430;
  border: 1px solid rgba(29, 36, 48, 0.25);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dev-harness-continue:hover { background: #F7F3EB; border-color: #1D2430; }

.dev-harness-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  margin-top: 10px;
}
.dev-harness-matrix thead th {
  background: #F7F3EB;
  color: rgba(29, 36, 48, 0.65);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 4px;
  text-align: right;
  border-bottom: 1px solid rgba(29, 36, 48, 0.15);
}
.dev-harness-matrix thead th:nth-child(2) { text-align: left; }
.dev-harness-matrix tbody td {
  padding: 4px;
  text-align: right;
  border-bottom: 1px dashed rgba(29, 36, 48, 0.08);
}
.dev-harness-matrix .col-num { color: rgba(29, 36, 48, 0.55); width: 30px; }
.dev-harness-matrix .col-desc {
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: #1D2430;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
}
.dev-harness-matrix .col-total { font-weight: 700; color: #1D2430; }
.dev-harness-matrix .matrix-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.dev-harness-matrix .matrix-row:hover { background: rgba(45, 122, 74, 0.06); }
.dev-harness-matrix .matrix-row.expanded { background: rgba(45, 122, 74, 0.1); }
/* Primed row — the one the green Run button will fire. Green accent
   matches the Run button so the visual link between "this row" and
   "this is what Run does" is unambiguous. */
.dev-harness-matrix .matrix-row.row-selected {
  background: rgba(45, 122, 74, 0.18);
  box-shadow: inset 3px 0 0 #2d7a4a;
}
.dev-harness-matrix .matrix-row.row-selected:hover {
  background: rgba(45, 122, 74, 0.24);
}
.dev-harness-matrix .matrix-error td {
  color: #a83226;
  font-size: 11px;
}
.dev-harness-matrix .matrix-expansion td.expansion-content {
  background: #F7F3EB;
  color: rgba(29, 36, 48, 0.75);
  font-size: 11px;
  padding: 8px 12px;
  text-align: left;
  word-break: break-word;
  line-height: 1.5;
}

/* --- Actions ---------------------------------------------------------- */
.dev-harness-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 18px;
}
.dev-harness-bypass {
  padding: 8px 16px;
  background: transparent;
  color: rgba(29, 36, 48, 0.7);
  border: 1px solid rgba(29, 36, 48, 0.25);
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
.dev-harness-bypass:hover {
  background: rgba(29, 36, 48, 0.05);
  color: #1D2430;
}
/* Copy diagnostics — pushed to the left of the actions row so it's
   visually separate from the Bypass/Run pair. Blue-gray accent keeps
   it from competing with the green Run primary action. */
.dev-harness-copy-diag {
  margin-right: auto;
  padding: 8px 14px;
  background: transparent;
  color: rgba(29, 36, 48, 0.75);
  border: 1px solid rgba(46, 87, 122, 0.35);
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.dev-harness-copy-diag:hover {
  background: rgba(46, 87, 122, 0.08);
  border-color: rgba(46, 87, 122, 0.55);
  color: #1D2430;
}
.dev-harness-run {
  padding: 8px 22px;
  background: #2d7a4a;
  color: #fff;
  border: 1px solid #2d7a4a;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 700;
}
.dev-harness-run:hover:not(:disabled) { background: #236139; }
.dev-harness-run:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --- Shortcuts row (Phase 43.5) ---------------------------------------
   Tier toggles + six screen-jump buttons + DEV Fresh, relocated here
   from the consumer nav. Sits directly below the drag head so it's
   always on-top of the scenario controls. Wraps to multiple lines on
   narrow widths (nine pills don't fit one row under ~600px). The
   .view-btn class used to live in base.css — colocated
   (DA5.3c removed the .tier-btn rules with the tier toggle)
   here now that they only render inside this row. */
.dev-harness-shortcuts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(29, 36, 48, 0.08);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dev-harness-shortcuts-row .view-btn,
.dev-harness-shortcuts-row .dev-harness-reload-btn,
.dev-harness-shortcuts-row .dev-harness-fresh-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dev-harness-shortcuts-row .view-btn {
  background: transparent;
  color: rgba(29, 36, 48, 0.75);
  border: 1px solid rgba(29, 36, 48, 0.22);
}
.dev-harness-shortcuts-row .view-btn:hover {
  background: rgba(29, 36, 48, 0.05);
  color: #1D2430;
}
.dev-harness-shortcuts-row .view-btn.active {
  background: #1D2430;
  color: #F3EFE7;
  border-color: #1D2430;
}
.dev-harness-shortcuts-row .dev-harness-reload-btn {
  background: #fff;
  color: #1D2430;
  border: 1px solid rgba(29, 36, 48, 0.25);
}
.dev-harness-shortcuts-row .dev-harness-reload-btn:hover {
  background: rgba(29, 36, 48, 0.05);
  border-color: #1D2430;
}
.dev-harness-shortcuts-row .dev-harness-fresh-btn {
  background: #fff;
  color: #1D2430;
  border: 1px solid rgba(214, 88, 76, 0.4);
}
.dev-harness-shortcuts-row .dev-harness-fresh-btn:hover {
  background: #FFF3F1;
  border-color: #D6584C;
}

/* --- Mobile: pin card to the viewport ---------------------------------
 * On phones the desktop defaults blow out:
 *   - min-width: 420px exceeds typical viewport (375-414px) → horizontal overflow
 *   - left: 32px + 420px+ width → card extends past right edge
 *   - restorePosition() inline top/left saved from a desktop session would
 *     otherwise carry over and place the card off-screen with no way back
 * Fix: fill the viewport minus an 8px margin on every side, force overrides
 * with !important to beat inline styles, disable touch-unfriendly resize.
 * The card's own `overflow: auto` + this deterministic size make internal
 * scrolling work — the tester can reach every option and scroll results
 * after a Run All without the body taking over the scroll gesture. */
@media (max-width: 640px) {
  .dev-harness-card {
    /* top: 80px clears the sticky nav (margin 16 + padding 14 + logo ~27)
       so the vioverse logo stays visible and long-pressable while the
       harness is open. Without this the harness covers the only way
       to toggle itself off on mobile. */
    top: 80px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    resize: none;
  }
  .dev-harness-head { cursor: default; }
  /* Collapsed on mobile: only the header is visible, not full-height. */
  .dev-harness-card.collapsed {
    bottom: auto !important;
    height: auto !important;
  }
  /* Tighter padding so more of the form area is visible before scrolling. */
  .dev-harness-row,
  .dev-harness-actions { padding-left: 12px; padding-right: 12px; }
  .dev-harness-form { margin-left: 12px; margin-right: 12px; }
  /* iOS zoom-on-focus fix: any input below 16px triggers viewport zoom
     on tap. Bumping every harness input to 16px keeps the page width
     stable when the scenario number / range input / scenario-config
     field is focused. */
  .dev-harness-card input,
  .dev-harness-card input[type="number"],
  .dev-harness-card input[type="text"],
  #dev-run-selection {
    font-size: 16px !important;
  }
}