/* LLMsaurus stylesheet
 * ===========================================================================
 * THEMING RULE: no raw colour below the token blocks. Every rule uses a
 * var(--token). A test asserts this, because the failure mode is invisible in
 * whichever theme you happen to be looking at, a hardcoded dark value only
 * shows up as a dark patch once someone switches to light.
 *
 * Two palettes:
 *   :root                       light, the default, unconditionally
 *   :root[data-theme="dark"]    dark, only when the reader asks for it
 *
 * Deliberately NOT keyed on prefers-color-scheme. "Light by default" and
 * "follow the OS" are different products: on a dark-mode machine the second
 * never shows the light theme at all. Dark is one click away and the choice
 * persists. To follow the OS instead, add a
 * @media (prefers-color-scheme: dark) block repeating the dark tokens.
 *
 * The accent differs per theme rather than being one brand colour: the original
 * #8ee65a is a dark-mode green and fails contrast badly on white.
 */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg:               #fbfbfa;
  --surface:          #ffffff;
  --surface-2:        #f4f6f8;
  --surface-sunken:   #f0f2f5;
  --header-bg:        rgba(255, 255, 255, .88);

  /* Lines */
  --border:           #e3e7eb;
  --border-strong:    #cdd4db;
  --track:            #e6eaee;

  /* Text */
  --text:             #14181d;
  --text-soft:        #3c454f;
  --text-muted:       #6a7481;
  --text-faint:       #97a0ab;

  /* Accent, dark enough to read on white */
  --accent:           #2d7a1e;
  --accent-hover:     #24651a;
  --accent-contrast:  #ffffff;
  --accent-soft-bg:   #edf7e8;
  --accent-soft-line: #bcdfae;
  --accent-text:      #1f5c14;

  /* Status */
  --info:             #1266b8;
  --info-soft-bg:     #e8f2fb;
  --info-soft-line:   #b3d4f0;
  --warn:             #a35d00;
  --warn-soft-bg:     #fdf4e3;
  --warn-soft-line:   #ecd3a2;
  --warn-text:        #7d4900;
  --danger:           #c02a3a;
  --purple:           #6b45c4;
  --purple-soft-line: #d5c9f2;

  /* Effects */
  --glow-accent:      rgba(45, 122, 30, .28);
  --shadow-card:      0 1px 2px rgba(20, 24, 29, .05), 0 4px 14px rgba(20, 24, 29, .05);
  --shadow-raised:    0 2px 6px rgba(20, 24, 29, .09), 0 10px 30px rgba(20, 24, 29, .07);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:               #080b10;
  --surface:          #0e131b;
  --surface-2:        #121923;
  --surface-sunken:   #07090d;
  --header-bg:        rgba(8, 11, 16, .92);

  --border:           #26303d;
  --border-strong:    #35424f;
  --track:            #202733;

  --text:             #e9eef5;
  --text-soft:        #c4ccd7;
  --text-muted:       #8995a5;
  --text-faint:       #6b7787;

  --accent:           #8ee65a;
  --accent-hover:     #a2f072;
  --accent-contrast:  #071006;
  --accent-soft-bg:   #111b12;
  --accent-soft-line: #4b713d;
  --accent-text:      #8ee65a;

  --info:             #69b9ff;
  --info-soft-bg:     #101a21;
  --info-soft-line:   #23506b;
  --warn:             #ffbd5a;
  --warn-soft-bg:     #211a10;
  --warn-soft-line:   #6b5223;
  --warn-text:        #e3c78d;
  --danger:           #ff7180;
  --purple:           #b99aff;
  --purple-soft-line: #3a3050;

  --glow-accent:      rgba(142, 230, 90, .55);
  --shadow-card:      none;
  --shadow-raised:    none;
}

/* ===========================================================================
 * Base
 * ======================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.container { width: min(1180px, calc(100% - 40px)); margin: auto; }
.narrow { width: min(820px, calc(100% - 40px)); margin: auto; }

/* Numbers stay monospace; prose does not. */
.num, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- Header --------------------------------------------------------------- */

