/* ==========================================================================
   Layout and components. Tokens live in tokens.css and nothing here
   hard-codes a colour except pure black/white in shadows and bezel gradients.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;          /* trainmed.io never goes bold on a heading */
  line-height: 1.14;
}
h1 { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: var(--track-display); }
h2 { font-size: clamp(28px, 3vw, 40px);   letter-spacing: var(--track-head); }
h3 { font-size: 18.5px; font-weight: 600; letter-spacing: var(--track-sub); }
h4 { font-size: 16.5px; font-weight: 600; letter-spacing: var(--track-sub); }
p  { margin: 0 0 0.85em; }
p:last-child { margin-bottom: 0; }
a  { color: var(--accent); }

button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; border-radius: 2px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted);
}

/* --- Page chrome ---------------------------------------------------------- */

.ribbon {
  background: var(--wash);
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.ribbon .shell { padding-top: 9px; padding-bottom: 9px; }
.ribbon strong { color: var(--body); font-weight: 600; }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 62px;
}
.mark { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.mark svg { display: block; }
.mark__word { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.mark__word b { font-weight: 600; color: var(--accent); }
.masthead__meta { font-size: 13px; color: var(--muted); }

/* --- The demonstration ---------------------------------------------------- */

.stage {
  position: relative;
  padding: 56px 0 72px;
  background: var(--wash);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
/* A single soft wash behind the device. The site itself uses almost no
   depth, so this is the only atmospheric effect on the page. */
.stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 520px at 26% 42%, rgba(3, 105, 161, 0.07), transparent 70%),
    radial-gradient(620px 420px at 74% 8%,  rgba(3, 105, 161, 0.04), transparent 72%);
  pointer-events: none;
}
.stage > .shell { position: relative; }

.stage__head { max-width: 640px; margin-bottom: 42px; }
.stage__head h1 { margin-bottom: 16px; }
.stage__lede { font-size: 17px; line-height: 1.62; color: var(--body); margin: 0; }

.stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 406px) minmax(0, 1fr);
  gap: 56px; align-items: start;
}

/* --- Device --------------------------------------------------------------- */

.device {
  position: relative;
  width: 406px; padding: 13px;
  border-radius: var(--device-outer);
  background: linear-gradient(160deg, #334155 0%, #0f172a 38%, #020617 100%);
  box-shadow: var(--lift-device);
}
/* The thin bright ring is what stops a dark rectangle reading as a
   placeholder — real hardware catches light on the chamfer. */
.device::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--device-outer);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13),
              inset 0 1px 1px rgba(255, 255, 255, 0.20);
  pointer-events: none;
}
.device__screen {
  position: relative;
  height: 782px; overflow: hidden;
  border-radius: var(--device-inner);
  background: var(--white);
  display: flex; flex-direction: column;
}
.device__island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 26px; border-radius: 14px;
  background: #020617; z-index: 12;
}

.statusbar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 22px 0 26px;
  font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.statusbar__right { display: flex; align-items: center; gap: 5px; }

/* App header — the 11.5px/0.13em/600 recipe measured off trainmed.io's own
   chat mock, so the prototype chrome matches their marketing chrome. */
.appbar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--white); border-bottom: 1px solid var(--rule);
}
.appbar__mark {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--body);
}
.appbar__topic {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--wash); font-size: 11.5px; color: var(--muted);
  cursor: default;
}
.appbar__reset {
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white); font-size: 11.5px; color: var(--muted); cursor: pointer;
}
.appbar__reset:hover { color: var(--accent); border-color: var(--accent-edge); }

.viewport { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.viewport::-webkit-scrollbar { width: 0; }
.view { padding: 16px; animation: rise 220ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- Thread --------------------------------------------------------------- */

.thread { display: flex; flex-direction: column; gap: 14px; }

.turn { display: flex; gap: 8px; animation: rise 260ms var(--ease) both; }
.turn--rep { justify-content: flex-end; }
.turn__avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--wash); color: var(--muted); border: 1px solid var(--rule);
}
.turn--tm .turn__avatar { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-edge); }

