/* ============================================================
   DESIGN TOKENS (copied from design/prototype.html unchanged)
   Theme: an inspection desk. Cool form paper on a blue-grey desk,
   three stamp inks that ALWAYS mean the same verdict.
   ============================================================ */
:root {
  --desk: #D5DCE7;          /* page background */
  --paper: #FBFCFE;         /* the idea slip, panels */
  --paper-rule: #C9D3E3;    /* form lines on the slip */
  --graphite: #262A33;      /* body text */
  --graphite-soft: #5B6372; /* secondary text */
  --ink-blue: #2140A0;      /* UI accent: buttons, focus, links */
  --ink-hype: #D7263D;      /* verdict: hype */
  --ink-substance: #187A55; /* verdict: substance */
  --ink-early: #B97A06;     /* verdict: too early */
  --marker: #FFE16A;        /* buzzword highlighter */
  --on-blue: #FFFFFF;       /* text on ink-blue buttons */
  --stamp-blend: multiply;  /* ink soaks into paper */

  --font-display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type scale (1.25 ratio) */
  --t-xs: .8rem; --t-sm: .9rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.6rem; --t-2xl: 2.4rem; --t-3xl: clamp(2.6rem, 7vw, 4.6rem);

  --radius-slip: 3px;   /* paper is paper: nearly square */
  --radius-ui: 999px;   /* buttons and chips are pills */
  --shadow-slip: 0 1px 0 #b9c3d4, 0 12px 28px -14px rgba(33, 64, 160, .35);
  --gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #141B28; --paper: #1E2738; --paper-rule: #2F3A50;
    --graphite: #E6EAF2; --graphite-soft: #9AA4B6; --ink-blue: #8DA6FF;
    --ink-hype: #FF5A6E; --ink-substance: #3DD39A; --ink-early: #F2B33D; --marker: #6E5A08; --on-blue: #0E1A3D; --stamp-blend: normal;
    --shadow-slip: 0 1px 0 #0b0f17, 0 14px 30px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --desk: #141B28; --paper: #1E2738; --paper-rule: #2F3A50;
  --graphite: #E6EAF2; --graphite-soft: #9AA4B6; --ink-blue: #8DA6FF;
  --ink-hype: #FF5A6E; --ink-substance: #3DD39A; --ink-early: #F2B33D; --marker: #6E5A08; --on-blue: #0E1A3D; --stamp-blend: normal;
  --shadow-slip: 0 1px 0 #0b0f17, 0 14px 30px -12px rgba(0,0,0,.6);
}

/* ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  margin: 0; min-height: 100%;
  background: var(--desk); color: var(--graphite);
  font-family: var(--font-body); font-size: var(--t-md); line-height: 1.5;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem) var(--gap) 4rem; }
button, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink-blue); outline-offset: 3px; }

/* ---------- header ---------- */
.masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.masthead h1 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-3xl);
  line-height: .92; letter-spacing: -.01em; margin: 0; max-width: 11ch;
}
.masthead p { margin: .6rem 0 0; color: var(--graphite-soft); max-width: 46ch; font-size: var(--t-lg); line-height: 1.4; }
.theme-toggle {
  border: 1.5px solid var(--paper-rule); background: var(--paper); border-radius: var(--radius-ui);
  padding: .45rem .9rem; font-size: var(--t-sm); cursor: pointer;
}

/* ---------- main grid ---------- */
.desk { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .desk { grid-template-columns: 1fr; } }

