/* Forest Console, on the Makor brand.
   Tokens taken from net-leg/site/css/main.css so the back office and the product share one
   visual world: paper, ink, and a single brass accent used semantically, never decoratively. */
:root{
  --paper:#F5F2EA; --paper2:#FFFFFF; --sand:#EBE6DA;
  --ink:#17140F; --ink2:rgba(23,20,15,.74); --ink3:rgba(23,20,15,.62);
  --line:rgba(23,20,15,.13); --line2:rgba(23,20,15,.30);
  --accent:#8A6D1F; --accent-ink:#7B601A;      /* brass; -ink is the AA-safe variant under 14px */
  --accent-soft:rgba(138,109,31,.10);
  --ok:#3F6B45; --ok-bg:rgba(63,107,69,.10);
  --warn:#8A6D1F; --warn-bg:rgba(138,109,31,.12);
  --crit:#8C3A2E; --crit-bg:rgba(140,58,46,.10);
  --heb:'Heebo',-apple-system,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--heb);font-weight:300;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
/* An element-type rule such as nav{display:flex} silently beats the [hidden] attribute, and the
   nav then renders on the login screen. Restore the attribute's meaning once, globally. */
[hidden]{display:none !important}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin:0 0 .15rem;letter-spacing:-.01em}
h2{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin:2rem 0 .7rem}
p{margin:0}
.sub{color:var(--ink3);font-size:.88rem;margin-bottom:1rem;font-weight:300}

/* wordmark: Playfair, preceded by the brass dot. Always Latin, always ltr. */
.wordmark{font-family:var(--serif);font-weight:400;letter-spacing:.16em;font-size:1.05rem;
  display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.wordmark-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 7px}

/* ---------- app chrome (only ever rendered once signed in) ---------- */
#shell{display:flex;min-height:100vh}
nav{width:14.5rem;flex:0 0 14.5rem;background:var(--paper2);border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;gap:.1rem;padding:1.4rem .8rem}
nav .brand{padding:.1rem .55rem 1.5rem}
nav a{padding:.5rem .55rem;border-radius:8px;color:var(--ink2);font-size:.92rem;font-weight:300;
  transition:background .2s var(--ease),color .2s var(--ease)}
nav a:hover{background:var(--sand);text-decoration:none}
nav a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:400}
nav .spacer{flex:1}
nav .who{padding:.7rem .55rem 0;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink3);
  display:flex;justify-content:space-between;align-items:center;gap:.4rem}
main{flex:1;padding:1.9rem clamp(1rem,3vw,2.4rem);max-width:78rem}
@media (max-width:760px){
  #shell{flex-direction:column}
  nav{width:auto;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.3rem;
    border:none;border-bottom:1px solid var(--line);padding:.7rem .8rem}
  nav .brand{padding:0 .4rem 0 0}
  nav .spacer,nav .who{display:none}
}

/* ---------- login: its own page, no chrome at all ---------- */
#login{min-height:100vh;display:grid;place-items:center;padding:1.5rem;position:relative;overflow:hidden}
#brain{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
.login-card{position:relative;z-index:1;width:min(24rem,100%);background:var(--paper2);
  border:1px solid var(--line);border-radius:12px;padding:2rem 1.9rem;
  box-shadow:0 1px 2px rgba(23,20,15,.04),0 24px 60px -30px rgba(23,20,15,.35)}
.login-card .wordmark{font-size:1.25rem;margin-bottom:.2rem}
.login-card .kicker{font-size:.72rem;letter-spacing:.02em;color:var(--ink3);margin-bottom:1.6rem}

/* ---------- surfaces ---------- */
.card{background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem}
.grid{display:grid;gap:.8rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
/* a document card: the title carries the weight, the path underneath is for finding it in git */
.doc-card{display:flex;flex-direction:column;gap:.15rem;color:inherit;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.doc-card:hover{border-color:var(--line2);text-decoration:none;transform:translateY(-1px)}
.doc-card b{font-weight:400;font-size:.98rem;line-height:1.4}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.tw{overflow-x:auto;background:var(--paper2);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:start;padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.7rem;letter-spacing:.06em;color:var(--ink3);font-weight:400;background:var(--sand)}
tbody tr:hover{background:var(--paper)}
tbody tr:last-child td{border-bottom:none}
.num{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;font-size:.84em}

button,.btn{font-family:var(--heb);font-weight:400;font-size:.88rem;padding:.45rem .9rem;
  border:1px solid var(--line2);background:var(--paper2);color:var(--ink);border-radius:9px;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
button:hover{background:var(--sand)}
button.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
button.primary:hover{background:#000}
button.link{border:none;background:none;color:var(--accent-ink);padding:.2rem}
button.link:hover{background:none;text-decoration:underline;text-underline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{font-family:var(--heb);font-weight:300;font-size:.92rem;padding:.5rem .65rem;
  border:1px solid var(--line2);border-radius:9px;background:var(--paper2);color:var(--ink);width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{min-height:5rem;resize:vertical}
label.f{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;color:var(--ink3);margin-bottom:.8rem}

/* Evidence-tag lineage: a small bordered pill that carries a fact, never decoration. */
.pill{font-size:.7rem;padding:.16rem .5rem;border-radius:6px;white-space:nowrap;
  border:1px solid var(--line2);color:var(--ink2);background:transparent}
.p-ok{border-color:rgba(63,107,69,.4);color:var(--ok);background:var(--ok-bg)}
.p-warn{border-color:rgba(138,109,31,.4);color:var(--accent-ink);background:var(--warn-bg)}
.p-crit{border-color:rgba(140,58,46,.4);color:var(--crit);background:var(--crit-bg)}
.p-mut{border-color:var(--line);color:var(--ink3)}
.p-acc{border-color:rgba(138,109,31,.4);color:var(--accent-ink);background:var(--accent-soft)}

.alert{border-inline-start:2px solid var(--crit);background:var(--crit-bg);color:var(--crit);
  padding:.6rem .9rem;border-radius:9px;font-size:.88rem}
.empty{color:var(--ink3);font-size:.88rem;padding:.9rem 0}
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat b{font-family:var(--serif);font-weight:400;font-size:1.8rem;font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:.72rem;color:var(--ink3);letter-spacing:.04em}

#toast{position:fixed;inset-block-end:1.3rem;inset-inline-start:1.3rem;background:var(--ink);color:var(--paper);
  padding:.65rem 1.1rem;border-radius:9px;font-size:.88rem;z-index:9;
  box-shadow:0 18px 40px -20px rgba(23,20,15,.6)}
#toast.bad{background:var(--crit)}
.timeline{display:flex;flex-direction:column;gap:.75rem}
.tl{border-inline-start:1px solid var(--line2);padding-inline-start:.85rem}
.tl .meta{font-size:.72rem;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}