/* Tenancy Ops mockup pack - shared design system */

:root{
  --ground:#F3F5F4; --surface:#FFFFFF; --sunk:#EAEEEC; --sunk2:#E1E7E3;
  --ink:#141A17; --muted:#5E6A64; --faint:#8D9993; --line:#DEE4E1;
  --accent:#1F5D45; --accent-soft:#E3EFE9;
  --ok:#1F7A4D; --ok-soft:#E2F3E9;
  --warn:#9A6408; --warn-soft:#FBF0DC;
  --crit:#A93B2D; --crit-soft:#FAE7E4;
  --info:#1D5B8F; --info-soft:#E4EEF7;
  --nav-bg:#141A17; --nav-ink:#F1F4F2; --nav-dim:rgba(241,244,242,.62);
  --nav-hover:rgba(255,255,255,.11); --on-accent:#FFFFFF;
  --ui:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#0D1110; --surface:#222B27; --sunk:#121716; --sunk2:#1D2422;
  --ink:#E5EAE7; --muted:#95A19B; --faint:#6C7973; --line:#262E2A;
  --accent:#57B187; --accent-soft:#16261E;
  --ok:#4FB07C; --ok-soft:#12241A;
  --warn:#D3A052; --warn-soft:#241C0E;
  --crit:#DD8073; --crit-soft:#26100D;
  --info:#6FA8DC; --info-soft:#0F1D28;
    --nav-bg:#1D2422; --nav-ink:#EAEFEC; --nav-dim:rgba(234,239,236,.58);
    --nav-hover:rgba(255,255,255,.09); --on-accent:#0B100E;
}}
:root[data-theme="dark"]{
  --ground:#0D1110; --surface:#222B27; --sunk:#121716; --sunk2:#1D2422;
  --ink:#E5EAE7; --muted:#95A19B; --faint:#6C7973; --line:#262E2A;
  --accent:#57B187; --accent-soft:#16261E;
  --ok:#4FB07C; --ok-soft:#12241A;
  --warn:#D3A052; --warn-soft:#241C0E;
  --crit:#DD8073; --crit-soft:#26100D;
  --info:#6FA8DC; --info-soft:#0F1D28;
  --nav-bg:#1D2422; --nav-ink:#EAEFEC; --nav-dim:rgba(234,239,236,.58);
  --nav-hover:rgba(255,255,255,.09); --on-accent:#0B100E;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.5}
h1,h2,h3,h4{margin:0}
a{color:var(--accent)}

/* ---------- page nav ----------
   The bar is app chrome and stays dark in BOTH themes, so its text colours
   are taken from --nav-* tokens rather than --ink / --ground, which invert. */
.topnav{
  background:var(--nav-bg);color:var(--nav-ink);position:sticky;top:0;z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .35rem;padding:.55rem 1.4rem;
}
.topnav .home{font-weight:700;font-size:.82rem;margin-right:.9rem;text-decoration:none;color:var(--nav-ink);display:flex;align-items:center;gap:.45rem}
.topnav .home .mk{width:1.1rem;height:1.1rem;border-radius:3px;background:var(--accent);display:grid;place-items:center;font-size:.58rem;color:var(--on-accent)}
.topnav a.s{
  font-size:.76rem;color:var(--nav-dim);text-decoration:none;padding:.3rem .6rem;border-radius:3px;
}
.topnav a.s:hover{background:var(--nav-hover);color:var(--nav-ink)}
.topnav a.s:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.topnav a.s[aria-current="page"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.topnav .step{font-family:var(--mono);font-size:.6rem;opacity:.6;margin-right:.15rem}

/* ---------- page head ---------- */
.wrap{max-width:80rem;margin:0 auto;padding:0 1.4rem}
.phead{padding:2.2rem 0 0}
.phead .eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.phead h1{font-size:clamp(1.45rem,3.2vw,2rem);font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem}
.phead p{max-width:46rem;color:var(--muted);margin:0;font-size:.97rem}

/* ---------- lane colours ---------- */
.sw-agent{background:var(--info)} .sw-sys{background:var(--accent)}
.sw-staff{background:var(--warn)} .sw-gov{background:var(--crit)}

/* ---------- you are here ---------- */
.where{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;
  margin-top:1.2rem;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:4px;background:var(--surface);font-size:.77rem
}
.where .lbl{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-right:.45rem
}
.where .stg{
  display:inline-flex;align-items:center;gap:.38rem;padding:.24rem .6rem;border-radius:99px;
  color:var(--muted);text-decoration:none;white-space:nowrap;border:1px solid transparent
}
.where .stg:hover{background:var(--sunk);color:var(--ink)}
.where .stg:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.where .stg .d{width:.5rem;height:.5rem;border-radius:2px;flex:none}
.where .stg.now{background:var(--ink);color:var(--ground);font-weight:600}
.where .stg.rel{border-color:var(--accent);color:var(--accent)}
.where .arw{color:var(--faint);opacity:.5;flex:none;font-size:.8rem}
.where .at{
  margin-left:auto;font-family:var(--mono);font-size:.67rem;color:var(--accent);white-space:nowrap
}
@media (max-width:820px){
  .where .at{margin-left:0;width:100%;padding-top:.35rem;border-top:1px solid var(--line);margin-top:.25rem}
}

/* ---------- mock window ---------- */
.window{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface);margin-top:1.4rem}
.titlebar{background:var(--sunk);border-bottom:1px solid var(--line);padding:.5rem .85rem;display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;color:var(--faint)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.scroller{overflow-x:auto}

.app{display:grid;grid-template-columns:12.5rem 1fr}
@media (max-width:860px){.app{grid-template-columns:1fr} .side{display:none}}
.side{background:var(--sunk);border-right:1px solid var(--line);padding:1rem .7rem;font-size:.83rem}
.brand{font-weight:700;font-size:.9rem;padding:0 .45rem 1rem;display:flex;align-items:center;gap:.45rem}
.brand .mk{width:1.15rem;height:1.15rem;border-radius:3px;background:var(--accent);display:grid;place-items:center;color:var(--on-accent);font-size:.62rem}
.side .grp{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:.85rem .45rem .3rem}
.side a{display:flex;justify-content:space-between;align-items:center;gap:.4rem;padding:.42rem .45rem;border-radius:3px;color:var(--muted);text-decoration:none}
.side a:hover{background:var(--surface);color:var(--ink)}
.side a.cur{background:var(--accent);color:var(--on-accent);font-weight:600}
.side a .n{font-family:var(--mono);font-size:.68rem;font-variant-numeric:tabular-nums;opacity:.75}

.main{padding:1.2rem 1.4rem 2rem;min-width:0}
.scroller .main{min-width:44rem}
.mhead{display:flex;flex-wrap:wrap;gap:.7rem;align-items:baseline;margin-bottom:1.1rem}
.mhead h2{font-size:1.15rem;font-weight:600;letter-spacing:-.015em}
.mhead .sub{font-size:.82rem;color:var(--muted)}
.mhead .acts{margin-left:auto;display:flex;gap:.45rem;flex-wrap:wrap}

/* ---------- controls ---------- */
.btn{font-family:var(--ui);font-size:.79rem;font-weight:500;padding:.4rem .8rem;border-radius:3px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.danger{background:var(--crit-soft);border-color:var(--crit);color:var(--crit)}
.btn.sm{font-size:.73rem;padding:.28rem .58rem}
input.fld,select.fld,textarea.fld{
  font-family:var(--ui);font-size:.83rem;padding:.4rem .55rem;border:1px solid var(--line);
  border-radius:3px;background:var(--surface);color:var(--ink);width:100%
}
input.fld:focus,select.fld:focus,textarea.fld:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.fld.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.pill{font-size:.76rem;padding:.28rem .65rem;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--muted);cursor:pointer}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:500}
.filters{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem;align-items:center}
.filters .sp{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--faint)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem;margin-bottom:1.1rem}
.stat{border:1px solid var(--line);border-radius:4px;padding:.7rem .85rem;background:var(--surface)}
.stat .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}
.stat .v{font-size:1.45rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .m{font-size:.72rem;color:var(--muted);margin-top:.12rem}
.stat.risk{border-color:var(--crit);background:var(--crit-soft)}
.stat.risk .v,.stat.risk .k{color:var(--crit)}

/* ---------- tables ---------- */
table.q{width:100%;border-collapse:collapse;font-size:.82rem;background:var(--surface);border:1px solid var(--line);border-radius:4px}
table.q th{text-align:left;padding:.5rem .7rem;background:var(--sunk);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
table.q td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.q tr:last-child td{border-bottom:none}
table.q tbody tr:hover{background:var(--sunk)}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref{font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--ink)}
.who{font-weight:500}
.sub2{font-size:.73rem;color:var(--faint)}

.tag{display:inline-block;font-size:.66rem;font-weight:600;padding:.18rem .45rem;border-radius:2px;white-space:nowrap}
.tag.draft{background:var(--accent-soft);color:var(--accent)}
.tag.stamp{background:var(--sunk2);color:var(--muted)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.crit{background:var(--crit-soft);color:var(--crit)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}

.st{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;white-space:nowrap}
.st .b{width:7px;height:7px;border-radius:50%;flex:none}
.st.paid .b{background:var(--accent)}
.st.review .b{background:var(--warn)}
.st.lhdn .b{background:var(--info)}
.st.done .b{background:var(--ok)}
.st.wait .b{background:var(--faint)}
.st.hold .b{background:var(--crit)}

.sla{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.72rem;font-variant-numeric:tabular-nums}
.sla .bar{width:2.6rem;height:4px;border-radius:2px;background:var(--line);overflow:hidden;flex:none}
.sla .bar i{display:block;height:100%}
.sla.ok{color:var(--muted)} .sla.ok .bar i{background:var(--ok)}
.sla.warn{color:var(--warn);font-weight:600} .sla.warn .bar i{background:var(--warn)}
.sla.crit{color:var(--crit);font-weight:700} .sla.crit .bar i{background:var(--crit)}

/* ---------- cards / panels ---------- */
.cols{display:grid;gap:1rem;align-items:start}
.cols.c2{grid-template-columns:1.5fr 1fr}
.cols.c2e{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.cols.c2,.cols.c2e{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:4px;background:var(--surface);overflow:hidden}
.card > h3{font-size:.8rem;font-weight:600;padding:.6rem .8rem;background:var(--sunk);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.5rem}
.card > h3 .r{margin-left:auto;font-family:var(--mono);font-size:.68rem;font-weight:400;color:var(--faint)}
.card .body{padding:.8rem}
.card.attn{border-color:var(--warn)}
.card.attn > h3{background:var(--warn-soft);color:var(--warn);border-bottom-color:var(--warn)}

dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.42rem .9rem;margin:0;font-size:.83rem}
dl.kv dt{color:var(--faint);white-space:nowrap}
dl.kv dd{margin:0;font-weight:500}

/* ---------- money breakdown ---------- */
table.calc{width:100%;border-collapse:collapse;font-size:.83rem}
table.calc td{padding:.35rem 0;border-bottom:1px solid var(--line)}
table.calc td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.calc tr.tot td{border-top:2px solid var(--ink);border-bottom:none;font-weight:700;padding-top:.5rem}
table.calc tr.sub td{color:var(--faint);font-size:.76rem;border-bottom:none;padding:0 0 .3rem}
table.calc tr.diff td{color:var(--crit);font-weight:600}

/* ---------- documents ---------- */
.doc{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.82rem}
.doc:last-child{border-bottom:none}
.doc .ic{width:1.9rem;height:2.3rem;border:1px solid var(--line);border-radius:2px;background:var(--sunk);display:grid;place-items:center;font-family:var(--mono);font-size:.52rem;color:var(--faint);flex:none}
.doc .nm{flex:1;min-width:0}
.doc .nm b{display:block;font-weight:500}
.doc .nm span{font-size:.72rem;color:var(--faint)}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;font-size:.81rem}
.tl li{display:grid;grid-template-columns:.8rem 1fr;gap:.65rem;padding:.42rem 0;position:relative}
.tl li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);margin-top:.42rem}
.tl li.on::before{background:var(--accent)}
.tl li.alert::before{background:var(--crit)}
.tl .w{font-size:.72rem;color:var(--faint);display:block}