/* ---------- model picker ---------- */
.judge { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.judge > span { font-weight: 600; font-size: var(--t-sm); }
/* equal-width model buttons: the widest label sets the size for all of them */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--paper); border-radius: var(--radius-ui); padding: 3px; box-shadow: var(--shadow-slip); }
.seg button { border: 0; background: transparent; border-radius: var(--radius-ui); padding: .4rem .9rem; font-size: var(--t-sm); cursor: pointer; color: var(--graphite); text-align: center; }
.seg button[aria-pressed="true"] { background: var(--ink-blue); color: var(--on-blue); font-weight: 600; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.judge-note { width: 100%; margin: -.35rem 0 0; color: var(--graphite-soft); font-size: var(--t-xs); }

/* ---------- the slip ---------- */
.slip {
  position: relative; background: var(--paper); border-radius: var(--radius-slip);
  box-shadow: var(--shadow-slip); padding: 1.5rem 1.5rem 1.25rem;
  background-image: repeating-linear-gradient(to bottom, transparent 0 2.05rem, var(--paper-rule) 2.05rem calc(2.05rem + 1px));
  background-position: 0 4.35rem;
  transform-origin: 50% 60%;
}
.slip::before { /* punched holes: it's a form */
  content: ""; position: absolute; left: .7rem; top: 1.4rem; bottom: 1.4rem; width: 10px;
  background: radial-gradient(circle, var(--desk) 4px, transparent 4.5px) 0 0 / 10px 52px repeat-y;
}
.slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-left: .9rem; margin-bottom: .55rem; }
.slip-head label, .slip-head h2 { font-weight: 600; font-size: var(--t-md); margin: 0; }
.case-no { color: var(--graphite-soft); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.slip textarea, .slip .idea-text {
  display: block; width: 100%; min-height: 10.25rem; padding: .35rem 0 .35rem .9rem;
  border: 0; background: transparent; resize: vertical;
  font-size: var(--t-lg); line-height: 2.05rem; /* sits on the form lines */
}
.slip textarea:focus-visible { outline-offset: 6px; }
.slip textarea::placeholder { color: var(--graphite-soft); opacity: .8; }
.idea-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-text mark { background: linear-gradient(transparent 18%, var(--marker) 18% 88%, transparent 88%); color: inherit; padding: 0 .1em; border-radius: 2px; }
.slip-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding-left: .9rem; margin-top: .75rem; }
.counter { color: var(--graphite-soft); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--ink-hype); font-weight: 600; }

.btn {
  border: 0; border-radius: var(--radius-ui); cursor: pointer; font-weight: 600;
  padding: .75rem 1.35rem; background: var(--ink-blue); color: var(--on-blue); font-size: var(--t-md);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.quiet { background: transparent; color: var(--ink-blue); border: 1.5px solid currentColor; }
.hint { color: var(--graphite-soft); font-size: var(--t-xs); }

.slip.stamped .examples { display: none; }
.examples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: center; }
.examples span { color: var(--graphite-soft); font-size: var(--t-sm); margin-right: .25rem; }
.chip {
  border: 1.5px dashed color-mix(in srgb, var(--graphite-soft) 55%, transparent); background: var(--paper); border-radius: var(--radius-ui);
  padding: .35rem .8rem; font-size: var(--t-sm); cursor: pointer; color: var(--graphite);
}
.chip:hover { border-style: solid; border-color: var(--ink-blue); }

/* ---------- the stamp: the one loud thing ---------- */
.stamp {
  --ink: var(--ink-hype);
  position: absolute; right: 7%; top: 30%; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(1.7rem, 4.6vw, 2.9rem); line-height: 1; text-align: center; letter-spacing: .01em;
  color: var(--ink); border: .2em double var(--ink); border-radius: .28em; padding: .3em .45em .22em;
  transform: rotate(-9deg); filter: url(#ink); opacity: .95; mix-blend-mode: var(--stamp-blend);
}
.stamp small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .32em; letter-spacing: .02em; margin-top: .35em; }
.stamp[data-verdict="substance"] { --ink: var(--ink-substance); transform: rotate(6deg); }
.stamp[data-verdict="too_early"] { --ink: var(--ink-early); transform: rotate(-4deg); }
.stamp.landing { animation: slam .42s cubic-bezier(.2, 1.6, .4, 1) both; }
.slip.thud { animation: thud .28s .32s ease-out both; }
@keyframes slam {
  0% { opacity: 0; transform: translateY(-40px) scale(2.3) rotate(-22deg); }
  70% { opacity: .95; }
  100% { opacity: .92; transform: translateY(0) scale(1) rotate(var(--rot, -9deg)); }
}
.stamp[data-verdict="substance"] { --rot: 6deg; }
.stamp[data-verdict="too_early"] { --rot: -4deg; }
@keyframes thud { 0%,100% { transform: none; } 30% { transform: translateY(3px) scale(.995); } 60% { transform: translateY(-1px); } }

