/* Encyclopedia of AI Hallucinations — style.css
 * OEIS-influenced but modernizing. Hard rules that still hold: no animations,
 * no transitions, no hover-scale, no inline/client JS, no CSS framework.
 * Relaxed: the old "spare" absolutism — the site is now full-bleed with a
 * two-column browse layout, rounded colored cards, a prominent-button top bar,
 * and fluid clamp() title/credit sizing (body itself is a flat 17px).
 * Modern static CSS is welcome; motion and client JS are not. See CLAUDE.md
 * "House style". Organized per spec §8a–§8m.
 */

/* === 8a CSS variables — light (default) === */
:root {
  --bg: #fdfaef;
  --bg-alt: #f8f8f8;
  --bg-banner: #e8e8e8;
  --entry-field-bg: #e8e8e8;
  --border: #cccccc;
  --border-light: #eeeeee;
  --text: #000000;
  --text-muted: #666666;
  --link: #0000cc;
  --link-visited: #551a8b;
  --link-hover: #0000ff;
  --accent: #2255aa;
  --error: #cc0000;
  --success: #006600;
  --warning: #cc6600;
  --ins-bg: #e6ffe6;
  --del-bg: #ffe6e6;
  --ins-color: #003300;
  --del-color: #330000;
  --status-draft: #888888;
  --status-pending: #cc6600;
  --status-published: #006600;
  --status-rejected: #cc0000;
  --status-withdrawn: #888888;
  --status-pending-review: #cc6600;
  --status-pending-acceptance: #336699;
  --status-active: #006600;
  --status-unreviewed: #cc6600;
  --status-reviewed: #336699;
  --status-reproduced: #006600;
  --status-failed: #aa3333;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-mono: 'Courier New', Courier, monospace;
  --font-ui: system-ui, -apple-system, sans-serif;
  /* Full-bleed bands (top bar, header, footer): always span the viewport. */
  --content-width: 100%;
  /* Centered reading column for `main`. The site default is a centered column
     with side margins (like the about page); full-bleed pages (browse, home,
     staff tables) opt back out by overriding --main-width to 100% / a wide cap.
     Kept separate from --content-width so the bands stay full-bleed regardless. */
  --main-width: 760px;
  /* Outer horizontal page gutter (top bar links, search bar, main, footer).
     Reduced on narrow viewports below — see the ≤700px breakpoint. */
  --page-pad: 50px;
  --entry-head-bg: #0a3367;
  --entry-head-fg: #ffffff;
  /* ENAIH highlight in the title. Matches the card/button blue in light mode;
     a lighter blue in dark mode so it stays legible on the dark header (see the
     two dark blocks below — keep all three in var-parity). */
  --acro: #0a3367;
}

/* Dark mode via OS preference — only when not explicitly forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a1a;
    --bg-alt: #222222;
    --bg-banner: #2a2a2a;
    --entry-field-bg: #2a2a2a;
    --border: #444444;
    --border-light: #333333;
    --text: #e8e8e8;
    --text-muted: #999999;
    --link: #7799ff;
    --link-visited: #bb88ff;
    --link-hover: #aabbff;
    --accent: #5588cc;
    --ins-bg: #0a2a0a;
    --del-bg: #2a0a0a;
    --ins-color: #88cc88;
    --del-color: #cc8888;
    --entry-head-bg: #24405f;
    --entry-head-fg: #f0f0f0;
    --acro: #5588cc;
  }
}

/* Dark mode via explicit data-theme attribute (theme toggle sets this) */
:root[data-theme="dark"] {
  --bg: #1a1a1a;
  --bg-alt: #222222;
  --bg-banner: #2a2a2a;
  --entry-field-bg: #2a2a2a;
  --border: #444444;
  --border-light: #333333;
  --text: #e8e8e8;
  --text-muted: #999999;
  --link: #7799ff;
  --link-visited: #bb88ff;
  --link-hover: #aabbff;
  --accent: #5588cc;
  --ins-bg: #0a2a0a;
  --del-bg: #2a0a0a;
  --ins-color: #88cc88;
  --del-color: #cc8888;
  --entry-head-bg: #24405f;
  --entry-head-fg: #f0f0f0;
  --acro: #5588cc;
}

/* Force light when explicitly requested */
:root[data-theme="light"] {
  --bg: #fdfaef;
  --bg-alt: #f8f8f8;
  --bg-banner: #e8e8e8;
  --entry-field-bg: #e8e8e8;
  --border: #cccccc;
  --border-light: #eeeeee;
  --text: #000000;
  --text-muted: #666666;
  --link: #0000cc;
  --link-visited: #551a8b;
  --link-hover: #0000ff;
  --accent: #2255aa;
  --error: #cc0000;
  --success: #006600;
  --warning: #cc6600;
  --ins-bg: #e6ffe6;
  --del-bg: #ffe6e6;
  --ins-color: #003300;
  --del-color: #330000;
  --status-draft: #888888;
  --status-pending: #cc6600;
  --status-published: #006600;
  --status-rejected: #cc0000;
  --status-withdrawn: #888888;
  --status-pending-review: #cc6600;
  --status-pending-acceptance: #336699;
  --status-active: #006600;
  --status-unreviewed: #cc6600;
  --status-reviewed: #336699;
  --status-reproduced: #006600;
  --status-failed: #aa3333;
}

/* === 8b Base reset + typography === */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

/* Shrink the outer page gutter on narrower viewports — 50px eats too much width
   once the screen approaches tablet/phone size. */
@media (max-width: 900px) {
  :root { --page-pad: 24px; }
}
@media (max-width: 600px) {
  :root { --page-pad: 12px; }
  body { font-size: 17px; }
  .site-logo { width: 3em; height: 3em; }
  /* The desktop -0.7em pull-up assumes the large-title line-box whitespace; at
     the small fluid title size that negative margin jams the credit against the
     title, so give it a clear positive gap instead. Co-qualified with the parent
     to outrank the later (source-order) base `.site-credit` rule — see the
     equal-specificity gotcha in CLAUDE.md. */
  .site-header-top .site-credit { margin-top: 0.8em; }
  /* Let the logo block + title center and wrap as a unit instead of being
     pinned left with the title jammed against the right edge. overflow-wrap
     is a last-resort guard so an unexpectedly long token can never force
     horizontal scroll. (Title/credit sizing is handled by the fluid clamps on
     .site-title-text / .site-credit — no per-breakpoint font-size here.) */
  .site-title { flex-wrap: wrap; justify-content: center; }
  .site-title-text { overflow-wrap: anywhere; }
}

