/* Living Traditions — portal styles. Palette and type follow the Living Map:
   pale sage paper, forest ink, natural-dye accents. */
:root{
  --paper:#e7ebe4; --surface:#fbfcfa; --surface-2:#f1f4ee; --rule:#c7d0c2; --rule-soft:#dde3d8;
  --ink:#16201a; --ink-2:#55635a; --ink-3:#7d8b82;
  --accent:#1f7a6d; --accent-ink:#fff; --accent-soft:#d8e8e4; --warn:#a8453c; --warn-soft:#f4dedb;
  --ok:#2d6a4f; --ok-soft:#dcebe2;
  --shadow:0 1px 2px rgba(22,32,26,.06), 0 8px 24px rgba(22,32,26,.08);
  --f-ui:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:8px;
  --ev-established-bg:#dcebe2; --ev-established:#1d5a3c; --ev-established-line:#b6d4c2;
  --ev-explained-bg:#dde7f2;   --ev-explained:#234e7a;   --ev-explained-line:#b9cce2;
  --ev-practised-bg:#f5e9cf;   --ev-practised:#7a560a;   --ev-practised-line:#e6d09e;
  --ev-questioned-bg:#f4dedb;  --ev-questioned:#8a3128;  --ev-questioned-line:#e5bbb5;
  --ev-unclassified-bg:#eef1eb;--ev-unclassified:#6b786f;--ev-unclassified-line:#d3dacf;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121917; --surface:#1a2220; --surface-2:#212b28; --rule:#2f3b37; --rule-soft:#26312d;
    --ink:#e9efea; --ink-2:#9aa9a1; --ink-3:#7b8a82; --accent:#4cbfae; --accent-ink:#0d1f1b; --accent-soft:#1d3b37;
    --warn:#e08c84; --warn-soft:#3b2421; --ok:#7fc8a0; --ok-soft:#1d3328; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --ev-established-bg:#1d3328; --ev-established:#8fd0ac; --ev-established-line:#2c4b3a;
    --ev-explained-bg:#1c2a3a;   --ev-explained:#9cc0e6;   --ev-explained-line:#2c3f55;
    --ev-practised-bg:#33290f;   --ev-practised:#e3c27a;   --ev-practised-line:#4d3e18;
    --ev-questioned-bg:#3b2421;  --ev-questioned:#eda49b;  --ev-questioned-line:#573431;
    --ev-unclassified-bg:#212b28;--ev-unclassified:#9aa9a1;--ev-unclassified-line:#2f3b37;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121917; --surface:#1a2220; --surface-2:#212b28; --rule:#2f3b37; --rule-soft:#26312d;
  --ink:#e9efea; --ink-2:#9aa9a1; --ink-3:#7b8a82; --accent:#4cbfae; --accent-ink:#0d1f1b; --accent-soft:#1d3b37;
  --warn:#e08c84; --warn-soft:#3b2421; --ok:#7fc8a0; --ok-soft:#1d3328; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --ev-established-bg:#1d3328; --ev-established:#8fd0ac; --ev-established-line:#2c4b3a;
  --ev-explained-bg:#1c2a3a;   --ev-explained:#9cc0e6;   --ev-explained-line:#2c3f55;
  --ev-practised-bg:#33290f;   --ev-practised:#e3c27a;   --ev-practised-line:#4d3e18;
  --ev-questioned-bg:#3b2421;  --ev-questioned:#eda49b;  --ev-questioned-line:#573431;
  --ev-unclassified-bg:#212b28;--ev-unclassified:#9aa9a1;--ev-unclassified-line:#2f3b37;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--f-ui);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;font-weight:600}
h1{font-size:28px} h2{font-size:20px} h3{font-size:16px}
p{margin:0 0 1em}
.muted{color:var(--ink-2)} .small{font-size:13px} .tiny{font-size:12px}
.eyebrow{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--f-mono)}

