/* IA Job Costing - customer portal. "Steel & hi-vis" design system (docs/design/). */

:root {
  --ground:#eef1f5; --surface:#fff; --surface-2:#e7ecf2;
  --text:#16202e; --text-muted:#5a6675; --border:#d7dee7; --border-strong:#c3ccd8;
  --accent:#ff6600; --accent-ink:#e05600; --accent-soft:#fff0e6; --on-accent:#fff;
  --purple:#714b67;
  --good:#12855a; --good-soft:#e2f3ea; --warn:#b06f08; --warn-soft:#fbefd6;
  --crit:#c53a3a; --crit-soft:#fbe6e6;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:10px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(22,32,46,.05),0 14px 40px -16px rgba(22,32,46,.22);
  --shadow-sm:0 1px 2px rgba(22,32,46,.06);
  --s--1:.8125rem; --s0:1rem; --s1:1.15rem; --s2:1.4rem; --s3:1.85rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0e131a; --surface:#171f29; --surface-2:#212a36;
    --text:#e8edf4; --text-muted:#94a1b2; --border:#29323f; --border-strong:#38434f;
    --accent:#ff7d2e; --accent-ink:#ff6600; --accent-soft:#2a1c10; --on-accent:#1a1206;
    --purple:#b98bab;
    --good:#43c489; --good-soft:#10271d; --warn:#e0a53a; --warn-soft:#2a2211;
    --crit:#ec6a66; --crit-soft:#2c1616;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 46px -18px rgba(0,0,0,.65);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"]{
  --ground:#eef1f5; --surface:#fff; --surface-2:#e7ecf2; --text:#16202e; --text-muted:#5a6675;
  --border:#d7dee7; --border-strong:#c3ccd8; --accent:#ff6600; --accent-ink:#e05600;
  --accent-soft:#fff0e6; --on-accent:#fff; --purple:#714b67;
  --good:#12855a; --good-soft:#e2f3ea; --warn:#b06f08; --warn-soft:#fbefd6;
  --crit:#c53a3a; --crit-soft:#fbe6e6;
}
:root[data-theme="dark"]{
  --ground:#0e131a; --surface:#171f29; --surface-2:#212a36; --text:#e8edf4; --text-muted:#94a1b2;
  --border:#29323f; --border-strong:#38434f; --accent:#ff7d2e; --accent-ink:#ff6600;
  --accent-soft:#2a1c10; --on-accent:#1a1206; --purple:#b98bab;
  --good:#43c489; --good-soft:#10271d; --warn:#e0a53a; --warn-soft:#2a2211;
  --crit:#ec6a66; --crit-soft:#2c1616;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);font-size:var(--s0);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--text-muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:var(--s--1);text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--accent-ink)}

.btn{font:inherit;font-weight:650;border-radius:var(--radius-sm);padding:11px 18px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-ink);text-decoration:none}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--text-muted);text-decoration:none}
.btn--ghost{background:transparent;color:var(--accent-ink)}
.btn--ghost:hover{background:var(--accent-soft);text-decoration:none}
.btn--block{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:1px}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--s--1);font-weight:700;padding:4px 11px;border-radius:999px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge--good{color:var(--good);background:var(--good-soft)}
.badge--warn{color:var(--warn);background:var(--warn-soft)}
.badge--crit{color:var(--crit);background:var(--crit-soft)}
.badge--neutral{color:var(--text-muted);background:var(--surface-2)}

.brand{display:flex;align-items:center;gap:11px}
.brand__glyph{width:34px;height:34px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;padding:4px;flex:none}
.brand__name{font-weight:800;letter-spacing:-.02em;font-size:var(--s1);color:var(--text)}
.brand__name .i{color:var(--accent)}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth__card{width:100%;max-width:410px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:34px}
.auth__card .brand{justify-content:center;margin-bottom:22px}
.auth h1{font-size:var(--s2);text-align:center}
.auth .sub{text-align:center;color:var(--text-muted);font-size:var(--s--1);margin:6px 0 24px}
.auth form{display:flex;flex-direction:column;gap:15px}
.auth .row{display:flex;justify-content:space-between;align-items:center;font-size:var(--s--1)}
.auth__foot{text-align:center;margin-top:20px;font-size:var(--s--1);color:var(--text-muted)}