/* hovering stamp while waiting */
.slip.inspecting .stamp-ghost { opacity: 1; }
.stamp-ghost {
  position: absolute; right: 9%; top: -1.6rem; width: 4.5rem; height: 4.5rem; opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.slip.inspecting .stamp-ghost svg { animation: hover 1.1s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-8px) rotate(-6deg); } }

/* ---------- gauge + verdict panel ---------- */
.panel { background: var(--paper); border-radius: var(--radius-slip); box-shadow: var(--shadow-slip); padding: 1.4rem 1.5rem 1.5rem; }
.gauge { width: 100%; max-width: 360px; display: block; margin: 0 auto; overflow: visible; }
.gauge .needle { transform-origin: 160px 160px; transition: transform 1.1s cubic-bezier(.25, 1.55, .45, 1); }
.gauge-reading { text-align: center; margin-top: -.4rem; }
.gauge-reading strong { font-family: var(--font-display); font-weight: 400; font-size: var(--t-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-reading span { display: block; color: var(--graphite-soft); font-size: var(--t-sm); }
.verdict-copy { margin-top: 1.25rem; }
.verdict-copy h2 { font-size: var(--t-xl); line-height: 1.15; margin: 0 0 .25rem; color: var(--ink, var(--graphite)); }
.verdict-copy .tagline { margin: 0; color: var(--graphite-soft); }
.roast {
  margin: 1.1rem 0 0; padding: .1rem 0 .1rem 1rem; border-left: 4px solid var(--ink, var(--ink-blue));
  font-size: var(--t-xl); line-height: 1.3; font-style: italic; font-weight: 500;
}
.meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.1rem; color: var(--graphite-soft); font-size: var(--t-sm); }
.meta b { color: var(--graphite); font-weight: 600; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.empty-note { color: var(--graphite-soft); text-align: center; margin: .5rem auto 0; max-width: 30ch; }

/* ---------- the flip side: tokens, latency, routing, comparison ---------- */
/* The panel keeps its paper look; only the wrapper changes, so the verdict side is untouched. */
.panel.flip { position: relative; perspective: 1800px; background: none; box-shadow: none; padding: 0; }
.flip-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.panel.flip.flipped .flip-inner { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1; min-width: 0; background: var(--paper); border-radius: var(--radius-slip);
  box-shadow: var(--shadow-slip); padding: 1.4rem 1.5rem 1.5rem;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Only the face that is on screen sizes the card. The other one is taken out of the flow, so the
   verdict side keeps its size no matter how wide the comparison gets — and vice versa. */
.face-back { position: absolute; inset: 0; overflow: hidden; transform: rotateY(180deg); }
.panel.flip.flipped .face-front { position: absolute; inset: 0; overflow: hidden; }
.panel.flip.flipped .face-back { position: relative; inset: auto; overflow: visible; }
.flip-toggle {
  position: absolute; top: .7rem; right: .7rem; z-index: 3; box-shadow: var(--shadow-slip);
  border: 1.5px solid var(--paper-rule); background: var(--paper); color: var(--ink-blue);
  border-radius: var(--radius-ui); padding: .28rem .8rem; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
}
.flip-toggle:hover { border-color: var(--ink-blue); }
.details { font-size: var(--t-sm); }
.details-title { margin: 0 0 .15rem; font-size: var(--t-lg); }
.details-hint { margin: 0 0 .9rem; color: var(--graphite-soft); }
.details h4 { margin: 1.15rem 0 .45rem; font-size: var(--t-sm); }
.facts { margin: 0; display: grid; gap: .3rem; }
.facts > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--paper-rule); padding-top: .3rem; }
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--graphite-soft); }
.facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.facts-mini { font-size: var(--t-xs); gap: .2rem; }
.facts-mini > div { padding-top: .2rem; }
.details-note { margin: .7rem 0 0; color: var(--graphite-soft); font-size: var(--t-xs); }
.path { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.path b { display: block; font-weight: 600; }
.path span { color: var(--graphite-soft); }
.compare { overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: .26rem .35rem; border-bottom: 1px solid var(--paper-rule); white-space: normal; }
.compare th { color: var(--graphite-soft); font-weight: 600; }
/* labels wrap mid-word if they must, so a long sentence cannot force the panel wider */
.compare th[scope="row"] { font-weight: 500; overflow-wrap: anywhere; hyphens: auto; }
.compare small { font-weight: 400; color: var(--graphite-soft); }
/* the model whose verdict is on screen */
.compare .current { background: color-mix(in srgb, var(--ink-blue) 14%, transparent); }
.compare .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink, var(--graphite-soft)); margin-right: .35rem; vertical-align: middle; }
.compare .v-hype { --ink: var(--ink-hype); }
.compare .v-substance { --ink: var(--ink-substance); }
.compare .v-too_early { --ink: var(--ink-early); }
.compare-note { color: var(--graphite-soft); font-size: var(--t-xs); margin: .5rem 0 0; }

