/* site/system/prototypes.css: page CSS for site/prototypes.html, and for that page only.
 *
 * Linked LAST in the head (S2), so a rule here can override a component without raising
 * specificity. The whole pf- band lives here rather than in components.css because exactly one
 * page mounts a device frame today, and S5 promotes a pattern when a second page spends it, not
 * before: promoting now would claim a producer that does not exist.
 *
 * S1, and gate group 6 treats this file as a consumer exactly as it treats components.css:
 * contract tokens only, no colour literal, no pack primitive, no bare px on padding, margin, gap,
 * border-radius or font-size outside the 0 to 3px hairline allow-list. No @import either, since an
 * @import is invisible to the S2 order check. Widths, heights and translate distances are
 * unrestricted geometry, which is what the step dots and the slide animations use.
 *
 * NO CONTRACT-SLOT REBINDING IN THIS FILE. Group 8's detector counts any --color-* declaration
 * outside the token layers, and a rebinding here is a value its ten pairs never measure (d-045).
 * Every slot below is bound at the point of use. */

/* ---- The flows index ---------------------------------------------------------------------- */
/* The site's lineup idiom: a mono number in the signal colour, a name, a one-line caption, and a
   bottom-bordered row with a hover arrow. Three rows, one per flow, anchoring down the page. */

.pf-lineup {
  margin-block: var(--spacing-2xl);
}

.pf-lineup-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--spacing-lg);
  padding-block: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-fg);
}

.pf-lineup-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-caption);
  color: var(--color-accent-secondary);
}

.pf-lineup-name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-ui);
}

.pf-lineup-caption {
  display: block;
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
}

.pf-lineup-item::after {
  content: "→";
  transform: translateX(0);
  transition: transform var(--motion-base) var(--motion-ease-spring);
}
.pf-lineup-item:hover::after { transform: translateX(4px); }
.pf-lineup-item:hover .pf-lineup-name { color: var(--color-accent-hover); }

/* ---- The flow sections and the stage ------------------------------------------------------ */

.pf-flow { margin-top: var(--spacing-4xl); }

.pf-intro {
  max-width: 65ch;
  margin-bottom: var(--spacing-xl);
}

/* Phone column beside the notes panel; below 1024px one column, notes after the phone. */
.pf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--spacing-2xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .pf-stage { grid-template-columns: 1fr; }
}

/* ---- The device frame --------------------------------------------------------------------- */
/* The bezel is the dark ground; the screen inside it is the page ground, so the frame reads as an
   object sitting on the page rather than as a second page. The screen radius is the bezel radius
   less its padding, which is what keeps the two curves concentric. */

.pf-phone {
  width: min(392px, 94vw);
  margin-inline: auto;
  background: var(--color-bg-inverse);
  border-radius: var(--radius-phone);
  padding: var(--spacing-sm);
}

.pf-screen {
  display: flex;
  flex-direction: column;
  height: min(720px, 78dvh);
  min-height: 560px;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius-screen);
}

/* The 09:41 bar: quiet chrome, never content. */
.pf-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  color: var(--color-fg-muted);
}
.pf-status-pins { display: flex; gap: var(--spacing-xs); }
.pf-status-pins i {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.pf-appbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.pf-back {
  background: transparent;
  border: none;
  padding: 0 var(--spacing-xs);
  font-size: var(--type-h3);
  line-height: 1;
  color: var(--color-fg);
  cursor: pointer;
}
.pf-back[disabled] { color: var(--color-fg-muted); cursor: default; }

.pf-appbar-title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: var(--font-weight-ui);
  font-size: var(--type-caption);
}

/* Step dots: 6px circles, filled up to the current screen. Decorative; the visually hidden
   status line under the section carries the same information in words. */
.pf-dots { display: flex; gap: var(--spacing-xs); }
.pf-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.pf-dots i.on { background: var(--color-accent-secondary); }

.pf-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: grid;
  gap: var(--spacing-sm);
  align-content: start;
}

/* ---- In-screen furniture ------------------------------------------------------------------ */

.pf-thread-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--spacing-sm);
  align-items: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xs);
}
.pf-live {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-secondary);
  grid-row: span 2;
}
.pf-thread-name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-ui);
  font-size: var(--type-caption);
}
.pf-thread-sub {
  font-size: var(--type-eyebrow);
  color: var(--color-fg-muted);
}

