/* ============================================================
   legend.network — single stylesheet.

   Sections 1–10 are lifted verbatim from legend-brand-reference.html
   (the visual source of truth): design tokens, base typography, the
   locked logo mark, header/nav, page structure, table, buttons,
   question-detail, footer.

   Section 11 onward retains the utility classes the rest of the app
   (admin, forms, dropdown, message boxes) relies on, restyled against
   the same tokens so every page is theme-aware. These supersede the
   former ad-hoc <style> block in root_base.html.

   Colour discipline (enforced here and in the templates):
   - TEAL (--accent) is the primary accent: active nav item, format
     pills, positive reputation, primary buttons.
   - AMBER (--amber) is reserved strictly for attention: the attest nav
     count pill and the closing-soon countdown. Nowhere else.
   - Ordinary navigational links stay blue (--link).
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS  — light is default   [verbatim from reference]
   ============================================================ */
:root,
[data-theme="light"] {
  --bg:        #FBFBFA;   /* page background, near-white */
  --surface:   #FFFFFF;   /* raised surfaces if needed */
  --ink:       #1A1A1A;   /* primary text */
  --ink-2:     #555555;   /* secondary text */
  --ink-3:     #8A8A8A;   /* tertiary / muted timestamps */
  --rule:      #E3E3DF;   /* section rules, table head border */
  --row-rule:  #EDEDEA;   /* row dividers, lighter */

  --link:      #3266C4;   /* ordinary navigational links (blue) */

  --accent:    #0F6E56;   /* TEAL primary — readable on near-white */
  --accent-bg: rgba(15,110,86,0.10);
  --accent-ink:#0F6E56;   /* text/number in accent role */

  --amber:     #9A5B00;   /* AMBER attention — readable on near-white */
  --amber-bg:  rgba(186,117,23,0.13);

  --btn-bg:    #0F6E56;   /* primary button = teal */
  --btn-ink:   #FFFFFF;

  --mark:      #1A1A1A;   /* logo stroke colour in this theme */
  --mark-hole: #FBFBFA;   /* logo hollow-centre fill = page bg */
}

[data-theme="dark"] {
  --bg:        #0A0A0A;
  --surface:   #101010;
  --ink:       #EDEDED;
  --ink-2:     #A8A8A8;
  --ink-3:     #6A6A6A;
  --rule:      #222222;
  --row-rule:  #181818;

  --link:      #6F9BF0;

  --accent:    #5DCAA5;   /* brighter teal for dark ground */
  --accent-bg: rgba(93,202,165,0.13);
  --accent-ink:#5DCAA5;

  --amber:     #EF9F27;
  --amber-bg:  rgba(239,159,39,0.14);

  --btn-bg:    #5DCAA5;
  --btn-ink:   #0A0A0A;

  --mark:      #FFFFFF;
  --mark-hole: #0A0A0A;
}

/* ============================================================
   2. BASE   [verbatim from reference, with retained heading rules]
   ============================================================ */
:root{
  --font-mono: "Berkeley Mono","Commit Mono","JetBrains Mono",
               ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-serif: Georgia, "Times New Roman", serif;
  --radius:   8px;
  --measure:  78ch;            /* readable line length for long mono text */
  --maxw:     1200px;          /* page content width */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Always reserve the vertical scrollbar gutter so the full-width header and
   centred content don't jump sideways between pages that scroll and pages
   that don't (visible when the OS shows persistent, non-overlay scrollbars). */
html { scrollbar-gutter: stable; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .15s ease, color .15s ease;
  /* Sticky footer: header/main/footer stack full-height so the footer
     pins to the bottom of the viewport on short pages instead of
     floating mid-screen with a void beneath. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* `.wrap` only ever controls the horizontal gutter — use left/right padding
   (not the shorthand) so it never clobbers the vertical padding that .nav /
   main / footer set on elements that are also `.wrap` (e.g. the header). */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 32px; padding-right: 32px; width: 100%; }
main.wrap { padding: 16px 32px 56px; flex: 1 0 auto; }

/* Bare headings map to the reference's page-title / section scale so
   existing templates (which use plain <h1>/<h2>/<h3>) need no markup
   change to pick up the system. */
h1 {
  font-size: 20px; font-weight: 500; color: var(--ink);
  margin: 22px 0 14px; padding-bottom: 12px;
  border-bottom: 0.5px solid var(--rule);
}
h2 { font-size: 17px; font-weight: 500; color: var(--ink); margin: 28px 0 8px; }
h3 { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 18px 0 6px; }

/* ============================================================
   3. LOGO  — locked mark.   [verbatim from reference]
   ============================================================ */
.legend-mark { display: inline-block; vertical-align: middle; }
.legend-mark line   { stroke: var(--mark); stroke-width: 2.2; }
.legend-mark .node  { fill: var(--mark); }
.legend-mark .hole-cover { fill: var(--mark-hole); }
.legend-mark .hole-ring  { fill: var(--mark-hole); stroke: var(--mark); stroke-width: 2.2; }

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-link, .brand-link:hover { text-decoration: none; }
.brand-word {
  font-family: var(--font-mono);
  font-size: 15px; letter-spacing: 1px; color: var(--ink); font-weight: 500;
}
.brand-word .dim { color: var(--ink-3); }
/* Closed-beta status chip beside the wordmark — separate from the locked
   mark so the logo itself stays clean. Teal (status, on-brand). */
.brand-beta {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-bg);
  padding: 1px 6px; border-radius: 4px; margin-left: -4px;
}