/* ---------- Gartner hype cycle ---------- */
.cycle-hint { margin: 0 0 .35rem; color: var(--graphite-soft); font-size: var(--t-xs); }
.cycle { width: 100%; height: auto; display: block; overflow: visible; }
.cycle-curve { fill: none; stroke: var(--graphite-soft); stroke-width: 2; opacity: .5; }
.cycle-phase, .cycle-axis { fill: var(--graphite-soft); font-family: var(--font-body); font-size: 9px; }
.cycle-axis { opacity: .8; }
.cycle-tick { stroke: var(--graphite-soft); stroke-width: 1; opacity: .5; }
.cycle-dot { fill: var(--ink, var(--graphite-soft)); stroke: var(--paper); stroke-width: 1.5; }
.cycle-label { fill: var(--graphite); font-family: var(--font-body); font-size: 10px; }
/* The short description of a case on the overview curve: deliberately tiny, with a halo in the paper
   colour so it stays readable where it crosses the line or another caption. The narrow-layout size
   below is mirrored by NOTE_SIZE_NARROW in app.js, which needs it for the placement. */
.cycle-note {
  fill: var(--graphite); font-family: var(--font-body); font-size: 5px;
  paint-order: stroke; stroke: var(--paper); stroke-width: 2; stroke-linejoin: round;
  pointer-events: none;
}
.cycle-band { fill: var(--paper-rule); opacity: .4; }
.cycle-phase.is-now { fill: var(--graphite); font-weight: 600; }
.cycle-ghost circle { fill: none; stroke: var(--graphite-soft); stroke-width: 1.5; stroke-dasharray: 3 2; }
.cycle-ghost text { fill: var(--graphite-soft); font-family: var(--font-body); font-size: 8px; }
.cycle-caption { margin: .55rem 0 0; color: var(--graphite); font-size: var(--t-sm); }
.cycle-caption b { font-weight: 600; }
.cycle-quip { display: block; margin-top: .15rem; color: var(--graphite-soft); font-size: var(--t-xs); font-style: italic; }
/* The SVG shrinks with the panel, so its text and markers have to grow the other way on a phone. */
@media (max-width: 600px) {
  .cycle-phase, .cycle-axis { font-size: 11px; }
  .cycle-label { font-size: 12px; }
  .cycle-note { font-size: 8px; }
  .cycle-curve { stroke-width: 2.5; }
  .cycle-ghost text { font-size: 10px; }
}
.cycle .v-hype { --ink: var(--ink-hype); }
.cycle .v-substance { --ink: var(--ink-substance); }
.cycle .v-too_early { --ink: var(--ink-early); }