/* header */
#top{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
#top .in{max-width:1180px;margin:0 auto;padding:0 16px;height:58px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand .mark{color:var(--accent);font-size:20px}
.brand b{font-size:17px;font-weight:600}
.brand small{color:var(--ink-3);font-size:12px}
#nav{display:flex;gap:2px;align-items:center;flex:1;overflow-x:auto;scrollbar-width:none}
#nav a{color:var(--ink-2);text-decoration:none;padding:7px 10px;border-radius:6px;font-size:14px;white-space:nowrap}
#nav a:hover{color:var(--ink);background:var(--surface-2)}
#nav a.on{color:var(--accent);background:var(--accent-soft)}
#nav .badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:4px;border-radius:999px;background:var(--warn);color:#fff;font-size:11px;text-align:center}
#who{display:flex;gap:8px;align-items:center;white-space:nowrap;font-size:13.5px}
#menu-btn{display:none}
@media (max-width:860px){
  .brand small{display:none}
  #menu-btn{display:inline-flex}
  #nav{position:absolute;top:58px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:8px 16px;display:none}
  #nav.open{display:flex}
  #who .uname{display:none}
  #top .in{gap:8px}
  .brand b{font-size:15.5px}
  #who .btn{padding:6px 9px}
  #who .long{display:none}
}

main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:28px 16px 48px}
main.narrow{max-width:760px}
footer{border-top:1px solid var(--rule);color:var(--ink-3);font-size:12.5px}
footer .in{max-width:1180px;margin:0 auto;padding:16px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* controls */
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;font:500 14px/1 var(--f-ui);padding:9px 14px;border-radius:7px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.danger{color:var(--warn);border-color:var(--warn)}
.btn.danger:hover{background:var(--warn);color:#fff}
.btn.quiet{border-color:transparent;background:transparent}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],select,textarea{
  font:400 14.5px/1.4 var(--f-ui);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:9px 10px;width:100%;max-width:100%}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
label.f{display:block;margin-bottom:14px}
label.f > span{display:block;font-size:13px;font-weight:500;margin-bottom:5px}
label.f > span .req{color:var(--warn)}
label.f .hint{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
fieldset{border:1px solid var(--rule);border-radius:var(--r);padding:16px 16px 4px;margin:0 0 18px;background:var(--surface)}
legend{padding:0 6px;font-weight:600;font-size:14px}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:18px}
.stack > * + *{margin-top:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.notice{padding:10px 12px;border-radius:7px;font-size:14px;border:1px solid var(--rule);background:var(--surface-2)}
.notice.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.notice.err{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.notice.caution{background:#fbefe0;border-color:#ecd2a9;color:#6b3d06}
:root[data-theme="dark"] .notice.caution{background:#3a2a14;color:#f1d3a6;border-color:#5b4322}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .notice.caution{background:#3a2a14;color:#f1d3a6;border-color:#5b4322}}

/* evidence badge */
.ev{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--f-ui);padding:5px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.ev::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.ev[data-c="established"]{background:var(--ev-established-bg);color:var(--ev-established);border-color:var(--ev-established-line)}
.ev[data-c="explained"]{background:var(--ev-explained-bg);color:var(--ev-explained);border-color:var(--ev-explained-line)}
.ev[data-c="practised"]{background:var(--ev-practised-bg);color:var(--ev-practised);border-color:var(--ev-practised-line)}
.ev[data-c="questioned"]{background:var(--ev-questioned-bg);color:var(--ev-questioned);border-color:var(--ev-questioned-line)}
.ev[data-c="unclassified"],.ev[data-c=""]{background:var(--ev-unclassified-bg);color:var(--ev-unclassified);border-color:var(--ev-unclassified-line)}

/* evidence table (labels and what they mean) */
.evtable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.evtable th,.evtable td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--rule-soft)}
.evtable th{background:var(--surface-2);font-size:13px}
.evtable td:first-child{width:250px}
.evtable tr:last-child td{border-bottom:0}
.evtable .n{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);display:block;margin-top:8px}
@media (max-width:640px){.evtable td:first-child{width:auto}.evtable,.evtable tbody,.evtable tr,.evtable td{display:block}.evtable thead{display:none}.evtable td{border:0;padding:10px 14px 0}.evtable tr{border-bottom:1px solid var(--rule-soft);padding-bottom:12px}}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface)}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--rule-soft);text-align:left;vertical-align:top}
.tbl th{font-weight:600;font-size:12.5px;color:var(--ink-2);background:var(--surface-2);position:sticky;top:0}
.tbl tr:hover td{background:var(--surface-2)}
.tblwrap{overflow:auto;border:1px solid var(--rule);border-radius:var(--r);max-width:100%}