/* ============================================================
   4. HEADER / NAV   [verbatim from reference, nav-links scoped to
      direct children so the account dropdown is unaffected]
   ============================================================ */
header {
  border-bottom: 0.5px solid var(--rule);
}
.nav {
  display: flex; align-items: center; gap: 20px;
  /* Vertical only — must NOT zero the horizontal padding the `.wrap`
     gutter provides, or the logo goes flush to the viewport edge while
     the page body + footer stay inset. */
  padding-top: 14px; padding-bottom: 14px;
}
/* Three zones: brand (far left) · primary nav · account+toggle (far right).
   nav-collapse holds the primary nav and the utility cluster and spreads
   them across the space after the brand. */
.nav-collapse {
  display: flex; align-items: center; justify-content: space-between;
  flex: 1; gap: 20px;
}
.nav-utility { display: flex; align-items: center; gap: 16px; }
.nav-links { display: inline-flex; align-items: center; }
.nav-links > a {
  color: var(--link); margin-right: 22px; font-size: 13px;
  text-transform: lowercase;
}
.nav-links > a.active { color: var(--accent-ink); }
.nav-links > a.amber  { color: var(--amber); }
.me { color: var(--ink-2); }
.me > a {
  color: var(--link); font-size: 13px; text-transform: lowercase;
}
.acct { color: var(--ink-2); cursor: pointer; }

/* Hamburger — hidden on desktop, shown at the mobile breakpoint. */
.nav-toggle {
  display: none;
  background: transparent; border: 0.5px solid var(--rule);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
  color: var(--ink-2); font-size: 16px; line-height: 1.2;
}
.nav-toggle:hover { border-color: var(--ink-3); }

.count-pill {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: var(--amber-bg); color: var(--amber); margin-left: 4px;
}

.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  background: transparent; border: 0.5px solid var(--rule);
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink-3); }

/* ------------------------------------------------------------
   Responsive nav — at <= 720px the hamburger replaces the inline
   nav; the collapse region drops below the brand row as a stacked
   menu. Brand stays left, hamburger pins right of it.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; }
  .nav-collapse {
    display: none;
    flex-basis: 100%; width: 100%;
    flex-direction: column; align-items: flex-start;
    gap: 14px; padding: 6px 0 4px;
  }
  .nav-collapse.open { display: flex; }
  .nav-links {
    flex-direction: column; align-items: flex-start;
    gap: 14px; width: 100%;
  }
  .nav-links > a { margin-right: 0; font-size: 14px; }
  .nav-utility {
    flex-direction: column; align-items: flex-start;
    gap: 14px; width: 100%;
  }
  .me, .user-menu { width: 100%; }
  .user-menu-trigger { font-size: 14px; }
  /* Inline the account dropdown when the mobile menu is open so the
     absolute panel can't clip off the screen edge. */
  .user-menu-panel {
    position: static; box-shadow: none; border: none;
    padding-left: 0; margin-top: 6px; min-width: 0;
  }
  /* Wide tables (feed / leaderboard / attest) scroll within the content
     region rather than forcing the whole page to scroll sideways. */
  main.wrap { overflow-x: auto; }
}

/* Narrower content gutters on small screens. */
@media (max-width: 600px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  main.wrap { padding: 14px 18px 40px; }
}

/* ============================================================
   5. PAGE STRUCTURE   [verbatim from reference]
   ============================================================ */
h1.page-title {
  font-size: 20px; font-weight: 500; margin: 22px 0 0; color: var(--ink);
  border-bottom: none; padding-bottom: 0;
}
.page-rule { height: 0.5px; background: var(--rule); margin: 14px 0; }
.sub { font-size: 12px; color: var(--ink-2); margin: 2px 0 16px; }
.sub a { color: var(--link); }
.sub .on { color: var(--accent-ink); }
.lede {
  font-size: 13px; color: var(--ink-2); margin: 0 0 18px;
  max-width: var(--measure);
}
.lede em { color: var(--accent-ink); font-style: normal; }