/* Phones narrower than ~400px: stack the logo above the title (centered). */
@media (max-width: 400px) {
  .site-title { flex-direction: column; gap: 2px; }
  .site-logo { width: 2.6em; height: 2.6em; }
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); }

code, pre, tt { font-family: var(--font-mono); }

code {
  background: var(--bg-alt);
  padding: 0.05em 0.3em;
}
pre code { background: transparent; padding: 0; }

h1 { font-size: 1.3em; font-weight: bold; margin: 0.5em 0; }
h2 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 1em 0 0.4em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
h3 { font-size: 1em; font-weight: bold; margin: 0.8em 0 0.3em; }

p { margin: 0.5em 0; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}

/* Utility */
.muted { color: var(--text-muted); }
.small { font-size: 0.9em; }

/* === 8c Layout — header / nav / main / footer === */
/* Site default centers `main` in a readable column (--main-width: 760px, set on
   :root) while the top bar / header / footer stay full-bleed. Full-bleed content
   pages (browse, home) and wide staff tables (admin-wide) opt out by overriding
   --main-width below. `text-page` is now redundant with the default but kept as
   an explicit marker on reading pages (about/privacy/entry/etc.). */
body.text-page main { --main-width: 760px; }

.site-wrapper {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

header {
  background: var(--bg-banner);
  border-bottom: 1px solid var(--border);
  padding: 8px var(--page-pad);
}

/* Top row: logo block + title text side by side */
header .site-header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  margin-bottom: 4px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* Logo block: strawberry SVG above "ENAIH" caption, flows inline with title */
.site-logo-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  line-height: 1;
  /* shrink the strawberry + ENAIH caption together (both sized in em) */
  font-size: 0.9em;
}

.site-logo {
  width: 4.4em;
  height: 4.4em;
  display: block;
}

.site-logo-caption {
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: 0.1em;
  /* Nudge left (~5px) so the glyphs sit centered under the strawberry. The
     trailing letter-spacing pushes the visual block right; this pulls it back. */
  margin-left: -0.2em;
  /* Match the title face (Georgia) so the wordmark reads as one type family,
     not a sans caption under a serif title. Stays black via inherited --text. */
  font-family: var(--font-body);
}

/* Full title text beside the logo block.
   Fluid rem-based size: independent of the em cascade and the body base-size
   bump, so it scales smoothly from tiny phones (~20px) up to a desktop cap
   (~46px) without per-breakpoint font overrides. */
.site-title-text {
  font-size: clamp(1.05rem, 2.69vw + 0.67rem, 2.44rem);
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
}
.site-title-text:link,
.site-title-text:visited { color: var(--text); text-decoration: none; }

/* Highlight the letters that spell the domain handle ENAIH:
   ENcyclopedia of AI Hallucinations. Accent color adapts per theme.
   The caption under the logo is left plain — it's wholly the acronym, so
   there's nothing to contrast against. */
.acro { color: var(--acro); }

/* Kept for back-compat — layout.ts may still render .site-title wrapper */
.site-title {
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-header-top .site-title {
  justify-content: center;
}
.site-title:link, .site-title:visited { color: var(--text); text-decoration: none; }

.site-credit {
  font-size: clamp(0.76rem, 0.76vw + 0.5rem, 1.13rem);
  color: var(--text-muted);
  /* Lift the credit up into the whitespace below the centered title, but leave a
     little breathing room so it sits a touch lower / farther from the title. */
  margin: -0.2em 0 0 0;
  text-align: center;
}

nav {
  font-size: 0.9em;
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: center;
}

nav a { color: var(--link); text-decoration: none; margin-right: 4px; }
nav a:hover { text-decoration: underline; }
nav .nav-sep { color: var(--text-muted); margin-right: 4px; }

/* Right-hand user area in nav */
.user-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}

/* Slim modern top bar: primary links on the left, theme toggle + user area on
   the right, all vertically centered. Sits above the logo/title band. */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* Asymmetric top/bottom padding (8 / 8). The row is align-items:center so it's
     already geometrically centered, but system-ui (Ubuntu on the maintainers'
     Linux, and similar faces elsewhere) reserves so much space above the cap
     height that the glyphs sit visibly low. The top padding is kept at 8px
     (not 0) so the bar has breathing room from the top of the viewport now
     that the dev banner no longer provides that separation. */
  padding: 8px var(--page-pad) 8px;
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: left;
  font-family: var(--font-ui);
}
.site-nav .nav-links {
  display: flex;
  /* Keep the primary links together as one unbreakable row — they never split
     across lines; they wrap as a unit relative to the rest of the bar. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  /* Safety: if the row ever outgrows a tiny viewport, scroll it internally
     rather than giving the whole page a horizontal scrollbar. */
  max-width: 100%;
  overflow-x: auto;
}
/* Primary nav links read as plain black labels (not blue hyperlinks): the
   prominent blue is reserved for the account action buttons. */
.site-nav .nav-links a {
  color: var(--text);
  text-decoration: none;
  text-transform: capitalize;
  margin: 0;
}
.site-nav .nav-links a:hover { text-decoration: underline; }
.site-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Prominent filled action buttons (log in / sign up / log out): same blue as
   the entry-card headers. Used as both <a> and <button>. */
.btn-prominent,
.btn-prominent:link,
.btn-prominent:visited {
  display: inline-block;
  background: var(--entry-head-bg);
  color: var(--entry-head-fg);
  font-family: var(--font-ui);
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  padding: 9px 18px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.btn-prominent:hover { opacity: 0.9; text-decoration: none; color: var(--entry-head-fg); }

/* Account / admin links live in a hover (and keyboard :focus-within) dropdown
   under the "signed in as" trigger. */
.account-menu { position: relative; display: inline-block; }
.account-trigger {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 1em;
  color: var(--text);
  cursor: pointer;
  padding: 6px 4px;
  white-space: nowrap;
}
.account-trigger strong { font-weight: bold; }
.account-caret { font-size: 0.8em; color: var(--text-muted); }
.account-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 160px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 0;
}
.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown { display: block; }
.account-dropdown a {
  display: block;
  padding: 6px 14px;
  color: var(--text);
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
}
.account-dropdown a:hover { background: var(--bg); text-decoration: underline; }