/* status chips */
.st{display:inline-block;font:500 11.5px/1 var(--f-ui);padding:4px 8px;border-radius:5px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--rule)}
.st.pending{background:#f5e9cf;color:#7a560a;border-color:#e6d09e}
.st.approved{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.st.rejected{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.st.create{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.st.update{background:#dde7f2;color:#234e7a;border-color:transparent}
.st.withdraw{background:var(--warn-soft);color:var(--warn);border-color:transparent}

/* practice list */
.layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:1fr}}
.filters{position:sticky;top:76px}
@media (max-width:860px){.filters{position:static}}
.plist{display:flex;flex-direction:column;gap:10px}
.pitem{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px}
.pitem:hover{border-color:var(--accent)}
.pitem h3{margin:6px 0 4px;font-size:15.5px;color:var(--ink)}
.pitem p{margin:0;color:var(--ink-2);font-size:13.5px}
.pitem .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink-3)}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px}

/* detail */
.kv{display:grid;grid-template-columns:200px 1fr;gap:4px 18px;margin:0}
.kv dt{font-size:13px;color:var(--ink-3);padding:8px 0;border-top:1px solid var(--rule-soft)}
.kv dd{margin:0;padding:8px 0;border-top:1px solid var(--rule-soft);white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:640px){.kv{grid-template-columns:1fr}.kv dd{border-top:0;padding-top:0}}

/* hero */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;margin-bottom:32px}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:34px;letter-spacing:-.01em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px}
.stat b{display:block;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.cat{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px}
.cat:hover{border-color:var(--accent)}
.cat b{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.cat b span{font-family:var(--f-mono);font-weight:400;color:var(--ink-3);font-size:13px}
.cat p{margin:6px 0 0;font-size:13px;color:var(--ink-2)}
section + section{margin-top:36px}

/* diff */
.diff td.old{background:var(--warn-soft);text-decoration:line-through;text-decoration-color:rgba(168,69,60,.4)}
.diff td.new{background:var(--ok-soft)}
.diff td{white-space:pre-wrap;overflow-wrap:anywhere;max-width:420px}

/* evidence chooser */
.evpick{display:grid;gap:8px}
.evpick label{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;padding:10px 12px;border:1px solid var(--rule);border-radius:7px;cursor:pointer;background:var(--surface)}
.evpick label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.evpick input{margin-top:3px}
.evpick small{grid-column:2;color:var(--ink-2);font-size:12.5px}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-size:14px;box-shadow:var(--shadow);z-index:99;max-width:calc(100% - 32px)}
dialog{border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);padding:20px;max-width:520px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(10,20,15,.45)}
.drop{border:2px dashed var(--rule);border-radius:10px;padding:28px;text-align:center;background:var(--surface)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.err-list{margin:4px 0 0;padding-left:18px;color:var(--warn);font-size:12.5px}
.warn-list{margin:4px 0 0;padding-left:18px;color:#8a6410;font-size:12.5px}
.evpick .ev{justify-self:start}
@media (max-width:1300px){.brand small{display:none}}
@media (max-width:860px){
  .brand{flex:1;min-width:0;overflow:hidden}
  .brand b{overflow:hidden;text-overflow:ellipsis}
  #menu-btn{order:3}
  #who{order:2}
}