section.page { padding-bottom: 40px; }
.page-gap { height: 56px; }
.page-marker {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 0 0;
}

/* ============================================================
   6. TABLE  (feed / leaderboard / attest)   [verbatim from reference]
   ============================================================ */
table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 14px 0; }
th {
  text-align: left; font-weight: 500; color: var(--ink-2);
  padding: 10px 12px; border-bottom: 0.5px solid var(--rule);
  white-space: nowrap;
}
td {
  padding: 14px 12px; border-bottom: 0.5px solid var(--row-rule);
  vertical-align: top; color: var(--ink);
}
.closes-cell { white-space: nowrap; }
tr:last-child td { border-bottom: none; }
.q-link { color: var(--link); }
.handle { color: var(--link); }
.muted { color: var(--ink-3); }

.pill {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.5px; padding: 2px 7px;
  border-radius: 4px; background: var(--accent-bg); color: var(--accent-ink);
  white-space: nowrap;
}
.close-soon { color: var(--amber); }
.rep-pos { color: var(--accent-ink); }

/* Sortable table headers (retained behaviour from root_base script). */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: " ↕"; font-size: 10px; color: var(--ink-3); }
th.sort-asc::after  { content: " ↑"; color: var(--accent-ink); }
th.sort-desc::after { content: " ↓"; color: var(--accent-ink); }

/* ============================================================
   7. BUTTONS   [verbatim .btn family + bare <button> mapped to it]
   ============================================================ */
.btn,
button,
a.button {
  display: inline-block;
  font-family: var(--font-mono); font-size: 12px;
  padding: 8px 16px; border-radius: var(--radius);
  border: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-ink);
  text-decoration: none;
}
.btn:hover,
button:hover,
a.button:hover { opacity: 0.92; text-decoration: none; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 0.5px solid var(--rule);
}
.btn-amber { background: var(--amber); color: var(--bg); }

/* Destructive actions (close-question, not-useful) — functional red,
   kept out of the teal/amber/blue brand palette. */
button.danger,
a.button.danger,
.btn.danger {
  background: transparent;
  color: #B3261E;
  border: 0.5px solid rgba(179,38,30,0.40);
}
button.danger:hover,
a.button.danger:hover { opacity: 1; background: rgba(179,38,30,0.06); }
[data-theme="dark"] button.danger,
[data-theme="dark"] a.button.danger,
[data-theme="dark"] .btn.danger {
  color: #F2B8B5; border-color: rgba(242,184,181,0.35);
}
[data-theme="dark"] button.danger:hover,
[data-theme="dark"] a.button.danger:hover { background: rgba(242,184,181,0.10); }

/* ============================================================
   8. QUESTION DETAIL   [verbatim from reference]
   ============================================================ */
.qblock,
blockquote.question-body {
  border-left: 2px solid var(--accent); padding: 12px 16px;
  font-size: 14px; color: var(--ink); margin: 0 0 4px;
  border-radius: 0;            /* single-sided border -> no radius */
  background: transparent;
}
.field-label {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-2); margin: 16px 0 4px;
}
.field-val { font-size: 12px; color: var(--ink); }
.badge-closed {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: var(--amber-bg); color: var(--amber); margin-left: 8px;
}

