/* Perci Inspect — Phase 2 styles. Brand tokens lifted from the mockups. */
:root{
  --navy:#0E2A47; --navy-deep:#0A1F36; --navy-soft:#15355A;
  --ink:#16202B; --slate:#5B6B7C; --slate-light:#8595A4;
  --mist:#E7ECF1; --line:#DCE3EA; --paper:#F6F8FA; --white:#FFFFFF;
  --red:#C8453B; --red-bg:#FBEDEC; --amber:#D9A036; --amber-bg:#FBF3E2;
  --green:#3E9466; --green-bg:#E9F4EE; --na:#9AA7B4; --na-bg:#EEF1F4;
  --accent:#7FB0E0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
.mono{font-family:'DM Mono',monospace}
.hidden{display:none !important}

/* ---- update banner ---- */
#update-banner{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:12px; justify-content:center;
  background:var(--amber); color:#3a2a08; padding:10px 14px; font-size:14px; font-weight:600;
}
#update-banner button{
  border:1px solid rgba(0,0,0,.2); background:rgba(255,255,255,.55);
  border-radius:8px; padding:5px 12px; font:inherit; font-weight:700; cursor:pointer;
}
#offline-banner{
  display:none; position:fixed; inset:auto 0 0 0; z-index:55;
  text-align:center; background:#5b6b7a; color:#fff; padding:7px 14px;
  font-size:12.5px; font-weight:600;
}
body.is-offline #offline-banner{ display:block; }
#sync-badge{
  position:fixed; right:12px; bottom:12px; z-index:56;
  background:var(--navy); color:#fff; padding:7px 13px; border-radius:20px;
  font-size:12px; font-weight:700; box-shadow:0 6px 18px rgba(5,18,33,.28);
}
#sync-badge.hidden{ display:none; }
body.is-offline #sync-badge{ bottom:40px; }
.thumb.is-pending{ outline:2px dashed var(--amber); }
.thumb.is-pending span{ background:var(--amber); color:#3a2a08; }

/* ---- layout ---- */
.screen{min-height:100dvh; display:flex; flex-direction:column}

/* ---- login (navy) ---- */
.auth{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
  padding:32px 22px; color:var(--white);
}
.brand{text-align:center; margin-bottom:26px}
.brand .mark{
  font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  font-size:17px; color:#fff;
}
.brand .mark .dot{color:var(--accent)}
.brand .sub{margin-top:6px; font-size:12.5px; color:#9DB4CC; letter-spacing:.02em}

.card{
  width:100%; max-width:380px; background:var(--white); color:var(--ink);
  border-radius:18px; padding:26px 22px 20px;
  box-shadow:0 24px 60px rgba(5,18,33,.45);
}
.brand-logo{display:block; width:172px; max-width:74%; height:auto; margin:4px auto 12px}
.product-label{
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-light); text-align:center; margin-bottom:18px;
  padding-top:14px; border-top:1px solid var(--line);
}
.card h1{font-size:19px; font-weight:700; letter-spacing:-.01em; margin-bottom:3px; text-align:center}
.card .hint{font-size:13px; color:var(--slate); margin-bottom:18px; text-align:center}

.field{margin-bottom:13px}
.field label{
  display:block; font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--slate-light); margin-bottom:6px;
}
.field input{
  width:100%; border:1px solid var(--line); border-radius:11px; padding:12px 13px;
  font:inherit; font-size:15px; background:var(--paper); color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(127,176,224,.25)}

.btn{
  width:100%; border:none; border-radius:11px; padding:13px; font:inherit;
  font-weight:700; font-size:15px; cursor:pointer; transition:transform .04s ease, opacity .15s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--navy); color:#fff}
.btn--ghost{background:var(--white); color:var(--navy); border:1px solid var(--line)}
.btn.is-busy{opacity:.6; pointer-events:none}
.btn[disabled]{opacity:.6; cursor:default}

.divider{display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--slate-light); font-size:12px}
.divider::before,.divider::after{content:""; height:1px; background:var(--line); flex:1}

.row-link{margin-top:14px; text-align:center}
.row-link a{color:var(--navy-soft); font-size:13px; font-weight:600; text-decoration:none}
.row-link a:hover{text-decoration:underline}