.pf-msg {
  max-width: 85%;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-size: var(--type-caption);
  line-height: 1.5;
}
.pf-msg-customer {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  align-self: start;
  justify-self: start;
}
.pf-msg-fin {
  background: var(--color-bg-inverse);
  color: var(--color-fg-on-inverse);
  align-self: end;
  justify-self: end;
}
.pf-msg-human {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-accent-secondary);
  align-self: end;
  justify-self: end;
}

.pf-chip {
  justify-self: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px var(--spacing-sm);
  font-size: var(--type-eyebrow);
  color: var(--color-fg-muted);
}
.pf-chip-signal {
  border-color: var(--color-accent-secondary);
  color: var(--color-fg);
}

.pf-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  display: grid;
  gap: var(--spacing-sm);
}
.pf-card-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-ui);
}
.pf-card-line {
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  line-height: 1.5;
}
.pf-field { display: grid; gap: 2px; }
.pf-field-label {
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.pf-field-value {
  font-size: var(--type-caption);
  line-height: 1.5;
}

/* The inbox rows of flow 2. The active row is the one carrying a reason chip. */
.pf-inbox-row {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}
.pf-inbox-row:not(.pf-inbox-active) { background: transparent; }
.pf-inbox-name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-ui);
  font-size: var(--type-caption);
}
.pf-inbox-preview {
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
}
.pf-inbox-row .pf-chip { justify-self: start; margin-top: var(--spacing-xs); }

/* The provenance strip of flow 2, flipped to the human: the signal is the sentence itself naming
   who is answering, never colour alone. */
.pf-provenance {
  font-size: var(--type-caption);
}
.pf-composer {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}
.pf-composer-draft {
  font-size: var(--type-caption);
  line-height: 1.5;
}

/* ---- The in-screen CTA -------------------------------------------------------------------- */
/* The .btn language at phone scale: full width, the action colour, the same uppercase register. */

.pf-btn {
  display: block;
  width: 100%;
  margin-top: var(--spacing-sm);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  font-family: var(--font-display);
  font-weight: var(--font-weight-ui);
  font-size: var(--type-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pf-btn:hover { background: var(--color-accent-hover); }
.pf-btn-ghost {
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
}
.pf-btn-ghost:hover { background: transparent; color: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* ---- The design notes panel --------------------------------------------------------------- */

.pf-notes {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  padding: var(--spacing-lg);
  position: sticky;
  top: var(--spacing-4xl);
}
.pf-notes-head {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.pf-notes-kicker {
  font-size: var(--type-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-sm);
}
.pf-notes-text {
  font-size: var(--type-body);
  line-height: 1.55;
  margin-bottom: var(--spacing-md);
}
.pf-notes-measure {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-sm);
}

.pf-caption {
  text-align: center;
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  max-width: 44ch;
  margin-inline: auto;
  margin-top: var(--spacing-md);
}

/* ---- Motion ------------------------------------------------------------------------------- */
/* A short slide plus fade on `translate`, the independent property, matching the card-rise
   convention in components.css. Gated on reduced motion, so outside the preference the rebuilt
   screen simply appears at rest. */

@media (prefers-reduced-motion: no-preference) {
  .pf-anim { animation: pf-slide 260ms var(--motion-ease-settle) both; }
  .pf-anim-back { animation: pf-slide-back 260ms var(--motion-ease-settle) both; }
}
@keyframes pf-slide {
  from { opacity: 0; translate: 24px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes pf-slide-back {
  from { opacity: 0; translate: -24px 0; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---- The file:// note ---------------------------------------------------------------------- */
/* Modules refuse to load over file://, so the flows cannot report their own absence; this
   sentence can, flipped visible by the page's one classic script. NO display property here: the
   [hidden] attribute's UA rule is what keeps it off on every origin where the modules run, and an
   author display would beat it on specificity, which is the exact defect .replay [hidden] exists
   to fix in components.css. */
.pf-file-note {
  font-size: var(--type-caption);
  line-height: 1.5;
  color: var(--color-fg);
  max-width: 62ch;
  margin-bottom: var(--spacing-2xl);
}