/* Surveyor's Cabinet — shared styling for the Steam Rolled pages outside the board.
   The same material world as styles.css: an ebonized cabinet holding vellum
   folios, brass reserved for readings and thresholds, oxblood and verdigris for
   state. One committed look, so there is no theme switch. */

:root {
  color-scheme: dark;
  --ebon: #171511;
  --wood: #2b241d;
  --wood-raised: #382e24;
  --wood-line: #54463a;
  --vellum: #e8dfcc;
  --vellum-hi: #f3ecdc;
  --vellum-low: #d8ccb4;
  --ink: #29261f;
  --ink-soft: #675f51;
  --rule: #a49372;
  --brass: #947631;
  --brass-hi: #c4a75f;
  --brass-pale: #dfcca0;
  --on-wood: #e8dfcc;
  --on-wood-soft: #b9ad97;
  --oxblood: #783a3e;
  --oxblood-lit: #e3a9ad;
  --verdigris: #4f7168;
  --verdigris-lit: #a9cbbf;
  --blue: #355f76;
  --serif: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --narrow: 'Archivo Narrow', 'Arial Narrow', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ebon);
  color: var(--on-wood);
  font: 500 14px/1.4 var(--narrow);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.folio :focus-visible, .modal :focus-visible { outline-color: var(--blue); }

/* ── Cabinet header ─────────────────────────────────────────────────────── */
.cab {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 24%, rgba(0,0,0,.16)),
    linear-gradient(180deg, var(--wood-raised), var(--ebon));
  border-bottom: 2px solid var(--brass);
}
.wordmark {
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-pale); line-height: 1.1;
}
.wordmark small {
  display: block; font-family: var(--narrow); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; color: var(--on-wood-soft);
}
.spacer { flex: 1; }
.nav { display: flex; gap: 4px; }
.navlink {
  color: var(--on-wood-soft); text-decoration: none; font-weight: 600; font-size: 13px;
  padding: 6px 10px; border-radius: 3px; border: 1px solid transparent;
}
.navlink:hover { color: var(--brass-pale); border-color: var(--wood-line); }
.navlink[aria-current="page"] { color: var(--brass-pale); border-color: var(--brass); }
.who { font-size: 13px; color: var(--on-wood-soft); }
.who b { color: var(--vellum-hi); font-weight: 700; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: 3px; text-decoration: none;
  background: transparent; border: 1px solid var(--wood-line); color: var(--on-wood);
  font-weight: 600; font-size: 13px; white-space: nowrap;
}
.btn:hover { border-color: var(--brass-hi); color: var(--brass-pale); }
.btn.primary { background: var(--brass); border-color: var(--brass); color: #1b1610; }
.btn.primary:hover { background: var(--brass-hi); border-color: var(--brass-hi); color: #1b1610; }
.btn.danger { border-color: #93545a; color: var(--oxblood-lit); }
.btn.danger:hover { background: rgba(120,58,62,.3); color: var(--vellum-hi); }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.folio .btn, .modal .btn { color: var(--ink); border-color: var(--rule); }
.folio .btn:hover, .modal .btn:hover { color: var(--ink); border-color: var(--ink); background: var(--vellum-hi); }
.folio .btn.primary, .modal .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--vellum-hi); }
.folio .btn.primary:hover, .modal .btn.primary:hover { background: #3b362c; color: var(--vellum-hi); }
.modal .btn.danger { background: var(--oxblood); border-color: var(--oxblood); color: var(--vellum-hi); }
.modal .btn.danger:hover { background: #8d464b; }

/* ── State pill ─────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid;
  font-weight: 700; font-size: 13px;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.ok  { color: var(--verdigris-lit); border-color: var(--verdigris); background: rgba(79,113,104,.22); }
.pill.bad { color: var(--oxblood-lit); border-color: #a85a5f; background: rgba(120,58,62,.32); }

/* ── Folios ─────────────────────────────────────────────────────────────── */
.folio {
  color-scheme: light;
  background: var(--vellum); color: var(--ink);
  border-radius: 3px; min-height: 0;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.35);
}
.folio-head { padding: 12px 14px 11px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 9px; }
.folio h2 {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 19px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-wrap: balance;
}
.folio h2 span { font-family: var(--narrow); font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.folio-body { overflow: auto; min-height: 0; flex: 1; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.input, .textarea {
  width: 100%; padding: 7px 10px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--vellum-hi); color: var(--ink); font-size: 15px;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: #8a7d66; }
.msg { font-size: 13px; font-weight: 600; min-height: 18px; margin: 0; }
.msg.bad { color: var(--oxblood); }
.msg.ok { color: var(--verdigris); }
.note { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; padding: 20px;
  display: grid; place-items: center; background: rgba(10,8,6,.72);
}
.modal {
  color-scheme: light;
  width: 100%; max-width: 420px; padding: 20px 22px; border-radius: 4px;
  background: var(--vellum); color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 12px;
}
.modal h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px; text-wrap: balance; }
.modal p { margin: 0; color: var(--ink-soft); }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Whole-page problems (server unreachable) ───────────────────────────── */
.fatal { max-width: 560px; margin: 60px auto; }
.fatal .folio-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }