/* Inspection mode — phone-first. Shares the tokens defined in index.html (:root). */
html { -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; }
img { max-width:100%; }
.btn.big { min-height:50px; font-size:16px; font-weight:600; padding:12px 18px; border-radius:12px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.grid2.tight { gap:0 14px; }
input[type=text], input[type=number], input[type=date], input[type=month], input[type=datetime-local],
input[type=email], textarea, select {
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit;
  background:var(--panel); min-height:42px; max-width:100%; }
/* 16px stops iOS zooming into a field on focus */
@media (max-width:640px){ input, textarea, select { font-size:16px !important; } }
.tablewrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tablewrap table { min-width:100%; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* filters */
.filters { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:4px 12px;
           align-items:end; }
.filters > *, .fedit > *, .kpis > *, .grid2 > * { min-width:0; }   /* let date/month pickers shrink */
.filters .wide { grid-column:1 / -1; }
.filters .fbtns { display:flex; gap:8px; padding-top:8px; }
@media (max-width:640px){
  .filters { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #recFilters.collapsed { display:none; }
}

/* cards (records, drafts, findings) */
.cards { display:grid; gap:10px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
        display:block; color:inherit; text-decoration:none; }
button.card { width:100%; text-align:left; font:inherit; cursor:pointer; }
.card .top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.card .reg { font-size:17px; font-weight:700; }
.card .meta { color:var(--muted); font-size:12.5px; margin-top:2px; word-break:break-word; }
.card .acts { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pillf { font-size:11.5px; padding:2px 9px; border-radius:20px; white-space:nowrap; font-weight:600; }
.pillf.find { background:#fee2e2; color:#991b1b; }
.pillf.clean { background:#dcfce7; color:#166534; }
.pillf.draft { background:#fef3c7; color:#92400e; }
.pillf.open { background:#fee2e2; color:#991b1b; }
.pillf.wo_raised { background:#fef3c7; color:#92400e; }
.pillf.closed { background:#dcfce7; color:#166534; }

/* runner */
body.running header { display:none; }
#view-run { max-width:720px; margin:0 auto; padding:0 0 96px; }
.runbar { position:sticky; top:0; z-index:5; background:#0b3b8c; color:#fff; display:flex;
          align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; }
.runbar .btn.sec { padding:8px 12px; }
.runprog { text-align:center; line-height:1.2; min-width:0; }
.runprog b { display:block; font-size:16px; }
.runprog span { font-size:12px; opacity:.85; display:block; white-space:nowrap; overflow:hidden;
                text-overflow:ellipsis; }
.savestate { font-size:12px; padding:3px 8px; border-radius:20px; background:rgba(255,255,255,.18);
             white-space:nowrap; }
.savestate.offline { background:#f59e0b; color:#111; }
.savestate.err { background:#ef4444; }
.progress { height:5px; background:#cbd5e1; position:sticky; top:52px; z-index:5; }
.progress div { height:100%; background:var(--accent2); width:0; transition:width .2s; }
.runstep { padding:14px 16px; }
.qnum { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.4px; }
.qtitle { font-size:20px; line-height:1.3; margin:2px 0 8px; font-weight:700; word-break:break-word; }
.qtitle .req { font-size:18px; }
.guide { margin:0 0 6px; padding-left:20px; color:var(--ink2); }
.guide li { margin:2px 0; }
.qnote { color:#475569; font-size:13.5px; margin:4px 0; }
.example { position:relative; margin:10px -16px 4px; background:#0f172a; cursor:zoom-in; }
.example img { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; }
.example .zoomtag { position:absolute; right:10px; bottom:10px; background:rgba(15,23,42,.75); color:#fff;
                    font-size:12px; padding:4px 9px; border-radius:20px; pointer-events:none; }
.example-cap { font-size:12px; color:var(--muted); margin:0 0 6px; }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 6px; }
.opt { min-height:64px; font-size:18px; font-weight:700; border-radius:14px; border:2px solid var(--line);
       background:var(--panel); color:var(--ink); padding:10px; touch-action:manipulation; }
.opt.sel { color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.opt[data-v="OK"].sel { background:var(--ok); }
.opt[data-v="Finding"].sel { background:var(--red); }
.opt[data-v="N/A"].sel { background:#64748b; }
.opt[data-v="Other"].sel { background:#d97706; }
.opt.sel.custom { background:var(--accent); }
.fieldlbl { font-size:13px; color:var(--ink2); font-weight:600; margin:14px 0 5px; display:block; }
.fieldlbl.must::after { content:" (required)"; color:var(--red); font-weight:600; }
.runstep textarea { min-height:90px; font-size:16px; }
.photobtns { display:flex; gap:10px; margin-top:6px; }
.photobtns label { flex:1; margin:0; }
.photobtns .btn { display:flex; align-items:center; justify-content:center; width:100%; color:#fff;
                  font-size:15px; min-height:48px; }
.photobtns .btn.sec { color:var(--ink); }
.photobtns input { display:none; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; margin-top:10px; }
.thumbs .t { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--line); }
.thumbs .t img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.thumbs .t .x { position:absolute; top:4px; right:4px; width:28px; height:28px; padding:0; border-radius:50%;
                background:rgba(15,23,42,.75); color:#fff; font-size:15px; line-height:28px; }
.thumbs .t.pending { display:flex; align-items:center; justify-content:center; font-size:12px;
                     color:var(--ink2); text-align:center; padding:4px; }
.thumbs .t.failed { background:#fee2e2; color:#991b1b; cursor:pointer; }
.runnav { position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; gap:10px; padding:10px 16px;
          padding-bottom:max(10px, env(safe-area-inset-bottom)); background:var(--panel);
          border-top:1px solid var(--line); max-width:720px; margin:0 auto; }
.runnav .btn { flex:1; }
.review li { margin:6px 0; }
.review .bad { color:var(--red); }
.review button.link { background:none; border:0; color:var(--accent); padding:0; text-decoration:underline;
                      font:inherit; cursor:pointer; text-align:left; }
.rv-row { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.rv-row .v { font-weight:700; white-space:nowrap; }

/* detail */
.dethead h2 { font-size:19px; margin:8px 0 4px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:3px 14px; font-size:13.5px; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; word-break:break-word; }
.ans { border-top:1px solid var(--line); padding:10px 0; }
.ans .h { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.ans .h b { word-break:break-word; }
.ans .c { margin:4px 0 0; white-space:pre-wrap; word-break:break-word; }
.ans .fi { margin-top:6px; font-size:12.5px; color:#475569; }

/* findings editor */
.fedit { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:4px 12px;
         margin-top:10px; align-items:end; }
.fedit .wide { grid-column:1 / -1; }

/* summary */
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:12px; }
.kpi { border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--soft); }
.kpi .l { font-size:12px; color:var(--muted); }
.kpi .n { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi .s { font-size:11.5px; color:var(--muted); }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:50; background:#000; display:flex; flex-direction:column; }
.lbscroll { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center;
            touch-action:pan-x pan-y pinch-zoom; -webkit-overflow-scrolling:touch; }
.lbscroll img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; }
.lightbox.zoom .lbscroll { display:block; }
.lightbox.zoom .lbscroll img { max-width:none; max-height:none; width:250%; cursor:zoom-out; }
.lbclose { position:absolute; top:10px; right:10px; z-index:2; width:44px; height:44px; border-radius:50%;
           background:rgba(255,255,255,.2); color:#fff; font-size:20px; padding:0; }
.lbhint { color:#cbd5e1; font-size:12px; text-align:center; padding:8px; }

/* finding statuses added with validation */
.pillf.validated { background:#dbeafe; color:#1e40af; }
.pillf.rejected { background:#e2e8f0; color:#475569; text-decoration:line-through; }
.pillf.dept { background:#ede9fe; color:#5b21b6; }
.pillf.due { background:#fef3c7; color:#92400e; }
.pillf.overdue { background:#fee2e2; color:#991b1b; }

/* request banner on the start form, feedback note */
.banner { background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:10px 12px; margin:6px 0 10px;
          display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:13.5px; }
.banner .btn { padding:6px 10px; }
.fbnote { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:10px 12px; margin-top:10px;
          white-space:pre-wrap; word-break:break-word; }
.fbnote .by { display:block; font-size:12px; color:var(--muted); margin-top:4px; white-space:normal; }

/* segmented 2 / 4 / 8 weeks */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg button { border:0; background:var(--panel); padding:8px 12px; font:inherit; font-size:13px; cursor:pointer; min-height:38px; }
.seg button + button { border-left:1px solid var(--line); }
.seg button.on { background:var(--accent); color:#fff; font-weight:600; }
#view-summary h3, #view-plan h3 { font-size:14px; margin:14px 0 6px; }
.trend-up { color:var(--red); font-weight:600; }
.trend-down { color:var(--ok); font-weight:600; }

/* plan: priority cards */
.prio .top { align-items:center; }
.prio .score { font-size:12px; font-weight:700; color:#fff; background:var(--accent); border-radius:20px;
               padding:2px 9px; white-space:nowrap; }
.prio .bar { height:5px; background:var(--line); border-radius:4px; margin:6px 0 4px; overflow:hidden; }
.prio .bar i { display:block; height:100%; background:linear-gradient(90deg, #f59e0b, #dc2626); }
.prio ul.why { margin:4px 0 0; padding-left:18px; font-size:12.5px; color:#334155; }
.prio .reqform { margin-top:8px; }
.prog-ok { color:var(--ok); font-weight:700; }
.prog-short { color:var(--red); font-weight:700; }
#progTbl td, #progTbl th, #stTbl td, #acTbl td, #trendRec td:first-child { white-space:nowrap; }

/* ---------------- dark theme for inspection components ---------------- */
[data-theme=dark] .banner { background:#172554; border-color:#1e40af; }
[data-theme=dark] .fbnote { background:#052e16; border-color:#166534; }
[data-theme=dark] .progress { background:#334155; }

/* ---------------- dashboard ---------------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;
         margin-bottom:18px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 16px; }
.tile .v { font-size:26px; font-weight:700; line-height:1.2; }
.tile .l { font-size:12px; color:var(--muted); }
.tile .s { font-size:11.5px; color:var(--muted); margin-top:2px; }
.dch { display:flex; gap:10px; align-items:stretch; height:150px; padding-top:6px; }
.dcol { flex:1; display:flex; flex-direction:column; min-width:0; }
.dbars { flex:1; display:flex; gap:2px; align-items:flex-end; justify-content:center; }
.db { width:14px; min-height:2px; border-radius:4px 4px 0 0; }
.db.i { background:var(--chart1); }
.db.f { background:var(--chart2); }
.dlab { text-align:center; font-size:11px; color:var(--muted); margin-top:4px; }
.legend { font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.dnext { display:flex; flex-direction:column; gap:8px; }
.dline { width:100%; height:auto; display:block; }
.dline .li { stroke:var(--chart1); fill:none; stroke-width:2; }
.dline .lf { stroke:var(--chart2); fill:none; stroke-width:2; stroke-dasharray:5 4; }
.dline .ci { fill:var(--chart1); stroke:var(--panel); stroke-width:1.5; }
.dline .cf { fill:var(--chart2); stroke:var(--panel); stroke-width:1.5; }
.dline text { fill:var(--muted); font-size:11px; text-anchor:middle; }
.rthread { margin-top:8px; border-left:3px solid var(--line); padding-left:10px; }
.rmsg { font-size:13px; color:var(--ink); margin:4px 0; white-space:pre-wrap; word-break:break-word; }
.rmsg .by { display:block; font-size:11.5px; color:var(--muted); }
.rbox { margin-top:8px; }
.rbox textarea { margin-top:6px; }
.rrow { display:flex; gap:8px; align-items:center; margin:6px 0; }
.rrow .dname { max-width:240px; }
.rrow input { flex:1; }