/* MCS Commercial Fishing Inspection Solution
   Department of Forestry, Fisheries and the Environment — official colors
   sampled from the department crest: green #0B6636, sunburst gold #F68222. */
:root{
  --update-banner-h:0px;
  --dffe-green:#0b6636;
  --dffe-green-dark:#084926;
  --dffe-green-tint:#e7f3ec;
  --dffe-gold:#f68222;
  --dffe-gold-tint:#fff1e2;
  --ink:#141a17;
  --ink-soft:#55605a;
  --paper:#f6f7f5;
  --card:#ffffff;
  --line:#dde3df;
  --danger:#b3261e;
  --ok:#0b6636;
  --info:#0f5e8a;
  --radius:8px;
  --shadow:0 1px 3px rgba(10,20,15,.10);
  font-size:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  min-height:100dvh;display:flex;flex-direction:column;
}

/* --- skip-to-content link — off-screen until focused, so a keyboard user doesn't have to
   tab through the entire sidebar (10+ links on every authenticated page) to reach content --- */
.skip-link{
  position:absolute;top:-100px;left:0;z-index:200;
  background:var(--dffe-green);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;
  font-weight:bold;text-decoration:none;transition:top .15s ease;
}
.skip-link:focus{top:0}

/* --- icons (inline SVG, self-hosted — offline PWA can't depend on an icon-font CDN) --- */
.icon{width:18px;height:18px;flex-shrink:0}