.bubble { max-width: 84%; padding: 10px 13px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.55; }
.bubble--rep { background: var(--accent); color: var(--white); }
.bubble--tm  { background: var(--white); color: var(--body); border: 1px solid var(--rule); box-shadow: var(--lift-sm); }
.bubble p { margin: 0 0 0.6em; }
.bubble p:last-child { margin-bottom: 0; }

/* Retrieval trace. The single cheapest thing that makes it read as running. */
.trace {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); padding: 2px 0 2px 34px;
}
.trace__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 1px;
  background: var(--accent); vertical-align: -0.15em;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* --- Source cards --------------------------------------------------------- */

.cites { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cite {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--white); cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.cite:hover { background: var(--accent-wash); }
.cite__title { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cite__meta {
  margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  letter-spacing: 0.01em;
}
.cite__quote {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--rule);
  font-size: 11.5px; line-height: 1.5; color: var(--muted); font-style: italic;
}
.cite__specimen { display: block; margin-top: 5px; font-size: 10.5px; color: var(--faint); }

/* --- Governance cards ----------------------------------------------------- */

.card {
  margin-top: 4px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white); overflow: hidden;
}
.card__top { padding: 11px 13px; }
.card--restrict { border-color: var(--restrict-edge); background: var(--restrict-wash); }
.card--alert    { border-color: var(--alert-edge);    background: var(--alert-wash); }
.card--abstain  { border-color: var(--rule);          background: var(--wash); }

.card__title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 6px;
}
.card--restrict .card__title { color: var(--restrict); }
.card--alert    .card__title { color: var(--alert); }
.card--abstain  .card__title { color: var(--body); }
.card__body { font-size: 13px; line-height: 1.55; color: var(--body); }
.card__body p { margin: 0 0 0.55em; }

.handoff { border-top: 1px solid var(--rule); background: var(--white); }
.handoff__head {
  padding: 9px 13px 7px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted);
}
.handoff__rows { padding: 0 13px 10px; display: grid; gap: 5px; }
.handoff__row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 11.5px; }
.handoff__row dt { color: var(--faint); }
.handoff__row dd { margin: 0; color: var(--body); font-family: var(--mono); font-size: 10.5px; line-height: 1.5; }
.handoff__act { padding: 0 13px 11px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: var(--white);
  font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer;
  transition: background 140ms var(--ease);
}
.btn:hover { background: var(--accent-deep); }
.btn--restrict { background: var(--restrict); } .btn--restrict:hover { background: #92400e; }
.btn--alert    { background: var(--alert); }    .btn--alert:hover    { background: #991b1b; }
.btn--ghost { background: var(--white); border-color: var(--rule); color: var(--body); }
.btn--ghost:hover { background: var(--wash); border-color: var(--accent-edge); color: var(--accent); }

.receipt {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-top: 1px solid var(--rule);
  background: var(--wash); font-size: 11.5px; color: var(--muted);
}
.receipt svg { flex: none; }

/* Revision picker */
.choices { display: grid; gap: 6px; margin-top: 9px; }
.choice {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.choice:hover { border-color: var(--accent); background: var(--accent-wash); }
.choice__label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.choice__meta  { font-size: 10.5px; color: var(--muted); font-family: var(--mono); }

/* --- Suggestions and composer --------------------------------------------- */

.suggestions { display: grid; gap: 6px; margin-top: 14px; }
.suggest {
  width: 100%; text-align: left; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
  font-size: 12.5px; line-height: 1.45; color: var(--body);
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease);
}
.suggest:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

/* Composer lives in the "App UI, third pass" block below — the original
   flex-row version was fully superseded and its `.composer button` rule was
   sizing the topic chips to 34px squares. */

.tabbar {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule); background: var(--white);
  padding-bottom: 8px; /* home-indicator breathing room */
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 5px; border: none; background: none; cursor: pointer;
  font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: var(--faint);
  transition: color 140ms var(--ease);
}
.tab svg { display: block; }
.tab[aria-selected="true"] { color: var(--accent); }
.tab:hover { color: var(--body); }
.tab[aria-selected="true"]:hover { color: var(--accent); }
.tab__badge {
  position: absolute; transform: translate(14px, -4px);
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  background: var(--accent); color: var(--white);
  font-size: 9px; font-weight: 600; line-height: 14px; text-align: center;
}
.tab__icon { position: relative; }
.home-indicator {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px; border-radius: 2px; background: var(--ink); opacity: 0.22;
}

/* --- In-app panels (Tips, Sources, Activity) ------------------------------ */

.panel__head {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted); margin: 0 0 10px;
}
.panel__head + .panel__head { margin-top: 20px; }
.stack { display: flex; flex-direction: column; gap: 8px; }