header {
  height: 68px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

.logo {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.6px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
}
.logo b { color: var(--accent-text); }

/* The dino is painted by CSS rather than baked into the file, so it is always
   exactly the colour of the "LLM" beside it: the artwork was baked in the
   dark-theme green, so in light mode a bright dino sat beside dark green text.
   logo-mark.png is white-on-alpha, and is the drawing with its strokes grown
   before the downscale: the full-size line art scaled to header height came out
   a pale, broken sketch. */
.logo-mark {
  width: 58px;
  height: 48px;
  display: block;
  flex: none;
  background-color: var(--accent-text);
  -webkit-mask: url(../img/logo-mark.png) center / contain no-repeat;
  mask: url(../img/logo-mark.png) center / contain no-repeat;
}

/* Masks are everywhere modern, but an unsupported one would paint a solid
   rectangle. Fall back to the original artwork instead. */
@supports not ((-webkit-mask: url(x)) or (mask: url(x))) {
  .logo-mark {
    background-color: transparent;
    background-image: url(../img/logo-green.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

nav { display: flex; gap: 22px; color: var(--text-muted); font-size: 14px; align-items: center; }
nav a:hover { color: var(--text); }
nav a.on { color: var(--accent-text); font-weight: 600; }

/* Theme toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  height: 34px;
  margin: 0;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  flex: none;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: transparent; }
/* Name the theme you would switch TO, not the one you are in. */
.theme-toggle .to-dark { display: inline; }
.theme-toggle .to-light { display: none; }
:root[data-theme="dark"] .theme-toggle .to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .to-light { display: inline; }

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: 64px 0 44px; }
.hero.bordered { border-bottom: 1px solid var(--border); }

.eyebrow {
  font: 700 11px ui-monospace, monospace;
  letter-spacing: 1.6px;
  color: var(--accent-text);
  text-transform: uppercase;
}

h1 { font-size: 56px; line-height: 1.05; margin: 14px 0; letter-spacing: -2px; font-weight: 800; }
h1 span { color: var(--accent-text); }

.hero p { max-width: 720px; color: var(--text-muted); font-size: 17px; line-height: 1.6; }

/* --- Search --------------------------------------------------------------- */

.search-wrap { position: relative; max-width: 680px; margin-top: 28px; }

.search {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.search:focus-within { border-color: var(--accent); }
.search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  padding: 15px 22px;
  font-size: 16px;
  font-family: inherit;
}
.search input::placeholder { color: var(--text-faint); }

/* Every button on the site is this size. .btn below adds the same metrics to
   anchors, so a link and a submit sitting side by side match. */
button {
  background: var(--accent);
  border: 0;
  min-height: 46px;
  padding: 0 26px;
  font-weight: 700;
  color: var(--accent-contrast);
  border-radius: 999px;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}
button:hover { background: var(--accent-hover); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* The exception, and it is deliberate: the search pill sits inside the input
   field and is sized by it, not by the page. */
.search button { min-height: 0; margin: 5px; padding: 0 22px; font-size: 14px; }

/* Type-ahead */
.suggest {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  z-index: 40;
  display: none;
  box-shadow: var(--shadow-raised);
}
.suggest.open { display: block; }
.suggest a { display: block; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 15px; }
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover, .suggest a.active { background: var(--surface-2); }
.suggest .s-word { font-weight: 600; }
.suggest .s-def { color: var(--text-muted); font-size: 13px; margin-left: 8px; }
.suggest .s-empty { cursor: default; }
.suggest .s-empty .s-def { margin-left: 0; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
}
.chip:hover { color: var(--accent-text); border-color: var(--accent-soft-line); }
/* The one action a page wants you to take - "request a key" beside "log in". */
.chip.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}
.chip.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }
/* Calls to action: one size and one shape wherever they appear, whether the
   markup is a <button> in a form or an <a> that navigates. The bare `button`
   rule above belongs to the search box's pill and is deliberately left alone. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Same size, less weight: the action beside the main one. */
.btn.secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn.secondary:hover { background: var(--surface-2); border-color: var(--accent-soft-line); color: var(--accent-text); }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

/* Announced but not open yet: readable, obviously not clickable. */
.chip.soon { border-style: dashed; color: var(--text-faint); cursor: default; }
.chip.soon i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.soon-inline { color: var(--text-faint); }

/* --- Sections and cards --------------------------------------------------- */

.section { padding: 36px 0; }
.section-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; gap: 16px; }
h2 { font-size: 25px; margin: 0; letter-spacing: -.6px; font-weight: 700; }
.muted { color: var(--text-muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.card h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; }

/* minmax(0, 1fr), not 1fr: a grid track's default min-width is auto, so one
   wide child - a <pre> of code that should scroll inside its own box - widens
   the track instead, and the whole page starts scrolling sideways. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

.modelbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.model {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.model:hover { border-color: var(--border-strong); color: var(--text); }
.model.active {
  border-color: var(--accent-soft-line);
  color: var(--accent-text);
  background: var(--accent-soft-bg);
}
.model.gated { opacity: .45; cursor: not-allowed; }

/* The copy inside a per-model panel head. Same control, quieter, so it reads as
   part of the panel rather than competing with the page-level bar. */
.modelbar.compact { gap: 6px; margin: 0 0 18px; }
.modelbar.compact .model { padding: 5px 11px; font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; }
.green { color: var(--accent-text); }
.blue { color: var(--info); }
.orange { color: var(--warn); }
.red { color: var(--danger); }
.purple { color: var(--purple); }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 13px; }
.metric label { display: block; color: var(--text-muted); font-size: 11px; margin-bottom: 7px; }
.metric strong { font: 700 16px ui-monospace, monospace; }

.codebox {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px;
  font: 12px/1.7 ui-monospace, monospace;
  color: var(--text-soft);
  overflow-x: auto;
}
/* Multi-line code. .codebox on a <div> wants a <br> and &nbsp; per line, which
   is unreadable for anything longer than the one curl on /api and unreviewable
   in a diff. A <pre> keeps the source copy-pasteable and inherits everything
   .codebox already sets, so only the browser's default margin needs undoing. */
pre.codebox { margin: 0; white-space: pre; tab-size: 2; }

.highlight { color: var(--accent-text); font-weight: 700; }
.comment { color: var(--text-faint); }

.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tag {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
}

footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 48px;
}
footer a:hover { color: var(--text); }