/* ---------- all cases of one model on the curve ---------- */
.overview { margin-top: calc(var(--gap) * 1.6); }
.overview-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem 1rem; }
.overview h2 { font-size: var(--t-xl); margin: 0; }
.overview-filter { flex: none; }
.overview-filter .count { color: var(--graphite-soft); font-variant-numeric: tabular-nums; }
.overview-filter button[aria-pressed="true"] .count { color: inherit; }
.overview-body {
  margin-top: .8rem; padding: .9rem 1.1rem 1rem;
  background: var(--paper); border-radius: var(--radius-slip); box-shadow: var(--shadow-slip);
}
.overview-legend {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.1rem;
  margin: .55rem 0 0; color: var(--graphite); font-size: var(--t-sm);
}
.overview-legend > b { font-variant-numeric: tabular-nums; }
.overview-legend .dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--ink, var(--graphite-soft)); margin-right: .35rem; vertical-align: middle;
}
.overview-legend .v-hype { --ink: var(--ink-hype); }
.overview-legend .v-substance { --ink: var(--ink-substance); }
.overview-legend .v-too_early { --ink: var(--ink-early); }
/* a dot that stands for a case is a button, so it must look and answer like one */
.cycle-mark[role="button"] { cursor: pointer; }
.cycle-mark[role="button"]:hover .cycle-dot,
.cycle-mark[role="button"]:focus-visible .cycle-dot { r: 6; }