.doc {
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white);
}
.doc__title { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.doc__meta {
  margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.pill {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--rule); background: var(--wash);
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.pill--current { border-color: var(--accent-edge); background: var(--accent-wash); color: var(--accent); }
.pill--superseded { border-color: var(--restrict-edge); background: var(--restrict-wash); color: var(--restrict); }

.tip { padding: 10px 12px; border: 1px solid var(--rule); border-left: 2px solid var(--accent);
       border-radius: var(--radius); background: var(--white); font-size: 12.5px; line-height: 1.55; }

.gap { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
.gap--new { border-color: var(--accent-edge); background: var(--accent-wash); }
.gap__q { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.gap__meta { margin-top: 5px; font-size: 10.5px; color: var(--muted); }

.empty { padding: 28px 12px; text-align: center; font-size: 12.5px; color: var(--faint); }

/* --- The annotation rail --------------------------------------------------- */

.rail { position: sticky; top: 94px; }
.rail__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--rule);
}
.rail__title {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted);
}
.rail__toggle {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.rail__toggle:hover { color: var(--accent); }

.rail__body { animation: rise 240ms var(--ease) both; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 4px 10px 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--body);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--accent   { color: var(--accent);   border-color: var(--accent-edge);   background: var(--accent-wash); }
.chip--restrict { color: var(--restrict); border-color: var(--restrict-edge); background: var(--restrict-wash); }
.chip--seeded   { color: var(--seeded);   border-color: var(--seeded-edge);   background: var(--seeded-wash); }

.rail__what { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0 0 22px; }

.acceptance {
  padding: 16px 18px; border: 1px solid var(--rule); border-top: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--white); box-shadow: var(--lift-sm);
}
.acceptance__label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted); margin-bottom: 8px;
}
.acceptance__text { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 0; }
.acceptance__from { margin: 10px 0 0; font-size: 11.5px; color: var(--faint); }

.legend { margin-top: 22px; font-size: 12px; line-height: 1.65; color: var(--faint); }
.legend b { color: var(--muted); font-weight: 600; }

/* --- Narrative sections ---------------------------------------------------- */

.section { padding: 84px 0; border-bottom: 1px solid var(--rule); }
.section--wash { background: var(--wash); }
.section__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
.section__lede { max-width: 460px; }
.section h2 { margin-bottom: 18px; }

.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.matrix th {
  text-align: left; padding: 0 14px 9px 0; border-bottom: 1px solid var(--rule);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted);
}
.matrix td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.55; }
.matrix tr:last-child td { border-bottom: none; }
.matrix td:first-child { color: var(--ink); font-weight: 500; width: 34%; }
.matrix .pill { white-space: nowrap; }

.cols { columns: 2; column-gap: 48px; }
.cols li { break-inside: avoid; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li {
  position: relative; padding-left: 20px; margin-bottom: 11px;
  font-size: 14px; line-height: 1.55;
}
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 1px; background: var(--faint);
}

/* --- Closing band ---------------------------------------------------------- */

.band { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding: 76px 0; }
.band h2 { color: var(--white); letter-spacing: -0.024em; margin-bottom: 20px; }
.band .eyebrow { color: rgba(255, 255, 255, 0.5); }
.band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; align-items: end; }
.band__note { font-size: 13.5px; line-height: 1.6; margin: 0; }
.band ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.band ol li { margin-bottom: 10px; }
.band ol li::marker { color: rgba(255, 255, 255, 0.4); }

