/* ────────────────────────────────────────────────────────────
   Prop kit — the fake screens used on slide 3 of every deck.
   Geometry is written once; each shell is a skin over the same
   primitives. Everything sizes off the .prop container query,
   so a prop shrinks with its column and never with the viewport.
   ──────────────────────────────────────────────────────────── */

/* Each prop is its own query container and sets its own sensible width.
   A chat window stretched to 1040px stops reading as a chat window, and
   type sized off the outer frame instead of the shell comes out wrong. */
.prop{
  container-type: inline-size;
  margin:0 auto; width:100%; min-width:0;
}
/* A phone and a sheet of paper have a real size; everything else fills the stage. */
.prop--phone{ max-width:360px }
.prop--doc  { max-width:440px }
.prop__cap{
  margin-top:10px; font-size:12px; line-height:1.5; color: var(--fg-3);
}
.prop__cap b{ color: var(--fg-2); font-weight:600 }

/* window chrome base — term / tg / doc / phone screen all build on this */
.win{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background: var(--bg-2); box-shadow: var(--sh-2);
}

/* bubble geometry, once. Skins only swap colour and corner. */
.bubble{
  max-width:88%; padding:.65em .85em; border-radius:1.05em;
  font-size:1em; line-height:1.55; word-wrap:break-word;
}
.bubble--tg-in { background: var(--tg-in);  border-bottom-left-radius:.3em }
.bubble--tg-out{ background: var(--tg-out); border-bottom-right-radius:.3em; justify-self:end }
.bubble--ios-them{ background: var(--ios-them); border-bottom-left-radius:.3em }
.bubble--ios-me  { background: var(--ios-me); color:#fff; border-bottom-right-radius:.3em; justify-self:end }

/* ── shell: Telegram ───────────────────────────────────────── */
.tg{ font-size: clamp(11px, 2.6cqw, 14.5px) }
.tg__header{
  display:flex; align-items:center; gap:.7em;
  padding:.75em .9em; border-bottom:1px solid var(--line); background: var(--bg-2);
}
.tg__avatar{
  width:2.3em; height:2.3em; border-radius:50%; flex:none;
  background: var(--acc); color: var(--acc-fg);
  display:grid; place-items:center; font-size:.85em; font-weight:700;
}
.tg__who{ font-weight:650; font-size:1em; line-height:1.3 }
.tg__sub{ font-size:.8em; color: var(--fg-3); line-height:1.3 }
.tg__log{
  background: var(--tg-bg); padding:1em .9em;
  display:grid; gap:.7em; justify-items:start;
}
.tg__title{ display:block; font-weight:700; margin-bottom:.35em }
.tg__list{ margin:.4em 0 0; padding-left:1.1em }
.tg__list li{ margin:.15em 0 }
.tg__card{
  display:block; margin-top:.6em; padding-left:.7em; border-left:3px solid var(--acc);
}
.tg__card-t{ display:block; font-weight:650 }
.tg__card-b{ display:block; color: var(--fg-2); font-size:.92em }
.tg__card-l{ display:block; color: var(--acc); font-size:.9em; word-break:break-all }
.tg__btns{ display:flex; flex-wrap:wrap; gap:.4em; margin-top:.7em }
.tg__btn{
  border:1px solid var(--line-2); border-radius:.55em; background: var(--bg-2);
  padding:.4em .7em; font:inherit; font-size:.92em; color: var(--acc);
}
.tg__meta{ display:block; text-align:right; font-size:.78em; color: var(--fg-3); margin-top:.4em }
.tg__day{
  justify-self:center; font-size:.78em; color: var(--fg-3);
  background: var(--bg-3); padding:.2em .7em; border-radius:999px;
}

/* ── shell: table ──────────────────────────────────────────── */
.tbl{ font-size: clamp(11px, 2.4cqw, 14px); width:100%; border-collapse:collapse }
.tbl caption{
  text-align:left; padding:.75em .9em; font-weight:650;
  border-bottom:1px solid var(--line); background: var(--bg-2);
}
.tbl th, .tbl td{ padding:.55em .9em; border-bottom:1px solid var(--line); text-align:left }
/* column headers shout quietly; row labels are ordinary text */
.tbl thead th{ font-size:.92em; color: var(--fg-3); font-weight:600 }
.tbl tbody th{ font-weight:600; color: var(--fg) }
/* a section break inside one table, e.g. cases above, what they moved below */
.tbl tr.sep th, .tbl tr.sep td{ border-top:2px solid var(--line-2); padding-top:.85em }
.tbl td.num{ font-variant-numeric: tabular-nums; text-align:right }
.tbl tr:last-child td{ border-bottom:0 }

/* ── shell: log stream ─────────────────────────────────────── */
.logs{
  font-family: var(--mono); font-size: clamp(10px, 2.1cqw, 13px);
  background: var(--term-bg); color: var(--term-fg); padding:.8em .9em;
}
.logs__row{ display:flex; gap:.8em; padding:.18em 0; white-space:nowrap }
.logs__t{ color:#6f6f78; flex:none }
.logs__lvl{ flex:none; width:4.2em; font-weight:700 }
.logs__msg{ white-space:normal; min-width:0 }

/* ── shared atoms ──────────────────────────────────────────── */
.pill{
  display:inline-block; font-size:.9em; font-weight:650; line-height:1.4;
  padding:.1em .55em; border-radius:999px; border:1px solid currentColor;
}
.pill--ok  { color: var(--ok) }
.pill--warn{ color: var(--warn) }
.pill--err { color: var(--err) }
.pill--idle{ color: var(--fg-3) }

.bar{
  height:.55em; border-radius:999px; background: var(--bg-3);
  overflow:hidden; margin-top:.3em;
}
.bar__fill{ display:block; height:100%; width: var(--v); background: var(--acc); border-radius:999px }
.bar__fill--dim{ background: var(--line-2) }

/* ── shell: terminal ───────────────────────────────────────── */
.term{ font-size: clamp(10px, 2.1cqw, 13px) }
.term__bar{
  display:flex; align-items:center; gap:.7em;
  padding:.55em .8em; background: light-dark(#e8e8e4, #1d1d21);
  border-bottom:1px solid var(--line);
}
.term__dots{ display:flex; gap:.45em; flex:none }
.term__dots span{ width:.8em; height:.8em; border-radius:50% }
.term__dots span:nth-child(1){ background:#ff5f57 }
.term__dots span:nth-child(2){ background:#febc2e }
.term__dots span:nth-child(3){ background:#28c840 }
.term__title{ font-family: var(--mono); font-size:.92em; color: var(--fg-3) }
.term__body{
  margin:0; padding:.9em 1em; background: var(--term-bg); color: var(--term-fg);
  font-family: var(--mono); line-height:1.65; white-space:pre-wrap; word-break:break-word;
  overflow-x:auto;
}
.c-cmd { color:#e6e6e3; font-weight:600 }
.c-cmd::before{ content:"$ "; color:#6aa9ff }
.c-ok  { color:#5ec98a }
.c-warn{ color:#ffb86a }
.c-err { color:#ff8f85 }
.c-dim { color:#6f6f78 }
.c-num { color:#6aa9ff; font-variant-numeric: tabular-nums }

/* ── shell: before / after flow ────────────────────────────── */
.ba{ display:grid; gap:1em; font-size: clamp(11px, 2.4cqw, 14px) }
@container (min-width: 440px){ .ba{ grid-template-columns:1fr 1fr } }
.ba__side{
  border:1px solid var(--line); border-radius:12px;
  padding:.9em; background: var(--bg-2);
}
.ba__label{
  display:block; margin-bottom:.75em; font-size:.92em; font-weight:650; color: var(--fg-3);
}
.flow{ display:grid; gap:.35em }
.flow__step{
  border:1px solid var(--line-2); border-radius:8px;
  padding:.5em .7em; background: var(--bg); line-height:1.45;
}
.flow__step b{ display:block }
.flow__step--dead{ border-style:dashed; color: var(--fg-3) }
.flow__step--auto{ border-color: var(--ok); color: var(--ok) }
.flow__arrow{ text-align:center; color: var(--fg-3); line-height:1; font-size:.9em }
/* the one number a before/after is arguing for, under both columns */
.ba__foot{
  grid-column:1 / -1; margin-top:1em; padding-top:.9em;
  border-top:1px solid var(--line); color: var(--fg-2);
  font-size: clamp(11px, 2.4cqw, 14px);
}
.ba__foot b{ color: var(--fg); font-variant-numeric: tabular-nums }

/* ── shell: scored report (an internal web tool, not paper) ─ */
.rep{ font-size: clamp(11px, 2.5cqw, 14.5px) }
.rep__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:.8em;
  padding:.8em .95em; border-bottom:1px solid var(--line); background: var(--bg-2);
}
.rep__name{ font-weight:650 }
.rep__sub{ color: var(--fg-3); font-size:.85em }
.rep__score{ font-size:1.7em; font-weight:650; font-variant-numeric: tabular-nums; line-height:1 }
.rep__body{ padding:.9em .95em; display:grid; gap:.7em }
.rep__row{ display:grid; grid-template-columns:1fr auto; gap:.2em .8em; align-items:baseline }
.rep__k{ color: var(--fg-2) }
.rep__v{ font-variant-numeric: tabular-nums; font-weight:600 }
.rep__row .bar{ grid-column:1 / -1 }
.rep__note{
  grid-column:1 / -1; font-size:.88em; color: var(--fg-3);
  border-left:2px solid var(--line-2); padding-left:.6em; margin-top:.15em;
}
.rep__foot{
  padding:.75em .95em; border-top:1px solid var(--line);
  color: var(--fg-3); font-size:.88em;
}

/* ── shell: document page ──────────────────────────────────
   Scaled with font-size, never transform: scale() clips, blurs
   text and fights its own transform-origin. Paper stays light
   in dark mode, because a document that goes dark stops
   reading as a document.
   ──────────────────────────────────────────────────────────── */
/* The page is capped and carries its own container, so the type inside
   scales with the sheet rather than with the column it sits in. */
.doc{
  background: var(--bg-3); padding:1.1em; border-radius:12px;
  margin-inline:auto; container-type: inline-size;
}
.doc__page{
  background: var(--paper); color: var(--paper-fg);
  aspect-ratio: 8.5 / 11; max-width:100%;
  padding: 4.5% 5.5%; overflow:hidden;
  box-shadow: 0 2px 14px var(--paper-sh);
  font-size: clamp(5px, 1.95cqw, 9px); line-height:1.35;
  font-family: "Times New Roman", Times, serif;
}
.doc__name{ font-size:2em; font-weight:700; text-align:center; letter-spacing:.04em }
.doc__contact{ font-size:1em; text-align:center; color:#444; margin-bottom:1.4em }
.doc__h{
  font-size:1.1em; font-weight:700; letter-spacing:.08em;
  border-bottom:1px solid #333; margin:1.1em 0 .5em; padding-bottom:.1em;
}
.doc__role{ display:flex; justify-content:space-between; font-weight:700; gap:1em }
.doc__org{ font-style:italic; color:#333 }
.doc__bullets{ margin:.35em 0 0; padding-left:1.1em }
.doc__bullets li{ margin:.3em 0 }
.d-add { background:#d8f0dd; box-shadow:0 0 0 1px #9cd3ab inset }
.d-del { background:#f7d9d6; text-decoration:line-through; color:#8a3b33 }
.d-keep{ background:transparent }

/* ── shell: phone ──────────────────────────────────────────── */
.phone{ display:flex; justify-content:center }
.phone__frame{
  width:100%; max-width:320px; min-height:480px;
  border:.5em solid light-dark(#2a2a2e, #3a3a40); border-radius:2.4em;
  background: var(--bg-2); overflow:hidden; position:relative;
  display:flex; flex-direction:column;
  font-size: clamp(11px, 3.2cqw, 13.5px);
  box-shadow: var(--sh-2);
}
.phone__notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:38%; height:1.6em; background: light-dark(#2a2a2e, #3a3a40);
  border-radius:0 0 .9em .9em; z-index:2;
}
.phone__status{
  display:flex; justify-content:space-between; padding:.5em 1.2em .2em;
  font-size:.9em; font-weight:650; color: var(--fg-2); flex:none;
}
.phone__nav{
  display:flex; align-items:center; gap:.5em; padding:.5em .8em;
  border-bottom:1px solid var(--line); flex:none;
}
.phone__nav b{ font-size:.95em }
.phone__screen{ flex:1; overflow:hidden; display:grid; gap:.5em; padding:.8em; align-content:start; justify-items:start }
/* a conversation in progress sits against the bottom; one that has just
   started sits at the top, the way a new thread actually looks. */
.phone__screen--chat{ align-content:end }
.phone__screen--new{ align-content:start }
.phone__screen > *{ max-width:100% }
/* the tab bar was never legible at this size and carried no information */
/* feed posts are taller than chat attachments */
.phone__img--post{ aspect-ratio:4/5; width:100% }
.phone__img{
  border-radius:.7em; aspect-ratio:3/4; width:70%;
  background: linear-gradient(135deg, var(--acc-dim), var(--bg-3));
  border:1px solid var(--line); display:grid; place-items:center;
  color: var(--fg-3); font-size:.88em; text-align:center; padding:.5em;
}
/* On a touch screen a nested scroller is a trap: let the frame grow instead. */
@media (max-width: 900px){
  .phone__frame{ min-height:420px; max-width:280px }
  .phone__screen{ overflow:visible }
}

/* ── shell: comparison grid ────────────────────────────────── */
.cmp{ display:grid; gap:1em; grid-template-columns:repeat(2,1fr); font-size: clamp(10px,2.1cqw,13.5px) }
@container (min-width: 560px){ .cmp{ grid-template-columns:repeat(3,1fr) } }
.cmp__cell{ display:grid; gap:.35em }
.cmp__ph{
  aspect-ratio:2/3; border-radius:8px; border:1px solid var(--line);
  background: linear-gradient(150deg, var(--bg-3), var(--acc-dim));
  display:grid; place-items:center; text-align:center; padding:.6em;
  color: var(--fg-3); font-size:.85em; line-height:1.35;
}
.cmp__ph--picked{ border-color: var(--ok); border-width:2px }
.cmp__cap{ font-weight:650; line-height:1.3 }
.cmp__num{
  font-size:1.5em; font-weight:650; font-variant-numeric: tabular-nums;
  letter-spacing:-.02em; line-height:1.1;
}
.cmp__sub{ color: var(--fg-3); font-size:.88em; line-height:1.35 }

/* typing indicator — not a message, so not a bubble */
.typing{
  display:inline-flex; justify-self:start; gap:.3em; align-items:center;
  padding:.55em .8em; border-radius:1.05em; background: var(--ios-them);
}
.typing span{
  width:.42em; height:.42em; border-radius:50%; background: var(--fg-3);
  animation: typing 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.18s }
.typing span:nth-child(3){ animation-delay:.36s }
@keyframes typing{ 0%,60%,100%{ opacity:.3 } 30%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .typing span{ animation:none; opacity:.55 } }

/* chat-screen extras. Bubbles hug their text (justify-items:start on the
   screen), so anything meant to span a row has to say so. */
.phone__sys{
  justify-self:stretch; text-align:center;
  font-size:.95em; color: var(--fg-3); padding:.3em 0; line-height:1.4;
}
.phone__row{ justify-self:stretch; width:100% }
.phone__who{ display:flex; gap:.5em; align-items:center; font-size:.95em }
.phone__who b{ font-weight:650 }
.phone__who .t{ color: var(--fg-3) }
.phone__avatar{
  width:1.9em; height:1.9em; border-radius:50%; flex:none;
  background: var(--acc-dim); border:1px solid var(--acc);
}
.phone__caption{ font-size:.95em; line-height:1.45 }
.phone__counts{ font-size:.95em; color: var(--fg-3) }
.phone__comment{
  font-size:.95em; line-height:1.45;
  border-left:2px solid var(--line-2); padding-left:.6em;
}
.phone__status-line{ font-size:.95em; color: var(--fg-3); margin-left:auto }


/* ────────────────────────────────────────────────────────────
   shell: internal web app (recreating the Doha console)
   Scoped warm accent — this is a different product's screen, so
   it keeps its own colour rather than borrowing the site's.
   ──────────────────────────────────────────────────────────── */
.app{
  --app: light-dark(#e2622f, #ff7b45);
  --app-dim: light-dark(#fdf0ea, #2a1d17);
  font-size: clamp(10px, 2.1cqw, 12.5px);
  background: light-dark(#f6f6f7, #16191e);
}
.app__bar{
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  padding:.7em .9em; background: var(--bg-2); border-bottom:1px solid var(--line);
}
.app__title{ font-weight:650; font-size:1.25em }
.app__btns{ margin-left:auto; display:flex; gap:.35em }
.app__btn{
  border:1px solid var(--line-2); border-radius:.4em; background: var(--bg);
  padding:.3em .6em; color: var(--fg-2); white-space:nowrap;
}
.app__body{ padding:.85em; display:grid; gap:.8em }
.app__card{ background: var(--bg-2); border:1px solid var(--line); border-radius:.6em }
.app__banner{
  display:flex; align-items:center; gap:.5em; padding:.65em .8em;
}
.app__tag{
  background: var(--app); color:#fff; border-radius:.3em;
  padding:.1em .45em; font-size:.88em; font-weight:650;
}

/* three-step progress */
.step{ display:flex; align-items:center; gap:.5em; justify-content:center; padding:.7em 0 }
.step__s{ display:flex; flex-direction:column; align-items:center; gap:.3em; color: var(--fg-3) }
.step__n{
  width:1.7em; height:1.7em; border-radius:50%; background: var(--bg-3);
  display:grid; place-items:center; font-weight:650;
}
.step__s--on{ color: var(--fg) }
.step__s--on .step__n{ background: var(--app); color:#fff }
.step__s--on{ border:1px solid var(--app); border-radius:.5em; padding:.4em .9em }
.step__line{ flex:1; max-width:5em; border-top:1px dashed var(--line-2) }

/* the funnel across the top */
.funnel{ display:grid; gap:.5em; grid-template-columns:repeat(2,1fr) }
@container (min-width: 460px){ .funnel{ grid-template-columns:repeat(3,1fr) } }
.fn{
  border:1px solid var(--line); border-radius:.5em; padding:.55em .65em; background: var(--bg-2);
  display:flex; flex-direction:column; justify-content:space-between;
}
.fn--on{ border-color: var(--app) }
.fn__top{ display:flex; justify-content:space-between; align-items:baseline; gap:.4em }
.fn__k{ color: var(--fg-2) }
.fn__n{ font-weight:650; font-size:1.2em; font-variant-numeric: tabular-nums }
.fn__bar{ display:block; height:.35em; border-radius:999px; background: var(--bg-3); margin:.4em 0 .3em; overflow:hidden }
.fn__bar i{ display:block; height:100%; width:var(--v); min-width:0; background: var(--app) }
.fn--blue .fn__bar i{ background: light-dark(#4f80e8, #6c9bff) }
.fn__sub{ color: var(--fg-3); font-size:.9em; display:flex; justify-content:space-between; gap:.4em }

/* the AI analysis panel */
.ai{ display:grid; gap:.55em }
.ai__pitch{ border:1px solid var(--app); border-radius:.5em; padding:.6em .7em; background: var(--app-dim) }
.ai__h{ color: var(--app); font-weight:650; margin-bottom:.4em }
.ai__line{ display:grid; grid-template-columns:auto 1fr; gap:.2em .5em; margin-bottom:.22em }
.ai__lbl{ color: var(--app); font-weight:650; white-space:nowrap }
.ai__verdict{ border:1px solid var(--line); border-radius:.5em; padding:.6em .7em; background: var(--bg-2) }
.ai__scores{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:.4em; margin-top:.5em }
.ai__sc{ border:1px solid var(--line); border-radius:.4em; padding:.4em; text-align:center }
.ai__sc--sum{ border-color: var(--app); background: var(--app-dim) }
.ai__sc b{ display:block; font-size:1.35em; font-weight:650; font-variant-numeric: tabular-nums }
.ai__sc span{ color: var(--fg-3); font-size:.88em }
.ev{ display:grid; gap:.4em; grid-template-columns:1fr }
@container (min-width: 460px){ .ev{ grid-template-columns:1fr 1fr } }
.ev__c{ border:1px solid var(--line); border-radius:.45em; padding:.5em .6em; background: var(--bg-2) }
.ev__h{ font-weight:650; margin-bottom:.3em }
.ev__c ul{ margin:0; padding-left:1em; color: var(--fg-2) }
.ev__c li{ margin:.12em 0 }
.cite{
  display:inline-block; margin-top:.35em; font-size:.88em; color: var(--fg-3);
  background: var(--bg-3); border-radius:.25em; padding:.05em .4em;
}

/* the reviewer's verdict bar, pinned to the bottom of the screen */
.verdict{
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  padding:.6em .8em; border-top:1px solid var(--line); background: var(--bg-2);
}
.verdict__k{ color: var(--fg-3) }
.verdict__v{ border-bottom:1px solid var(--line-2); min-width:2.2em; display:inline-block; text-align:center }
.verdict__tot{ font-weight:650 }
.verdict__btns{ margin-left:auto; display:flex; gap:.3em }
.verdict__b{ border:1px solid var(--line-2); border-radius:.35em; padding:.3em .7em; color: var(--fg-2) }
.verdict__b--on{ background:#e8a33d; border-color:#e8a33d; color:#fff; font-weight:650 }

/* AI against the humans */
.vs{ display:grid; gap:.6em }
.vs__legend{ display:flex; gap:.8em; justify-content:flex-end; color: var(--fg-3); font-size:.9em }
.vs__key{ display:inline-flex; align-items:center; gap:.3em }
.vs__key i{ width:.6em; height:.6em; border-radius:50%; display:inline-block; flex:none }
.vs__plot{
  display:grid; grid-template-columns:2.2em repeat(3,1fr); gap:.8em; align-items:end; height:11em;
  background:
    linear-gradient(to top, var(--line) 1px, transparent 1px) 0 100%/100% 25% repeat-y;
}
.vs__axis{ grid-row:1; display:flex; flex-direction:column; justify-content:space-between;
  height:100%; color: var(--fg-3); font-size:.85em; text-align:right }
.vs__grp{ display:grid; grid-template-columns:1fr 1fr; gap:.25em; align-items:end; height:100%; justify-items:center }
.vs__b{ display:block; width:46%; border-radius:.15em .15em 0 0; background: var(--app); height:var(--v) }
.vs__b--h{ background: light-dark(#9aa0a8, #6f767f) }
.vs__x{ display:grid; grid-template-columns:2.2em repeat(3,1fr); gap:.8em; text-align:center; color: var(--fg-2); border-top:1px solid var(--line); padding-top:.35em }
.vs__tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4em }
.vs__t{ background: var(--bg-3); border-radius:.4em; padding:.5em .4em; text-align:center }
.vs__t span{ display:block; color: var(--fg-3); font-size:.88em; margin-bottom:.15em }
.vs__t b{ font-size:1.25em; font-weight:650 }
.vs__t--on b{ color: var(--app) }

/* ── shell: a published table of contents ──────────────────
   Drawing this as a shrunken sheet of paper put the type at
   8px; the chapters are the point, so they get to be readable.
   ──────────────────────────────────────────────────────────── */
.toc{ font-size: clamp(11px, 2.35cqw, 13.5px) }
.toc__bar{
  padding:.7em .9em; border-bottom:1px solid var(--line);
  background: var(--bg-2); display:flex; justify-content:space-between; gap:.6em;
}
.toc__bar b{ font-weight:650 }
.toc__bar span{ color: var(--fg-3) }
.toc__body{ padding:.85em .95em; display:grid; gap:.95em 1.6em; grid-template-columns:1fr }
@container (min-width: 420px){ .toc__body{ grid-template-columns:1fr 1fr } }
.toc__grp h4{ margin:0 0 .3em; font-size:1em; font-weight:650 }
.toc__grp ul{ margin:0; padding-left:1.05em; color: var(--fg-2) }
.toc__grp li{ margin:.12em 0; line-height:1.45 }
.toc__cta{
  grid-column:1 / -1; border-top:1px solid var(--line); padding-top:.7em;
  color: var(--acc);
}