.answer { margin-top: 8px; }
.answer-head { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.answer-head .handle { font-weight: 500; }
.value-block, .rationale-block {
  font-size: 12px; color: var(--ink); line-height: 1.7;
  max-width: var(--measure);              /* the readability cap */
  white-space: pre-wrap; word-break: break-word;
}
.rationale-block {
  border: 0.5px solid var(--rule); border-radius: var(--radius);
  padding: 12px 14px; color: var(--ink-2); margin-top: 2px;
}

/* ============================================================
   9. FOOTER   [verbatim from reference]
   ============================================================ */
footer {
  border-top: 0.5px solid var(--rule); margin-top: 8px;
  padding: 14px 0; font-size: 11px; color: var(--ink-3);
}
footer a { color: var(--link); }

/* ============================================================
   10. STATUS / VERDICT PILL VARIANTS
       Teal = positive. Status + negative verdicts stay neutral so the
       amber budget is spent only on attention states.
   ============================================================ */
.pill.format  { background: var(--accent-bg); color: var(--accent-ink); }
.pill.useful  { background: var(--accent-bg); color: var(--accent-ink); }
.pill.open,
.pill.closed,
.pill.not-useful {
  background: var(--row-rule); color: var(--ink-2);
}
.pill.cohort { font-weight: 500; }
.pill.cohort-graph      { background: var(--accent-bg); color: var(--accent-ink); }
.pill.cohort-noise      { background: var(--row-rule);  color: var(--ink-2); }
.pill.cohort-irrelevant { background: var(--amber-bg);  color: var(--amber); }
.pill.cohort-production  { background: var(--row-rule);  color: var(--ink-2); }

/* ============================================================
   11. RETAINED UTILITIES — forms, messages, dropdown, admin widgets.
       All themed against the tokens above.
   ============================================================ */
input[type="text"], input[type="password"], input[type="email"],
textarea, select {
  font-family: inherit; font-size: 13px; padding: 6px 8px;
  border: 0.5px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
textarea { width: 100%; min-height: 80px; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
}
/* Keep labeled form fields in a readable column instead of letting the
   textarea / inputs / help text sprawl the full 1200px content width. */
.form-row { margin: 12px 0; max-width: var(--measure); }
.form-row label { display: block; font-weight: 500; margin-bottom: 4px; color: var(--ink-2); }

.err {
  color: #B3261E; background: rgba(179,38,30,0.07);
  border-left: 2px solid rgba(179,38,30,0.5);
  padding: 8px 12px; border-radius: var(--radius); margin: 12px 0;
}
[data-theme="dark"] .err { color: #F2B8B5; background: rgba(242,184,181,0.10); }
.ok {
  color: var(--accent-ink); background: var(--accent-bg);
  border-left: 2px solid var(--accent);
  padding: 8px 12px; border-radius: var(--radius); margin: 12px 0;
}
.notice {
  color: var(--ink-2); background: transparent;
  border: 0.5px solid var(--rule); border-left: 2px solid var(--accent);
  padding: 10px 14px; border-radius: var(--radius); margin: 12px 0; font-size: 13px;
}

.filter-bar {
  margin: 12px 0; padding: 8px 12px;
  background: var(--surface); border: 0.5px solid var(--rule); border-radius: var(--radius);
  display: flex; align-items: center; gap: 8px;
}
.filter-bar label { font-weight: 500; color: var(--ink-2); }
.filter-bar select { font-size: 12px; padding: 3px 6px; min-width: 360px; }

/* Account dropdown in the nav (markup + ids preserved from root_base). */
.user-menu { position: relative; display: inline-block; }
.user-menu-trigger {
  background: none; border: none; padding: 0; margin: 0;
  /* Match the primary nav links exactly — the old `font: inherit` picked up
     the 14px body size + title case, so "Account ▾" read as a different,
     heavier font than its lowercase 13px siblings. */
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  text-transform: lowercase;
  color: var(--link); cursor: pointer;
}
.user-menu-trigger:hover { text-decoration: underline; }
.user-menu-trigger[aria-expanded="true"] { text-decoration: underline; }
.user-menu-panel {
  display: none;
  position: absolute; right: 0; top: 100%;
  min-width: 200px;
  background: var(--surface);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  padding: 6px 0;
  margin-top: 6px;
  z-index: 100;
}
.user-menu-panel.open { display: block; }
.user-menu-panel a {
  display: block; padding: 6px 12px;
  color: var(--ink); text-decoration: none; margin: 0; text-align: left;
}
.user-menu-panel a:hover { background: var(--row-rule); text-decoration: none; }
.user-menu-identity {
  padding: 6px 12px 8px; font-size: 11px; color: var(--ink-2);
  border-bottom: 0.5px solid var(--rule); margin-bottom: 4px; text-align: left;
}

dl.meta dt { font-weight: 500; font-size: 11px; color: var(--ink-2); text-transform: uppercase; margin-top: 10px; }
dl.meta dd { margin: 2px 0 0 0; color: var(--ink); }
dl.meta dd code, dl.meta dd pre { max-width: var(--measure); }

.stats { display: flex; gap: 24px; margin: 16px 0; flex-wrap: wrap; }
.stat { background: var(--surface); padding: 12px 16px; border: 0.5px solid var(--rule); border-radius: var(--radius); min-width: 120px; }
.stat .num { font-size: 22px; font-weight: 500; display: block; }
.stat .label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; }

.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.answer-cell h3 { margin-top: 0; font-size: 12px; text-transform: uppercase; color: var(--ink-2); }
.answer-cell pre { min-height: 100px; max-height: 360px; overflow-y: auto; }

.label-options { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.label-options label { padding: 6px 10px; background: var(--surface); border: 0.5px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.label-options label:hover { background: var(--row-rule); }

pre {
  background: var(--surface); padding: 8px 10px; border: 0.5px solid var(--rule);
  border-radius: var(--radius); white-space: pre-wrap; font-size: 12px; color: var(--ink);
}
pre.context-body { max-height: 400px; overflow-y: auto; }
code { font-size: 12px; background: var(--row-rule); padding: 1px 4px; border-radius: 2px; color: var(--ink); }
.uuid { font-size: 11px; color: var(--ink-3); }