/* ===========================================================================
 * Story view
 * ======================================================================== */

.wordhero { padding: 40px 0 8px; }
.wordhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.word { font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1.05; }
.pos { color: var(--info); font-size: 14px; font-style: italic; font-weight: 500; }
.pronunciation { color: var(--text-muted); font-size: 15px; font-family: ui-monospace, monospace; }
.definition { color: var(--text-soft); line-height: 1.6; margin: 12px 0 20px; font-size: 17px; }

/* View toggle */
.viewbar {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
  flex: none;
}
.viewbar a { padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.viewbar a:hover { color: var(--text); }
.viewbar a.on { background: var(--accent); color: var(--accent-contrast); }

/* Panels: airier, fewer borders */
.panels { display: flex; flex-direction: column; gap: 14px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow-card);
}

.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-num {
  font: 700 11px ui-monospace, monospace;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 999px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .9px;
}

.honesty {
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 20px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

/* Provenance badge */
.badge {
  font: 700 9.5px ui-monospace, monospace;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  flex: none;
}
.badge.real { background: var(--accent-soft-bg); color: var(--accent-text); border: 1px solid var(--accent-soft-line); }
.badge.stub { background: var(--warn-soft-bg); color: var(--warn-text); border: 1px solid var(--warn-soft-line); }
.badge.partial { background: var(--info-soft-bg); color: var(--info); border: 1px solid var(--info-soft-line); }

/* Multi-token caveat */
.approx {
  background: var(--warn-soft-bg);
  border-left: 3px solid var(--warn-soft-line);
  color: var(--warn-text);
  font-size: 13px;
  line-height: 1.55;
  padding: 11px 14px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 18px;
}

/* Per-model variants: all in the DOM, one visible. */
.variant { display: none; }
.variant.on { display: block; }

/* Panel 2, token pieces */
.tokenrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tokenrow .tk-model { font-size: 13px; color: var(--text-muted); min-width: 100px; font-weight: 600; }
.pieces { display: flex; gap: 5px; flex-wrap: wrap; }
.piece {
  font: 600 16px ui-monospace, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
}
.piece.multi { border-color: var(--accent-soft-line); color: var(--accent-text); background: var(--accent-soft-bg); }
/* A token that is half a UTF-8 sequence and cannot be shown as text. Set in
   lower case and letter-spaced so it reads as a label, not as content. */
.piece.byte {
  font-style: italic;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.tk-count { font-size: 12px; color: var(--text-muted); font-family: ui-monospace, monospace; }

/* Panel 4, personality axes */
.axes { display: flex; flex-direction: column; gap: 17px; }
.axis-row { display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; gap: 12px; }
.axis-pole { font-size: 12.5px; color: var(--text-muted); }
.axis-pole.right { text-align: right; }
.axis-track { height: 8px; background: var(--track); border-radius: 999px; position: relative; }
.axis-track::before {
  content: "";
  position: absolute;
  left: 50%; top: -3px; bottom: -3px;
  width: 1px;
  background: var(--border-strong);
}
.axis-marker {
  position: absolute;
  top: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow-accent);
  transform: translate(-50%, -50%);
}

/* Panel 5, closeness-graded chips, dictionary beside model */
.synset { display: flex; gap: 8px; flex-wrap: wrap; }
.syn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 15px;
  border: 1px solid transparent;
}
/* Closeness grading, the most thesaurus.com-like element. */
.syn.s3 { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.syn.s2 { background: var(--accent-soft-bg); color: var(--accent-text); border-color: var(--accent-soft-line); }
.syn.s1 { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }
.syn.dict { background: var(--info-soft-bg); color: var(--info); border-color: var(--info-soft-line); }
.syn.opp { background: var(--warn-soft-bg); color: var(--warn-text); border-color: var(--warn-soft-line); }
.syn .sc { font: 11px ui-monospace, monospace; opacity: .75; }
.syn-note { color: var(--text-muted); font-size: 13px; margin: 16px 0 0; }

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.versus-col h4,
.opposites h4 {
  margin: 0 0 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-muted);
  font-weight: 700;
}
.versus-col.dict h4 { color: var(--info); }
.versus-col.model h4 { color: var(--accent-text); }
.versus-col h4 .badge,
.opposites h4 .badge { margin-left: 6px; vertical-align: middle; }