.msg{margin-top:14px; font-size:13px; border-radius:10px; padding:10px 12px}
.msg--error{background:var(--red-bg); color:var(--red)}
.msg--ok{background:var(--green-bg); color:var(--green)}

/* ---- app shell ---- */
.app-top{
  background:var(--navy); color:#fff; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.app-top .mark{font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:14px}
.app-top .mark .dot{color:var(--accent)}
.top-right{display:flex; align-items:center; gap:10px}
.role-chip{font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.08em; background:rgba(255,255,255,.14); color:#fff; padding:3px 9px; border-radius:999px}
.ver-chip{font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.04em; color:rgba(255,255,255,.55)}
.user-chip{font-size:12.5px; font-weight:600; color:#fff; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:600px){.user-chip{display:none}}
.app-body{flex:1; padding:18px; max-width:640px; width:100%; margin:0 auto}

/* ---- tabs ---- */
.tabs{display:flex; gap:4px; background:var(--navy-deep); padding:0 10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{
  background:none; border:none; color:#9DB4CC; font:inherit; font-weight:600; font-size:13.5px;
  padding:12px 14px; cursor:pointer; border-bottom:2.5px solid transparent;
  white-space:nowrap; flex-shrink:0;
}
.tabs .tab.is-active{color:#fff; border-bottom-color:var(--accent)}

/* ---- section head + lists ---- */
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.section-head h2{font-size:18px; font-weight:700}
.section-head .count{font-family:'DM Mono',monospace; font-size:13px; color:var(--slate-light); font-weight:400; margin-left:4px}
.btn-add{background:var(--navy); color:#fff; border:none; border-radius:9px; padding:9px 13px; font:inherit; font-weight:600; font-size:13px; cursor:pointer}
.btn-add--ghost{background:none; color:var(--slate); border:1px solid var(--line)}
.loading-row{color:var(--slate-light); font-size:14px; padding:20px 4px}
.empty{color:var(--slate); font-size:14px; padding:24px; text-align:center; background:#fff; border:1px dashed var(--line); border-radius:12px}

.usage-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
.usage-tiles.dash4{grid-template-columns:repeat(4,1fr)}
@media(max-width:560px){.usage-tiles.dash4{grid-template-columns:repeat(2,1fr)}}
.utile--good{border-color:#bcd6b0; background:#f1f7ec}
.utile--watch{border-color:#e6d3a3; background:#fbf6e8}
.utile--action{border-color:#e6b3ab; background:#fbeeec}
.sub-head{font-weight:700; color:var(--navy); font-size:14px; margin:6px 0 8px}
.hscore{display:inline-grid; place-items:center; min-width:40px; height:34px; padding:0 8px; border-radius:9px; font-weight:800; font-size:15px}
.hscore--good{background:#dcecd2; color:#3c5a2a}
.hscore--watch{background:#f3e7c4; color:#7a5d18}
.hscore--action{background:#f3d3cd; color:#8c2f24}
.hscore--none{background:#eceae5; color:var(--slate)}
.chip{display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; vertical-align:middle; margin-left:4px}
.chip--action{background:#f3d3cd; color:#8c2f24}
.chip--watch{background:#f3e7c4; color:#7a5d18}
.is-click{cursor:pointer; transition:border-color .12s, background .12s}
.is-click:hover{border-color:var(--accent); background:#fafcff}
.chev{color:var(--slate-light); font-size:20px; font-weight:700; line-height:1}
.back-link{background:none; border:none; color:var(--accent); font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:4px 0; margin-bottom:6px}
.detail-meta{margin:-6px 0 16px}
.resolved-wrap{margin-top:6px}
.resolved-wrap summary{cursor:pointer; font-size:13px; color:var(--slate); padding:6px 0; font-weight:600}
.utile{background:#fff; border:1px solid var(--line); border-radius:13px; padding:16px 14px}
.utile .uval{font-size:24px; font-weight:800; color:var(--navy)}
.utile .ulabel{font-size:11.5px; color:var(--slate); margin-top:4px}
.lc-actions b{font-size:15px; color:var(--navy)}
.search{width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font:inherit; font-size:14px; background:#fff; margin-bottom:12px}
.search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,176,224,.22)}
.list{display:flex; flex-direction:column; gap:10px}
.list-card{
  background:#fff; border:1px solid var(--line); border-radius:13px; padding:14px 15px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.list-card.is-archived{opacity:.6}
.lc-title{font-weight:700; font-size:15px}
.lc-sub{font-size:13px; color:var(--slate); margin-top:2px}
.lc-meta{font-family:'DM Mono',monospace; font-size:11px; color:var(--slate-light); margin-top:5px; letter-spacing:.02em}
.lc-actions{display:flex; gap:7px; flex-shrink:0}
.mini{background:var(--paper); border:1px solid var(--line); color:var(--navy); border-radius:8px; padding:7px 11px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer}
.mini--danger{color:var(--red); border-color:var(--red-bg)}
.tag{font-family:'DM Mono',monospace; font-size:9.5px; letter-spacing:.05em; padding:2px 7px; border-radius:999px; vertical-align:middle}
.tag--muted{background:var(--na-bg); color:var(--na)}

/* ---- forms ---- */
.form{display:flex; flex-direction:column; gap:13px; max-width:520px}
.form .f{display:flex; flex-direction:column; gap:6px}
.form .f > span{font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate-light)}
.form .f small{color:var(--slate-light); font-size:11px}
.form input, .form select{border:1px solid var(--line); border-radius:10px; padding:11px 12px; font:inherit; font-size:15px; background:#fff; color:var(--ink); width:100%}
.form input:focus, .form select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,176,224,.22)}
.f--inline{flex-direction:row; align-items:center; justify-content:space-between; gap:12px}
.f--inline input{width:120px}
.fs{border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:9px}
.fs legend{font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate); padding:0 6px}
.chk{display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer}
.chk input{width:auto}
.indent{padding-left:24px; display:flex; flex-direction:column; gap:9px}

/* ---- capture: today ---- */
.lc-col{flex-direction:column; align-items:stretch}
.dues{margin-top:10px; display:flex; flex-direction:column; gap:8px}
.due-row{display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:8px}
.due-type{font-weight:700; font-size:13.5px; margin-right:8px}
.due-type.is-overdue{color:var(--red)}
.due-when{font-family:'DM Mono',monospace; font-size:11.5px; color:var(--slate-light)}
.mini--resume{background:var(--amber-bg); color:#8a6516; border-color:var(--amber-bg)}

/* time-grouped Today */
.today-controls{display:flex; flex-direction:column; gap:9px; margin-bottom:14px}
.today-controls .search{margin-bottom:0}
.today-controls .pills{flex-wrap:wrap}
.today-summary{font-size:13px; color:var(--slate); margin:-4px 0 14px}
.today-summary .t-over{color:#8c2f24}
.today-summary .t-soon{color:#7a5d18}
.sub-head--progress{color:#8a6516}
.sub-head--overdue{color:#8c2f24}
.sub-head--soon{color:#7a5d18}
.sub-head .count{display:inline-block; min-width:20px; text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:20px; font-size:11px; padding:1px 7px; margin-left:4px; color:var(--slate)}
.lc-flex{display:flex; align-items:center; justify-content:space-between; gap:12px}
.lc-flex .lc-main{min-width:0}
.lc-flex .lc-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.entry-right{display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0}
.due-badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap}
.due-badge--progress{background:var(--amber-bg); color:#8a6516}
.due-badge--overdue{background:#f3d3cd; color:#8c2f24}
.due-badge--soon{background:#f3e7c4; color:#7a5d18}
.due-badge--upcoming{background:var(--na-bg); color:var(--slate)}

/* CM sub-nav + issues/history */
.cm-subnav{display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line); padding-bottom:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.cm-subnav::-webkit-scrollbar{display:none}
.cm-subnav button{background:none; border:none; border-bottom:2px solid transparent; padding:8px 12px; font:inherit; font-size:14px; font-weight:600; color:var(--slate); cursor:pointer; margin-bottom:-3px; white-space:nowrap; flex-shrink:0}
.cm-subnav button.is-active{color:var(--navy); border-bottom-color:var(--navy)}
.pills{display:flex; gap:8px; margin-bottom:12px}
.pill{background:#fff; border:1px solid var(--line); border-radius:20px; padding:6px 13px; font:inherit; font-size:13px; font-weight:600; color:var(--slate); cursor:pointer}
.pill.is-active{background:var(--navy); color:#fff; border-color:var(--navy)}
.pill .count, .pill.is-active .count{margin-left:4px; opacity:.8}
.prio{font-weight:700}
.prio--urgent{color:#8c2f24}
.prio--soon{color:#7a5d18}
.prio--monitor{color:var(--slate)}
.status-sel{border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit; font-size:12.5px; font-weight:600; background:#fff; color:var(--navy); cursor:pointer; flex-shrink:0}
.status-sel--open{border-color:#e6b3ab; color:#8c2f24}
.status-sel--in_progress{border-color:#e6d3a3; color:#7a5d18}
.status-sel--resolved{border-color:#bcd6b0; color:#3c5a2a}

/* per-scheme groups + task threads */
.sch-group{border:1px solid var(--line); border-radius:13px; background:#fff; margin-bottom:12px; overflow:hidden}
.sch-group > summary{cursor:pointer; padding:12px 14px; font-weight:700; color:var(--navy); font-size:14.5px; list-style:none; display:flex; align-items:center; gap:8px}
.sch-group > summary::-webkit-details-marker{display:none}
.sch-group > summary::before{content:"▸"; color:var(--slate-light); font-size:12px; transition:transform .15s}
.sch-group[open] > summary::before{transform:rotate(90deg)}
.issue{border-top:1px solid var(--line); padding:11px 14px}
.sch-group .issue:first-of-type{border-top:1px solid var(--line)}
.issue-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.issue-actions{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0}
.thread{margin-top:10px; border-top:1px dashed var(--line); padding-top:10px}
.thread.hidden{display:none}
.upd-list{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.upd{background:var(--paper); border-radius:9px; padding:7px 10px}
.upd--status{background:#f3f5f0}
.upd-meta{font-size:11px; color:var(--slate-light); margin-bottom:2px}
.upd-body{font-size:13.5px; color:var(--ink)}
.upd--status .upd-body{color:var(--slate); font-style:italic}
.upd-empty{font-size:13px; color:var(--slate-light); padding:4px 0}
.upd-add{display:flex; gap:8px}
.upd-input{flex:1; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; background:#fff}
.upd-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,176,224,.22)}

/* task detail fields */
.task-fields{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:13px; overflow:hidden; margin-bottom:20px}
.tf{background:#fff; padding:11px 14px; display:flex; flex-direction:column; gap:4px}
.tf--wide{grid-column:1 / -1}
.tf > span{font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-light)}
.tf > b{font-size:14.5px; color:var(--navy); font-weight:700}
.tf .status-sel{align-self:flex-start}
.tf-edit{display:flex; gap:8px}
.tf-edit input{flex:1; border:1px solid var(--line); border-radius:9px; padding:8px 11px; font:inherit; font-size:14px; background:#fff}
.tf-edit input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,176,224,.22)}
@media(max-width:480px){.task-fields{grid-template-columns:1fr}}

/* photo evidence */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:20px}
.photo-thumb{display:flex; flex-direction:column; gap:5px}
.photo-thumb img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:11px; border:1px solid var(--line); background:var(--paper); display:block}
.photo-dl{font-size:12px; font-weight:600; color:var(--accent); text-align:center; text-decoration:none}
.photo-dl:hover{text-decoration:underline}

/* ---- capture: header + progress ---- */
.cap-head{display:flex; align-items:center; gap:10px; margin:-4px 0 12px}
.cap-back, .rev-back{background:none; border:none; color:var(--navy); font:inherit; font-weight:600; font-size:14px; cursor:pointer; padding:4px 2px}
.cap-title{font-weight:700; font-size:15px}
.prog{margin-bottom:14px}
.prog-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.prog-sec{font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.04em; color:var(--slate); text-transform:uppercase}
.prog-count{font-family:'DM Mono',monospace; font-size:12px; color:var(--slate-light); flex-shrink:0; margin-left:10px}
.sec-jump{flex:1; min-width:0; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; font-weight:600; color:var(--navy); background:#fff; cursor:pointer}
.sec-jump:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,176,224,.22)}
.prog-bar{height:6px; background:var(--mist); border-radius:99px; overflow:hidden}
.prog-bar i{display:block; height:100%; background:var(--navy); transition:width .25s ease}

/* ---- capture: items ---- */
.cap-body{display:flex; flex-direction:column; gap:12px}
.cap-item{background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px}
.cap-item.is-flagged{border-color:var(--red); box-shadow:0 0 0 2px var(--red-bg)}
.ci-name{font-weight:700; font-size:15px}
.ci-hint{font-size:12.5px; color:var(--slate); margin-top:4px; line-height:1.45}
.ci-photos{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
.thumb{position:relative; width:62px; height:62px; border-radius:9px; overflow:hidden; background:var(--mist)}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb span{position:absolute; left:0; bottom:0; right:0; font-family:'DM Mono',monospace; font-size:8px; background:rgba(10,31,54,.6); color:#fff; text-align:center; padding:1px}
/* full inspection preview (review screen) */
.preview-actions{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.preview-actions .btn{flex:1; min-width:150px}
.rev-preview{margin-bottom:20px}
.rev-preview .sch-group{margin-bottom:8px}
.rev-item{padding:9px 14px; border-top:1px solid var(--line)}
.rev-top{display:flex; align-items:center; gap:8px; font-size:14px}
.rev-dot{width:11px; height:11px; border-radius:50%; flex-shrink:0}
.rev-dot--red{background:#b23b2f}
.rev-dot--amber{background:#b3801d}
.rev-dot--green{background:#3d7a52}
.rev-dot--na{background:#94a0aa}
.rev-dot--unset{background:#cfd6db}
.rev-tag{margin-left:auto; font-family:'DM Mono',monospace; font-size:10.5px; color:var(--slate-light); text-transform:capitalize; white-space:nowrap}
.rev-photos{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.thumb-x{position:absolute; top:2px; right:2px; width:19px; height:19px; border-radius:50%; border:none; background:rgba(10,31,54,.78); color:#fff; font-size:14px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center}
.thumb-x:hover{background:var(--red)}
.thumb.is-uploading img{opacity:.45}
.thumb.is-uploading{animation:thumbpulse 1s ease-in-out infinite}
@keyframes thumbpulse{0%,100%{opacity:1}50%{opacity:.6}}
.thumb.is-failed{cursor:pointer; outline:2px solid var(--red)}
.thumb.is-failed img{opacity:.4}
.thumb.is-failed span{background:var(--red)}
.add-photo{width:62px; height:62px; border:1px dashed var(--line); border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--slate); font-size:11px; font-family:'DM Mono',monospace; cursor:pointer; text-align:center}
.statuses{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.st{border:1px solid var(--line); background:var(--paper); border-radius:9px; padding:9px 4px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; color:var(--slate)}
.st--red.on{background:var(--red); color:#fff; border-color:var(--red)}
.st--amber.on{background:var(--amber); color:#fff; border-color:var(--amber)}
.st--green.on{background:var(--green); color:#fff; border-color:var(--green)}
.st--na.on{background:var(--na); color:#fff; border-color:var(--na)}
.reddetail{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.reddetail textarea{width:100%; min-height:64px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; resize:vertical}
.note-tools{display:flex; gap:8px; flex-wrap:wrap}
.aibtn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--accent); background:#eef5fc; color:var(--navy); border-radius:9px; padding:8px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer}
.aibtn[disabled]{opacity:.6; cursor:default}
.reddetail textarea.is-polishing{opacity:.6; background:repeating-linear-gradient(90deg,#fff,#fff 10px,#f4f8fc 10px,#f4f8fc 20px)}
.sigwrap{margin-bottom:18px}
.sigpad{width:100%; height:150px; border:1px solid var(--line); border-radius:12px; background:#fff; touch-action:none; cursor:crosshair; display:block}
.sig-actions{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
.sig-hint{font-size:12px; color:var(--slate-light)}
.dictate{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:9px; padding:8px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer}
.dictate .mic{font-size:13px}
.dictate.is-listening{background:var(--red-bg); border-color:var(--red); color:var(--red)}
.dictate.is-listening .mic{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.prio{display:flex; gap:7px}
.pri{flex:1; border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px; font:inherit; font-size:12.5px; font-weight:600; color:var(--slate); cursor:pointer}
.pri.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.cap-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px}
.cap-nav .btn{width:auto; flex:1}

/* ---- review ---- */
.tally{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px}
.ta{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 4px; text-align:center; font-size:11.5px; color:var(--slate); font-family:'DM Mono',monospace}
.ta b{display:block; font-size:22px; font-family:'Hanken Grotesk',sans-serif; margin-bottom:2px}
.ta--red b{color:var(--red)} .ta--amber b{color:var(--amber)} .ta--green b{color:var(--green)} .ta--na b{color:var(--na)}
.warn{background:var(--amber-bg); color:#8a6516; border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:14px}
.findings{display:flex; flex-direction:column; gap:9px; margin-bottom:18px}
.finding{background:#fff; border:1px solid var(--line); border-left-width:4px; border-radius:10px; padding:12px 13px}
.finding--red{border-left-color:var(--red)} .finding--amber{border-left-color:var(--amber)}
.fd-top{display:flex; align-items:center; gap:8px; font-size:14px}
.fd-dot{width:9px; height:9px; border-radius:50%}
.fd-dot.st--red{background:var(--red)} .fd-dot.st--amber{background:var(--amber)}
.fd-pri{margin-left:auto; font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; color:var(--slate); background:var(--paper); padding:2px 8px; border-radius:99px}
.fd-note{font-size:13px; color:var(--slate); margin-top:6px; line-height:1.45}

/* ---- done ---- */
.done{text-align:center; padding:40px 20px}
.done-check{width:64px; height:64px; border-radius:50%; background:var(--green); color:#fff; font-size:32px; display:grid; place-items:center; margin:0 auto 18px}
.done h2{font-size:20px; margin-bottom:8px}
.done p{color:var(--slate); margin-bottom:22px}
.done .btn{max-width:280px; margin:0 auto}
.report-area{margin:0 auto 14px; max-width:280px; min-height:44px; display:flex; align-items:center; justify-content:center}
.report-prep{font-family:'DM Mono',monospace; font-size:11.5px; color:var(--slate-light)}
.report-area .btn{width:100%}

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  padding:11px 18px; border-radius:11px; font-size:14px; font-weight:600; color:#fff;
  box-shadow:0 10px 30px rgba(5,18,33,.3); max-width:90vw;
  background:var(--navy); /* readable default so no toast is ever white-on-white */
}
.toast--ok{background:var(--green)}
.toast--error, .toast--err{background:var(--red)}

/* ---- home stub card ---- */
.who{
.who{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow:0 8px 24px rgba(14,42,71,.06);
}
.who .name{font-size:20px; font-weight:700}
.who .pill{
  display:inline-block; margin-top:8px; font-family:'DM Mono',monospace; font-size:11px;
  letter-spacing:.06em; background:var(--navy); color:#fff; padding:4px 11px; border-radius:999px;
}
.who .email{margin-top:12px; color:var(--slate); font-size:13.5px}
.note{
  margin-top:18px; background:var(--mist); border-radius:12px; padding:14px 16px;
  font-size:13.5px; color:var(--navy-soft);
}
.btn-signout{
  margin-top:18px; background:none; border:1px solid var(--line); color:var(--slate);
  border-radius:10px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer;
}

/* ---- shared footer ---- */
.foot{
  text-align:center; padding:16px; color:var(--slate-light);
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.04em;
}
.auth .foot{color:rgba(255,255,255,.5)}

/* ---- loading ---- */
.loader{flex:1; display:grid; place-items:center; background:var(--navy); color:#9DB4CC}
.spinner{width:34px; height:34px; border:3px solid rgba(255,255,255,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}