.foot { padding: 30px 0 40px; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
.foot .shell { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; }

/* --- Responsive ------------------------------------------------------------
   Below 1080 the rail moves under the device. Below 520 the device frame is
   dropped entirely — a phone bezel drawn inside a real phone reads as a bug,
   and the app should simply be the page. */

@media (max-width: 1080px) {
  .stage__grid { grid-template-columns: minmax(0, 406px); gap: 40px; justify-content: center; }
  .rail { position: static; max-width: 560px; }
  .section__grid { grid-template-columns: 1fr; gap: 32px; }
  .band__grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .cols { columns: 1; }
}

@media (max-width: 520px) {
  .shell { padding: 0 20px; }
  .stage { padding: 32px 0 44px; }
  .stage__grid { grid-template-columns: minmax(0, 1fr); }
  .device {
    width: 100%; padding: 0; border-radius: var(--radius-lg);
    background: none; box-shadow: var(--lift);
  }
  .device::after { box-shadow: inset 0 0 0 1px var(--rule); border-radius: var(--radius-lg); }
  .device__screen { height: 640px; border-radius: var(--radius-lg); }
  .device__island, .home-indicator { display: none; }
  .statusbar { display: none; }
  .section { padding: 56px 0; }
  .masthead__meta { display: none; }   /* wrapped to two lines and crowded the wordmark */
  .ribbon { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* --- Ask view sits on the bottom edge --------------------------------------
   A chat that stacks from the top leaves a void under the last message and
   reads as an empty container. Real messaging surfaces grow upward off the
   composer, so the idle state puts the suggestions where the thread will be. */

.view--ask { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.opener {
  margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--faint);
  text-align: center; padding: 0 8px;
}

/* --- Surface checklist -----------------------------------------------------
   Doubles as the argument: five governance surfaces, ticked off as they are
   demonstrated. An investor can see how much of the build they have seen. */

.surfaces { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.surfaces__label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted); margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.surfaces__count { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--faint); }
.surfaces ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.surfaces li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13px; color: var(--faint);
  transition: color 200ms var(--ease);
}
.surfaces li[data-seen="true"] { color: var(--ink); }
.surfaces__box {
  flex: none; width: 15px; height: 15px; border-radius: 2px;
  border: 1px solid var(--rule); display: grid; place-items: center;
  color: transparent; transition: all 200ms var(--ease);
}
.surfaces li[data-seen="true"] .surfaces__box {
  background: var(--accent); border-color: var(--accent); color: var(--white);
}

/* Citation title, metadata and disclaimer are each their own line. They were
   inline spans, so a short title let the document number ride up beside it
   and the card lost its hierarchy. */
.cite__title, .cite__meta, .cite__quote, .cite__specimen { display: block; }

/* The badge was positioned from its static baseline, which put it over the
   tab label rather than on the icon's corner. */
.tab__icon { display: block; width: 19px; height: 19px; }
.tab__badge { top: -5px; right: -9px; transform: none; }

/* `hidden` is only a display:none default — any explicit display wins over it,
   so the composer stayed visible on Tips, Sources and Activity. */
[hidden] { display: none !important; }

/* ==========================================================================
   App UI, second pass. Everything here exists to make the phone read as a
   shipped product rather than a demo harness: prototype controls moved out
   to the page, placeholder avatars replaced with real marks, and the idle
   state given something to say.
   ========================================================================== */

/* --- App bar --------------------------------------------------------------- */

.appbar__brand { display: inline-flex; align-items: center; gap: 7px; }
.appbar__brand svg { display: block; }
.appbar__account {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--wash);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
  cursor: pointer; transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.appbar__account:hover { border-color: var(--accent-edge); color: var(--accent); }

/* Content sliding under the app bar needs an edge, or the bar looks like it
   is floating over a cut-off word. Only shown once the view has scrolled. */
.device__screen.is-scrolled .appbar { box-shadow: 0 1px 0 var(--rule), 0 6px 12px -8px rgba(15, 23, 42, 0.16); }
.appbar { transition: box-shadow 180ms var(--ease); z-index: 5; }

/* --- Prototype controls, outside the product ------------------------------- */

.device__controls {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: 16px; padding: 0 4px;
}
.ghost-link {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.ghost-link:hover { color: var(--accent); }
.device__hint { font-size: 12px; color: var(--faint); }

/* --- Turn avatars and footer ------------------------------------------------ */

.turn__avatar--rep { font-size: 9.5px; letter-spacing: 0.03em; }
.turn__avatar--tm {
  background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent);
}
.turn__avatar--tm svg { display: block; }
.turn__meta {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--rule-soft);
  font-size: 10.5px; color: var(--faint); letter-spacing: 0.01em;
}