/* Hamburger / pancake menu — hidden on desktop, shown on mobile. */
/* The actual checkbox is always hidden — it's only used as CSS toggle state. */
.nav-toggle-input { display: none !important; }
/* Hamburger label: hidden on desktop. */
.nav-hamburger {
  display: none;
  cursor: pointer;
  padding: 6px 4px;
  font-size: 1.3em;
  line-height: 1;
  color: var(--text);
  user-select: none;
  font-family: var(--font-ui);
}
/* The ✕ close icon is hidden until the menu is open. */
.hb-close { display: none; }
/* When the checkbox is checked (menu open), swap icons. */
.nav-toggle-input:checked ~ .nav-hamburger .hb-open { display: none; }
.nav-toggle-input:checked ~ .nav-hamburger .hb-close { display: inline; }

/* Mobile: hamburger menu — nav content hidden by default, shown when toggled.
   The account dropdown expands inline (no hover on touch). */
@media (max-width: 700px) {
  /* Hide site header everywhere on mobile — the title is in the header band and
     takes up too much vertical real estate on small screens. The home page is the
     exception: it's the identity page and should keep the full title. */
  header { display: none; }
  body.home-page header { display: block; }

  /* Stack the bar vertically so the revealed menu reads as one column (hamburger
     on top, then links, then the theme/user area) instead of the links and the
     user area sitting side by side. */
  .site-nav { flex-direction: column; align-items: stretch; gap: 0; }

  /* Show the hamburger toggle button, kept at the left edge. */
  .nav-hamburger { display: inline-block; align-self: flex-start; }

  /* Nav items default to hidden; the checkbox toggle reveals them. */
  .site-nav .nav-links { display: none; }
  .site-nav .nav-right { display: none; }

  /* When hamburger is open: show nav-links vertically. */
  .nav-toggle-input:checked ~ .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0 8px;
  }
  /* When hamburger is open: show nav-right (theme + user) vertically, set off
     from the page links above by a hairline separator. */
  .nav-toggle-input:checked ~ .nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
    padding: 12px 0 8px;
    border-top: 1px solid var(--border);
  }

  /* Account dropdown expands inline (no hover on touch). The menu becomes a
     column whose links sit flush-left with the page nav above; the "signed in
     as" trigger is reordered to the bottom so it sits right above Log out. */
  .user-nav { flex-direction: column; align-items: flex-start; gap: 12px; }
  .account-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .account-trigger { order: 1; padding: 0; }
  /* The dropdown is always expanded inline here, so the desktop hover/focus
     toggle (which flips it to `display: block` and kills the flex `gap`,
     collapsing the link spacing on hover) must be overridden back to flex. */
  .account-dropdown,
  .account-menu:hover .account-dropdown,
  .account-menu:focus-within .account-dropdown {
    order: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: static;
    border: none;
    background: transparent;
    padding: 0;
    min-width: 0;
  }
  .account-dropdown a { padding: 0; }
  .account-caret { display: none; }
}

main {
  max-width: var(--main-width);
  margin: 16px auto;
  padding: 0 var(--page-pad);
}

footer {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding: 12px var(--page-pad);
  font-size: 0.85em;
  color: var(--text-muted);
  text-align: center;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}
footer a:link, footer a:visited { color: var(--text-muted); }

/* Site-wide notice banner (above header or within main) */
.banner {
  background: #f3e7bc;
  border: 1px solid #b8942f;
  color: #2e2200;
  padding: 6px 10px;
  margin-bottom: 12px;
  font-size: 0.9em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .banner {
    background: #ecd98c;
    border-color: #b8942f;
    color: #241a00;
  }
}

:root[data-theme="dark"] .banner {
  background: #ecd98c;
  border-color: #b8942f;
  color: #241a00;
}

/* === 8d Tables === */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 0.95em;
}

th {
  text-align: left;
  font-weight: bold;
  padding: 4px 8px;
  background: #f0f0f0;
  border-bottom: 2px solid var(--border);
  font-family: var(--font-ui);
}

td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

tr:nth-child(even) td { background: var(--bg-alt); }

