/* ===================================================================
   PROTO-01 presentation
   Civic Clarity. Tokens come from tokens.css and are never redefined.

   The nested prototype frame must be unmistakable at every width:
   inset border, distinct surface, persistent mode label. The frame is
   identical in both build states; only the four versioned elements
   inside it change.
   =================================================================== */

.proto {
  border: 2px solid var(--transit-navy);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--paper);
  margin: var(--s5) 0;
}

.proto__chrome {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); padding: var(--s4) var(--s5);
  background: var(--transit-navy); color: #fff;
}
.proto__mode {
  margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: #A9C3CC;
}
.proto__title { margin: var(--s1) 0 0; font-size: 20px; font-weight: 500; }
.proto__place { margin: 0; font-size: 14px; color: #A9C3CC; white-space: nowrap; }

.proto__body { padding: var(--s5); }

/* SC-01 — contextual station imagery, identical in both builds.
   Aspect ratio changes with the crop served at each breakpoint, so the
   image sizes to its own intrinsic ratio rather than a fixed one. */
.sc01 { display: block; margin-bottom: var(--s4); }
.sc01__img {
  display: block; width: 100%; height: auto;
  max-width: 100%;
  border-radius: var(--r-control);
  background: #EFEDE6;
}

.proto__sign {
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  background: var(--transit-navy); color: #fff;
  border-radius: var(--r-control); font-size: 15px;
}
.proto__sign .label { display: block; color: #A9C3CC; margin-bottom: var(--s1); }

.proto__dialogue { display: grid; gap: var(--s3); }
.line { padding: var(--s3) var(--s4); border-radius: var(--r-control); }
.line--passenger { background: #F1EFE8; border-left: 3px solid var(--muted-ink); }
.line--agent     { background: #F0F6F6; border-left: 3px solid var(--evidence-teal); }
.line__who {
  margin: 0 0 var(--s1); font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted-ink);
}
.line__text { margin: 0; }

.proto__response {
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-control);
  color: var(--muted-ink); font-style: italic;
}

.proto__map { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border); }
.proto__map-record { margin-top: var(--s3); }

.record { padding: var(--s3) var(--s4); border: 1px solid var(--border);
          border-radius: var(--r-control); background: var(--paper); }
.record--thin  { border-left: 4px solid var(--needs-review); }
.record--full  { border-left: 4px solid var(--evidence-teal); }
.record__value { margin: var(--s1) 0 0; }
.record__note  { margin: var(--s2) 0 0; font-size: 13px; color: var(--muted-ink); }
.record__ident { margin: var(--s2) 0 0; font-size: 15px; }
.record__h     { font-size: 14px; font-weight: 600; color: var(--transit-navy); margin: var(--s3) 0 var(--s1); }
.record__p     { margin: 0; font-size: 15px; }
.record__stops { margin: var(--s2) 0 0; }
.record__row   { display: grid; grid-template-columns: minmax(0,30%) minmax(0,70%);
                 gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.record__row:last-child { border-bottom: 0; }
.record__row dt { color: var(--muted-ink); }
.record__row dd { margin: 0; }
.record__free  { color: var(--supported); font-weight: 500; }

.proto__deck {
  margin-top: var(--s5); padding: var(--s5);
  background: var(--canvas); border: 1px solid var(--border);
  border-radius: var(--r-document);
}
.deck__quote { margin: var(--s3) 0 var(--s5); padding-left: var(--s4); border-left: 4px solid var(--transit-navy); }
.deck__line  { font-family: var(--serif); font-size: 21px; line-height: 1.4; margin: 0; }
.deck__attr  { margin: var(--s2) 0 0; font-size: 14px; color: var(--muted-ink); }
.deck__how   { padding-top: var(--s4); border-top: 1px solid var(--border); }
.deck__body  { font-family: var(--serif); margin: var(--s2) 0 0; line-height: 1.55; }

.proto__controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s3); padding: var(--s4) var(--s5);
  background: #EBEEEE; border-top: 1px solid var(--border);
}
.proto__progress { margin: 0; font-size: 14px; color: var(--muted-ink); }
.proto__buttons  { display: flex; gap: var(--s3); flex-wrap: wrap; }

.proto__transcript { padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--border); }
.transcript-body { margin-top: var(--s2); padding: var(--s3) var(--s4);
                   background: var(--canvas); border-radius: var(--r-control); }
.transcript__line { margin: var(--s2) 0 0; font-size: 15px; }
.transcript__line:first-child { margin-top: 0; }

/* ---------------- Stage 4 comparison mount ---------------------- */
.comparison__proto { margin-top: var(--s4); }
.focus-note { font-size: 13px; margin-top: var(--s2); }

/* The element a comparison examines, so it can be located.
   Marked by an outline and a text note, never colour alone. */
.is-focus-element {
  outline: 2px dashed var(--evidence-teal);
  outline-offset: 6px;
  border-radius: var(--r-control);
}

/* Approved 150-200ms transition treatment */
.proto__dialogue, .proto__deck, .proto__map-record {
  transition: opacity 180ms ease, transform 180ms ease;
}
.is-swapping { opacity: .35; transform: translateY(3px); }

@media (max-width: 599px) {
  .proto__chrome { flex-direction: column; gap: var(--s2); }
  .proto__place { white-space: normal; }
  .proto__body, .proto__controls, .proto__transcript { padding: var(--s4); }
  .record__row { grid-template-columns: minmax(0,1fr); gap: var(--s1); }
  .deck__line { font-size: 18px; }
  .proto__buttons { width: 100%; }
  .proto__buttons .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .proto__dialogue, .proto__deck, .proto__map-record { transition: none !important; }
  .is-swapping { opacity: 1; transform: none; }
}

@media print {
  .proto__controls, .proto__transcript { display: none !important; }
}