/* LetResolve — application styles.
 *
 * The design system is lifted from the agreed mock-up (docs/mockup/), so the
 * built product and the thing everyone signed off look the same. Brand tokens
 * come from brand/palette/brand.css.
 *
 * Additions beyond the mock-up are at the bottom: real form controls (the
 * mock-up used styled divs), loading and empty states, and toasts.
 */

/* ============================================================
   LetResolve — brand tokens v1.0 (from brand.css)
   ============================================================ */
:root{
  /* brand core */
  --navy:#012B5D; --blue:#018DC5; --blue-deep:#00509B;
  --teal:#017681; --green:#039762; --green-bright:#19D84A;
  --cloud:#F3F8FC; --slate:#46617F;
  --gradient:linear-gradient(90deg,#012B5D,#018DC5,#017681,#039762);

  /* surfaces & ink */
  --bg:#EDF4FA; --panel:#FFFFFF; --panel-2:#F7FBFD;
  --border:#D8E6F1; --border-strong:#BFD5E6;
  --ink:#012B5D; --ink-muted:#46617F; --ink-faint:#7791AC;
  --primary:#018DC5; --primary-ink:#01608A; --on-primary:#FFFFFF;
  --shadow:0 1px 2px rgba(1,43,93,.06),0 8px 24px -12px rgba(1,43,93,.18);
  --shadow-lg:0 24px 60px -24px rgba(1,43,93,.35);

  /* status (validated: CVD + normal-vision separation) */
  --hi:#BC2C22;   --hi-ink:#93221A;  --hi-bg:#FCEBE9;  --hi-line:#F4CFCA;
  --med:#CE9412;  --med-ink:#86600B; --med-bg:#FDF4E3; --med-line:#F2E0BB;
  --ok:#039762;   --ok-ink:#026B46;  --ok-bg:#E6F6EF;  --ok-line:#BFE6D4;
  --info:#018DC5; --info-ink:#01608A;--info-bg:#E5F3FA;--info-line:#BFE2F2;
  --prog:#017681; --prog-ink:#01565E;--prog-bg:#E4F2F3;--prog-line:#BCDFE2;
  --neut:#46617F; --neut-ink:#46617F;--neut-bg:#EDF3F9;--neut-line:#DBE7F1;

  /* logo plate: the navy half of the wordmark needs a light ground */
  --logo-plate:transparent;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --f-display:'Nunito',system-ui,-apple-system,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#04121F; --panel:#0A2137; --panel-2:#0D2942;
    --border:#1B3A57; --border-strong:#2A5178;
    --ink:#E7EFF7; --ink-muted:#9DB8D1; --ink-faint:#6E8CA9;
    --primary:#3BAEE0; --primary-ink:#7FCBEC; --on-primary:#04121F;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -24px rgba(0,0,0,.8);
    --hi:#E8695C;  --hi-ink:#F3A79D;  --hi-bg:#3A1A17;  --hi-line:#5E2A24;
    --med:#E3AE44; --med-ink:#EFC97E; --med-bg:#33260C; --med-line:#553F12;
    --ok:#2BC183;  --ok-ink:#6BD9AA;  --ok-bg:#0B2E22;  --ok-line:#13503A;
    --info:#3BAEE0;--info-ink:#7FCBEC;--info-bg:#0A2A3C; --info-line:#12455F;
    --prog:#2FA0AC;--prog-ink:#6FC7D0;--prog-bg:#08292D;--prog-line:#11454C;
    --neut:#9DB8D1;--neut-ink:#9DB8D1;--neut-bg:#132B41;--neut-line:#20415F;
    --logo-plate:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --bg:#04121F; --panel:#0A2137; --panel-2:#0D2942;
  --border:#1B3A57; --border-strong:#2A5178;
  --ink:#E7EFF7; --ink-muted:#9DB8D1; --ink-faint:#6E8CA9;
  --primary:#3BAEE0; --primary-ink:#7FCBEC; --on-primary:#04121F;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.8);
  --hi:#E8695C;  --hi-ink:#F3A79D;  --hi-bg:#3A1A17;  --hi-line:#5E2A24;
  --med:#E3AE44; --med-ink:#EFC97E; --med-bg:#33260C; --med-line:#553F12;
  --ok:#2BC183;  --ok-ink:#6BD9AA;  --ok-bg:#0B2E22;  --ok-line:#13503A;
  --info:#3BAEE0;--info-ink:#7FCBEC;--info-bg:#0A2A3C; --info-line:#12455F;
  --prog:#2FA0AC;--prog-ink:#6FC7D0;--prog-bg:#08292D;--prog-line:#11454C;
  --neut:#9DB8D1;--neut-ink:#9DB8D1;--neut-bg:#132B41;--neut-line:#20415F;
  --logo-plate:#FFFFFF;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.01em}
a{color:var(--primary-ink)}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
/* The `hidden` attribute is how the app hides what a role cannot use. Any rule
   that sets `display` — .nav's flex, for one — silently beats it, so it is
   enforced here once for every element. */
[hidden]{display:none !important}
.app[hidden]{display:none}

.side{
  background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:4px; padding:18px 12px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; padding:4px 8px 16px}
.brand img{width:170px; height:auto; display:block; background:var(--logo-plate); border-radius:9px; padding:5px 7px}
:root[data-theme="dark"] .brand img,
.acct-mark{border-radius:8px}
.navlabel{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); padding:14px 10px 6px;
}
.nav{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--ink-muted); font-weight:500; font-size:13.5px;
  text-align:left; transition:background .12s,color .12s;
}
.nav:hover{background:var(--panel-2); color:var(--ink)}
.nav[aria-current="page"]{background:var(--info-bg); color:var(--primary-ink); font-weight:600}
.nav .ic{width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7}
.nav .count{margin-left:auto; font-size:11.5px; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--border)}
.acct{display:flex; align-items:center; gap:10px; padding:8px 10px}
.acct-mark{width:30px; height:30px; flex:none}
.acct b{display:block; font-size:13px; font-family:var(--f-display); color:var(--ink)}
.acct span{display:block; font-size:11.5px; color:var(--ink-faint)}
.acct .signout{display:inline-block; margin-top:2px; font-size:11.5px; color:var(--ink-muted)}