/* ---------- annotations ---------- */
.pin{
  display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:.6rem;font-weight:600;
  vertical-align:middle;margin-left:.3rem;flex:none
}
.legend{margin-top:1.4rem;border:1px solid var(--line);border-radius:4px;background:var(--surface);overflow:hidden}
.legend > h3{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:.65rem .9rem;background:var(--sunk);border-bottom:1px solid var(--line)}
.legend ol{list-style:none;margin:0;padding:0}
.legend li{display:grid;grid-template-columns:1.6rem 1fr;gap:.3rem .7rem;padding:.75rem .9rem;border-bottom:1px solid var(--line)}
.legend li:last-child{border-bottom:none}
.legend .no{font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--accent);padding-top:.1rem}
.legend .fn{font-weight:600;font-size:.88rem}
.legend .ds{grid-column:2;font-size:.84rem;color:var(--muted);margin-top:.15rem}
.legend .ds b{color:var(--ink);font-weight:600}

/* ---------- notes ---------- */
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);padding:.85rem 1.1rem;font-size:.87rem;color:var(--muted);margin-top:1.3rem;border-radius:0 3px 3px 0;max-width:52rem}
.note b{color:var(--ink);font-weight:600}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note.crit{border-left-color:var(--crit);background:var(--crit-soft)}
.note p{margin:0 0 .6rem} .note p:last-child{margin:0}

footer{max-width:80rem;margin:3rem auto 0;padding:1.2rem 1.4rem 4rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;color:var(--faint)}

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