/* ============================================================
   TheSameFive — shared base stylesheet for the host-tool suite.

   ONE source of truth for the visual identity, copied into each
   app's static dir at build time (see each Dockerfile) and linked
   before the app's own small stylesheet. Tokens are defined here;
   apps and their app.css style THROUGH the tokens, never with raw
   hexes, so a palette change happens in one place.

   Identity: "Call Sheet" (light) + "After Dark" (dark), one token
   system. Accent option B — ink-blue in light, brass in dark.
   Light is a structured, numbered, tool-first working document;
   dark is the room after the house lights drop.

   THEME: light by default; dark under prefers-color-scheme AND
   under [data-theme] so a viewer toggle wins in both directions.
   ============================================================ */

:root {
  /* --- Call Sheet, light ground --- */
  --bg:        #f2f3f0;   /* cool paper */
  --panel:     #ffffff;
  --ink:       #1b1e24;   /* near-black, faint cool bias */
  --dim:       #616772;   /* chosen neutral, not pure grey */
  --line:      #d8dbd6;
  --soon-bg:   #ececea;

  /* Accent — ink-blue in light (option B) */
  --accent:      #1f4e79;
  --accent-soft: #e2ebf3;
  --on-accent:   #ffffff;

  /* Semantic state — separate from the accent hue */
  --good:      #2f7d54;  --good-soft: #e0efe6;
  --bad:       #b0561f;  --bad-soft:  #f4e6da;
  --flag:      #b0561f;

  /* Finding kinds (The Once-Over) — mapped onto the new palette */
  --k-missing:  #b0561f;  --k-missing-bg:  #f4e6da;
  --k-buried:   #1f4e79;  --k-buried-bg:   #e2ebf3;
  --k-stale:    #8a6d1a;  --k-stale-bg:    #f3ecd6;
  --k-conflict: #5b4a8a;  --k-conflict-bg: #e9e5f2;

  /* Ghost-button border follows the ink in light */
  --btn-ghost-line: #1b1e24;

  /* ---- Back-compat aliases: older app CSS references these ----
     Keep them pointed at the new tokens so nothing breaks while we
     migrate app.css off them. */
  --card:        var(--panel);
  --muted:       var(--dim);
  --border:      var(--line);
  --danger:      var(--bad);

  /* Type */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- After Dark, dark ground --- */
    --bg:      #141319;
    --panel:   #1c1b23;
    --ink:     #ece9f2;
    --dim:     #9b96a8;
    --line:    #302d3a;
    --soon-bg: #262430;

    /* Accent — brass in dark (option B) */
    --accent:      #d9a441;
    --accent-soft: #382d1a;
    --on-accent:   #1a1408;

    --good:  #6fb98f;  --good-soft: rgba(111,185,143,.13);
    --bad:   #d97a6c;  --bad-soft:  rgba(217,122,108,.14);
    --flag:  #d99a6c;

    --k-missing:  #d97a6c;  --k-missing-bg:  rgba(217,122,108,.14);
    --k-buried:   #d9a441;  --k-buried-bg:   rgba(217,164,65,.14);
    --k-stale:    #cdb46a;  --k-stale-bg:    rgba(205,180,106,.14);
    --k-conflict: #a996d6;  --k-conflict-bg: rgba(169,150,214,.16);

    --btn-ghost-line: #4a4656;
  }
}