/* The antonyms, under both columns because both columns answer them. Ruled off
   rather than boxed: it is the same dictionary column continued, not a third
   opinion. */
.opposites { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.opposites h4 { color: var(--warn-text); }

/* Panel 6, the AI tell */
.tellhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.bars { display: flex; flex-direction: column; gap: 14px; }
.barrow { display: grid; grid-template-columns: 96px 1fr 92px; align-items: center; gap: 12px; }
.barrow label { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bar { height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar i.human { background: var(--info); }
.barrow .val { font: 700 13px ui-monospace, monospace; text-align: right; }
.lift { font: 800 46px ui-monospace, monospace; color: var(--warn); letter-spacing: -2px; }
.ci { font: 12px ui-monospace, monospace; color: var(--text-muted); }

/* Panel 7, surprising neighbours */
.surprise { display: flex; gap: 9px; flex-wrap: wrap; }
.surprise .s {
  background: var(--surface-2);
  border: 1px solid var(--purple-soft-line);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 15px;
}
.surprise .s b { color: var(--purple); }
.surprise .s span { font: 11px ui-monospace, monospace; color: var(--text-muted); margin-left: 8px; }

/* Not-found */
.empty { padding: 76px 0; text-align: center; }
.empty h2 { font-size: 31px; margin-bottom: 12px; }

/* Notice strip */
.notice {
  background: var(--warn-soft-bg);
  border: 1px solid var(--warn-soft-line);
  color: var(--warn-text);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 14px;
  line-height: 1.55;
  margin: 22px 0;
}
.notice code { font-family: ui-monospace, monospace; color: var(--warn); }
.notice a { text-decoration: underline; }

/* Prose */
.prose { line-height: 1.7; color: var(--text-soft); font-size: 15px; }
.prose h3 { color: var(--text); margin: 30px 0 10px; font-size: 17px; font-weight: 700; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose code {
  font-family: ui-monospace, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 13px;
}

/* Footnote marker, e.g. the "paid models are built lazily" note on the model
   table. Superscript so it never changes the row's line height. */
.fnref {
  font-size: 11px;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  text-decoration: none;
  color: inherit;
  opacity: .75;
}
.fnref:hover { opacity: 1; text-decoration: underline; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  nav a { display: none; }
  nav .theme-toggle { display: inline-flex; }
  .grid, .versus { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 40px; letter-spacing: -1.5px; }
  .word { font-size: 38px; letter-spacing: -1.4px; }
  .hook { font-size: 21px; }
  .panel { padding: 20px; }
  .hero { padding: 40px 0 30px; }
  .axis-row { grid-template-columns: 68px 1fr 68px; gap: 8px; }
  .barrow { grid-template-columns: 74px 1fr 78px; }
  .vector { height: 290px; }
  .search input { padding: 13px 18px; font-size: 15px; }
}

/* --- Optimizer ------------------------------------------------------------ */

/* The paste box. Same surface and border language as .search, but a rectangle
   rather than a pill: this one holds paragraphs, and a rounded field the size
   of a page reads as a mistake. */
.opt-form { max-width: 760px; margin-top: 24px; }
.opt-form label { display: block; margin-bottom: 8px; }
.opt-form textarea {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  color: var(--text);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  box-shadow: var(--shadow-card);
}
.opt-form textarea:focus { outline: 0; border-color: var(--accent); }
.opt-form textarea::placeholder { color: var(--text-faint); }
.opt-form .btn-row { margin-top: 14px; }

/* --- Languages -------------------------------------------------------------
   A foreign page is the English page with a different headword on it, so the
   one thing the chrome has to do is keep the reader clear about which word the
   numbers belong to. The pivot note says it in words; the language bar shows
   the same synset's headword in every language that has one, and states the
   ones that do not rather than hiding them. */

.pivotnote {
  max-width: 660px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.pivotnote b { color: var(--text); }
.pivotnote a { color: var(--accent-text); text-decoration: underline; }

.langbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 22px 0 0;
}
.langbar .lang {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.4;
}
a.lang:hover { color: var(--text); border-color: var(--border-strong); }
.langbar .lang.on {
  color: var(--accent-text);
  border-color: var(--accent-text);
  background: transparent;
}
/* Dashed, the same way an unset community link renders: a gap that is stated
   rather than a link to nowhere. */
.langbar .lang.off {
  border-style: dashed;
  color: var(--text-faint);
  background: transparent;
}

/* An unfilled legal placeholder. Deliberately loud: the Terms must show a
   reader that a party or a jurisdiction is missing, not hide the gap. */
.tbd {
  color: var(--warn-text);
  border-bottom: 1px dashed currentColor;
  font-weight: 600;
  white-space: nowrap;
}