/* shell */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:6px;padding:18px 14px;position:sticky;top:0;height:100vh}
.side__brand{padding:6px 8px 14px}
.side__item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;font-weight:600;font-size:var(--s0);color:var(--text-muted);border:1px solid transparent}
.side__item:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.side__item.active{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.side__item .ic{width:20px;text-align:center;flex:none}
.side__spacer{flex:1}
.side__user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--border)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--s--1);flex:none}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;height:64px;padding:0 30px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar h1{font-size:var(--s2)}
.topbar .spacer{flex:1}
.icon-toggle{font:inherit;font-size:var(--s--1);font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer}
.body{padding:30px;max-width:1000px}
@media (max-width:800px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;align-items:center}
  .side__brand,.side__user,.side__spacer{display:none}
  .side__item{white-space:nowrap}
}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px}
.stack{display:flex;flex-direction:column;gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}

.lic-key{font-family:var(--mono);font-size:clamp(1.25rem,3.4vw,1.9rem);font-weight:600;letter-spacing:.06em;overflow-wrap:anywhere}
.kv{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--border);font-size:var(--s--1)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--text-muted);text-transform:uppercase;letter-spacing:.09em}
.meter{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.meter>i{display:block;height:100%}
.meter .ok{background:linear-gradient(90deg,var(--good),color-mix(in srgb,var(--good) 55%,var(--accent)))}
.meter .bad{background:repeating-linear-gradient(-45deg,var(--crit) 0 8px,color-mix(in srgb,var(--crit) 60%,#000) 8px 16px)}

table.data{width:100%;border-collapse:collapse;font-size:var(--s--1)}
table.data th{text-align:left;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:var(--text-muted);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--border)}
table.data td{padding:11px 10px;border-bottom:1px solid var(--border)}
table.data tr:last-child td{border-bottom:none}
.uuid{font-family:var(--mono);color:var(--text-muted)}
.scrollx{overflow-x:auto}

.dl-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--border);flex-wrap:wrap}
.dl-row:first-of-type{border-top:none}
.dl-ver{font-family:var(--mono);font-weight:600}
.dl-meta{font-size:var(--s--1);color:var(--text-muted)}
.dl-spacer{flex:1}

/* hazard - lapsed state only */
.hazard{border:1px solid color-mix(in srgb,var(--crit) 45%,var(--border));border-radius:var(--radius);overflow:hidden}
.hazard__stripe{height:8px;background:repeating-linear-gradient(-45deg,var(--accent) 0 14px,#1c232e 14px 28px)}
.hazard__body{padding:16px 18px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}

/* renewal timeline */
.timeline{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--border);font-size:.7rem;font-weight:700;color:#fff}
.timeline>span{display:grid;place-items:center;text-align:center;padding:0 4px}
.tl-paid{background:var(--good)}
.tl-gap{background:repeating-linear-gradient(-45deg,var(--crit) 0 9px,color-mix(in srgb,var(--crit) 55%,#000) 9px 18px)}
.tl-forgiven{background:var(--text-muted);opacity:.55;color:var(--text)}
.tl-new{background:var(--accent);color:var(--on-accent)}
.tl-labels{display:flex;justify-content:space-between;font-size:var(--s--1);color:var(--text-muted);margin-top:7px}
.breakdown{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.breakdown li{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.breakdown li:last-child{border-bottom:none}
.breakdown .strike{text-decoration:line-through;color:var(--text-muted)}
.total-line{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px}
.total-line .amt{font-family:var(--mono);font-weight:800;font-size:var(--s3)}

/* steps */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--border)}
.step:first-child{border-top:none}
.step__n{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-weight:800;display:grid;place-items:center}
.step h4{font-size:var(--s1)}
.step p{color:var(--text-muted);font-size:var(--s--1);margin-top:3px}

/* forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:var(--s--1);font-weight:700}
.field input{font:inherit;padding:11px 13px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);width:100%}
.field input.mono{font-family:var(--mono);letter-spacing:.04em}
.field input:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:1px;border-color:var(--accent)}
.field .help{font-size:var(--s--1);color:var(--text-muted)}
.errorlist{list-style:none;margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--crit-soft);color:var(--crit);font-size:var(--s--1);font-weight:600;border:1px solid color-mix(in srgb,var(--crit) 35%,transparent)}

.msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.msg{padding:12px 16px;border-radius:var(--radius-sm);font-size:var(--s--1);font-weight:600;border:1px solid}
.msg.success{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.msg.error{background:var(--crit-soft);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 35%,transparent)}
.msg.warning{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.msg.info{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.empty{padding:28px;text-align:center;color:var(--text-muted);font-size:var(--s--1)}