/* OMO Client Portal visual foundation: frozen prototype + OMO website brand.
   Cream ground, white rounded cards, soft shadow, Manrope headings / DM Sans body, OMO Orange accent. */
:root{
  --accent:#ed4823;--accent-soft:#fdeae4;--accent-ink:#c2371a;
  --bg:#f7f4ee;--surface:#ffffff;--surface-2:#fbf9f5;--line:#ebe6de;--line-2:#f1ece4;
  --ink:#1f1c19;--ink-2:#6b665e;--ink-3:#a39d93;
  --good:#1e8a4c;--good-soft:#e3f4ea;--warn:#b86e0e;--warn-soft:#fdf1dc;--bad:#c9362b;--bad-soft:#fbe5e2;--grey:#8c877e;--grey-soft:#eeeae3;
  --shadow:0 1px 2px rgba(40,30,20,.04),0 8px 28px rgba(40,30,20,.05);--r:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Manrope","DM Sans",system-ui,sans-serif;letter-spacing:-.015em;margin:0}
h1{font-size:32px;font-weight:800;line-height:1.15}h2{font-size:19px;font-weight:800}
a{color:inherit}
.muted{color:var(--ink-2)}.small{font-size:13.5px}.tiny{font-size:12.5px;color:var(--ink-3)}.center{text-align:center}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.envbar{background:#1f1c19;color:#f7f4ee;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
/* top bar */
.topbar{position:sticky;top:0;z-index:40;background:rgba(247,244,238,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tb{max-width:1280px;margin:0 auto;padding:12px 40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo{width:36px;height:36px;border-radius:11px;background:var(--accent);display:inline-grid;place-items:center;color:#fff;font-family:Manrope;font-weight:800;font-size:12.5px;flex:none}
.brand b{font-family:Manrope;font-weight:800;font-size:15px;display:block;line-height:1.1}.brand small{color:var(--ink-2);font-size:11.5px}
.nav{display:flex;gap:4px;justify-self:center;background:var(--surface);border-radius:99px;padding:4px;box-shadow:var(--shadow)}
.nav a{padding:8px 18px;border-radius:99px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:14.5px}
.nav a:hover{color:var(--ink)}.nav a.on{background:var(--accent-soft);color:var(--accent-ink)}
.tr{justify-self:end;display:flex;align-items:center;gap:10px}
.av{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;font-family:Manrope;font-weight:800;font-size:12px;color:#fff;background:#3f6a88;flex:none}
.av.omo{background:var(--accent)}
.me{text-decoration:none}
.contact{position:relative}
.contact summary{list-style:none;display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow);cursor:pointer}
.contact summary::-webkit-details-marker{display:none}
.contact .who{line-height:1.15}.contact .who b{display:block;font-family:Manrope;font-size:13.5px}.contact .who span{font-size:11.5px;color:var(--ink-3)}
.pop{position:absolute;right:0;top:50px;width:260px;background:var(--surface);border-radius:18px;box-shadow:0 20px 50px rgba(40,30,20,.16);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:8px;z-index:50}
.pop .ph{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.pop .ph b{display:block;font-family:Manrope}.pop .ph span{font-size:12.5px;color:var(--ink-3)}
/* layout */
.main{max-width:1280px;margin:0 auto;padding:36px 40px 90px}
.top{margin-bottom:24px}.top p{margin:6px 0 0;color:var(--ink-2);font-size:16px}
.stack{display:flex;flex-direction:column;gap:18px}
.grid{display:grid;gap:18px}.g2{grid-template-columns:1fr 1fr}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 26px}
.card.narrow{max-width:520px;margin:0 auto}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.mt{margin-top:18px}
.attn{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.attn a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:16px;background:var(--surface-2);text-decoration:none;min-height:130px}
.attn .t{font-weight:700;font-size:15.5px}.attn .s{font-size:13.5px;color:var(--ink-2)}.attn .c{margin-top:auto;font-size:13.5px;color:var(--accent-ink);font-weight:600}
.caught{padding:26px;text-align:center;font-family:Manrope;font-weight:700;font-size:17px;color:var(--ink-2);background:var(--surface-2);border-radius:16px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.green{background:var(--good-soft);color:var(--good)}.pill.orange{background:var(--warn-soft);color:var(--warn)}.pill.red{background:var(--bad-soft);color:var(--bad)}.pill.grey{background:var(--grey-soft);color:var(--grey)}
/* forms and buttons */
.form{display:grid;gap:14px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=tel],input:not([type]){font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%}
input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font:inherit;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--surface-2)}.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}.btn.p:hover{background:var(--accent-ink)}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:9px}.btn.ghost{border-color:transparent;background:transparent;color:var(--accent-ink)}.btn.wide{width:100%}
.lnk{color:var(--accent-ink);font-weight:600;text-decoration:none}.lnk:hover{text-decoration:underline}
.err{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:10px 12px;font-size:13.5px}
.msgs{margin-bottom:18px;display:flex;flex-direction:column;gap:8px}.msg{background:var(--surface);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);font-size:14px}
.msg.success{border-left:3px solid var(--good)}.msg.error{border-left:3px solid var(--bad)}
.field{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;padding:8px 0;border-top:1px solid var(--line-2);font-size:14px}
.field span{color:var(--ink-3);font-size:13px}
.help{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.help .t{flex:1}.help .t b{display:block;font-family:Manrope}.help .t span{font-size:13px;color:var(--ink-2)}.help .btns{display:flex;gap:8px}
form.inline{display:inline-block;margin:8px 8px 0 0}
hr{border:0;border-top:1px solid var(--line-2);margin:18px 0 6px}
.qr{display:flex;justify-content:center;margin:6px 0 10px}.qr img{border-radius:12px;background:#fff}
code{font-family:ui-monospace,Consolas,monospace;background:var(--surface-2);padding:2px 6px;border-radius:6px;word-break:break-all}
/* sign-in pages */
body.auth .main{max-width:none;padding:48px 16px}
.authwrap{max-width:420px;margin:0 auto}
.authcard{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:32px 30px;display:flex;flex-direction:column;gap:12px}
.authcard h1{font-size:26px}.authcard p{margin:0}
.authbrand{display:flex;align-items:center;gap:11px;margin-bottom:8px}.authbrand b{font-family:Manrope;font-weight:800}
@media (max-width:900px){
  .tb{grid-template-columns:1fr auto;padding:10px 16px;row-gap:10px}
  .tr{grid-row:1;grid-column:2}
  .nav{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:space-around}
  .brand small,.contact .who{display:none}.contact summary{padding:4px}
  .main{padding:22px 16px 80px}h1{font-size:26px}
  .g2,.attn{grid-template-columns:1fr}.field{grid-template-columns:1fr}
}
/* Projects (Phase 1) */
.pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pcard{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:16px;background:var(--surface-2);text-decoration:none;border:1px solid transparent}
.pcard:hover{border-color:var(--line)}
section .pcards .pcard{background:var(--surface-2)}
.pcards>.pcard{background:var(--surface);box-shadow:var(--shadow)}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.pc-name{font-family:Manrope;font-weight:800;font-size:16px}
.pc-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.prog{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden}.prog i{display:block;height:100%;background:var(--accent);border-radius:99px;width:0}
.prog.big{height:9px;max-width:520px;margin-top:14px}
.chips{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.chip{padding:7px 15px;border-radius:99px;text-decoration:none;font-weight:600;font-size:14px;color:var(--ink-2);background:transparent}
.chip.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.crumb{margin:0 0 12px}
.ptitle{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.note{background:var(--surface);border-radius:12px;padding:10px 14px;color:var(--ink-2);font-size:14px;max-width:640px}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;position:relative}
.tl li{display:flex;flex-direction:column;gap:6px;position:relative;padding-top:22px}
.tl li::before{content:"";position:absolute;top:7px;left:0;right:-12px;height:2px;background:var(--line)}
.tl li:last-child::before{right:0}
.tl-dot{position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--line);z-index:1}
.tl li.done .tl-dot{background:var(--good);border-color:var(--good)}.tl li.current .tl-dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tl-name{font-weight:700}.tl-date{font-size:13px;color:var(--ink-2)}
.dgroup+.dgroup{margin-top:16px}
.dlist{list-style:none;margin:8px 0 0;padding:0}
.dlist li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.dlist li:first-child{border-top:0}
.d-main{flex:1;display:flex;flex-direction:column}.d-name{font-weight:600}
@media (max-width:900px){
  .pcards{grid-template-columns:1fr}
  .tl{grid-auto-flow:row;grid-auto-columns:auto}
  .tl li{padding:0 0 0 28px}.tl li::before{top:16px;bottom:-12px;left:7px;right:auto;width:2px;height:auto}
  .tl li:last-child::before{display:none}.tl-dot{top:2px}
  .dlist li{flex-wrap:wrap}
}
.prog i.w0{width:0%}
.prog i.w1{width:1%}
.prog i.w2{width:2%}
.prog i.w3{width:3%}
.prog i.w4{width:4%}
.prog i.w5{width:5%}
.prog i.w6{width:6%}
.prog i.w7{width:7%}
.prog i.w8{width:8%}
.prog i.w9{width:9%}
.prog i.w10{width:10%}
.prog i.w11{width:11%}
.prog i.w12{width:12%}
.prog i.w13{width:13%}
.prog i.w14{width:14%}
.prog i.w15{width:15%}
.prog i.w16{width:16%}
.prog i.w17{width:17%}
.prog i.w18{width:18%}
.prog i.w19{width:19%}
.prog i.w20{width:20%}
.prog i.w21{width:21%}
.prog i.w22{width:22%}
.prog i.w23{width:23%}
.prog i.w24{width:24%}
.prog i.w25{width:25%}
.prog i.w26{width:26%}
.prog i.w27{width:27%}
.prog i.w28{width:28%}
.prog i.w29{width:29%}
.prog i.w30{width:30%}
.prog i.w31{width:31%}
.prog i.w32{width:32%}
.prog i.w33{width:33%}
.prog i.w34{width:34%}
.prog i.w35{width:35%}
.prog i.w36{width:36%}
.prog i.w37{width:37%}
.prog i.w38{width:38%}
.prog i.w39{width:39%}
.prog i.w40{width:40%}
.prog i.w41{width:41%}
.prog i.w42{width:42%}
.prog i.w43{width:43%}
.prog i.w44{width:44%}
.prog i.w45{width:45%}
.prog i.w46{width:46%}
.prog i.w47{width:47%}
.prog i.w48{width:48%}
.prog i.w49{width:49%}
.prog i.w50{width:50%}
.prog i.w51{width:51%}
.prog i.w52{width:52%}
.prog i.w53{width:53%}
.prog i.w54{width:54%}
.prog i.w55{width:55%}
.prog i.w56{width:56%}
.prog i.w57{width:57%}
.prog i.w58{width:58%}
.prog i.w59{width:59%}
.prog i.w60{width:60%}
.prog i.w61{width:61%}
.prog i.w62{width:62%}
.prog i.w63{width:63%}
.prog i.w64{width:64%}
.prog i.w65{width:65%}
.prog i.w66{width:66%}
.prog i.w67{width:67%}
.prog i.w68{width:68%}
.prog i.w69{width:69%}
.prog i.w70{width:70%}
.prog i.w71{width:71%}
.prog i.w72{width:72%}
.prog i.w73{width:73%}
.prog i.w74{width:74%}
.prog i.w75{width:75%}
.prog i.w76{width:76%}
.prog i.w77{width:77%}
.prog i.w78{width:78%}
.prog i.w79{width:79%}
.prog i.w80{width:80%}
.prog i.w81{width:81%}
.prog i.w82{width:82%}
.prog i.w83{width:83%}
.prog i.w84{width:84%}
.prog i.w85{width:85%}
.prog i.w86{width:86%}
.prog i.w87{width:87%}
.prog i.w88{width:88%}
.prog i.w89{width:89%}
.prog i.w90{width:90%}
.prog i.w91{width:91%}
.prog i.w92{width:92%}
.prog i.w93{width:93%}
.prog i.w94{width:94%}
.prog i.w95{width:95%}
.prog i.w96{width:96%}
.prog i.w97{width:97%}
.prog i.w98{width:98%}
.prog i.w99{width:99%}
.prog i.w100{width:100%}
/* Stage 4: files on the deliverable page */
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:12px 0 16px}
.file{margin:0;border-radius:16px;background:var(--surface-2);overflow:hidden;display:flex;flex-direction:column}
.file img{display:block;width:100%;height:200px;object-fit:contain;background:#fff}
.file-icon{height:120px;display:grid;place-items:center;font-family:Manrope;font-weight:800;font-size:22px;color:var(--accent-ink);background:var(--accent-soft)}
.file figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.file-acts{margin-top:4px}
/* Stage 5: decisions */
.decide{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin:6px 0 14px}
.dbox{flex:1;min-width:260px}
.dbox summary{list-style:none;cursor:pointer;width:100%}
.dbox summary::-webkit-details-marker{display:none}
.dbox[open] summary{margin-bottom:10px}
textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;resize:vertical}
.decided{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-weight:600;margin:6px 0 14px}
.decided.ok{background:var(--good-soft);color:var(--good)}
.note.warn{border-left:3px solid var(--warn)}