/* Client portal styles, taken from the prototype (ibl-client-portal.html).
   Single mobile-first column on paper, navy header band, colour-coded timeline sections.
   Status classes use the fixed status keys: s-todo, s-checking, s-attention, s-done, s-not_applicable. */
:root{
  --navy:#0b1c2c;--navy2:#1e3049;--amber:#e89a1c;--paper:#f8f7f4;--card:#ffffff;
  --ink:#0b1c2c;--muted:#5b6675;--line:#dfe2e6;--soft:#f1efe8;--onnavy:#c9d1db;
  --blue:#2f6fb3;--blue-t:#e7f0fa;--blue-d:#123f6e;
  --purple:#5b51b8;--purple-t:#eeedfb;--purple-d:#332a85;
  --gold:#d08a12;--gold-t:#fbf0dc;--gold-d:#6b4300;
  --teal:#18866a;--teal-t:#e1f4ee;--teal-d:#08493a;
  --ok:#3b6d11;--ok-t:#eaf3de;--chk:#8a5a0b;--chk-t:#faeeda;--bad:#a32d2d;--bad-t:#fcebeb;--todo:#a9a69c;
  --f-display:"Archivo",system-ui,sans-serif;--f-body:"Public Sans",system-ui,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
.wrap{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.proto{background:var(--gold-t);color:var(--gold-d);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.proto .wrap{padding-block:6px}
header{background:var(--navy);color:#fff}
header .wrap{padding-block:22px 20px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
h1{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.15;margin:6px 0 2px;text-wrap:balance}
.lic{color:var(--onnavy);font-size:14px}
.prog{margin-top:16px;height:8px;background:var(--navy2);border-radius:4px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--amber);border-radius:4px;transition:width .4s}
.progtxt{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--onnavy);font-variant-numeric:tabular-nums}
.intro{color:var(--muted);font-size:14px;margin:18px 0 6px}
main .wrap{padding-block:4px 24px}
.sec{position:relative;padding:18px 0 6px 40px}
.sec::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:var(--c)}
.sec:first-child::before{top:22px}
.sec:last-child::before{bottom:auto;height:30px}
.sdot{position:absolute;left:0;top:16px;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center}
.sdot svg{width:15px;height:15px}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.stitle{font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--cd)}
.pill{font-size:12px;font-weight:500;padding:2px 10px;border-radius:999px;white-space:nowrap}
.p-ok{background:var(--ok-t);color:var(--ok)}.p-part{background:var(--chk-t);color:var(--chk)}.p-todo{background:var(--soft);color:var(--muted)}.p-bad{background:var(--bad-t);color:var(--bad)}
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.item.is-attention{border-color:#efc5c5}
.row{display:flex;gap:12px;align-items:flex-start}
.row>.txt{flex:1;min-width:0}
.ititle{font-weight:600;font-size:15px}
.iline{font-size:13px;color:var(--muted)}
.st{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.st svg{width:14px;height:14px}
.s-todo{border:2px solid var(--todo)}.req{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--purple-d);background:var(--purple-t);padding:2px 7px;border-radius:999px;vertical-align:2px;margin-left:4px}.s-not_applicable{background:var(--soft);color:var(--muted);font-weight:600}.s-done{background:var(--ok);color:#fff}.s-checking{background:var(--chk-t);color:var(--chk)}.s-attention{background:var(--bad-t);color:var(--bad)}
.l-done{color:var(--ok)}.l-checking{color:var(--chk)}.l-not_applicable{color:var(--muted)}.l-attention{color:var(--bad);font-weight:500}
.btn{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:8px;border:1.5px solid var(--navy);background:var(--card);color:var(--navy);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy2)}
.btn.ghost{border-color:transparent;padding-inline:6px;color:var(--muted);font-weight:500;text-decoration:underline}
.btn:focus-visible,.chip:focus-visible,.wi:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.upl{position:relative;overflow:hidden}
.upl input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.wi{background:none;border:none;padding:0;margin-top:2px;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ex{background:var(--soft);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.55;margin-top:8px;color:#3d4654}
.files{font-size:12px;color:var(--muted);margin-top:4px;font-family:var(--f-mono)}
.panel{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;display:grid;gap:12px}
.fld{display:grid;gap:5px;min-width:0}
.fld>span{font-size:13px;font-weight:600}
.fld small{font-size:12px;color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=month],input[type=number],textarea{font:inherit;font-size:15px;width:100%;padding:9px 11px;border:1px solid #c9ced5;border-radius:8px;background:#fff;color:var(--ink)}
textarea{min-height:96px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid #c9ced5;background:#fff;color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.checks{display:grid;gap:6px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.checks input{margin-top:3px;accent-color:var(--navy)}
.err{color:var(--bad);font-size:13px}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.months{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.mbar{height:10px;background:var(--gold-t);border-radius:5px;overflow:hidden;margin:8px 0 4px}
.mbar i{display:block;height:100%;background:var(--gold);transition:width .4s}
.mnum{font-family:var(--f-display);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.job{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:10px 0;overflow:hidden}
.jhead{display:flex;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;width:100%;background:none;border:none;font:inherit;text-align:left;color:inherit}
.jhead:hover{background:#fbfaf7}
.jsteps{border-top:1px solid var(--line)}
.jstep{display:flex;gap:10px;align-items:center;padding:9px 14px;font-size:14px;border-top:1px solid #efede7}
.jstep:first-child{border-top:none}
.jstep .st{width:20px;height:20px}.jstep .st svg{width:12px;height:12px}
.addjob{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:12px 0 4px;padding:14px;border:1.5px dashed var(--gold);border-radius:12px;background:transparent;color:var(--gold-d);font:inherit;font-weight:600;cursor:pointer}
.addjob:hover{background:var(--gold-t)}
footer .wrap{padding-block:8px 32px;text-align:center;font-size:13px;color:var(--muted)}
footer .sel{user-select:all;color:var(--ink);font-weight:500}
.sheet-bg{position:fixed;inset:0;background:rgba(11,28,44,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--paper);width:100%;max-width:560px;max-height:92vh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
.sh-top{padding:16px max(16px,env(safe-area-inset-left,0px)) 10px;border-bottom:1px solid var(--line)}
.sh-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sh-title b{font-family:var(--f-display);font-size:18px;font-weight:600}
.tabs{display:flex;gap:6px;margin-top:12px;overflow-x:auto}
.tab{flex:1;min-width:72px;font:inherit;font-size:12px;font-weight:500;padding:8px 6px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.tab[aria-current=true]{border-color:var(--navy);color:var(--navy);box-shadow:inset 0 -3px 0 var(--amber)}
.tab .st{width:16px;height:16px;margin:0}.tab .st svg{width:10px;height:10px}
.sh-body{padding:14px max(16px,env(safe-area-inset-left,0px));overflow-y:auto;display:grid;gap:14px}
.sh-foot{padding:12px max(16px,env(safe-area-inset-left,0px));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;align-items:center}
.lead{font-size:14px;color:var(--muted);margin:0}
.same{display:flex;flex-wrap:wrap;gap:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Added for the live portal */
body{margin:0}
[hidden]{display:none!important}
.note{background:var(--blue-t);color:var(--blue-d);border-radius:10px;padding:10px 12px;font-size:14px;margin:12px 0}
.note.done{background:var(--ok-t);color:var(--ok)}
.problem{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 16px;margin:24px 0;text-align:center}
.problem h2{font-family:var(--f-display);font-size:20px;margin:0 0 8px}
.toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;max-width:calc(100% - 32px);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:0 6px 24px rgba(11,28,44,.25)}
.toast.bad{background:var(--bad)}
.list-entry{border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:10px;background:var(--card)}
.btn.sm{font-size:12px;padding:5px 10px}
input[type=date]{font:inherit;font-size:15px;width:100%;padding:9px 11px;border:1px solid #c9ced5;border-radius:8px;background:#fff;color:var(--ink)}
.private{font-size:13px;color:var(--muted)}
.upl.is-busy{opacity:.6;pointer-events:none}
/* After staff approve the case (Phase 5): look, don't change. Downloads and "What is this?" stay. */
.readonly .upl,.readonly .addjob,.readonly [data-open],.readonly [data-nohave],.readonly [data-undohave],.readonly [data-saveform],
.readonly [data-savestep],.readonly [data-deljob],.readonly [data-sameref],.readonly .jstep .btn{display:none!important}
.readonly .panel input,.readonly .panel textarea,.readonly .sheet input,.readonly .sheet textarea,.readonly .chip{pointer-events:none;opacity:.85}
.handover{border-color:var(--ok);border-width:2px;padding:16px}
.nextsteps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px}
.seelist{margin-top:16px}
.seelist>summary{cursor:pointer;color:var(--muted);font-size:14px;padding:6px 0}