/* Subtle row highlight on hover — no scale, no transition */
tr:hover td { background: #f5f5ff; }

table a { text-decoration: none; }
table a:hover { text-decoration: underline; }

/* Dark mode overrides for table chrome */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) th { background: #2a2a2a; }
  :root:not([data-theme="light"]) tr:hover td { background: #252535; }
}
:root[data-theme="dark"] th { background: #2a2a2a; }
:root[data-theme="dark"] tr:hover td { background: #252535; }
:root[data-theme="light"] th { background: #f0f0f0; }
:root[data-theme="light"] tr:hover td { background: #f5f5ff; }

/* Browse / admin compact table helpers */
.queue-table code { font-size: 0.9em; }

/* Owner-only delete action in the all-submissions table */
.del-link:link, .del-link:visited { color: var(--error); }

/* === 8e Forms === */
.form-group { margin-bottom: 12px; }

label {
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
  font-size: 0.9em;
}

input[type=text],
input[type=email],
input[type=password],
input[type=url],
input[type=date],
input[type=number],
input[type=search],
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 1em;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  max-width: 500px;
}

textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-mono);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button, input[type=submit] {
  border: none;
  border-radius: 0;
  padding: 5px 14px;
  font-family: var(--font-ui);
  font-size: 0.9em;
  cursor: pointer;
  background: var(--accent);
  color: #ffffff;
}

button:hover { opacity: 0.85; }

button.btn-danger { background: var(--error); }
button.btn-secondary { background: #555555; }

/* Link-styled button — used for logout in nav and other inline actions */
button.linkbutton,
.linkbutton {
  background: none;
  border: none;
  color: var(--link);
  padding: 0;
  margin: 0;
  text-decoration: underline;
  font-family: var(--font-body);
  font-size: 1em;
  cursor: pointer;
  display: inline;
}

/* Password show/hide wrapper — input + toggle button on one row */
.pw-wrap {
  display: flex;
  align-items: center;
  max-width: 500px;
}
.pw-wrap input {
  flex: 1;
  max-width: none;
}
.pw-toggle {
  width: auto;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  margin-left: 4px;
  flex-shrink: 0;
  font-family: var(--font-ui);
}
.pw-toggle:hover { opacity: 0.85; }

/* Character counter shown beneath textareas */
.char-count {
  color: var(--text-muted);
  font-size: 0.8em;
  font-family: var(--font-ui);
}

/* Sit the counter tight under its own box and put the gap *below* it, so it
 * reads as belonging to the box above rather than the field below. */
.submit-form textarea:has(+ .char-count) {
  margin-bottom: 2px;
}
.submit-form .char-count {
  display: block;
  margin-bottom: 12px;
}

/* Validation messages */
.form-error {
  color: var(--error);
  margin-bottom: 8px;
}
.form-error::before { content: "\2717  "; }

/* .error is an alias used as <p class="error" role="alert"> */
.error {
  color: var(--error);
  margin-bottom: 8px;
}
.error::before { content: "\2717  "; }

.form-notice { color: var(--success); margin-bottom: 8px; }

/* .notice is an alias used in verify.ts */
.notice { color: var(--success); margin-bottom: 8px; }

/* Username availability status line */
.username-status {
  font-size: 0.85em;
  font-family: var(--font-ui);
}
.status-ok  { color: var(--success); }
.status-err { color: var(--error); }

/* Small hint text beneath form fields */
small.field-hint,
.field-hint {
  color: var(--text-muted);
  font-size: 0.85em;
  display: block;
  margin-top: 2px;
}

/* Forms that render inline (e.g. logout button in nav) */
.inline-form { display: inline; margin: 0; padding: 0; }

/* Checkbox row in submit form */
.field-checkbox { margin: 8px 0; }
.checkbox-label {
  font-weight: normal;
  display: inline-block;
  cursor: pointer;
}
.checkbox-label input[type=checkbox] {
  width: auto;
  max-width: none;
  margin-right: 0.4em;
  vertical-align: middle;
}

/* Google OAuth buttons — plain, matches OEIS-spare look */
.oauth-shell { margin: 0 0 0.6em 0; padding: 0; }
.oauth-google-button {
  width: 260px;
  max-width: 100%;
  margin: 0;
}
.oauth-divider-wrap { display: block; }
.oauth-divider {
  display: block;
  text-align: left;
  margin: 0.4em 0 0.8em 0;
  font-size: 0.9em;
  color: var(--text-muted);
}

.submit-form label + input,
.submit-form label + select,
.submit-form label + textarea,
.submit-form label + p,
.submit-form label + .field-hint {
  margin-bottom: 10px;
}

/* Let form fields run the full width of the column. The global input rule
 * caps width at 500px, which on the wider submit column leaves the boxes
 * ending partway across and looking off-centered. */
.submit-form input[type=text],
.submit-form input[type=url],
.submit-form input[type=date],
.submit-form select,
.submit-form textarea {
  max-width: none;
}

.submit-form button[type=submit] {
  margin-top: 12px;
}

.form-actions {
  display: block;
  margin-top: 14px;
}

.form-actions + .form-actions {
  margin-top: 8px;
}

.submit-warning {
  background: #f7f0d9;
  border: 1px solid #c5a53a;
  color: #3f2f00;
  padding: 12px 14px;
  margin: 0 0 16px 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .submit-warning {
    background: #2b2411;
    border-color: #8a6d24;
    color: #f7e7bc;
  }
}

:root[data-theme="dark"] .submit-warning {
  background: #2b2411;
  border-color: #8a6d24;
  color: #f7e7bc;
}

/* Theme toggle — unobtrusive, no background */
#theme-toggle.theme-toggle,
.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.85em;
  color: var(--text-muted);
  cursor: pointer;
  display: inline;
}
.theme-toggle .theme-icon {
  display: inline-block;
  margin-right: 0.2em;
  text-decoration: none;
}

/* Rainbow theme: a faint, click-through VIBGYOR wash over the light palette.
 * Inserted/removed by theme.js (#rainbow-overlay). pointer-events:none keeps
 * the page fully interactive underneath. */
.rainbow-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  opacity: 0.25;
  background: linear-gradient(135deg, violet, indigo, blue, green, yellow, orange, red);
}

/* === 8f Status badges === */
.status-badge {
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.status-badge::before { content: "["; }
.status-badge::after  { content: "]"; }

.status-draft     { color: var(--status-draft); }
.status-pending   { color: var(--status-pending); }
.status-published { color: var(--status-published); }
.status-rejected  { color: var(--status-rejected); }
.status-withdrawn { color: var(--status-withdrawn); font-style: italic; }
.status-pending-review { color: var(--status-pending-review); }
.status-pending-acceptance { color: var(--status-pending-acceptance); }
.status-active { color: var(--status-active); font-weight: bold; }
.status-unreviewed { color: var(--status-unreviewed); }
.status-reviewed   { color: var(--status-reviewed); }
.status-reproduced { color: var(--status-reproduced); font-weight: bold; }
.status-failed     { color: var(--status-failed); }

/* The same tier badge also rides on the navy entry-card header (browse cards +
   entry page), where the page-background status hues above are too dark to read.
   Brighten them for that context only — the navy bar is the same dark blue in
   both light and dark themes, so one set of values covers both. */
.entry-card-head .status-reproduced { color: #6ee787; }
.entry-card-head .status-active     { color: #6ee787; }
.entry-card-head .status-pending-acceptance { color: #9ec5fe; }
.entry-card-head .status-reviewed   { color: #9ec5fe; }
.entry-card-head .status-failed     { color: #ff9d9d; }
.entry-card-head .status-rejected   { color: #ff9d9d; }
.entry-card-head .status-pending-review { color: #ffce80; }
.entry-card-head .status-unreviewed { color: #ffce80; }

/* Entry-level (active/patched) status labels */
.entry-status-active  { color: var(--success); font-size: 0.85em; }
.entry-status-patched {
  color: var(--warning);
  font-size: 0.85em;
  font-style: italic;
}
.entry-status-patched::before { content: "\26a0 "; }

/* Legacy .entry-status pill (used by old browse/entry renders) */
.entry-status {
  display: inline-block;
  font-size: 0.8em;
  padding: 0.05em 0.5em;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

/* === 8g Entry page === */
.entry-header { margin-bottom: 16px; }

/* Colored title bar on the single-entry page — same look as the listing cards,
   but it's a static <header>, not a collapse toggle. The element also carries
   .entry-card-head (for the shared colored-bar look), whose `cursor: pointer`
   would otherwise win on source order alone — so we co-qualify both classes to
   raise specificity and keep the pointer hover off a bar that does nothing. */
.entry-card-head.entry-page-head {
  cursor: default;
  margin-bottom: 16px;
}
.entry-page-head .entry-card-title { font-size: 1.3em; flex: 1 1 auto; min-width: 0; }

.entry-eah-id {
  font-family: var(--font-mono);
  font-size: 1.1em;
  margin: 0;
}

.entry-title { font-size: 1.3em; margin: 4px 0; }

/* User-submitted titles can be a single very long unbroken token (no spaces),
   which would otherwise force horizontal scroll on every page that shows them.
   `overflow-wrap: anywhere` lets the browser break mid-token only when needed,
   and (unlike break-word) it shrinks min-content width so it also works inside
   table cells without needing table-layout: fixed. The /my dashboard is exempt
   on purpose — it truncates with an ellipsis instead. */
h1,
.entry-title,
.entry-head a,
.entry-meta dd,
table.queue td,
table.all td {
  overflow-wrap: anywhere;
}

.entry-category { color: var(--text-muted); font-size: 0.9em; margin: 0; }

/* Model field — legacy big-display variant kept for back-compat */
.entry-model {
  font-size: 1.4em;
  margin: 0 0 0.15em 0;
  word-wrap: break-word;
}

/* Definition-list metadata grid */
.entry-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 12px 0;
  font-size: 0.9em;
}
.entry-meta dt { font-weight: bold; color: var(--text-muted); }

/* Prompt / output preformatted blocks */
pre.prompt,
pre.output {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9em;
  max-height: 500px;
  overflow-y: auto;
}

/* Citation block */
pre.citation {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 8px;
  font-size: 0.85em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Copy button injected by theme.js next to citation */
.copy-btn {
  font-size: 0.8em;
  background: #555555;
  padding: 2px 8px;
  margin-left: 6px;
  color: #ffffff;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.copy-btn:hover { opacity: 0.85; }

/* Patched-entry warning banner */
.patched-banner {
  background: #fff8e6;
  border: 1px solid var(--warning);
  padding: 8px;
  margin: 12px 0;
}

/* Trust-tier banner (unreviewed / reviewed-not-reproduced / failed) */
.tier-banner {
  background: #fff8e6;
  /* Fixed cream background in both themes, so pin the text dark too — otherwise
     dark-theme inherits white body text and the banner is white-on-cream. */
  color: #1a1a1a;
  border: 1px solid var(--warning);
  border-left-width: 4px;
  padding: 8px;
  margin: 12px 0;
  font-size: 0.95em;
}

/* Prev / next navigation row at bottom of entry */
.entry-nav {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
}

/* Footer block below citation on entry pages */
.entry-footer-block {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--border);
}

/* Reviewer note shown to submitter (draft/track view) */
.reviewer-note {
  margin: 0.5em 0 1em 0;
  padding: 0.5em 1em;
  border-left: 3px solid var(--border);
  background: var(--bg-alt);
  white-space: pre-wrap;
}

/* === 8h Diff / history display === */
ins.diff-add {
  background: var(--ins-bg);
  color: var(--ins-color);
  text-decoration: underline;
  font-weight: bold;
}
del.diff-del {
  background: var(--del-bg);
  color: var(--del-color);
  text-decoration: line-through;
  opacity: 0.8;
}

.history-version {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}
.history-version-bar {
  font-size: 0.85em;
  color: var(--text-muted);
  font-family: var(--font-ui);
  margin-bottom: 6px;
}
.history-field-name {
  font-weight: bold;
  font-family: var(--font-ui);
  font-size: 0.85em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 6px 0 2px;
}

/* === 8i Discussion thread === */
.discussion { margin-top: 16px; }

/* OEIS-style two-column discussion entry */
.discuss-note {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  margin: 6px 0;
  font-size: 0.9em;
  border-top: 1px dotted var(--border-light);
  padding-top: 4px;
}
.discuss-meta  { color: var(--text-muted); font-size: 0.85em; }
.discuss-user  { font-weight: bold; }

pre.note {
  font-family: var(--font-body);
  white-space: pre-wrap;
  margin: 0;
}

.system-message { color: var(--text-muted); font-style: italic; }

.chat-reply { margin-top: 12px; }

/* Legacy chat thread styles (admin queue + old track views) */
.chat-thread {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 1em 0;
}
.chat-message {
  border-left: 3px solid var(--border);
  padding: 0.4em 0.8em;
  margin: 0.5em 0;
  background: var(--bg-alt);
}
.chat-message.chat-staff { border-left-color: var(--link); }
.chat-message.chat-user  { border-left-color: var(--text-muted); }
.chat-message.chat-system {
  border-left-style: dashed;
  font-style: italic;
  background: transparent;
}
.chat-meta {
  font-size: 0.85em;
  color: var(--text-muted);
  margin-bottom: 0.2em;
}
.chat-body { white-space: pre-wrap; word-wrap: break-word; }

/* === 8j Search / browse === */
/* Browse + home use the two-column layout; it spans the full viewport like the
   rest of the site (the 240px filter sidebar + 1fr entry list just gets wider). */
/* Browse + home run full-bleed: the entry list fills the viewport. */
body.browse-page { --content-width: 100%; --main-width: 100%; }

/* Browse layout: filter sidebar on the left, entry list filling the rest of the
   viewport out to the right edge. */
.browse-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 12px;
}
/* Anchored at the top of the listing — deliberately NOT sticky, so the filters
   stay put rather than following you down a long page, and the sidebar grows to
   its natural height instead of getting its own inner scrollbar. */
.browse-sidebar {
  font-size: 0.9em;
  min-width: 0;
  align-self: start;
  padding-right: 8px;
}
.browse-main { min-width: 0; }

/* Search box: query + Search stacked full-width in the narrow sidebar, model
   filter below. */
.search-form { width: 100%; margin: 0 0 18px; }
.search-row {
  position: relative;
  display: block;
}
.search-row input[type=search] {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  /* room for the inline magnifier button sitting inside the right edge */
  padding-right: 40px;
}
/* Magnifier submit button nested inside the query box (replaces the old
   full-width "Search" button — see concept art). */
.search-row button.search-go {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.search-row button.search-go:hover { color: var(--entry-head-bg); }
/* Soft corners on the sidebar search controls (query box, model picker) —
   matches the rounded entry cards. */
.search-row input[type=search],
.search-model select {
  border-radius: 6px;
}
.search-model {
  margin-top: 10px;
  /* Consistent gap before the first filter section (Categories), matching the
     rhythm between sections below. */
  margin-bottom: 20px;
  font-size: 0.9em;
  font-family: var(--font-ui);
}
.search-model label { display: block; margin-bottom: 3px; }

/* Master sidebar heading ("Search"). Sized + bordered to match .browse-title in
   the main column so their underlines sit at the same height (both columns start
   at the grid top).

   Collapse mechanism: a checkbox-hack, NOT <details>. A closed <details> hides
   its content via content-visibility, which `display` overrides can't defeat —
   so forcing it open on desktop with CSS doesn't actually work (the sidebar ends
   up unreachable on wide screens). The hidden checkbox + sibling label is fully
   CSS-controllable: desktop ignores the checkbox and always shows the form;
   mobile keys the form's visibility off `:checked`. */
.filter-toggle-input { display: none; }
.sidebar-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.4em;
  font-weight: bold;
  color: var(--text);
  margin: 0 0 14px;
}

/* Mobile: the heading becomes a tappable disclosure toggle and the form is
   hidden until the checkbox is checked. Matches the single-column breakpoint. */
@media (max-width: 760px) {
  .sidebar-title {
    cursor: pointer;
    user-select: none;
    /* Tight bottom margin when collapsed — the revealed form adds its own gap. */
    margin-bottom: 0;
  }
  /* Chevron indicator: down when closed, up when open. */
  .sidebar-title::after {
    content: ' \25be';
    font-size: 0.75em;
    color: var(--text-muted);
  }
  .filter-toggle-input:checked ~ .sidebar-title::after { content: ' \25b4'; }
  /* Collapsed by default; the checkbox reveals it. */
  .filter-form { display: none; }
  .filter-toggle-input:checked ~ .filter-form { display: block; }
  /* Breathing room between the heading and the revealed form. */
  .filter-toggle-input:checked ~ .sidebar-title { margin-bottom: 12px; }
}

/* Sidebar filter sections */
.sidebar-section { margin-bottom: 20px; }
.sidebar-h {
  font-family: var(--font-ui);
  /* Same size as the filter rows beneath it — distinguished as a header by the
     uppercase + letter-spacing + underline, not by being smaller. */
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 0 0 8px;
}
.sidebar-cats,
.sidebar-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-family: var(--font-ui);
  /* .sidebar-cats is a <nav>, so reset the centered text-align the generic
     `nav` rule would otherwise impose. */
  text-align: left;
}
/* Sidebar filter links use standard link color so they read as clickable.
   The active choice is bold + plain text color (not link-blue) to distinguish
   "this is where you are" from "this is something you can click". */
.sidebar-cats a,
.sidebar-links a { text-decoration: underline; color: var(--link); }
.sidebar-cats a:visited,
.sidebar-links a:visited { color: var(--link); }
.sidebar-cats a:hover,
.sidebar-links a:hover { color: var(--link-hover); }
.sidebar-cats a.active { font-weight: bold; color: var(--text); text-decoration: none; }
.sidebar-links strong { color: var(--text); }

/* Faceted count lists (categories, status): label on the left, a muted,
   right-aligned tally on the right — each row spans the sidebar width. */
.count-list { align-items: stretch; }
.cat-link,
.count-list .filter-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}
.cat-name { min-width: 0; overflow-wrap: anywhere; }
.cat-count {
  flex: none;
  color: var(--text-muted);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}
/* keep the underline-on-hover affordance on the label only, not the tally */
.cat-link:hover .cat-count { text-decoration: none; }

/* Multi-select category rows: a checkbox, the label, then the right-aligned
   tally. The whole row is a <label>, so clicking anywhere toggles the box. */
.filter-form { width: 100%; }
.cat-check {
  justify-content: flex-start;
  gap: 7px;
  cursor: pointer;
  /* The row is a <label>, which the global `label` rule makes bold. Reset to
     normal here so an UNchecked category reads as plain weight; only the
     checked ones bold (below). */
  font-weight: normal;
}
.cat-check input[type="checkbox"],
.cat-check input[type="radio"] {
  flex: none;
  margin: 0;
  cursor: pointer;
  /* Tint the checkmark/dot to the brand blue (modern browsers honor accent-color). */
  accent-color: var(--entry-head-bg);
}
.cat-check .cat-name { flex: 1 1 auto; color: var(--link); text-decoration: underline; }
/* Bold + darken a category only when it's selected (its box is checked). The
   `:has()` form reflects the live checkbox state instantly — before the AJAX
   swap, and without JS at all — while `.active` (set server-side) is the
   fallback for browsers without :has(). The "All categories" reset link bolds
   when nothing is selected. */
.cat-check.active .cat-name,
.cat-check:has(input:checked) .cat-name,
.cat-reset.active { font-weight: bold; color: var(--text); text-decoration: none; }
.cat-reset { cursor: pointer; }

/* Dashboard (/my/submissions) filter bar: status links on the left, a compact
   search box on the right. Reuses the browse .search-row / .search-go look. */
.my-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 4px 0 16px;
}
.my-filter-bar .filter-bar { margin: 0; }
.filter-pill {
  font-family: var(--font-ui);
  font-size: 0.9em;
  text-decoration: none;
  color: var(--link);
  white-space: nowrap;
}
.filter-pill:hover { text-decoration: underline; }
.filter-pill.active { color: var(--text); }
.my-search-form { width: min(280px, 100%); flex: 1 1 220px; max-width: 320px; }

.filters  { font-size: 0.9em; margin: 8px 0; }
.filters .chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: var(--font-ui);
  font-size: 0.85em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 0.05em 0.5em;
  margin-right: 6px;
}
/* Active-filter chips are removal links: the ✕ and hover state signal that
   clicking drops the filter. */
a.chip-remove { color: var(--text); text-decoration: none; cursor: pointer; }
a.chip-remove .chip-x { color: var(--text-muted); font-weight: bold; }
a.chip-remove:hover {
  border-color: var(--accent);
  background: var(--bg);
}
a.chip-remove:hover .chip-x { color: var(--error, #cc0000); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0;
  font-size: 0.9em;
  font-family: var(--font-ui);
}

.browse-main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.browse-title {
  margin: 0;
  font-size: 1.4em;
}
.result-count {
  color: var(--text-muted);
  font-size: 0.85em;
  font-family: var(--font-ui);
  margin: 0;
}

.pagination,
.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 0.9em;
  font-family: var(--font-ui);
}
.pagination .disabled,
.pager .disabled { color: var(--text-muted); }

/* Home page top section */
.home-top { text-align: center; }
.home-top .cta { font-size: 1.05em; }
.tagline { font-size: 1.05em; color: var(--text-muted); margin: 0.4em 0 1em 0; }

/* Entry cards (browse + home listing). Each is a collapsible <details>: the
   colored header is the <summary> (title + collapse toggle), the body holds the
   info grid and the prompt/response boxes. */
.entry-list { list-style: none; padding: 0; margin: 1em 0; }
.entry-card {
  border: 1px solid var(--border);
  margin: 0 0 16px 0;
  background: var(--bg);
  /* Expanded: round only the top (the body runs to a square bottom). */
  border-radius: 6px 6px 0 0;
  /* clip the colored head's square corners to the card's rounded top */
  overflow: hidden;
  /* subtle drop shadow to lift the card off the page background */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}
.entry-card > details { margin: 0; }
/* Collapsed: nothing below the head, so round all four corners. */
.entry-card:has(> details:not([open])) { border-radius: 6px; }

.entry-card-head {
  background: var(--entry-head-bg);
  color: var(--entry-head-fg);
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  list-style: none;
}
/* Hide the native disclosure triangle; we draw our own chevron at the right. */
.entry-card-head::-webkit-details-marker { display: none; }
.entry-card-head::marker { content: ""; }
/* The head carries the entry id (small, above) + title, both linking to the
   entry page. Clicking either navigates; clicking anywhere else on the head
   toggles the card (default <summary> behavior). */
.entry-card-headings {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.entry-card-eid {
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.03em;
  opacity: 0.85;
  width: max-content;
  max-width: 100%;
}
.entry-card-title {
  min-width: 0;
  font-size: 1.1em;
  font-weight: bold;
  overflow-wrap: anywhere;
  margin: 0;
}
/* Links sitting on the colored head inherit its text color (not link blue);
   underline only on hover to signal they're clickable. */
.entry-card-head a,
a.entry-card-title { color: inherit; text-decoration: none; }
.entry-card-head a:hover { text-decoration: underline; }
/* The id/title links are inline targets within the wide clickable summary, so
   keep them from stretching full-width — only the text itself navigates. */
a.entry-card-title { width: max-content; max-width: 100%; }
.entry-card-chevron { flex: none; font-size: 0.9em; }
.entry-card-chevron::before { content: "\25B8"; } /* ▸ collapsed */
details[open] > .entry-card-head .entry-card-chevron::before { content: "\25BE"; } /* ▾ open */

/* Patched badge sits on the colored header; border uses the header text color. */
.entry-badge-patched {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  padding: 0.1em 0.5em;
}

.entry-card-body { padding: 12px 14px; }

.entry-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 14px;
  margin: 0 0 12px 0;
  font-size: 0.9em;
}
.entry-info dt { font-weight: bold; color: var(--text-muted); font-family: var(--font-ui); }
.entry-info dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Prompt / response: the focal content — full-width background-filled boxes,
   no indent, no admonition styling. */
.entry-field { margin: 12px 0 0; }
.entry-field-label {
  font-family: var(--font-ui);
  font-size: 0.78em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.entry-field-box {
  background: var(--entry-field-bg);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 10px 12px;
}
.entry-field-box pre.note { margin: 0; }

/* "show all" toggle for long prompt/response. Clamps height when closed and
   un-clamps when open — same <pre>, no duplicate content, no JS. */
details.longtext { display: flex; flex-direction: column-reverse; }
details.longtext > pre.note {
  max-height: 14em;
  overflow: hidden;
}
details.longtext[open] > pre.note { max-height: none; }
details.longtext > summary {
  cursor: pointer;
  margin-top: 0.3em;
  font-size: 0.85em;
  font-family: var(--font-ui);
  color: var(--link);
}
details.longtext .less { display: none; }
details.longtext[open] .more { display: none; }
details.longtext[open] .less { display: inline; }

/* === Multi-turn conversation rendering === */
/* A vertical stack of labeled turn boxes. Each turn reuses .entry-field-box for
   its content; the label leans on whether it's a user (prompt) or assistant
   (response) turn via a thin colored left rule. No animation. */
.conversation { display: flex; flex-direction: column; gap: 10px; }
.conversation .turn { margin: 0; }
.turn-label {
  font-family: var(--font-ui);
  font-size: 0.78em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.turn.turn-user .entry-field-box { border-left: 3px solid var(--border-light); }
.turn.turn-assistant .entry-field-box { border-left: 3px solid var(--entry-head-bg); }

/* Collapse the tail of a long conversation behind a pure-CSS toggle (matches
   the longtext "show all" pattern). The hidden turns sit inside <details>. */
details.conversation-more { display: flex; flex-direction: column; gap: 10px; }
details.conversation-more > summary {
  cursor: pointer;
  margin: 2px 0;
  font-size: 0.85em;
  font-family: var(--font-ui);
  color: var(--link);
  list-style: none;
}
details.conversation-more .less { display: none; }
details.conversation-more[open] .more { display: none; }
details.conversation-more[open] .less { display: inline; }

/* FAQ list: bold questions, comfortably spaced answers. */
.faq-list dt { font-weight: bold; margin-top: 1.1em; }
.faq-list dd { margin: 0.3em 0 0; }

/* === Submit/edit transcript fieldset === */
.transcript-fields { border: 1px solid var(--border-light); border-radius: 6px; padding: 12px 14px; margin: 12px 0; }
.transcript-fields legend { font-family: var(--font-ui); font-weight: bold; padding: 0 6px; }
.transcript-mode { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 12px; }
.transcript-turns { display: flex; flex-direction: column; gap: 12px; }
.turn-edit { border: 1px solid var(--border-light); border-radius: 6px; padding: 10px 12px; }
.turn-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.turn-edit textarea { width: 100%; }
.transcript-turns-actions { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.transcript-block textarea { width: 100%; }
/* Optional custom delimiter overrides for the pasted-block mode. */
.block-delims { margin-top: 10px; }
.block-delim-row { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.block-delim-row label { flex: 1 1 180px; font-family: var(--font-ui); font-size: 0.9em; font-weight: bold; }
.block-delim-row input { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-weight: normal; }

/* Single-column on narrow viewports: filters stack above the listing. */
@media (max-width: 760px) {
  .browse-layout { grid-template-columns: 1fr; gap: 16px; }
}

/* === 8k Autosave banner === */
.autosave-banner {
  background: #fffbe6;
  border: 1px solid #e6c800;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.autosave-banner button {
  font-size: 0.85em;
  padding: 2px 8px;
}

/* === 8l My submissions dashboard === */
/* The dashboard reuses the browse entry-card styling (.entry-list / .entry-card)
   so drafts read identically to the public listing. Only two extras are needed:
   a status chip in the colored header, and a little breathing room above the
   per-card action bar. */
.entry-card-status {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  padding: 0.1em 0.5em;
}
.my-sub-actions { margin-top: 12px; }

/* The shared action bar (also used on overview/edit/history/discussion). */
.action-bar {
  font-size: 0.9em;
  font-family: var(--font-ui);
  color: var(--text-muted);
  margin: 0.3em 0;
}
.action-bar .inline-form { display: inline; }
.action-bar .del-link:link, .action-bar .del-link:visited { color: var(--error); }
.draft-warning {
  color: var(--warning);
  font-size: 0.9em;
  border: 1px solid var(--warning);
  padding: 6px 10px;
  margin: 8px 0;
}

/* === 8m Admin-specific === */
/* Table-heavy admin pages opt into a wider content column for density —
   staff want information over whitespace. Overriding the variable widens
   header/nav/main/footer uniformly so nothing looks misaligned. */
body.admin-wide { --content-width: min(1400px, 96vw); --main-width: min(1400px, 96vw); }

/* The /my/submissions dashboard: a wider-than-default reading column (~2× the
   760px default) so the entry-cards aren't cramped, but still a centered column
   — not full-bleed like browse. Only --main-width is widened; the full-bleed
   bands keep the default --content-width: 100%. */
body.dashboard-wide { --main-width: min(1500px, 94vw); }

.jump-to-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: 0.9em;
}
.jump-to-form input { max-width: 100px; }

/* === Minimal tracking-code styles (kept for any cached admin/staff pages) === */
.tracking-code-block {
  margin: 1em 0;
  padding: 0.8em 1em;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
pre.tracking-code {
  font-size: 1.1em;
  margin: 0.4em 0;
  background: transparent;
  border: none;
  padding: 0;
}

/* ── Mobile responsiveness ─────────────────────────────────── */
@media (max-width: 700px) {
  /* NB: don't add `body { padding }` here — header/banner are full-bleed
     bands and main/footer already carry 12px side padding. Body padding
     would inset the header background and double-pad the content column. */

  nav a {
    margin-right: 0.6rem;
    font-size: 1rem;
  }

  /* In-development banner: trim it so it doesn't eat the first screen. */
  .banner { font-size: 0.8em; padding: 7px 12px; line-height: 1.4; }

  /* Entry-card header on a phone: the tier badge crowds the title and reads
     poorly squeezed beside it. Let the title span the full first line so the
     tier/patched badge wraps onto its own line beneath (at its natural width,
     where the brightened colors have room), with the collapse chevron pinned to
     the top-right. Scoped off the entry-page header, which has no chevron. */
  .entry-card-head:not(.entry-page-head) {
    flex-wrap: wrap;
    position: relative;
    padding-right: 36px;
  }
  .entry-card-head:not(.entry-page-head) .entry-card-headings,
  .entry-card-head:not(.entry-page-head) > .entry-card-title { flex-basis: 100%; }
  .entry-card-head:not(.entry-page-head) .status-badge,
  .entry-card-head:not(.entry-page-head) .entry-card-status,
  .entry-card-head:not(.entry-page-head) .entry-badge-patched { margin-top: 8px; }
  .entry-card-head:not(.entry-page-head) .entry-card-chevron {
    position: absolute;
    top: 10px;
    right: 14px;
    margin: 0;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre.prompt,
  pre.output,
  pre.citation {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }

  .submit-form input[type="text"],
  .submit-form input[type="url"],
  .submit-form input[type="date"],
  .submit-form select,
  .submit-form textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-actions button {
    width: 100%;
  }

  .entry-nav {
    display: flex;
    justify-content: space-between;
  }

  .queue table th:nth-child(3),
  .queue table td:nth-child(3) {
    display: none; /* hide "model" column on small screens */
  }
}

/* ── Similarity warning block ─────────────────────────────── */
.similar-warning {
  margin: 1em 0;
  padding: 0.75em 1em;
  border: 1px solid var(--warning);
  background: var(--bg-alt);
  color: var(--text);
}
.similar-warning ul {
  margin: 0.5em 0 0;
  padding-left: 1.5em;
}

/* Reader-complaint UI on the single-entry page (src/routes/entry.ts). The form
   is a plain collapsible <details>; only a couple of neutral boxes are styled. */
.complaint-thanks {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  padding: 8px;
  margin: 12px 0;
}
.entry-complaint {
  margin: 16px 0 0;
}
.entry-complaint > summary {
  cursor: pointer;
  color: var(--text-muted);
}
.entry-complaint textarea {
  width: 100%;
  box-sizing: border-box;
}

/* === Mobile tap affordances ===
   On phones, controls that otherwise render as bare text or a thin outline read
   as "not tappable" under a thumb. Give those a subtle capsule fill so they look
   like the buttons they are: the hamburger, the sidebar "Search" disclosure, the
   "show all"/"show less" summaries, the prev/next pagers (browse + entry page),
   and the theme/password toggles. Buttons that already carry the --accent fill
   (submit / .btn-prominent / .btn-danger / .btn-secondary) are intentionally
   untouched. Body page-navigation links are excluded — only the prev/next pagers,
   which act as controls, get the treatment. Scoped ≤760px; desktop stays spare.
   Uses existing --bg-banner / --border vars (in parity across all three theme
   blocks), so no new theme color is introduced. */
@media (max-width: 760px) {
  .nav-hamburger,
  .sidebar-title,
  .theme-toggle,
  #theme-toggle.theme-toggle,
  details.longtext > summary,
  details.conversation-more > summary,
  .entry-complaint > summary,
  .pw-toggle,
  .pagination a,
  .pagination .disabled,
  .entry-nav a,
  .entry-nav .disabled {
    display: inline-block;
    background: var(--bg-banner);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    line-height: 1;
    text-decoration: none;
  }

  /* Drop the native disclosure triangle so the summary capsules read as buttons,
     not as expandable list rows. */
  details.longtext > summary,
  details.conversation-more > summary,
  .entry-complaint > summary { list-style: none; }
  details.longtext > summary::-webkit-details-marker,
  details.conversation-more > summary::-webkit-details-marker,
  .entry-complaint > summary::-webkit-details-marker { display: none; }

  /* The dead ends of a pager (no newer/older page) read as disabled buttons:
     muted text in a dashed capsule rather than a solid, tappable-looking one. */
  .pagination .disabled,
  .entry-nav .disabled {
    color: var(--text-muted);
    border-style: dashed;
  }
}