/* Shown while the platform admin is reading a landlord's account (ADR 0010). */
.admin-banner{
  display:flex; align-items:center; gap:12px; padding:9px 26px;
  background:var(--med-bg); color:var(--med-ink); border-bottom:1px solid var(--med-line);
  font-size:13px;
}
.admin-banner span{flex:1}

/* Shown while the app waits out a normal start-up delay (web/api.js). */
.waiting-banner{
  padding:9px 26px; font-size:13px;
  background:var(--info-bg); color:var(--info-ink); border-bottom:1px solid var(--info-line);
}
.admin-banner[hidden]{display:none}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:13px 26px;
}
.topbar h1{font-size:19px}
.crumb{font-size:12px; color:var(--ink-faint); font-weight:500}
.search{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:7px 11px; width:240px; color:var(--ink-faint);
}
.search input{border:0; background:transparent; color:var(--ink); width:100%; font:inherit; outline:none}
.demo-pill{
  font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--med-ink); background:var(--med-bg); border:1px solid var(--med-line);
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.page{padding:24px 26px 56px; display:flex; flex-direction:column; gap:20px; max-width:1400px}
.page[hidden]{display:none}

/* ---------- generic bits ---------- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.card-h{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--border)}
.card-h h2{font-size:15px}
.card-h .sub{font-size:12px; color:var(--ink-faint)}
.card-b{padding:18px}
.spacer{margin-left:auto}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border-radius:var(--r-sm); border:1px solid var(--border-strong);
  background:var(--panel); color:var(--ink); font-weight:600; font-size:13px;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--panel-2); border-color:var(--primary)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.btn-primary:hover{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
.btn .ic{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2}
.btn-sm{padding:6px 11px; font-size:12.5px}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.c-open{color:var(--info-ink); background:var(--info-bg); border-color:var(--info-line)}
.c-prog{color:var(--prog-ink); background:var(--prog-bg); border-color:var(--prog-line)}
.c-hold{color:var(--neut-ink); background:var(--neut-bg); border-color:var(--neut-line)}
.c-done{color:var(--ok-ink); background:var(--ok-bg); border-color:var(--ok-line)}
.pri{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:var(--r-sm);
  font-size:11.5px; font-weight:700; font-family:var(--f-display); border:1px solid transparent;
}
.p-H{color:var(--hi-ink); background:var(--hi-bg); border-color:var(--hi-line)}
.p-M{color:var(--med-ink); background:var(--med-bg); border-color:var(--med-line)}
.p-L{color:var(--neut-ink); background:var(--neut-bg); border-color:var(--neut-line)}
.flagset{display:flex; gap:5px}
.flag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:var(--r-sm);
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
}
.f-damp{color:var(--prog-ink); background:var(--prog-bg); border:1px solid var(--prog-line)}
.f-out{color:var(--ink-muted); background:var(--neut-bg); border:1px solid var(--neut-line)}

/* ---------- KPI tiles (no plot: form = headline number) ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px}
.kpi{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:15px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--neut)}
.kpi.k-hi::before{background:var(--hi)} .kpi.k-med::before{background:var(--med)}
.kpi.k-info::before{background:var(--info)} .kpi.k-prog::before{background:var(--prog)}
.kpi.k-ok::before{background:var(--ok)}
.kpi .lab{font-size:11.5px; font-weight:600; color:var(--ink-muted); letter-spacing:.02em}
.kpi .val{font-family:var(--f-display); font-weight:800; font-size:30px; line-height:1.15; font-variant-numeric:tabular-nums; margin-top:3px}
.kpi .note{font-size:11.5px; color:var(--ink-faint)}

/* ---------- tables ---------- */
.twrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13px}
thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-faint); font-weight:600; padding:10px 12px;
  border-bottom:1px solid var(--border); white-space:nowrap; background:var(--panel-2);
}
tbody td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer; transition:background .1s}
tbody tr.clickable:hover{background:var(--panel-2)}
.num{font-variant-numeric:tabular-nums}
.ref{font-family:var(--f-display); font-weight:700; color:var(--primary-ink); font-variant-numeric:tabular-nums}
.ttl{font-weight:600; color:var(--ink)}
.dim{color:var(--ink-muted)}
.tiny{font-size:11.5px; color:var(--ink-faint)}
tr.sev-H td:first-child{box-shadow:inset 3px 0 0 var(--hi)}
tr.sev-overdue td:first-child{box-shadow:inset 3px 0 0 var(--med)}

