/* listlogic theme: soft neubrutalism (matches the bento homepage).
   Loaded AFTER each tool page's own <style>, so it re-sets the neutral tokens and
   restyles the shared components. Per-tool colours (--a, --b, --both, --ok, --warn) stay. */
:root {
  --bg: #fafaf7; --surface: #ffffff; --ink: #111111; --muted: #555555;
  --line: #d9d9d0;            /* inner rules: table rows, panel dividers */
  --edge: #111111;            /* outer borders of panels and controls */
  --accent: #111111;          /* text links, focus rings, active tabs */
  --lime: #c6f432; --on-lime: #111111;
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121311; --surface: #1b1c19; --ink: #f2f2ec; --muted: #b4b4ab;
    --line: #34352f; --edge: #f2f2ec; --accent: #f2f2ec;
  }
}
:root[data-theme="dark"] {
  --bg: #121311; --surface: #1b1c19; --ink: #f2f2ec; --muted: #b4b4ab;
  --line: #34352f; --edge: #f2f2ec; --accent: #f2f2ec;
}

/* Shared header and footer */
.site-header { border-bottom: 2px solid var(--edge); }
.site-footer { border-top: 2px solid var(--edge); }
.site-logo { font-family: var(--font-data); font-weight: 600; }
.site-logo span { color: var(--on-lime); background: var(--lime); border: 2px solid var(--edge); padding: 0 3px; margin-left: 1px; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--lime); }

/* Headings: bold grotesk, the highlighted word gets a lime marker */
h1 { font-weight: 700 !important; letter-spacing: -0.01em !important; }
h1 span { color: var(--on-lime) !important; background: var(--lime); padding: 0 .12em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Panels */
.sheet, .col, .register, .mapping, .log {
  border: 2px solid var(--edge); border-radius: 14px; overflow: hidden;
}
.summary, .notice, .notes p { border-radius: 10px; }
.summary { border: 2px solid var(--edge); border-left-width: 6px; }

/* Controls */
button {
  border: 2px solid var(--edge); border-radius: 10px; font-weight: 600;
  transition: transform .1s ease, box-shadow .1s ease;
}
button:hover { border-color: var(--edge); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--edge); }
button:active { transform: none; box-shadow: none; }
button.primary { background: var(--lime); color: var(--on-lime); border-color: var(--edge); }
button.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
button.link:hover, .tabs button:hover { transform: none; box-shadow: none; }
.tabs { border-bottom: 2px solid var(--edge); }
.tabs button { border: 0; border-radius: 0; }
.tabs button[aria-selected="true"] { box-shadow: inset 0 -4px 0 var(--lime); }
select, input[type="text"], input[type="number"] {
  border: 2px solid var(--edge) !important; border-radius: 8px !important;
}
.sheet-head input[type="text"] { border-width: 0 !important; }
.sheet-head h2 { min-width: max-content; }  /* keep panel titles readable; controls wrap below */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
:focus-visible { outline-color: var(--ink) !important; }

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:hover { transform: none; }
}

/* Page column never grows wider than the screen (fixes 360px overflow on the converter) */
.wrap { grid-template-columns: minmax(0, 1fr); }
/* Long option labels: let selects shrink instead of pushing the page wider */
select { max-width: 100%; min-width: 0; }
label:has(> select) { max-width: 100%; flex-wrap: wrap; }