/* --- site header (matches DFFE letterhead) --- */
.site-header{background:#fff;border-bottom:3px solid var(--dffe-green);}
.site-header-inner{
  max-width:1100px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand-logo img{height:56px;display:block}
.header-right{display:flex;align-items:center;gap:10px}
.net-badge{font-size:.7rem;font-weight:bold;letter-spacing:.5px;padding:4px 10px;border-radius:99px}
.net-badge.net-on{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
.net-badge.net-off{background:var(--dffe-gold-tint);color:#7a3d0a}

/* --- hero banner (flat brand illustration, no stock photography) --- */
.hero{
  position:relative;height:200px;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(8,44,29,.55), rgba(8,44,29,.72)),
    linear-gradient(120deg, var(--dffe-green) 0%, var(--dffe-green-dark) 60%, #063a24 100%);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:70px;opacity:.5;
  background:
    radial-gradient(ellipse 90px 26px at 10% 100%, #fff2 40%, transparent 41%),
    radial-gradient(ellipse 110px 30px at 35% 100%, #fff2 40%, transparent 41%),
    radial-gradient(ellipse 90px 26px at 65% 100%, #fff2 40%, transparent 41%),
    radial-gradient(ellipse 120px 30px at 90% 100%, #fff2 40%, transparent 41%);
}
.hero-content{
  position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:52px 20px 0;color:#fff;
}
.hero-content h1{margin:0 0 6px;font-size:1.9rem;letter-spacing:.3px}
.breadcrumb{margin:0;opacity:.85;font-size:.9rem}

/* --- page shell --- */
.page{flex:1;width:100%}
.page-inner{max-width:900px;margin:0 auto;padding:24px 20px 60px}

/* --- account bar (Edit account / Log out pills, matches live product) --- */
.account-bar{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;padding:22px 0 8px}
.account-bar .center-logo img{height:70px}

/* --- pill buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:6px;padding:12px 22px;font-size:.95rem;font-weight:bold;
  cursor:pointer;min-height:46px;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
/* .btn's own `display` has the same specificity as the UA [hidden] rule and
   wins the cascade tie, so a hidden .btn would otherwise still render. */
.btn[hidden]{display:none}
.btn-pill{border-radius:99px;padding:12px 26px}
.btn-primary{background:var(--dffe-green);color:#fff}
.btn-primary:hover{background:var(--dffe-green-dark)}
.btn-outline{background:#fff;color:var(--dffe-green);border:1.5px solid var(--dffe-green)}
.btn-outline:hover{background:var(--dffe-green-tint)}
.btn-secondary{background:#eef1ef;color:var(--dffe-green-dark)}
.btn-secondary:hover{background:#e1e7e3}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#8f1d16}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--paper);border-color:var(--ink-soft)}
.btn-link{background:none;border:none;color:var(--info);text-decoration:underline;font-weight:600;cursor:pointer;padding:6px}
.btn-link:hover{color:#0b3a54}
.btn-block{width:100%}
.btn-sm{min-height:34px;padding:6px 14px;font-size:.8rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* Same cascade-tie issue as .btn/.notice/.sidebar-link above. */
.btn-row[hidden]{display:none}

/* --- cards / sections --- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
h2.section-title{
  font-size:1.5rem;font-weight:900;letter-spacing:.3px;color:var(--ink);
  text-align:center;margin:6px 0 20px;text-transform:uppercase;
}
h3.field-group-title{font-size:1rem;font-weight:bold;color:var(--dffe-green-dark);margin:26px 0 12px;border-bottom:2px solid var(--dffe-green-tint);padding-bottom:6px}

/* --- step wizard --- */
.step-label{color:var(--ink-soft);font-weight:bold;margin:0 0 10px}
.progress-track{height:8px;border-radius:99px;background:#e3e7e4;overflow:hidden}
.progress-fill{height:100%;background:var(--dffe-green);border-radius:99px;transition:width .25s ease}

/* --- form elements --- */
label{display:block;font-weight:bold;font-size:.88rem;margin:16px 0 6px;color:var(--ink)}
label .req{color:var(--danger);font-weight:bold}
.field-hint{color:var(--ink-soft);font-size:.8rem;margin-top:4px}
/* Code font: only for real technical names admins see (Form Builder keys, task names). */
.mono{font-family:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace;letter-spacing:.2px}
/* Reference numbers (MCS-2026-00001) and similar: the app's own font, digits evenly
   spaced so lists still line up (10 November 2026; they used to be in the code font). */
.ref{font-variant-numeric:tabular-nums;letter-spacing:.3px;font-weight:600;white-space:nowrap}   /* never split at a hyphen */
.pw-rules{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px}
.pw-rule{color:var(--ink-soft);font-size:.8rem}
.pw-rule-ok{color:var(--dffe-green-dark);font-weight:bold}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
select,textarea{
  width:100%;padding:13px;border:1.5px solid var(--line);border-radius:6px;
  font-size:1rem;background:#fff;color:var(--ink);font-family:inherit;
}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #9ecab0;outline-offset:1px}
.field-error{border-color:var(--danger)!important;background:#fff7f6}

/* --- password visibility toggle --- */
.pw-field{position:relative}
.pw-field input{padding-right:42px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:none;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink-soft);border-radius:6px;
}
.pw-toggle:hover{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
.pw-toggle .icon{width:19px;height:19px}
.err-msg{color:var(--danger);font-size:.8rem;margin-top:4px}
.err-summary{background:#fdecea;border:1px solid var(--danger);border-radius:8px;padding:12px 16px;margin-bottom:16px;color:#7a1a14;font-size:.9rem}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.row2{grid-template-columns:1fr}}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:760px){.row3{grid-template-columns:1fr}}

/* --- radio / checkbox tiles (matches live form's circular selectors) --- */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:10px 0}
@media (max-width:600px){.choice-grid{grid-template-columns:1fr}}
.choice-block h4{font-size:.85rem;font-weight:bold;letter-spacing:.4px;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.choice{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:.98rem}
.choice input[type=radio],.choice input[type=checkbox]{width:20px;height:20px;accent-color:var(--dffe-green);flex-shrink:0}
.choice label{margin:0;font-weight:normal;font-size:1rem}

.sector-groups{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin:14px 0}
@media (max-width:800px){.sector-groups{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sector-groups{grid-template-columns:1fr}}
.sector-group h4{font-size:.85rem;font-weight:bold;text-transform:uppercase;letter-spacing:.4px;color:var(--dffe-green-dark);margin:0 0 10px}
.sector-group .choice{padding:6px 0}

/* --- offline / status banners --- */
.notice{border-radius:8px;padding:12px 16px;font-size:.9rem;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
/* Same cascade-tie issue as .btn above: .notice's own `display` otherwise
   beats the UA [hidden] rule, so a hidden notice would still render. */
.notice[hidden]{display:none}
.notice-offline{background:var(--dffe-gold-tint);border:1.5px solid var(--dffe-gold);color:#7a3d0a}
.notice-info{background:#eaf3fb;border:1.5px solid #9dc7e6;color:#0f4c72}
/* New version waiting: blocks the whole screen until the user updates. */
.update-overlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(12,32,22,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.update-overlay[hidden]{display:none}
.update-card{background:#fff;border-radius:14px;padding:28px 24px 24px;max-width:380px;width:100%;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.3)}
.update-card img{display:block;margin:0 auto 14px}
.update-title{font-size:1.15rem;font-weight:bold;color:var(--ink);margin:0 0 6px;line-height:1.35}
.update-note{color:var(--ink-soft);font-size:.88rem;margin:0 0 6px}
.update-card .btn{width:100%;margin-top:14px;padding:14px;font-size:1rem}
html.update-blocked,html.update-blocked body{overflow:hidden}

/* --- badges --- */
.badge{font-size:.72rem;font-weight:bold;letter-spacing:.4px;padding:4px 10px;border-radius:99px;display:inline-block}
.badge-SUBMITTED{background:#dbeafe;color:#1e3a8a}
.badge-CI_VERIFIED,.badge-AD_VERIFIED{background:#fef3c7;color:#92400e}
.badge-APPROVED{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
.badge-REJECTED_TO_OFFICIAL,.badge-REJECTED_TO_CI,.badge-REJECTED_TO_AD{background:#fde2e0;color:#8f1d16}
.badge-pending{background:var(--dffe-gold-tint);color:#7a3d0a}
.badge-draft{background:#eef1ef;color:var(--ink-soft)}
.badge-synced{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
.badge-error{background:#fde2e0;color:#8f1d16}
.badge-active{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
.badge-deactivated,.badge-locked{background:#fde2e0;color:#8f1d16}
.badge-dormant,.badge-pending-approval{background:var(--dffe-gold-tint);color:#7a3d0a}
.badge-unverified,.badge-rejected{background:#eef1ef;color:var(--ink-soft)}

/* --- dashboard list --- */
.list-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#fff;cursor:pointer;
  color:inherit;text-decoration:none;
}
/* Real <a>/<button>-based list items get a visible focus ring for keyboard nav — a bare
   div+onclick (the old pattern here) skipped this by construction, not by choice. */
.list-item:focus-visible{outline:3px solid var(--dffe-green);outline-offset:2px}
.list-item{transition:border-color .15s}
.list-item:hover{border-color:var(--dffe-green)}
.li-badges{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
/* Review queue and My activity (approved 13 November 2026): sort by date modified, and a
   mini progress bar with one part per sign-off (Chief MCI, Assistant Director, Deputy Director). */
.rv-sort{margin:-4px 0 16px}
.rv-progress{display:flex;align-items:center;gap:8px;margin-top:8px}
.rv-bar{display:flex;gap:3px;width:120px;flex:none}
.rv-bar span{flex:1;height:6px;border-radius:3px;background:#e3e7e4}
.rv-bar .done{background:var(--dffe-green)}
.rv-bar .now{background:var(--dffe-gold)}
.rv-bar.returned span{background:#f3b9b4}
.rv-progress .field-hint{font-size:.78rem}

/* --- species / permit repeater --- */
.species-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:10px}
@media (max-width:600px){.species-row{grid-template-columns:1fr 1fr}}

/* --- official repeater (name + date, no org column) --- */
.official-row{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:end;margin-bottom:10px}
@media (max-width:600px){.official-row{grid-template-columns:1fr 1fr}}

/* --- signature pad --- */
.sig-pad{border:1.5px dashed var(--ink-soft);border-radius:8px;background:#fff;touch-action:none;width:100%;height:140px;display:block}
.sig-tools{display:flex;justify-content:flex-end;margin-top:4px}

/* --- reports --- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}
th{background:var(--dffe-green-tint);color:var(--dffe-green-dark);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
.bar{background:var(--dffe-green);height:14px;border-radius:3px;min-width:2px}
.report-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.report-tabs .btn{min-height:40px;padding:8px 16px;font-size:.85rem}
.report-tabs .active{background:var(--dffe-green);color:#fff}
.report-title-banner{
  border:1.5px solid var(--ink);border-radius:6px;padding:14px 20px;margin-bottom:20px;
  text-align:center;font-weight:900;font-size:1.05rem;letter-spacing:.2px;
}
#repBody table{font-size:.78rem}
#repBody th,#repBody td{padding:7px 8px}
#repBody th{font-size:.68rem}
#repBody .report-title-banner{font-size:.88rem;padding:10px 16px}

/* --- admin user list: grouped by role, numbered, collapsed by default --- */
.user-ol{list-style:decimal outside;padding-left:22px;margin:0 0 22px}
.user-ol li{margin-bottom:8px;padding-left:6px}
.user-row{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.user-summary{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.user-summary:hover{background:#f7f9f7}
.user-edit{padding:2px 14px 14px;border-top:1px solid var(--line)}

/* --- admin stat tiles --- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:18px 0}
.stat-tile{background:var(--dffe-green-tint);border-radius:10px;padding:16px;text-align:center;text-decoration:none;display:block;cursor:pointer;transition:background .15s}
.stat-tile:hover{background:var(--dffe-green-tint2,#d3e8db)}
.stat-tile .num{font-size:1.8rem;font-weight:bold;color:var(--dffe-green-dark);display:block}
.stat-tile .label{font-size:.78rem;color:var(--ink-soft)}

/* --- detail view --- */
.kv{display:grid;grid-template-columns:minmax(190px,40%) 1fr;gap:7px 14px;font-size:.92rem}
.kv dt{color:var(--ink-soft)}
.kv dd{margin:0;font-weight:bold;word-break:break-word}
.history li{margin-bottom:6px;font-size:.88rem}
.sig-img{max-width:260px;border:1px solid var(--line);border-radius:6px;background:#fff;display:block}

/* --- photo evidence: capture grid on the wizard, gallery on the detail view --- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-bottom:10px}
.photo-grid:empty{display:none}
.photo-thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb .photo-remove{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(20,26,23,.7);
  color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;padding:0;
}
.photo-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
button.photo-thumb{width:100%;font:inherit}
.photo-open:focus-visible{outline:3px solid var(--dffe-green);outline-offset:-3px}

/* --- photo viewer (MCSPhotoViewer): full screen, opened from any photo-evidence thumbnail --- */
html.pv-open{overflow:hidden}
dialog.pv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,12,11,.95);color:#fff;overflow:hidden}
dialog.pv::backdrop{background:transparent}
.pv-stage{position:absolute;top:58px;bottom:78px;left:0;right:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pv-img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}
.pv.pv-can-zoom .pv-img{cursor:zoom-in}
.pv.pv-zoom .pv-stage{display:block;overflow:auto}
.pv.pv-zoom .pv-img{display:block;max-width:none;max-height:none;margin:auto;cursor:zoom-out}
.pv-img[hidden],.pv-missing[hidden]{display:none}
.pv-missing{margin:0;color:#c9cfcb;font-size:.9rem}
.pv-count{position:absolute;top:18px;left:18px;margin:0;font-size:.9rem}
.pv-btn{position:absolute;width:40px;height:40px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pv-btn[hidden]{display:none}
.pv-btn:hover{background:rgba(255,255,255,.26)}
.pv-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pv-btn .icon{width:20px;height:20px}
.pv-close{top:9px;right:12px}
.pv-prev,.pv-next{top:50%;transform:translateY(-50%)}
.pv-prev{left:12px}
.pv-next{right:12px}
.pv-foot{position:absolute;left:0;right:0;bottom:14px;padding:0 16px;text-align:center}
.pv-caption{margin:0 0 4px;font-size:.9rem}
.pv-caption:empty{display:none}
.pv-hint{margin:0;color:#c9cfcb;font-size:.78rem}
.pv-hint-touch{display:none}
@media (pointer:coarse){.pv-hint-touch{display:inline}.pv-hint-keys{display:none}}
.pv-dots{display:none;justify-content:center;gap:6px;margin-top:10px}
.pv-dots span{width:6px;height:6px;border-radius:50%;background:#777}
.pv-dots span.on{background:#fff}
@media screen and (max-width:760px){dialog.pv{background:#0b0d0c}.pv-dots{display:flex}}

/* --- footer --- */
.site-footer{background:#fff;border-top:1px solid var(--line);text-align:center;padding:18px;color:var(--ink-soft);font-size:.8rem}

/* --- guest (auth) layout --- */
.guest-body{align-items:stretch;background:var(--paper)}
.guest-wrap{max-width:460px;margin:6vh auto 0;padding:0 20px 40px}
.guest-brand{text-align:center;margin-bottom:22px}
.guest-logo{height:60px}
.guest-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:28px}
.guest-card h1{font-size:1.3rem;margin:0 0 6px;text-align:center}
.guest-card .sub{color:var(--ink-soft);font-size:.88rem;text-align:center;margin:0 0 18px}
.guest-links{display:flex;justify-content:space-between;margin-top:14px}
.guest-footnote{text-align:center;color:var(--ink-soft);font-size:.78rem;margin-top:20px}
.tag-otp{font-family:ui-monospace,monospace;background:var(--dffe-green-tint);color:var(--dffe-green-dark);padding:3px 9px;border-radius:5px;font-weight:bold}
/* Stations page: the people on one review step, each removable, plus an "Add" select. */
.person-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.person-list select{max-width:100%}
.person-chip{display:inline-flex;align-items:center;gap:2px;background:var(--dffe-green-tint);color:var(--dffe-green-dark);border-radius:99px;padding:2px 2px 2px 10px;font-size:.85rem}
.person-chip-x{border:none;background:transparent;color:inherit;font-size:1.05rem;line-height:1;cursor:pointer;min-width:32px;min-height:32px;border-radius:99px}
.person-chip-x:hover{background:rgba(0,0,0,.08)}
.add-station{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.add-station input{flex:1;min-width:180px}
.dt tr.row-new td{background:var(--dffe-green-tint)}
.area-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.card.card-new{box-shadow:0 0 0 2px var(--dffe-green)}
.area-section-title{font-size:1rem;margin:28px 0 10px;color:var(--ink-soft)}
.card.area-disabled{background:#f6f7f6}
.card.area-disabled .area-head{margin-bottom:0}
.send-to{max-width:440px;margin-bottom:14px}
.dt tr.row-off td{background:#f6f7f6;color:var(--ink-soft)}
.station-toggle{margin-top:6px;padding:3px 10px;font-size:.75rem;font-family:inherit;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink-soft);cursor:pointer}
.station-toggle:hover{border-color:var(--ink-soft);color:var(--ink)}

/* --- toast --- */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:50;font-size:.92rem;max-width:90vw;
}
.toast.ok{background:var(--dffe-green)} .toast.err{background:var(--danger)}

/* --- dashboard shell (sidebar layout) --- */
.app-shell{display:flex;min-height:100dvh;width:100%}
.sidebar{
  width:230px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 14px;position:sticky;
  top:var(--update-banner-h);height:calc(100dvh - var(--update-banner-h));overflow-y:auto;
}
.sidebar-brand-row{display:flex;align-items:center;justify-content:space-between}
.sidebar-brand{display:block;padding:6px 10px 18px}
.sidebar-brand img{height:44px;display:block}
.sidebar-close-btn{display:none}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar-label{font-size:.7rem;font-weight:bold;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-soft);margin:14px 10px 6px}
.sidebar-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--ink-soft);text-decoration:none;font-size:.92rem;font-weight:600;
  border:none;background:none;text-align:left;width:100%;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s;
}
.sidebar-link .icon{color:inherit}
/* Same cascade-tie issue as .btn/.notice above. */
.sidebar-link[hidden]{display:none}
.sidebar-link:hover{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
.sidebar-link.active{background:var(--dffe-green);color:#fff}
.sidebar-status{padding:12px 10px 0;border-top:1px solid var(--line);margin-top:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sidebar-ios-hint{
  width:100%;background:var(--dffe-green-tint);border:1px solid var(--dffe-green);border-radius:8px;
  padding:10px 12px;font-size:.78rem;line-height:1.4;color:var(--dffe-green-dark);
  display:flex;flex-direction:column;gap:6px;box-sizing:border-box;
}
.sidebar-ios-hint[hidden]{display:none}
.sidebar-ios-hint button{align-self:flex-end;padding:2px 4px;font-size:.75rem}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-page{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:22px 28px 40px}

.sidebar-backdrop{display:none}

/* --- topbar --- */
.dash-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.dash-search{position:relative;flex:1;min-width:200px;max-width:360px}
.dash-search input{width:100%;padding:10px 12px 10px 38px;border:1.5px solid var(--line);border-radius:8px;font-size:.9rem;font-family:inherit}
.dash-search input:focus{outline:3px solid #9ecab0;outline-offset:1px}
.dash-search .icon-search{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-soft)}
.dash-search .kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.7rem;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1px 6px;pointer-events:none}
.dash-topbar-right{display:flex;align-items:center;gap:14px}
.icon-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;
}
.icon-btn:hover{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
.m-search-btn{display:none}
.m-sync-btn{display:none}
.notice-action{margin-left:4px;padding:0;font-weight:bold;white-space:nowrap}
.m-home-title,.m-home-who{display:none}
.icon-btn .badge-dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--dffe-gold);border:1.5px solid #fff}
.icon-btn .badge-dot[hidden]{display:none}
.dash-user{text-align:right}
.dash-user-name{font-weight:bold;font-size:.9rem}
.dash-user-email{font-size:.78rem;color:var(--ink-soft)}

.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.dash-title{font-size:1.6rem;margin:0 0 4px}
.dash-sub{color:var(--ink-soft);margin:0;font-size:.9rem}

/* --- stat cards --- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:18px;transition:box-shadow .15s}
.stat-card:hover{box-shadow:0 4px 14px rgba(10,20,15,.14)}
a.stat-card{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.stat-card:focus-visible{outline:3px solid var(--dffe-gold);outline-offset:2px}
.stat-card .stat-icon{width:20px;height:20px;color:var(--dffe-green);display:block;margin-bottom:10px}
.stat-card .num{font-size:1.9rem;font-weight:900;display:block}
.stat-card .label{font-size:.8rem;color:var(--ink-soft);margin-top:2px}
.stat-card.accent{background:var(--dffe-green);color:#fff;border-color:var(--dffe-green)}
.stat-card.accent .stat-icon{color:#fff}
.stat-card.accent .label{color:#dff2e6}

/* --- live tracker cards (dashboard: where is my inspection right now) --- */
.tracker-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tracker-card{
  display:block;border-radius:10px;padding:7px 12px;color:#fff;text-decoration:none;
  background:linear-gradient(120deg, var(--dffe-green) 0%, var(--dffe-green-dark) 60%, #063a24 100%);
  box-shadow:0 4px 18px rgba(6,20,13,.28);
}
.tracker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.tracker-head strong{font-size:.8rem}
.tracker-track{position:relative;padding-top:6px;margin-bottom:0}
.tracker-line{height:2px;border-radius:99px;background:rgba(255,255,255,.22);position:relative;margin:0 7px}
.tracker-line-fill{height:100%;border-radius:99px;background:var(--dffe-gold);transition:width .4s ease}
.tracker-boat{
  position:absolute;top:-4px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;   /* centred on the line: 6 + 2/2 - 22/2 */
  background:var(--dffe-gold);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(246,130,34,.28);transition:left .4s ease;animation:tracker-pulse 2.2s ease-in-out infinite;
}
.tracker-boat .icon{width:14px;height:14px;color:#1f1300}
@keyframes tracker-pulse{
  0%,100%{box-shadow:0 0 0 2px rgba(246,130,34,.28)}
  50%{box-shadow:0 0 0 4px rgba(246,130,34,.12)}
}
.tracker-dots{display:flex;justify-content:space-between;margin-top:10px}
.tracker-dot{flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.55);position:relative}
.tracker-dot.done{color:rgba(255,255,255,.9)}
.tracker-dot.current{color:var(--dffe-gold);font-weight:bold}

/* --- loading spinner (shown in a content area while its data fetch is in flight) --- */
.loading-spinner{
  width:30px;height:30px;margin:40px auto;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--dffe-green);
  animation:mcs-spin .7s linear infinite;
}
@keyframes mcs-spin{to{transform:rotate(360deg)}}
.tracker-foot{font-size:.68rem;color:rgba(255,255,255,.8);margin-top:3px}

/* --- chart / donut row --- */
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media (max-width:860px){.dash-grid{grid-template-columns:1fr}}
.chart-hint{color:var(--ink-soft);font-size:.85rem}
.week-chart{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:10px}
.week-chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.week-chart .bar-outer{width:100%;height:110px;display:flex;align-items:flex-end;background:var(--paper);border-radius:6px 6px 0 0}
.week-chart .bar-fill{width:100%;background:var(--dffe-green);border-radius:6px 6px 0 0;min-height:2px}
.week-chart .day-label{font-size:.72rem;color:var(--ink-soft)}
.week-chart .day-count{font-size:.72rem;color:var(--ink-soft);font-weight:bold}

.donut-wrap{display:flex;justify-content:center;padding:6px 0}
.donut{width:140px;height:140px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}
.donut .donut-center{background:#fff;border-radius:50%;width:88px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .donut-center .num{font-size:1.3rem;font-weight:900}
.donut .donut-center .label{font-size:.65rem;color:var(--ink-soft)}
.donut-legend{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:6px;font-size:.82rem}
.donut-legend li{display:flex;align-items:center;justify-content:space-between;gap:8px}
.donut-legend .swatch-label{display:flex;align-items:center;gap:8px}
.donut-legend .swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0}

/* --- split-panel auth (login / register) --- */
.split-body{background:var(--paper);align-items:stretch}
.split-shell{min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.split-frame{
  position:relative;display:grid;grid-template-columns:44% 56%;width:100%;max-width:1180px;min-height:680px;
  border-radius:32px;overflow:hidden;box-shadow:0 24px 60px rgba(10,20,15,.22);
}
@media (max-width:900px){.split-frame{grid-template-columns:1fr;max-width:460px;min-height:0}}

/* left: photo panel — gradient darkens the shot so the white text stays legible;
   fallback gradient behind the photo covers any load gap or missing-file edge case. */
.split-photo{
  position:relative;min-width:0;color:#fff;padding:36px 32px;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  background-image:
    linear-gradient(180deg, rgba(11,102,54,.55) 0%, rgba(8,73,38,.65) 45%, rgba(4,28,18,.92) 100%),
    url('/images/auth-bg.jpg'),
    linear-gradient(150deg, #0e7a40 0%, #0b6636 45%, #063a24 100%);
  background-size:cover;background-position:20% center;
}
@media (max-width:900px){.split-photo{min-height:220px}}
.split-photo-top{display:flex;align-items:center;gap:12px}
.split-photo-crest{width:38px;height:38px;flex-shrink:0;background:#fff;border-radius:50%;padding:5px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.split-photo-brand{font-size:.82rem;font-weight:bold;letter-spacing:.2px}
.split-photo-brand-sub{font-size:.7rem;opacity:.78}
.split-tagline h2{font-size:1.9rem;line-height:1.15;font-weight:900;margin:0 0 10px;letter-spacing:-.3px}
.split-tagline p{margin:0;opacity:.82;font-size:.92rem;max-width:340px}

/* decorative scalloped seam — a handful of white circles straddling the panel
   boundary, echoing the reference design's wavy-card cutout without a full CSS mask. */
.seam-dot{position:absolute;left:44%;transform:translate(-50%,-50%);border-radius:50%;background:#fff;z-index:2}
@media (max-width:900px){.seam-dot{display:none}}

.split-card-wrap{position:relative;z-index:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:48px 44px;overflow-y:auto;max-height:100%}
.split-card{width:100%;max-width:400px}
.split-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px}
.split-logo img{height:38px}
.split-card h1{font-size:1.6rem;text-align:center;margin:0 0 6px}
.split-card .sub{text-align:center;color:var(--ink-soft);font-size:.88rem;margin:0 0 24px}

.field-underline{margin-bottom:20px}
.field-underline label{display:block;font-size:.78rem;font-weight:bold;color:var(--ink-soft);margin-bottom:6px}
.field-underline input,.field-underline select{
  width:100%;border:none;border-bottom:1.5px solid var(--line);border-radius:0;
  padding:8px 2px;font-size:1rem;background:transparent;font-family:inherit;color:var(--ink);
}
.field-underline input:focus,.field-underline select:focus{outline:none;border-bottom-color:var(--dffe-green)}

.split-row{display:flex;align-items:center;justify-content:flex-end;margin:-6px 0 20px;font-size:.85rem}
.split-row a{color:var(--dffe-green-dark);text-decoration:none;font-weight:600}
.split-row a:hover{text-decoration:underline}

.btn-gradient{
  width:100%;position:relative;border:none;border-radius:14px;padding:16px 60px 16px 22px;
  font-size:1rem;font-weight:bold;color:#fff;cursor:pointer;text-align:left;
  background:linear-gradient(90deg,var(--dffe-green) 0%,var(--dffe-green-dark) 100%);
  transition:box-shadow .15s,transform .1s;
}
.btn-gradient:hover{box-shadow:0 6px 18px rgba(6,58,36,.35);transform:translateY(-1px)}
.btn-gradient:active{transform:translateY(0)}
.btn-gradient .arrow-bubble{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;background:var(--dffe-gold);
  display:flex;align-items:center;justify-content:center;color:#141a17;
  transition:background .15s,transform .2s ease;
}
.btn-gradient:hover .arrow-bubble{background:#ffa64d;transform:translate(-10px,-50%)}
.btn-gradient .arrow-bubble svg{width:18px;height:18px}
.btn-gradient:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}

.split-switch{text-align:center;margin-top:20px;font-size:.9rem;color:var(--ink-soft)}
.split-switch a{color:var(--dffe-green-dark);font-weight:bold;text-decoration:none}
.split-switch a:hover{text-decoration:underline}
.split-secondary-link{display:block;text-align:center;margin-top:12px;font-size:.82rem;color:var(--ink-soft);text-decoration:none}
.split-secondary-link:hover{text-decoration:underline}

/* Sign in, Register, Forgot and Reset password on a phone (approved 14 November 2026): the
   photo at the top fading into frosted green, rounded see-through fields, white text, flat
   icons in the Sign in, Forgot and Reset password fields. The buttons and the Register line
   keep their design. Computers and tablets are unchanged. */
.f-ico,.guest-photo{display:none}
@media screen and (max-width:760px){
  .split-body,.guest-body{background:#05180f}
  .split-shell{display:block;min-height:100dvh;padding:0;position:relative;isolation:isolate}
  /* the photo again, blurred and tinted green, behind everything: the frosted look */
  .split-shell::before,.guest-wrap::before{content:'';position:fixed;inset:-60px;z-index:-2;background:url('/images/auth-bg.jpg') 20% center/cover;filter:blur(30px) saturate(1.1)}
  .split-shell::after,.guest-wrap::after{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,52,30,.62) 0%,rgba(5,36,21,.86) 50%,rgba(4,24,14,.96) 100%)}
  /* Reset password has its own simpler layout: the photo header shows, the card melts away */
  .guest-wrap{display:flex;flex-direction:column;min-height:100dvh;max-width:none;margin:0;padding:0;position:relative;isolation:isolate}
  .guest-body .guest-photo{display:flex}
  .guest-brand{display:none}
  .guest-card{width:100%;max-width:460px;box-sizing:border-box;margin:-24px auto 0;padding:0 20px;background:none;border:none;border-radius:0;box-shadow:none;color:#fff}
  .guest-card h1{color:#fff;font-size:2rem;font-weight:700;letter-spacing:-.4px;margin:0 0 22px}
  .guest-card .pw-rules{color:rgba(255,255,255,.72)}
  .guest-footnote{color:rgba(255,255,255,.5);margin:18px 0 0;padding:0 20px calc(22px + env(safe-area-inset-bottom))}
  .g-field{position:relative;margin-bottom:12px}
  .split-frame{display:flex;flex-direction:column;min-height:100dvh;max-width:none;border-radius:0;box-shadow:none;overflow:visible;background:none}
  /* the photo itself, sharp at the top and fading into the green */
  .split-photo{position:relative;z-index:0;flex:1 0 auto;min-height:36vh;justify-content:flex-start;padding:calc(18px + env(safe-area-inset-top)) 20px 20px;background:none}
  .split-photo::before{content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(4,24,14,.6) 0%,rgba(4,24,14,0) 30%),url('/images/auth-bg.jpg') 16% center/cover;
    -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 92%);mask-image:linear-gradient(180deg,#000 42%,transparent 92%)}
  .split-tagline,.split-logo{display:none}
  .split-card-wrap{display:block;background:none;padding:0 20px calc(26px + env(safe-area-inset-bottom));margin-top:-24px;overflow:visible;max-height:none}
  .split-card{max-width:420px;margin:0 auto;color:#fff}
  .split-card h1{color:#fff;font-size:2rem;font-weight:700;letter-spacing:-.4px;margin-bottom:6px}
  .split-card .sub{color:rgba(255,255,255,.72);font-size:.95rem;margin:0 0 22px}
  .split-card .sub strong{color:#fff}
  .split-card .field-hint,.split-card .pw-rules{color:rgba(255,255,255,.72)}
  .field-underline{position:relative;margin-bottom:12px}
  .split-card .row2{row-gap:0}   /* side-by-side pairs stack on a phone: the same gap as every other field */
  .field-underline label{color:rgba(255,255,255,.85);margin:0 0 6px 8px}
  .field-underline .req{color:#ffb4a8}
  .f-iconic label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
  .field-underline input,.field-underline select,.g-field input{height:56px;padding:0 20px;border:1px solid rgba(255,255,255,.16);border-radius:99px;
    background-color:rgba(255,255,255,.08);color:#fff;font-size:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .field-underline select{-webkit-appearance:none;appearance:none;padding-right:46px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 18px center;background-size:16px}
  .field-underline select option{color:var(--ink)}
  .f-iconic input{padding-left:52px}
  .split-card .pw-field input,.guest-card .pw-field input{padding-right:52px}
  .field-underline input::placeholder,.g-field input::placeholder{color:rgba(255,255,255,.62)}
  .field-underline input:focus,.field-underline select:focus,.g-field input:focus{border-color:rgba(255,255,255,.6);background-color:rgba(255,255,255,.13)}
  .field-underline input:-webkit-autofill,.g-field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #123d27 inset;caret-color:#fff}
  .f-ico{display:block;position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:rgba(255,255,255,.82);pointer-events:none;z-index:1}
  .split-card .pw-toggle,.guest-card .pw-toggle{right:10px;width:38px;height:38px;border-radius:50%;color:rgba(255,255,255,.8)}
  .split-card .pw-toggle:hover,.guest-card .pw-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
  .split-row{margin:2px 4px 18px}
  .split-row a{color:rgba(255,255,255,.88)}
  .split-switch,.split-secondary-link{color:rgba(255,255,255,.72)}
  .split-switch a{color:#fff}
  .split-card .notice{border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .split-card .notice-offline{border-color:rgba(246,130,34,.7);background:rgba(246,130,34,.14)}
}

@media print{ .sidebar,.dash-topbar,.btn-row,.site-footer,#messagesSection,#assignmentSection,#repMap{display:none!important} }
@media print{ .site-header,.hero,.account-bar,.btn-row,.site-footer,.report-tabs{display:none!important} }

.print-letterhead{display:none}
@media print{
  .print-letterhead{
    display:flex;align-items:center;gap:.75rem;
    padding-bottom:.75rem;margin-bottom:1rem;border-bottom:2px solid var(--dffe-green);
  }
  .print-letterhead img{height:44px;width:auto}
  .print-letterhead-text{display:flex;flex-direction:column;gap:.15rem}
  .print-letterhead-text strong{font-size:.95rem}
  .print-letterhead-text span{font-size:.78rem;color:#555}
}

/* --- phone app layout ---
   Up to 760px the app behaves like an installed app: a floating bar and + button replace the
   sidebar, and the sidebar element itself becomes the More sheet, so sync, install and log
   out keep their single wiring. "screen" keeps all of this out of printed pages. */
.m-only,.m-logo,.m-page-title,.m-who,.m-grab,.m-bar,.m-offline,.m-pending,.m-back-icon{display:none}

@media screen and (max-width:760px){
  /* How far the floating bar sits above the bottom edge. On iPhones with a home bar it
     clears the home bar by a small gap rather than adding the whole allowance on top
     (it sat about 48 px up; 11 November 2026). Elsewhere it is 12 px. */
  :root{--m-bar-gap:max(12px, calc(env(safe-area-inset-bottom) - 10px))}
  .dash-page{position:relative;padding:calc(14px + env(safe-area-inset-top)) 16px calc(102px + var(--m-bar-gap))}
  .app-shell{flex-direction:column}
  .site-footer,.dash-user,#reportsBtn,#newInspectionBtn{display:none!important}
  /* Home on a phone: a search button beside the bell; tapping it opens the search box on
     its own full-width row under the logo (10 November 2026). 16px text stops iPhones
     zooming on focus. */
  .m-search-btn{display:flex}
  body.m-search-open .m-search-btn{background:var(--dffe-green-tint);color:var(--dffe-green-dark)}
  .dash-search{display:none;max-width:none;min-width:0}
  body.m-search-open .dash-search{display:block}
  /* Home's top: logo, "Dashboard" and the buttons on one row; the person's name and
     position underneath, starting under the logo; the search box (when open) below. */
  body[data-nav="dashboard"] .dash-topbar{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:0;margin-bottom:16px;
    grid-template-areas:"logo title actions" "who who who" "search search search";
  }
  body[data-nav="dashboard"] .m-logo{grid-area:logo;height:26px}
  body[data-nav="dashboard"] .dash-topbar-right{grid-area:actions;gap:6px}
  body[data-nav="dashboard"] .dash-search{grid-area:search;margin-top:12px}
  body[data-nav="dashboard"] .dash-head{display:none}
  .m-home-title{display:block;grid-area:title;margin:0;font-size:clamp(1rem,4.5vw,1.3rem);line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Who is signed in: the initials circle (as in the More sheet), then name, position and
     the directorate as a small green tag (approved 10 November 2026). */
  .m-home-who{display:flex;align-items:center;gap:12px;grid-area:who;margin:12px 0 0;min-width:0;
    color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:14px}
  .m-home-who:active{background:var(--dffe-green-tint)}
  .m-who-go{width:18px;height:18px;margin-left:auto;flex:none;color:var(--ink-soft)}
  .m-home-who .m-av{width:48px;height:48px;font-size:1rem}
  .m-home-who-text{display:flex;flex-direction:column;align-items:flex-start;margin:0;line-height:1.35;min-width:0}
  .m-home-who-text strong{font-size:.98rem;color:var(--ink)}
  .m-home-who-text span{font-size:.82rem;color:var(--ink-soft)}
  .m-home-who-text small{margin-top:5px;padding:2px 9px;border-radius:99px;background:var(--dffe-green-tint);color:var(--dffe-green-dark);
    font-size:.7rem;font-weight:bold;letter-spacing:.2px}
  .m-home-who-text small:empty{display:none}
  @media (max-width:345px){   /* the smallest phones: "Dashboard" on its own line under the logo, so it stays whole */
    body[data-nav="dashboard"] .dash-topbar{grid-template-areas:"logo . actions" "title title title" "who who who" "search search search"}
    .m-home-title{font-size:1.15rem;margin-top:8px}
  }
  .dash-search input{font-size:16px;padding-top:12px;padding-bottom:12px}
  .ds-results{width:100%;max-width:none}

  /* top row: title and bell share a line; Home has the logo instead */
  .dash-topbar{margin:0 0 12px;min-height:44px;flex-wrap:nowrap;gap:10px}
  .dash-topbar-right{gap:8px}
  /* Round buttons at the top: white with a soft shadow instead of an outline (14 November 2026). */
  .icon-btn{width:44px;height:44px;border-radius:50%;border-color:transparent;background:#fff;box-shadow:0 2px 12px rgba(10,20,15,.13)}
  .m-logo{display:block;height:32px}
  .dash-head{margin-bottom:14px}
  .dash-title{font-size:1.4rem;line-height:1.25}
  /* Every page but Home has a back arrow (11 November 2026): top left, the title beside it. */
  body:not(.m-focus):not([data-nav="dashboard"]) .dash-topbar{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px;right:16px;margin:0;pointer-events:none}
  body:not(.m-focus):not([data-nav="dashboard"]) .dash-topbar>*{pointer-events:auto}
  body:not(.m-focus):not([data-nav="dashboard"]) .dash-head{min-height:44px;padding-right:110px;align-items:center}
  body:not(.m-focus):not([data-nav="dashboard"]) .dash-title{display:flex;align-items:center;min-height:44px;padding-left:54px}
  @media (max-width:389px){   /* small phones: the title shrinks a little so it stays on one line beside the arrow */
    body:not(.m-focus):not([data-nav="dashboard"]) .dash-title{font-size:clamp(1rem, calc((100vw - 200px) / 8.7), 1.4rem)}
  }
  .is-offline #notifBtn{display:none}
  /* Sync button (MCSSyncButton): the cloud with a small badge for its state. */
  .m-sync-btn{display:flex}
  .m-sync-btn .icon{width:22px;height:22px}
  .m-sync-badge{position:absolute;right:2px;bottom:4px;display:flex;align-items:center;justify-content:center;
    min-width:16px;height:16px;padding:0 3px;border-radius:99px;border:1.5px solid #fff;color:#fff;font-size:.6rem;font-weight:bold;line-height:1}
  .m-sync-badge .icon{width:10px;height:10px;stroke-width:3.2}
  .m-sync-btn.is-ok .m-sync-badge{background:var(--dffe-green)}
  .m-sync-btn.is-wait{color:#92400e}
  .m-sync-btn.is-wait .m-sync-badge{background:#d97706;top:2px;bottom:auto;right:0}
  .m-sync-btn.is-fail{color:#8f1d16}
  .m-sync-btn.is-fail .m-sync-badge{background:#b42318;top:2px;bottom:auto;right:0}
  .m-sync-btn.is-busy{color:var(--dffe-green-dark)}
  .m-sync-btn.is-busy .m-sync-badge{min-width:0;width:14px;height:14px;padding:0;background:#fff;border:2px solid var(--dffe-green);
    border-top-color:transparent;animation:mcs-spin .8s linear infinite}
  /* Offline: the label inspectors at sea rely on, with the crossed-out cloud. */
  .m-sync-btn.is-off{width:auto;height:36px;padding:0 12px;gap:6px;border-radius:99px;background:var(--dffe-gold-tint);
    border-color:var(--dffe-gold);color:#7a3d0a;font-size:.78rem;font-weight:bold;font-family:inherit}
  .m-sync-btn.is-off .icon{width:17px;height:17px}

  /* focus screens: back arrow, centred title, no bar */
  .m-page-title{display:block;font-weight:normal;font-size:1.02rem}
  /* Titles in regular weight (approved 14 November 2026): the page's name at the top and the
     name on each card. Section headings, people's names on Home and the numbers stay bold. */
  .dash-title,.m-home-title,.list-item>div>strong{font-weight:normal}
  .m-back{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;padding:0;
    border-radius:50%;background:#fff;border:1px solid transparent;box-shadow:0 2px 12px rgba(10,20,15,.13);color:var(--ink);
  }
  .m-back-icon{display:block}
  .m-back-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .m-focus .m-bar{display:none}
  [data-nav="account"] .dash-head{display:none}   /* its title is in the top bar */
  [data-nav="new-inspection"] #notifBtn{visibility:hidden}
  .card.m-wizard-head{background:none;border:none;box-shadow:none;padding:0;margin-bottom:14px}
  .m-wizard-head .section-title{display:none}
  .m-wizard-head .step-label{font-size:.82rem;margin-bottom:6px}
  .m-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:80;margin:0;flex-direction:row-reverse;flex-wrap:nowrap;
    background:#fff;border-top:1px solid var(--line);padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .m-actions .btn{flex:1;min-height:50px;padding:8px 10px;border-radius:13px;line-height:1.2}
  .m-actions .m-wizard-back{display:none}
  .m-actions .btn-danger{background:#fde2e0;color:#8f1d16}
  .m-typing .m-actions,.m-typing .m-bar{display:none}

  /* the floating bar */
  /* Sizing (checked 10 November 2026 at 320-740 px wide and in landscape): the bar is
     capped and centred on wider screens instead of stretching edge to edge; each button
     shares out the bar's width, so the whole bar is tappable and no button drops below
     44 px. */
  .m-bar{
    display:flex;align-items:center;gap:10px;position:fixed;z-index:80;
    left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));
    max-width:460px;margin:0 auto;
    bottom:var(--m-bar-gap);view-transition-name:m-bar;
  }
  /* Every tab shows its name under the icon, the open one on a soft grey shape, and Review
     carries a count of what is waiting on you (approved 14 November 2026). */
  .m-pill{
    flex:1;min-width:0;display:flex;align-items:center;gap:4px;height:70px;padding:6px;border-radius:99px;
    background:rgba(255,255,255,.8);border:1px solid rgba(10,20,15,.06);box-shadow:0 10px 26px rgba(10,20,15,.18);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  .m-tab{
    position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:58px;min-width:44px;padding:0;
    border:none;border-radius:99px;background:none;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .m-tab[hidden],.m-fab[hidden]{display:none}
  .m-tab .icon{width:25px;height:25px;stroke-width:2}
  @media (max-width:389px){ .m-tab .icon{width:23px;height:23px} }
  .m-tab em{font-style:normal;font-size:.74rem;white-space:nowrap}
  .m-tab.active,.m-tab[aria-expanded="true"]{background:#eceeed}
  .m-tab.active em{font-weight:600}
  .m-count{position:absolute;top:1px;left:calc(50% + 5px);min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;border-radius:99px;
    background:#111;border:2px solid #fff;color:#fff;font-size:.74rem;font-weight:bold;line-height:18px;text-align:center}
  .m-fab{
    display:flex;align-items:center;justify-content:center;flex:none;width:70px;height:70px;border-radius:50%;
    background:var(--dffe-green);border:2px solid #2d8a58;color:#fff;box-shadow:0 10px 22px rgba(11,102,54,.38);
    -webkit-tap-highlight-color:transparent;
  }
  /* The words curve round the inside edge of the + button (approved 14 November 2026). The
     drawing scales with the button, so the smaller sizes below keep it in proportion. */
  .m-fab{text-decoration:none}
  .m-fab-ring{display:block;width:100%;height:100%}
  .m-fab-plus{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
  .m-fab-word{fill:#fff;font-family:inherit;font-weight:700}
  .toast{z-index:85;bottom:calc(84px + var(--m-bar-gap))}
  @media (max-width:345px){   /* the smallest phones: a smaller + so the tab names keep their room */
    .m-fab{width:58px;height:58px}
  }
  @media (max-height:500px){   /* phones on their side: a slimmer bar, so the page keeps room */
    :root{--m-bar-gap:max(8px, calc(env(safe-area-inset-bottom) - 10px))}
    .m-pill{height:54px;padding:4px}
    .m-tab{height:44px;gap:2px}
    .m-tab .icon{width:21px;height:21px}
    .m-fab{width:54px;height:54px}
    .dash-page{padding-bottom:calc(76px + var(--m-bar-gap))}
    .toast{bottom:calc(66px + var(--m-bar-gap))}
  }

  /* the More sheet */
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;background:rgba(10,20,15,.45);z-index:90;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .sidebar{
    position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;height:auto;max-height:86dvh;z-index:100;
    border:none;border-radius:26px 26px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));
    transform:translateY(105%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s;
  }
  .sidebar.open{transform:translateY(0);visibility:visible;transition:transform .25s ease}
  .m-grab{display:block;flex:none;width:60px;height:22px;margin:0 auto 2px;padding:0;border:none;background:none;cursor:pointer}
  .m-grab::before{content:"";display:block;width:42px;height:5px;margin:0 auto;border-radius:5px;background:#d3d8d4}
  .m-who{display:flex;flex:none;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px;
    color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .m-who b{display:block}
  .m-who div span{font-size:.8rem;color:var(--ink-soft)}
  .m-av{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:50%;
    background:var(--dffe-green-tint);color:var(--dffe-green-dark);font-weight:bold;
  }
  .sidebar-brand-row,.sidebar-label,.sidebar-link.m-in-bar,.sidebar-link.m-in-who{display:none}
  .sidebar-nav{flex:none;gap:0}
  .sidebar-link{width:100%;min-height:50px;padding:0 2px;gap:13px;border-radius:0;border-bottom:1px solid #eef1ef;background:none;color:var(--ink);font-size:.96rem}
  .sidebar-link .icon{color:var(--dffe-green)}
  .sidebar-link:hover,.sidebar-link.active{background:none;color:var(--ink)}
  .sidebar-link-btn,.sidebar-link-btn .icon{color:var(--danger)}
  .sidebar-status{flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:11px 12px;border:none;border-radius:14px;background:var(--paper)}
  .m-pending{display:block;flex:1;min-width:0;font-size:.8rem;color:var(--ink-soft)}
  .sidebar-status .btn-block,.sidebar-ios-hint{flex-basis:100%}
  #syncBtn{min-height:38px;border:none;border-radius:99px;background:var(--dffe-green);color:#fff}

  /* phone-sized content */
  body[data-nav="dashboard"]:not(.m-focus) .dash-page{display:flex;flex-direction:column}
  body[data-nav="dashboard"]:not(.m-focus) .dash-page>*{min-width:0}
  body[data-nav="dashboard"]:not(.m-focus) .dash-grid{order:1}   /* recent work before the charts */
  .card{padding:16px;border-radius:14px}
  body[data-nav="dashboard"]:not(.m-focus) .dash-page>.card{background:none;border:none;box-shadow:none;padding:0}
  .stats-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .stat-card{padding:13px;border-radius:14px}
  .stat-card .num{font-size:1.6rem}
  .list-item{flex-direction:column;align-items:flex-start;gap:8px;padding:13px;border-radius:14px}
  .li-badges{flex-direction:row;flex-wrap:wrap;align-items:center}
  .kv{grid-template-columns:42% 1fr}
  [data-nav="review-queue"] .dash-sub{display:none}
  [data-nav="review-queue"] .dash-page .card{background:none;border:none;box-shadow:none;padding:0}
  [data-nav="review-queue"] .row2 .row2{grid-template-columns:1fr 1fr}
  #rvScope{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;margin-bottom:12px;border-radius:12px;background:#e7ebe8}
  #rvScope .btn{min-height:40px;padding:6px 4px;border-radius:10px;background:none;color:var(--ink-soft)}
  #rvScope .active{background:#fff;color:var(--dffe-green-dark);box-shadow:0 1px 3px rgba(10,20,15,.12)}
}

/* A soft fade between pages, where the browser supports it. The bar stays still. */
@media screen and (max-width:760px) and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}

/* Searchable dropdowns (MCSSelectSearch in app.js): the native select stays visible; a
   transparent layer over it opens the search list. */
.ms-wrap{position:relative;display:block}
.ms-wrap:has(> select[hidden]){display:none}
.ms-hit{display:none}
.ms-wrap.ms-on .ms-hit{display:block;position:absolute;inset:0;cursor:pointer}
.ms-wrap.ms-on select:disabled + .ms-hit{cursor:not-allowed}
.ms-pop{position:fixed;z-index:1200;background:#fff;border:1.5px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px rgba(20,26,23,.18);display:flex;flex-direction:column;overflow:hidden}
.ms-pop[hidden],.ms-backdrop[hidden]{display:none}
.ms-head{display:none}
.ms-q{width:100%;padding:11px 12px;border:0;border-bottom:1.5px solid var(--line);font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;border-radius:0}
.ms-q:focus{outline:none;border-bottom-color:var(--dffe-green)}
.ms-list{list-style:none;margin:0;padding:4px 0;overflow-y:auto;flex:1;min-height:0}
.ms-list li{padding:10px 12px;cursor:pointer;line-height:1.3}
.ms-list li.ms-active{background:var(--dffe-green-tint)}
.ms-list li.ms-selected{font-weight:bold;color:var(--dffe-green-dark)}
.ms-list li.ms-empty{color:var(--ink-soft)}
.ms-list li.ms-disabled{color:#a3aba6;cursor:not-allowed}
.ms-list li.ms-none{color:var(--ink-soft);cursor:default}
.ms-backdrop{position:fixed;inset:0;z-index:1199;background:rgba(20,26,23,.35)}
/* Phones: a panel across the top (clear of the on-screen keyboard), with the field's name
   and a close button. app.js sizes it to the visible area. */
.ms-pop.ms-sheet{left:8px;right:8px;top:8px;bottom:auto;width:auto;max-height:calc(100vh - 16px);border-radius:12px;
  margin-top:env(safe-area-inset-top)}
.ms-sheet .ms-head{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 4px 16px;font-weight:bold}
.ms-close{background:none;border:0;font-size:1.6rem;line-height:1;padding:4px 10px;cursor:pointer;color:var(--ink-soft)}
.ms-sheet .ms-q{margin:0 12px;width:auto;border:1.5px solid var(--line);border-radius:6px}
.ms-sheet .ms-q:focus{border-color:var(--dffe-green)}
.ms-sheet .ms-list li{padding:13px 16px}

/* Home search box results (MCSPages.wireDashSearch). */
.ds-results{position:absolute;top:calc(100% + 6px);left:0;width:max(100%,420px);max-width:calc(100vw - 32px);z-index:150;background:#fff;
  border:1.5px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(20,26,23,.16);max-height:min(460px,70vh);overflow-y:auto;padding:4px 0}
.ds-results[hidden]{display:none}
.ds-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--paper)}
.ds-item:hover,.ds-item.ds-active,.ds-all:hover,.ds-all.ds-active{background:var(--dffe-green-tint)}
.ds-main{min-width:0;font-size:.9rem;line-height:1.35}
.ds-sub{display:block;color:var(--ink-soft);font-size:.78rem}
.ds-item .badge{flex-shrink:0;font-size:.62rem;padding:3px 8px}
.ds-all{display:block;padding:10px 12px;font-weight:bold;font-size:.85rem;color:var(--dffe-green-dark);text-decoration:none}
.ds-note{margin:0;padding:10px 12px;color:var(--ink-soft);font-size:.85rem}

/* Notification bell: a count of what's new, and the panel it opens (MCSNotifications). */
.icon-btn .badge-dot.has-count{width:auto;height:auto;min-width:18px;padding:1px 5px;top:1px;right:0;border-radius:99px;
  background:#b42318;color:#fff;font-size:.66rem;font-weight:bold;line-height:1.35;text-align:center}
.np-pop{position:fixed;z-index:1100;width:390px;max-width:calc(100vw - 16px);max-height:min(560px,calc(100vh - 90px));overflow-y:auto;background:#fff;
  border:1.5px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(20,26,23,.2)}
.np-pop[hidden]{display:none}
.np-pop.np-sheet{left:8px;right:8px;top:8px;width:auto;max-width:none;max-height:calc(100vh - 16px);margin-top:env(safe-area-inset-top)}
.np-head{position:sticky;top:0;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);z-index:1}
.np-markall{background:none;border:0;color:var(--dffe-green-dark);font-weight:bold;font-size:.8rem;cursor:pointer;font-family:inherit;padding:4px 6px}
.np-close{background:none;border:0;font-size:1.5rem;line-height:1;padding:0 4px 0 10px;cursor:pointer;color:var(--ink-soft)}
.np-summary{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.np-sum{font-size:.82rem;padding:5px 10px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.np-sum:hover{border-color:var(--dffe-green)}
.np-list{list-style:none;margin:0;padding:0}
.np-item a{display:block;padding:11px 14px 11px 22px;border-bottom:1px solid var(--paper);color:var(--ink);text-decoration:none;position:relative;font-size:.86rem;line-height:1.4}
.np-item a:hover{background:var(--paper)}
.np-item.np-unread a{background:var(--dffe-green-tint)}
.np-item.np-unread a::before{content:"";position:absolute;left:9px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--dffe-green)}
.np-pos{color:var(--ink-soft)}
.np-insp,.np-when{display:block;color:var(--ink-soft);font-size:.78rem}
.np-detail{display:block;margin:3px 0;font-style:italic}
.np-empty{margin:0;padding:18px 14px;color:var(--ink-soft);font-size:.86rem}