/* ---------- filters ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--border)}
.sel{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--panel); font-size:12.5px; font-weight:500; color:var(--ink-muted);
}
.sel b{color:var(--ink); font-weight:600}
.sel.on{border-color:var(--primary); background:var(--info-bg); color:var(--primary-ink)}
.sel .ic{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2}

/* ---------- two-column detail ---------- */
.split{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr); gap:18px; align-items:start}
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint)}
.inp{
  border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--panel-2);
  padding:8px 11px; font-size:13px; color:var(--ink); min-height:36px; display:flex; align-items:center;
}
.inp.area{min-height:74px; align-items:flex-start; line-height:1.6; display:block}
.inp.ro{background:var(--neut-bg); color:var(--ink-muted)}
.toggle{display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r-sm); overflow:hidden; width:fit-content}
.toggle span{padding:7px 15px; font-size:12.5px; font-weight:600; color:var(--ink-muted); background:var(--panel-2)}
.toggle span.on{background:var(--prog); color:#fff}
.toggle span.on.no{background:var(--neut-bg); color:var(--ink-muted)}

/* ---------- timeline / audit ---------- */
.tl{display:flex; flex-direction:column; gap:0}
.tl-item{display:grid; grid-template-columns:14px 1fr; gap:11px; padding:0 0 15px}
.tl-rail{display:flex; flex-direction:column; align-items:center; gap:3px}
.tl-dot{width:9px; height:9px; border-radius:50%; background:var(--primary); margin-top:5px; flex:none}
.tl-dot.ok{background:var(--ok)} .tl-dot.new{background:var(--teal)} .tl-dot.del{background:var(--hi)}
.tl-line{width:1px; flex:1; background:var(--border)}
.tl-item:last-child .tl-line{display:none}
.tl-body{font-size:12.5px; min-width:0}
.tl-body b{font-weight:600}
.tl-when{font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.diff{
  margin-top:5px; font-size:11.5px; background:var(--panel-2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:6px 9px; display:flex; flex-direction:column; gap:3px;
}
.diff s{color:var(--ink-faint); text-decoration-color:var(--ink-faint)}
.diff em{font-style:normal; color:var(--ok-ink); font-weight:600}

/* ---------- attachments ---------- */
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px}
.thumb{
  aspect-ratio:1; border-radius:var(--r); border:1px solid var(--border); overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:linear-gradient(140deg,var(--panel-2),var(--info-bg));
}
.thumb .ic{width:22px; height:22px; stroke:var(--ink-faint); fill:none; stroke-width:1.6}
.thumb .cap{position:absolute; left:0; right:0; bottom:0; font-size:9.5px; padding:3px 5px;
  background:rgba(1,43,93,.72); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.drop{
  border:1.5px dashed var(--border-strong); border-radius:var(--r); padding:14px;
  text-align:center; font-size:12px; color:var(--ink-faint); margin-top:10px;
}

/* ---------- chart (single series, one hue) ---------- */
.bars{display:flex; flex-direction:column; gap:11px}
.bar-row{display:grid; grid-template-columns:150px 1fr 52px; gap:11px; align-items:center; font-size:12.5px}
.bar-track{background:var(--panel-2); border-radius:3px; height:11px; position:relative; overflow:hidden}
.bar-fill{height:100%; border-radius:0 3px 3px 0; background:var(--primary)}
.bar-val{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-muted)}

/* ---------- report menu ---------- */
.rgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px}
.rcard{
  text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  padding:14px; display:flex; flex-direction:column; gap:5px; transition:border-color .12s,transform .12s;
}
.rcard:hover{border-color:var(--primary); transform:translateY(-1px)}
.rcard b{font-family:var(--f-display); font-size:13.5px}
.rcard span{font-size:11.5px; color:var(--ink-faint); line-height:1.5}
.rcard.on{border-color:var(--primary); background:var(--info-bg)}

/* ---------- AI ---------- */
.chat{display:flex; flex-direction:column; gap:14px; max-width:760px}
.msg{display:flex; gap:11px; align-items:flex-start}
.msg .av{width:28px; height:28px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; font-family:var(--f-display)}
.msg.me .av{background:var(--neut-bg); color:var(--ink-muted)}
.msg.ai .av{background:var(--gradient); color:#fff}
.bubble{background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r); padding:11px 14px; font-size:13px; min-width:0}
.msg.me .bubble{background:var(--info-bg); border-color:var(--info-line)}
.cite{font-size:11px; color:var(--ink-faint); margin-top:7px; padding-top:7px; border-top:1px solid var(--border)}
.ask{display:flex; gap:9px; align-items:center; border:1px solid var(--border-strong); border-radius:var(--r);
  background:var(--panel); padding:9px 11px; max-width:760px}
.ask input{flex:1; border:0; background:transparent; font:inherit; color:var(--ink); outline:none}
.suggest{display:flex; flex-wrap:wrap; gap:7px}
.suggest button{background:var(--panel); border:1px solid var(--border-strong); color:var(--ink-muted);
  border-radius:999px; padding:6px 12px; font-size:12px}
.suggest button:hover{border-color:var(--primary); color:var(--primary-ink)}
.disclaim{font-size:11.5px; color:var(--ink-faint); display:flex; gap:7px; align-items:center}

/* ---------- sign-in ---------- */
.signin{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--panel)}
.signin[hidden]{display:none}
.si-art{
  background:linear-gradient(150deg,#012B5D 0%,#00509B 42%,#017681 74%,#039762 100%);
  color:#fff; padding:52px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.si-art::after{content:""; position:absolute; width:520px; height:520px; right:-190px; bottom:-190px;
  border-radius:50%; background:rgba(255,255,255,.07)}
.si-art h2{color:#fff; font-size:34px; line-height:1.2; max-width:15ch}
.si-art p{color:rgba(255,255,255,.85); font-size:14.5px; max-width:40ch; line-height:1.65}
.si-list{display:flex; flex-direction:column; gap:11px; position:relative; z-index:1}
.si-list div{display:flex; gap:10px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.92)}
.si-list .ic{width:17px; height:17px; stroke:var(--green-bright); fill:none; stroke-width:2.4; flex:none}
.si-form{display:flex; flex-direction:column; justify-content:center; padding:52px; gap:9px; max-width:440px; margin:0 auto; width:100%}
.si-form img{width:210px; margin-bottom:22px; background:var(--logo-plate); border-radius:11px; padding:6px 9px; align-self:flex-start}
.si-form h1{font-size:24px}
.si-form>p{color:var(--ink-muted); font-size:13.5px; margin:0 0 12px}
.prov{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:11px; border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--panel); font-weight:600; font-size:13.5px; color:var(--ink);
}
.prov:hover{border-color:var(--primary); background:var(--panel-2)}
.si-note{font-size:12px; color:var(--ink-faint); margin-top:14px; line-height:1.6; text-align:center}