/* ---------- evidence ---------- */
.evidence { margin-top: var(--gap); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 700px) { .evidence { grid-template-columns: 1fr; } }
.evidence h3 { margin: 0 0 .9rem; font-size: var(--t-lg); }
.evidence ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.row-top { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.row-top b { font-variant-numeric: tabular-nums; }
.track { height: .55rem; background: var(--paper-rule); border-radius: 99px; overflow: hidden; margin-top: .3rem; }
.fill { height: 100%; width: 0; border-radius: inherit; background: var(--bar); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.holds { --bar: var(--ink-substance); }
.hot { --bar: var(--ink-hype); }

/* off-screen holder for the legacy copy path (insecure context); must stay selectable */
.copy-sink { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- case file ---------- */
.casefile { margin-top: calc(var(--gap) * 1.6); }
.casefile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.casefile h2 { font-size: var(--t-xl); margin: 0; }
.linkish { background: none; border: 0; color: var(--ink-blue); cursor: pointer; padding: .25rem; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem 1rem; margin-top: 1rem; }
/* One group per question: the tabs above name the model and its verdict, the card below shows the
 * case the reader picked. The whole group tilts like a slip, tabs included. */
.case-group { display: flex; flex-direction: column; min-width: 0; }
.case-group:nth-child(odd) { transform: rotate(-.6deg); } .case-group:nth-child(even) { transform: rotate(.5deg); }
.case-group:hover { transform: rotate(0) translateY(-2px); }
.case-tabs { display: flex; align-items: flex-end; gap: .18rem; padding: 0 .15rem; }
.case-tab {
  --ink: var(--graphite-soft);
  flex: 1 1 0; min-width: 0; /* three tabs share one row; a tight one ellipsises instead of wrapping */
  display: flex; flex-direction: column; gap: .05rem;
  font: inherit; line-height: 1.2; text-align: left; cursor: pointer;
  border: 0; border-top: 3px solid var(--ink); border-radius: 5px 5px 0 0;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--graphite-soft); padding: .2rem .4rem .28rem;
}
.case-tab.v-hype { --ink: var(--ink-hype); }
.case-tab.v-substance { --ink: var(--ink-substance); }
.case-tab.v-too_early { --ink: var(--ink-early); }
.case-tab .tab-model { font-size: var(--t-xs); font-weight: 600; color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-tab .tab-stamp {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .04em;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-tab:hover .tab-model { color: var(--ink); }
.case-tab.is-active { background: var(--paper); }
.case-tab.is-active .tab-model { color: var(--ink); }
.case {
  position: relative; text-align: left; border: 0; cursor: pointer;
  font-size: var(--t-sm); line-height: 1.35; perspective: 1200px;
}
.case:hover { transform: translateY(-2px); }
.case-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.case.flipped .case-inner { transform: rotateY(180deg); }
.case-face {
  grid-area: 1 / 1; position: relative; background: var(--paper); border-radius: var(--radius-slip);
  box-shadow: var(--shadow-slip); padding: .7rem .9rem .85rem; min-height: 8.5rem;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.case-back { transform: rotateY(180deg); padding-bottom: .9rem; }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: .3rem; margin-bottom: .3rem; }
.case-delete {
  border: 1.5px solid var(--paper-rule); background: var(--paper); color: var(--graphite-soft);
  border-radius: var(--radius-ui); padding: 0 .45rem; font-size: var(--t-sm); font-weight: 700; line-height: 1.15;
  cursor: pointer;
}
.case-delete:hover { border-color: var(--ink-hype); color: var(--ink-hype); }
.case-open {
  border: 1.5px solid var(--paper-rule); background: var(--paper); color: var(--ink-blue); border-radius: var(--radius-ui);
  padding: .1rem .55rem; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
}
.case-open:hover { border-color: var(--ink-blue); }
.case p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.case .case-summary { margin: .45rem 0 0; color: var(--graphite-soft); font-size: var(--t-xs); }
/* the stamp sits on the back, where it is one model's verdict and not the group's */
.case-model { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .55rem; }
.case-compare { display: flex; justify-content: flex-end; margin-top: .5rem; padding-top: .4rem; border-top: 1px solid var(--paper-rule); }
.case .mini {
  flex: none; font-family: var(--font-display); font-size: .8rem;
  color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; padding: .1rem .35rem; transform: rotate(-6deg);
}
.case .pct { min-width: 0; color: var(--graphite-soft); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casefile .empty { color: var(--graphite-soft); margin-top: .75rem; }
.cases-more { grid-column: 1 / -1; margin: 0; color: var(--graphite-soft); font-size: var(--t-xs); }

.error { margin: .75rem 0 0 .9rem; color: var(--ink-hype); font-weight: 500; }
.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; }
[hidden] { display: none !important; }

/* ============================================================
   Additions for the real app. The strict Content-Security-Policy
   has no 'unsafe-inline' for styles, so nothing may use a style
   attribute: classes carry what the prototype inlined.
   ============================================================ */
.ink-defs { position: absolute; }
/* The app is dark by default (the HTML sets data-theme, JS never reads the OS); keep native
   scrollbars and form controls in step with whichever theme is active. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.slip-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
/* stacked and right-aligned, so they sit in one column above the verdict panel */
.masthead-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.lang-switch { display: inline-flex; background: var(--paper); border: 1.5px solid var(--paper-rule); border-radius: var(--radius-ui); padding: 3px; }
.lang-switch button { border: 0; background: transparent; border-radius: var(--radius-ui); padding: .3rem .7rem; font-size: var(--t-sm); cursor: pointer; color: var(--graphite); }
.lang-switch button[aria-pressed="true"] { background: var(--ink-blue); color: var(--on-blue); font-weight: 600; }
/* needle at rest until the first result (JS then sets the transform via CSSOM) */
.gauge .needle { transform: rotate(-90deg); }
/* verdict ink on the panel, set as a class instead of a style attribute */
.panel.v-hype { --ink: var(--ink-hype); }
.panel.v-substance { --ink: var(--ink-substance); }
.panel.v-too_early { --ink: var(--ink-early); }
/* same ink for the mini stamps in the case file */
.case.v-hype { --ink: var(--ink-hype); }
.case.v-substance { --ink: var(--ink-substance); }
.case.v-too_early { --ink: var(--ink-early); }

/* ---------- admin area ---------- */
.wrap-narrow { max-width: 780px; }
.btn { display: inline-block; text-decoration: none; }
.admin-group { margin-bottom: var(--gap); }
.admin-group h2 { font-size: var(--t-lg); margin: 0 0 .4rem; }
.field { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid var(--paper-rule); align-items: baseline; }
.admin-group .field:first-of-type { border-top: 0; }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field-body { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.field input { flex: 1 1 15rem; min-width: 0; font: inherit; color: inherit; background: var(--desk); border: 1.5px solid var(--paper-rule); border-radius: 6px; padding: .5rem .65rem; }
.field .hint { flex-basis: 100%; }
.badge { font-size: var(--t-xs); border-radius: var(--radius-ui); padding: .1rem .55rem; border: 1px solid currentColor; white-space: nowrap; }
.badge-on { color: var(--ink-substance); }
.badge-off { color: var(--graphite-soft); }
.status { color: var(--ink-substance); font-weight: 500; margin: .5rem 0 1rem; }
.admin-actions { margin-top: var(--gap); }
@media (max-width: 620px) { .field { grid-template-columns: 1fr; } }

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