/* Viewer toggle overrides the media query in BOTH directions. */
:root[data-theme="light"] {
  --bg: #f2f3f0; --panel: #ffffff; --ink: #1b1e24; --dim: #616772;
  --line: #d8dbd6; --soon-bg: #ececea;
  --accent: #1f4e79; --accent-soft: #e2ebf3; --on-accent: #ffffff;
  --good: #2f7d54; --good-soft: #e0efe6; --bad: #b0561f; --bad-soft: #f4e6da; --flag: #b0561f;
  --k-missing: #b0561f; --k-missing-bg: #f4e6da; --k-buried: #1f4e79; --k-buried-bg: #e2ebf3;
  --k-stale: #8a6d1a; --k-stale-bg: #f3ecd6; --k-conflict: #5b4a8a; --k-conflict-bg: #e9e5f2;
  --btn-ghost-line: #1b1e24;
}
:root[data-theme="dark"] {
  --bg: #141319; --panel: #1c1b23; --ink: #ece9f2; --dim: #9b96a8;
  --line: #302d3a; --soon-bg: #262430;
  --accent: #d9a441; --accent-soft: #382d1a; --on-accent: #1a1408;
  --good: #6fb98f; --good-soft: rgba(111,185,143,.13); --bad: #d97a6c; --bad-soft: rgba(217,122,108,.14); --flag: #d99a6c;
  --k-missing: #d97a6c; --k-missing-bg: rgba(217,122,108,.14); --k-buried: #d9a441; --k-buried-bg: rgba(217,164,65,.14);
  --k-stale: #cdb46a; --k-stale-bg: rgba(205,180,106,.14); --k-conflict: #a996d6; --k-conflict-bg: rgba(169,150,214,.16);
  --btn-ghost-line: #4a4656;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* Dark gets After Dark's faint warm light from the top-right. */
@media (prefers-color-scheme: dark) {
  body { background:
    radial-gradient(130% 90% at 84% -10%, rgba(217,164,65,.08), transparent 62%), var(--bg); }
}
:root[data-theme="dark"] body { background:
  radial-gradient(130% 90% at 84% -10%, rgba(217,164,65,.08), transparent 62%), var(--bg); }
:root[data-theme="light"] body { background: var(--bg); }

.wrap { max-width: 820px; margin: 0 auto; padding: 40px 22px 72px; }

/* ---- Type ---- */
.eyebrow {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
h1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 8px; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 28px 0 12px; text-wrap: balance; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 4px; }
p.lede, .lede { color: var(--dim); margin: 0 0 24px; }

a { color: var(--accent); text-underline-offset: 2px; }

/* ---- The wordmark ---- */
.mark { font: 800 19px/1 var(--font-body); letter-spacing: -.02em; color: var(--ink); }
.mark b { color: var(--accent); font-weight: 800; }

/* ---- Cards ---- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; margin-bottom: 16px;
}

/* ---- Forms ---- */
label { display: block; font-size: 13px; color: var(--dim); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit;
}
input[type="file"] { padding: 6px 0; border: none; background: none; }
textarea { min-height: 120px; resize: vertical; }

/* ---- Buttons ---- */
button, .btn {
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: 8px; padding: 11px 18px; font: 600 14px/1 var(--font-body); cursor: pointer;
  margin-top: 14px;
}
button.secondary, .btn.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--btn-ghost-line);
}
button.danger { background: var(--bad-soft); color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Bits ---- */
.msg-error { color: var(--bad); font-size: 14px; margin-top: 10px; }
.msg-ok { color: var(--good); font-size: 14px; margin-top: 10px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pill {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { color: var(--dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
code.address {
  display: block; background: var(--accent-soft); padding: 10px 12px;
  border-radius: 8px; font: 13px/1.5 var(--font-mono); word-break: break-all; margin-top: 6px;
}

/* ---- Dropdown (Nightbell dashboard) ---- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); min-width: 170px; z-index: 10; overflow: hidden;
}
.dropdown-menu.open { display: block; }
.dropdown-menu button {
  display: block; width: 100%; text-align: left; background: none; color: var(--ink);
  border: none; border-radius: 0; margin: 0; padding: 10px 14px; font: inherit; cursor: pointer;
}
.dropdown-menu button:hover { background: var(--accent-soft); }
.dropdown-menu button + button { border-top: 1px solid var(--line); }

/* ---- Numbered stat grid (Call Sheet) — shared by The Once-Over ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 4px 0 8px; }
.stat-grid .stat { background: var(--panel); padding: 14px 15px; text-align: left; }
.stat-grid .stat .n { font-family: var(--font-display); font-size: 27px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-grid .stat .l { font: 700 9px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-top: 7px; }
.stat-grid .stat.flag .n { color: var(--flag); }

/* ---- Numbered tool index (the "five" motif) ---- */
.tool-index { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.tool-index .tool { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.tool-index .tool:last-child { border-bottom: 0; }
.tool-index .idx { font: 700 12px/1 var(--font-mono); color: var(--accent); }
.tool-index .nm { font-weight: 700; font-size: 14px; color: var(--ink); }
.tool-index .desc { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.tool-index .st { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 6px 8px; white-space: nowrap; }
.tool-index .st.soon { color: var(--dim); background: var(--soon-bg); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}