/* ---------- modal ---------- */
.scrim{position:fixed; inset:0; background:rgba(1,43,93,.45); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; padding:52px 20px; z-index:60; overflow-y:auto}
.scrim[hidden]{display:none}
.modal{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:min(700px,100%); border:1px solid var(--border)}
.modal-h{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border)}
.modal-f{display:flex; gap:9px; padding:15px 20px; border-top:1px solid var(--border); background:var(--panel-2); border-radius:0 0 var(--r-lg) var(--r-lg)}
.x{border:0; background:transparent; color:var(--ink-faint); font-size:19px; line-height:1; padding:5px}

/* ---------- misc ---------- */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.wake{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-muted);
  background:var(--info-bg); border:1px solid var(--info-line); border-radius:var(--r); padding:9px 13px}
.wake .dot{width:7px; height:7px; border-radius:50%; background:var(--primary); animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.propline{display:flex; flex-direction:column; gap:1px}
.propline b{font-weight:600; font-size:13px}
.hdr-actions{display:flex; gap:8px; align-items:center}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); padding:0 18px}
.tab{border:0; background:transparent; padding:11px 13px; font-size:13px; font-weight:600;
  color:var(--ink-faint); border-bottom:2px solid transparent; margin-bottom:-1px}
.tab.on{color:var(--primary-ink); border-bottom-color:var(--primary)}
.tab:hover{color:var(--ink)}