/* --- Idle scope card -------------------------------------------------------- */

.scope {
  padding: 13px 14px; margin-bottom: 4px; cursor: pointer;
  border: 1px solid var(--rule); border-top: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--white);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.scope:hover { background: var(--accent-wash); }
.scope__label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted); margin-bottom: 9px;
}
.scope__topics { display: flex; flex-wrap: wrap; gap: 5px; }
.scope__topic {
  padding: 3px 8px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--wash); font-size: 11.5px; color: var(--body); line-height: 1.4;
}
.scope__meta {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; color: var(--faint);
}

/* --- Panel heads carry a count ---------------------------------------------- */

.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel__count {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0;
  text-transform: none; color: var(--faint);
}

.doc--found {
  border-color: var(--accent); background: var(--accent-wash);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* The device and its prototype controls are one column. Left as siblings of
   the rail they became a third grid child and pushed the rail onto its own
   row — the two-column stage silently became a stack. */
.device__column { display: flex; flex-direction: column; align-items: stretch; width: 406px; min-width: 0; }

/* Idle Ask view: scope card pinned to the top, suggestions to the bottom,
   so the gap between them reads as composition rather than emptiness. */
.view--ask .scope { margin-bottom: auto; }
.view--ask .opener { margin-top: 20px; }

@media (max-width: 520px) {
  .device__column { width: 100%; min-width: 0; }
}

/* ==========================================================================
   App UI, third pass: softened bubbles, scoping composer, inline citations,
   top-marked tabs, stepped retrieval trace.
   ========================================================================== */

/* --- 1. Bubbles, softened ---------------------------------------------------
   Rounded on three corners, 3px on the corner nearest the speaker's avatar,
   which is the corner a tail would occupy. */

.bubble--rep { border-radius: var(--radius-bubble) 3px var(--radius-bubble) var(--radius-bubble); }
.bubble--tm  { border-radius: 3px var(--radius-bubble) var(--radius-bubble) var(--radius-bubble); }
.bubble--tm.is-card { border-radius: var(--radius-bubble); }

/* --- 2. Composer with topic scoping ----------------------------------------- */

.composer {
  flex: none; display: block; padding: 10px 13px 12px;
  background: var(--wash); border-top: 1px solid var(--rule);
}
.topics {
  display: flex; gap: 6px; margin-bottom: 9px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.topics::-webkit-scrollbar { display: none; }
.topic {
  flex: none; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--white);
  font-size: 11.5px; line-height: 1.35; color: var(--body); white-space: nowrap;
  transition: all 140ms var(--ease);
}
.topic:hover { border-color: var(--accent-edge); color: var(--accent); }
.topic[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.topic--all { color: var(--muted); border-style: dashed; }

.composer__field {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 6px 6px 12px;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--lift-sm);
  transition: border-color 140ms var(--ease);
}
.composer__field:focus-within { border-color: var(--accent); }
.composer input {
  flex: 1 1 auto; min-width: 0; padding: 4px 0;
  border: none; background: none; font-size: 13px; color: var(--ink); outline: none;
}
.composer input::placeholder { color: var(--faint); }
.composer__field button {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: none; border-radius: 2px; background: var(--accent); color: var(--white);
  cursor: pointer; transition: background 140ms var(--ease), color 140ms var(--ease);
}
.composer__field button:hover { background: var(--accent-deep); }
/* Idle until there is something to send — a small cue that the control is wired. */
.composer__field button:disabled { background: var(--rule); color: var(--faint); cursor: default; }

.appbar__scope {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 12px;
  background: var(--accent-wash); border: 1px solid var(--accent-edge);
  font-size: 10.5px; font-weight: 500; color: var(--accent);
}

/* --- 3. Inline citation markers and source list ------------------------------ */

.marker {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 2px; vertical-align: 1px;
  border: 1px solid var(--accent-edge); border-radius: 2px; background: var(--accent-wash);
  font-size: 9.5px; font-weight: 600; color: var(--accent);
  cursor: pointer; transition: background 140ms var(--ease);
}
.marker:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }

