/* ============================================================================
   Sanguine Ledger — shared look for the subpages.
   Tokens mirror the ones inline in index.html so every page reads as one site.
   ========================================================================== */
:root{
  --ground:#16100f;
  --surface:#1e1616;
  --surface-2:#271c1b;
  --surface-3:#30221f;
  --line:#3a2a29;
  --text:#f0e5da;
  --muted:#a3897e;
  --blood:#b4212a;
  --blood-soft:#d24a4a;
  --ember:#d98b3a;
  --spectral:#7fa8c9;
  --moss:#7d9469;
  --bone:#d8c9ad;
  --good:#7fae6a;
  --warn:#d9a13a;
  --bad:#d24a4a;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --ground:#f3ece1;
  --surface:#fffaf3;
  --surface-2:#efe5d7;
  --surface-3:#e6d9c7;
  --line:#d8c9b6;
  --text:#2a1d1a;
  --muted:#7a6458;
  --blood:#9c1b23;
  --blood-soft:#b93a3a;
  --ember:#a8641c;
  --spectral:#3d6f97;
  --moss:#556b42;
  --bone:#8a7451;
  --good:#4f7d3c;
  --warn:#9a6a12;
  --bad:#b0302f;
  --shadow:0 10px 30px rgba(60,40,30,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:Spectral,Georgia,"Times New Roman",serif;font-size:15px;line-height:1.5;
}
h1,h2,h3,h4{font-family:Cinzel,"Cormorant SC",Georgia,serif;margin:0;text-wrap:balance;font-weight:700}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- app frame: rail + stage ---------- */
.app{display:grid;grid-template-columns:340px 1fr;height:100vh}
.rail{
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0
}
.rail-head{padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blood-soft);margin:0 0 8px
}
.rail-head h1{font-size:24px;line-height:1.1;letter-spacing:.02em}
.rail-head p{margin:9px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}
.rail-body{padding:16px 22px 24px;overflow-y:auto;flex:1;min-height:0}
.stage{position:relative;min-width:0;overflow:auto;
  background:radial-gradient(120% 90% at 22% 0%, rgba(180,33,42,.10), transparent 60%), var(--ground)}

/* site navigation: the three pages of the ledger */
.sitenav{display:flex;gap:4px;margin:14px 0 0;flex-wrap:wrap}
.sitenav a{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);
  padding:5px 9px;border:1px solid var(--line);border-radius:2px
}
.sitenav a:hover{color:var(--ember);border-color:var(--ember)}
.sitenav a[aria-current="page"]{color:var(--text);border-color:var(--blood);background:var(--surface-2)}
/* language switch, identical on all three pages */
.langswitch{display:inline-flex;margin:12px 0 0;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.langswitch button{
  background:transparent;border:0;border-right:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;padding:4px 9px
}
.langswitch button:last-child{border-right:0}
.langswitch button:hover{color:var(--ember)}
.langswitch button[aria-pressed="true"]{color:var(--text);background:var(--surface-2)}

/* ---------- form atoms ---------- */
.field{margin-bottom:18px}
.field > label,.label{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px
}
.input,select.input{
  width:100%;padding:8px 10px;background:var(--ground);color:var(--text);
  border:1px solid var(--line);border-radius:3px;font-size:14px
}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.btn{
  padding:8px 11px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase
}
.btn:hover{border-color:var(--ember);color:var(--ember)}
.btn.primary{border-color:var(--blood);background:color-mix(in srgb,var(--blood) 22%,var(--surface-2))}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  padding:5px 9px;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:6px
}
.chip[aria-pressed="true"]{color:var(--text);border-color:var(--ember);background:var(--surface-2)}
.note{font-size:12.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:14px;margin:0}
.note b{color:var(--text);font-weight:600}
.pic{object-fit:contain;flex:none;vertical-align:middle;background:var(--surface-2);
  border:1px solid var(--line);border-radius:3px;padding:1px}
.wl{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ember) 45%,transparent)}
.wl:hover{color:var(--ember);border-bottom-color:var(--ember)}

/* status pills: meaning carried by shape and word, not colour alone */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  border:1px solid currentColor;white-space:nowrap
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.good{color:var(--good)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)}
.pill.muted{color:var(--muted)}

/* floating tooltip */
.tip{
  position:fixed;z-index:50;max-width:340px;pointer-events:none;opacity:0;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blood);
  border-radius:3px;box-shadow:var(--shadow);padding:11px 13px;font-size:13px;
  transition:opacity .1s ease
}
.tip.on{opacity:1}
.tip .kind{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blood-soft);margin-bottom:6px}
.tip .head{font-family:Cinzel,"Cormorant SC",serif;font-size:15px;line-height:1.25;margin-bottom:6px}
.tip ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.tip li{padding-left:9px;border-left:1px solid var(--line)}
.tip .sub{display:block;font-size:11px;color:var(--muted)}

.rail-head{position:relative}
.theme-toggle{position:absolute;top:16px;right:18px;padding:5px 9px;font-size:10px}

@media (max-width:900px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:100vh}
  .rail{border-right:0;border-bottom:1px solid var(--line)}
  .rail-body{overflow:visible}
}