@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px}
  .side .navlabel{display:none} .side-foot{margin:0; border:0; padding:0}
  .brand{width:100%; padding-bottom:8px}
  .split{grid-template-columns:1fr}
  .signin{grid-template-columns:1fr} .si-art{display:none}
}
@media (max-width:640px){
  .page{padding:16px}
  .topbar{padding:11px 16px} .search{display:none}
  .fields{grid-template-columns:1fr}
}

/* ============================================================
   Beyond the mock-up: real controls, live states, feedback
   ============================================================ */

/* Form controls. The mock-up used styled divs; these are the real thing,
   matching that appearance so the built product looks like what was agreed. */
input.inp, select.inp, textarea.inp {
  font: inherit; width: 100%; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--panel-2); padding: 8px 11px; min-height: 36px;
}
textarea.inp { min-height: 84px; line-height: 1.6; resize: vertical; }
input.inp:focus, select.inp:focus, textarea.inp:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
input.inp:disabled, select.inp:disabled, textarea.inp:disabled {
  background: var(--neut-bg); color: var(--ink-muted); cursor: not-allowed;
}
select.inp { cursor: pointer; }
.field-row { display: flex; gap: 8px; align-items: center; }

/* Read-only mode for Viewers: controls look inert rather than merely disabled. */
.readonly-note {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--ink-muted); background: var(--neut-bg);
  border: 1px solid var(--neut-line); border-radius: var(--r-sm); padding: 8px 12px;
}

/* Loading. The database auto-pauses on the free tier, so the first request of
   the day genuinely takes a few seconds — say so rather than showing nothing. */