.sources-list { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--rule-soft); }
.source-row {
  display: flex; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  padding: 5px 0; border: none; background: none;
}
.source-row:hover .source-row__title { color: var(--accent); }
.source-row__body { min-width: 0; }
.source-row__title { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.source-row__meta { display: block; margin-top: 1px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.sources-list__note { margin-top: 7px; font-size: 10px; color: var(--faint); }

/* --- 4. Top-marked tab bar --------------------------------------------------- */

.tab { position: relative; padding-top: 11px; }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.tab[aria-selected="true"] .tab__icon { color: var(--accent); }
.tab[aria-selected="true"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--accent);
}
.tab[aria-selected="true"]:hover { color: var(--ink); }

/* --- 5. Stepped retrieval trace ---------------------------------------------- */

.trace { display: block; padding: 2px 0 4px 34px; }
.trace__step {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; line-height: 1.7; color: var(--faint);
  animation: rise 160ms var(--ease) both;
}
.trace__step[data-state="done"] { color: var(--muted); }
.trace__step[data-state="now"] { color: var(--accent); font-weight: 500; }
.trace__tick { flex: none; width: 11px; display: grid; place-items: center; }
.trace__dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: pulse 1s ease-in-out infinite;
}
.trace__tick svg { width: 10px; height: 10px; }

/* A fade on the trailing edge, only when there is more row than fits. */
.topics.is-overflowing {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

/* ==========================================================================
   Quieting the panels.

   Every list item was a bordered card and every modifier appeared on every
   item — a CURRENT pill on six of seven documents, an accent rule on all six
   tips. A badge that is almost always present carries no information and
   costs as much ink as the one that matters. So: no boxes, hairlines between
   rows, and a badge only where something is genuinely exceptional.
   ========================================================================== */

.panel__head {
  display: block;
  margin: 30px 0 2px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--faint);
}
.view > .panel__head:first-child { margin-top: 4px; }
.panel__count { display: none; }   /* the items are right there to be counted */

/* One shared row. Separated by a hairline, not enclosed by four. */
.stack { display: block; }
.stack > * {
  display: block; width: 100%; text-align: left;
  padding: 13px 2px; border: none; border-radius: 0; background: none;
  border-top: 1px solid var(--rule-soft);
  box-shadow: none;
}
.stack > *:first-child { border-top: none; }

.doc { cursor: default; }
.doc__title {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--ink);
  line-height: 1.4; letter-spacing: -0.008em;
}
.doc__meta {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: 11.5px; color: var(--muted);
}
.doc__id { font-family: var(--mono); font-size: 10.5px; }

/* The only badge left, and the only row worth stopping on. */
.pill--superseded {
  display: inline-block; margin-right: 6px; padding: 1px 5px;
  border: 1px solid var(--restrict-edge); border-radius: 2px;
  background: var(--restrict-wash); color: var(--restrict);
  font-family: var(--sans); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 1px;
}
.pill--current { display: none; }

/* Arriving from a citation still needs to be findable without a box. */
.doc--found { background: var(--accent-wash); box-shadow: -10px 0 0 var(--accent-wash), 10px 0 0 var(--accent-wash); }
.doc--found .doc__title { color: var(--accent); }

.tip { font-size: 13.5px; line-height: 1.6; color: var(--body); }

.gap__q { font-size: 13.5px; color: var(--ink); line-height: 1.45; font-weight: 400; }
.gap__meta { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.gap--new { background: none; }
.gap--new .gap__q { color: var(--accent); }
.tag-new {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  border-radius: 2px; background: var(--accent-wash); color: var(--accent);
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}

/* Ask view: tappable things get a quiet ground instead of an outline. */
.suggest {
  border: none; background: var(--wash); color: var(--body);
  padding: 11px 12px; border-radius: var(--radius);
}
.suggest:hover { background: var(--accent-wash); color: var(--accent); }
.suggestions { gap: 5px; }

.scope { border: none; border-top: none; background: var(--wash); }
.scope:hover { background: var(--accent-wash); }
.scope__topic { border-color: transparent; background: var(--white); }
.scope__meta { border-top-color: var(--rule); }

/* Idle Ask view. Pinned to the top with the suggestions at the bottom. */
.welcome { text-align: center; padding: 26px 20px 0; margin-bottom: auto; }
.welcome__mark {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  margin-bottom: 14px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent);
}
.welcome__mark svg { width: 19px; height: 19px; }
.welcome__lead {
  margin: 0 0 5px; font-size: 14.5px; line-height: 1.5;
  color: var(--ink); letter-spacing: -0.008em;
}
.welcome__meta { margin: 0; font-size: 11.5px; color: var(--faint); }

/* --- Feature rows -----------------------------------------------------------
   The page leads with what the product does, and each feature states its own
   real/faked split inline. Keeping that split next to the feature — rather than
   in one table at the bottom — means nobody reads a capability without also
   reading what stands behind it. */

.feats { display: block; margin-top: 4px; }

.feat {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 48px; align-items: start;
  padding: 32px 0; border-top: 1px solid var(--rule);
}
.feat:first-child { border-top: none; padding-top: 4px; }

.feat__num {
  display: block; margin-bottom: 9px;
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.feat__name {
  margin: 0 0 13px; font-size: 19px; font-weight: 500;
  letter-spacing: var(--track-sub); color: var(--ink); line-height: 1.25;
}
.feat__try {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--accent); letter-spacing: -0.006em;
}
.feat__try::after { content: "→"; transition: transform 0.16s ease; }
.feat__try:hover { color: var(--accent-deep); }
.feat__try:hover::after { transform: translateX(3px); }
.feat__try:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 3px; }

.feat__body > p { margin: 0 0 17px; font-size: 14.5px; line-height: 1.65; color: var(--body); }

.split {
  display: grid; grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 16px; row-gap: 9px;
  margin: 0; padding: 16px 18px; background: var(--wash);
  font-size: 13px; line-height: 1.6;
}
.split dt {
  padding-top: 3px; font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}
.split dd { margin: 0; color: var(--body); }
.split__real { color: var(--accent); }
.split__fake { color: var(--restrict); }

@media (max-width: 1080px) {
  .feat { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* --- Citations, quieted ------------------------------------------------------
   The answer bubble was carrying five bordered numerals, two horizontal rules,
   a monospace meta line and a footer restating the count of a list directly
   above it. A citation is a reference, and a reference is a superscript — the
   box was doing the work of drawing attention that the number already does.
   The hit area is restored with a transparent pseudo-element so the target
   stays thumb-sized while the mark stays small. */

.marker {
  display: inline; position: relative;
  width: auto; height: auto; margin: 0 0 0 1px; padding: 0 1px;
  border: none; border-radius: 0; background: none;
  font-size: 9.5px; font-weight: 600; color: var(--accent);
  vertical-align: super; line-height: 0;
  transition: color 140ms var(--ease);
}
.marker::after { content: ""; position: absolute; inset: -10px -5px; }
.marker:hover { background: none; border-color: transparent; color: var(--accent-deep); }
.marker:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 2px; }

.sources-list { margin-top: 13px; padding-top: 11px; }
.source-row { gap: 9px; padding: 4px 0; align-items: baseline; }
.source-row__n {
  flex: 0 0 9px; text-align: right;
  font-size: 9.5px; font-weight: 600; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.source-row:hover .source-row__n { color: var(--accent); }
.source-row__title { font-size: 11.5px; font-weight: 500; letter-spacing: -0.004em; }
.source-row__meta {
  margin-top: 2px; font-family: inherit; font-size: 10px;
  color: var(--faint); letter-spacing: 0;
}

/* The sources list already owns a rule. A second one under it, eight pixels
   later, fenced the footer off from the answer it belongs to. */
.sources-list + .turn__meta {
  margin-top: 8px; padding-top: 0; border-top: none;
}

.nowrap { white-space: nowrap; }