.skeleton {
  height: 14px; border-radius: 4px; background: var(--panel-2);
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
.skeleton-row { display: flex; gap: 12px; padding: 12px; }
.skeleton-row .skeleton:nth-child(1) { width: 8%; }
.skeleton-row .skeleton:nth-child(2) { width: 42%; }
.skeleton-row .skeleton:nth-child(3) { width: 22%; }
.skeleton-row .skeleton:nth-child(4) { width: 14%; }

.empty {
  text-align: center; padding: 40px 20px; color: var(--ink-faint);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.empty b { font-family: var(--f-display); color: var(--ink); font-size: 15px; }

.error-box {
  border: 1px solid var(--hi-line); background: var(--hi-bg); color: var(--hi-ink);
  border-radius: var(--r); padding: 12px 14px; font-size: 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.error-box b { font-family: var(--f-display); }

/* Toasts — confirmation that a save actually happened. */
#toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px;
  border-radius: var(--r); box-shadow: var(--shadow-lg); font-size: 13px;
  background: var(--panel); border: 1px solid var(--border); color: var(--ink);
  animation: toast-in .18s ease-out;
}
.toast.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.toast.bad { border-color: var(--hi-line); background: var(--hi-bg); color: var(--hi-ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none } .skeleton { animation: none } }

.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.busy { position: relative; color: transparent; }
.btn.busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 13px; height: 13px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--on-primary); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Row severity stripes need a live class, since rows are generated. */
tr.row-hi td:first-child { box-shadow: inset 3px 0 0 var(--hi); }
tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--med); }

.pager { display: flex; align-items: center; gap: 10px; }
.nav.is-active[aria-current="page"] { font-weight: 600; }

/* Nav items are anchors so they get real browser navigation and middle-click,
   but they should not look like body links. */
.nav { text-decoration: none; }
.nav:hover { text-decoration: none; }
.btn { text-decoration: none; }

/* ============================================================
   Attachments, occupiers, and the Phase 2 preview
   ============================================================ */

.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.att {
  margin: 0; border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--panel-2); display: flex; flex-direction: column;
}
.att-preview {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: linear-gradient(140deg, var(--panel-2), var(--info-bg));
  overflow: hidden; text-decoration: none;
}
.att-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-preview .ic { width: 30px; height: 30px; stroke: var(--ink-faint); fill: none; stroke-width: 1.5; }
.att figcaption { padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; }
.att-desc { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.att-desc.none { font-weight: 400; color: var(--ink-faint); font-style: italic; }
.att-meta { margin: 0; font-size: 10.5px; color: var(--ink-faint); line-height: 1.5; word-break: break-word; }
.att-actions { display: flex; gap: 6px; margin-top: 3px; }
.att-actions .btn { padding: 4px 9px; font-size: 11.5px; }

.drop.over { border-color: var(--primary); background: var(--info-bg); color: var(--primary-ink); }

/* The describe-before-upload dialog: one row per file. */
.describe-list { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; }
.describe-row { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; }
.describe-name {
  font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: flex; flex-direction: column;
}
.describe-name .tiny { font-weight: 400; }
@media (max-width: 640px) { .describe-row { grid-template-columns: 1fr; gap: 5px; } }

/* Occupiers */
.tenant-card {
  border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px;
  background: var(--panel-2); display: flex; flex-direction: column; gap: 8px;
}
.tenant-card + .tenant-card { margin-top: 10px; }
.tenant-head { display: flex; align-items: center; gap: 10px; }
.tenant-head b { font-family: var(--f-display); font-size: 14px; }
.tenant-details {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  font-size: 12.5px; align-items: baseline;
}
.tenant-details dt { color: var(--ink-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.tenant-details dd { margin: 0; color: var(--ink); }
.tenant-notes {
  margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.55;
  border-left: 2px solid var(--border-strong); padding-left: 10px;
}

/* Phase 2 preview banner — this screen is not real, and must say so. */
.demo-banner {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px;
  border: 1px solid var(--med-line); background: var(--med-bg); color: var(--med-ink);
  border-radius: var(--r); font-size: 13px; line-height: 1.55;
}
.demo-banner b { display: block; font-family: var(--f-display); }
.demo-banner svg { flex: none; margin-top: 2px; }

.rcard { text-decoration: none; color: inherit; }
.msg .bubble ul { margin: 8px 0 0; padding-left: 18px; }
.msg .bubble li { margin-bottom: 3px; }

@media print {
  .side, .topbar, .rgrid, .hdr-actions { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .page { padding: 0; }
  .card { border: 0; box-shadow: none; }
}