/* Civeo Safety Hub - DEMO
   Civeo brand tokens per GL-003. Gold is structural/brand only, never a safety status colour. */
:root {
  --gold:#FFB608; --navy:#003C71; --blue:#0063BD;
  --ink:#646464; --ink-strong:#2f3133; --line:#D0D0CE;
  --canvas:#eef1f4; --panel:#f6f7f9; --white:#fff;
  --success:#2F9F46; --warn:#FF8200; --error:#DA291C;
  --shadow:0 14px 34px rgba(0,60,113,.14);
}
* { box-sizing:border-box; }
html { background:var(--canvas); }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:Arial,Helvetica,sans-serif; -webkit-text-size-adjust:100%; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
h1,h2,h3 { color:var(--ink-strong); }
a { color:var(--blue); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

/* THE SHELL, AND WHY THE SIGN-IN SCREEN IS IN IT (2026-08-15)
   Every screen after sign-in is a <main class="app">, so it is capped at 560px
   and centred. The sign-in screens were not: they render a bare <div
   class="signin"> and so ran the full width of whatever they were opened on.
   Nobody noticed on a phone, where full width IS 560px or less, and the layout
   suite only ever measured 360, 390 and 1280.
   On a 1870px monitor the effect was the one John reported from a screenshot:
   the logo and heading looked centred, because .signin-hero centres its text,
   while every label and every input box sat hard against the left edge, 900px
   away from them. Nothing overflowed and nothing had a negative position, so no
   assertion in the suite could see it. The sign-in screen is now in the same
   shell as every other screen. */
.app, .signin { position:relative; width:min(100%,560px); min-height:100vh; margin:auto; background:var(--white); box-shadow:0 0 40px rgba(0,60,113,.12); }

/* Honesty strip */
.poc-strip { display:flex; justify-content:center; gap:9px; align-items:center; padding:8px 14px; color:#fff; background:#20272e; font-size:10px; letter-spacing:.06em; text-align:center; }
.poc-strip strong { color:var(--gold); }
.poc-strip span { opacity:.8; }

/* Connection indicator */
.net-strip { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 14px; font-size:11px; font-weight:700; background:var(--panel); border-bottom:1px solid var(--line); }
.net-left { display:flex; align-items:center; gap:7px; }
.net-dot { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(47,159,70,.18); }
.net-strip.offline .net-dot { background:var(--warn); box-shadow:0 0 0 3px rgba(255,130,0,.2); }
.net-strip.offline { color:#8a4a00; }
.net-actions { display:flex; gap:6px; }
.net-actions button { padding:4px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:10px; font-weight:800; color:var(--navy); }
.net-actions button.sync { border-color:var(--blue); color:#fff; background:var(--blue); }
.queue-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:999px; background:var(--warn); color:#fff; font-size:10px; font-weight:800; }

/* Brand bar */
.brandbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:#fff; border-bottom:3px solid var(--gold); }
.brandbar .logo { height:34px; width:auto; display:block; }
.brandbar .brand-title { display:flex; flex-direction:column; line-height:1.1; }
.brandbar .brand-title strong { font-size:13px; color:var(--navy); letter-spacing:.02em; }
.brandbar .brand-title small { font-size:9px; letter-spacing:.22em; color:var(--ink); text-transform:uppercase; }
.brandbar .brand-l { display:flex; align-items:center; gap:12px; }
.who { text-align:right; }
.who button { padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:10px; font-weight:800; color:var(--navy); }
.who .who-name { display:block; font-size:11px; font-weight:800; color:var(--navy); }
.who .who-site { display:block; font-size:9px; color:var(--ink); text-transform:uppercase; letter-spacing:.05em; }

/* Top bar (sub pages) */
.topbar { display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 16px; color:#fff; background:var(--navy); }
.topbar .back { width:42px; height:42px; border:1px solid rgba(255,255,255,.5); border-radius:12px; color:#fff; background:transparent; font-size:22px; }
.topbar-copy { flex:1; min-width:0; }
.eyebrow { margin:0 0 2px; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.topbar h1 { margin:0; overflow:hidden; font-size:19px; white-space:nowrap; text-overflow:ellipsis; color:#fff; }
.badge { padding:6px 9px; border-radius:8px; background:rgba(255,182,8,.22); color:var(--gold); font-size:10px; font-weight:900; }

/* Sign-in */
.signin { min-height:100vh; display:flex; flex-direction:column; }
.signin-hero { padding:34px 24px 30px; background:var(--navy); color:#fff; text-align:center; }
.signin-hero img { height:44px; margin:0 auto 18px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); background:#fff; padding:10px 16px; border-radius:12px; }
.signin-hero h1 { color:#fff; margin:6px 0 6px; font-size:24px; }
.signin-hero p { margin:0; opacity:.85; font-size:13px; }
.signin-body { flex:1; padding:24px; }
.signin-body label { color:var(--ink-strong); }
.mailless { margin:0 0 18px; padding:12px 14px; border-left:5px solid var(--blue); border-radius:0 10px 10px 0; background:#eaf2fb; color:#0b3a6b; font-size:12px; line-height:1.5; }
.demo-ids { display:grid; gap:10px; margin-top:8px; }
.demo-id { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:#fff; text-align:left; }
.demo-id strong { display:block; color:var(--navy); font-size:14px; }
.demo-id small { display:block; color:var(--ink); font-size:11px; margin-top:2px; }
.demo-id .rolechip { padding:4px 9px; border-radius:999px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; background:#e7edf3; color:var(--navy); white-space:nowrap; }
.demo-id .rolechip.sup { background:var(--navy); color:#fff; }
.demo-id .rolechip.con { background:#fff2dc; color:#8a4a00; }
.or-line { text-align:center; margin:20px 0 8px; color:var(--ink); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.signin-error { margin-top:10px; padding:10px 12px; border-radius:10px; background:#fdecea; color:#8f1c14; font-size:12px; }

/* Hub */
.hub-hero { padding:22px 22px 58px; color:#fff; background:linear-gradient(150deg,#004c8f,#003257); }
.hub-hero p { margin:0 0 6px; opacity:.9; font-size:14px; }
.hub-hero h1 { color:#fff; margin:0; font-size:30px; line-height:1.05; letter-spacing:-.02em; }
.hero-chip { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 12px; border-radius:9px; background:rgba(255,255,255,.14); font-size:12px; }
.hero-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--gold); }

.panel { position:relative; z-index:2; margin:-38px 16px 0; padding-bottom:110px; }
.module-grid { display:grid; gap:11px; }
.module-card { width:100%; display:grid; grid-template-columns:52px 1fr 20px; align-items:center; gap:13px; min-height:96px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; text-align:left; box-shadow:0 5px 16px rgba(0,60,113,.06); }
.module-card:hover { border-color:#a9b6c2; transform:translateY(-1px); }
.module-card.primary { color:#fff; background:var(--navy); border-color:var(--navy); box-shadow:var(--shadow); }
.module-icon { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:14px; color:#fff; font-size:16px; font-weight:900; }
.module-card.primary .module-icon { background:var(--gold); color:var(--navy); font-size:26px; }
.mi-fatigue { background:#5a4a9c; } .mi-hazard { background:var(--blue); } .mi-incident { background:var(--error); }
.module-copy { min-width:0; }
.module-copy strong,.module-copy small,.module-copy em { display:block; }
.module-copy strong { font-size:17px; line-height:1.15; color:inherit; }
.module-card.primary .module-copy strong { color:#fff; }
.module-copy small { margin-top:5px; color:var(--ink); font-size:12px; line-height:1.4; }
.module-card.primary .module-copy small { color:#cdd8e4; }
.module-copy em { margin-top:8px; color:var(--blue); font-size:10px; font-style:normal; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.status-tag { display:inline-flex; width:max-content; margin-bottom:6px; padding:3px 8px; border-radius:999px; background:#e2f4e7; color:#1c6b30; font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.module-arrow { font-size:22px; text-align:right; color:inherit; }

.panel h2 { margin:24px 2px 5px; font-size:19px; }
.section-intro { margin:0 2px 12px; color:var(--ink); font-size:12px; line-height:1.45; }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.support-grid button { display:flex; align-items:center; gap:11px; min-height:88px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; }
.support-grid strong,.support-grid small { display:block; }
.support-grid strong { font-size:14px; color:var(--navy); }
.support-grid small { margin-top:4px; color:var(--ink); font-size:10px; line-height:1.3; }
.tile-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; font-weight:900; font-size:15px; color:#fff; }
.ti-swi { background:var(--blue); } .ti-records { background:var(--navy); } .ti-super { background:var(--gold); color:var(--navy); }

.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.stat { padding:13px 7px; border-radius:12px; background:var(--panel); text-align:center; border:1px solid var(--line); }
.stat strong,.stat span { display:block; }
.stat strong { font-size:20px; color:var(--navy); }
.stat span { margin-top:3px; color:var(--ink); font-size:10px; line-height:1.2; }

.notice { margin-top:14px; padding:14px 15px; border-left:5px solid var(--gold); border-radius:0 12px 12px 0; color:#6a5300; background:#fff6da; font-size:12px; line-height:1.45; }
.install-hint { display:flex; align-items:center; gap:10px; margin-top:12px; padding:12px 14px; border:1px dashed var(--blue); border-radius:12px; background:#eef5fc; color:#0b3a6b; font-size:12px; }
.install-hint b { color:var(--blue); }

/* Bottom nav */
.bottom-nav { position:fixed; bottom:0; left:50%; z-index:9; width:min(100%,560px); transform:translateX(-50%); display:grid; padding:9px 10px max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.97); backdrop-filter:blur(10px); }
.bottom-nav.cols-3 { grid-template-columns:repeat(3,1fr); }
.bottom-nav.cols-4 { grid-template-columns:repeat(4,1fr); }
.bottom-nav button { border:0; color:var(--ink); background:none; font-size:10px; }
.bottom-nav b { display:block; margin-bottom:3px; font-size:18px; }
.bottom-nav .active { color:var(--navy); font-weight:900; }

/* Content / forms */
.content { padding:22px 18px 110px; }
.content h2 { margin:8px 0; font-size:23px; line-height:1.15; letter-spacing:-.01em; }
.helper { margin:0 0 18px; color:var(--ink); line-height:1.45; }
.step-kicker { display:flex; align-items:center; gap:8px; color:var(--navy); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.step-kicker span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:var(--navy); background:var(--gold); font-size:15px; }
.progress { height:5px; background:#e6e9ec; }
.progress span { display:block; height:100%; background:var(--navy); transition:width .2s ease; }
label { display:block; margin:16px 0 7px; font-size:12px; font-weight:900; color:var(--ink-strong); }
input,textarea,select { width:100%; padding:14px; border:1.5px solid var(--line); border-radius:12px; color:var(--ink-strong); background:#fff; line-height:1.35; }
textarea { resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:var(--blue); outline:3px solid rgba(0,99,189,.14); }
.examples { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.examples button { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--navy); background:#fff; font-size:11px; }

.btn { width:100%; min-height:54px; margin-top:20px; border:0; border-radius:13px; color:#fff; background:var(--navy); font-weight:900; font-size:15px; box-shadow:0 8px 18px rgba(0,60,113,.2); }
.btn.blue { background:var(--blue); box-shadow:0 8px 18px rgba(0,99,189,.22); }
.btn.gold { background:var(--gold); color:var(--navy); box-shadow:0 8px 18px rgba(255,182,8,.28); }
.btn.secondary { color:var(--navy); background:#e9edf1; box-shadow:none; }
.btn.danger-button { background:var(--error); box-shadow:0 8px 18px rgba(218,41,28,.22); }
.btn:disabled { color:#9aa1a8; background:#dfe3e7; box-shadow:none; cursor:not-allowed; }
.outcome-actions { display:grid; gap:10px; }
.completion-note { margin:14px 0 0; padding:10px 12px; border-radius:10px; color:#6a5300; background:#fff6da; font-size:11px; line-height:1.4; }

/* SWI match */
.match-card { padding:16px; border:1.5px solid #b9cfe6; border-radius:15px; background:#eff5fc; }
.match-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.match-head small { color:var(--blue); font-weight:900; text-transform:uppercase; font-size:10px; }
.match-head .score { white-space:nowrap; color:#fff; padding:5px 8px; border-radius:7px; background:var(--blue); font-size:10px; font-weight:800; }
.match-card h3 { margin:8px 0 4px; font-size:18px; }
.match-card.tentative { border-color:#e6c07a; background:#fff8ec; }
.match-card.tentative .match-head small { color:#8a4a00; }
.match-head .score.caution { background:var(--warn); }
.tentative-banner { margin-bottom:10px; padding:12px 14px; border-left:5px solid var(--warn); border-radius:0 11px 11px 0; color:#8a4a00; background:#fff2dc; font-size:11px; line-height:1.45; }
.tentative-banner strong { display:block; margin-bottom:3px; }
.docref { color:var(--ink); font-size:11px; }
.matched-words { margin-top:10px; }
.matched-words .mw-label { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); }
.matched-words .chips { margin-top:6px; }
.chip { padding:6px 9px; border-radius:999px; background:#e6f4f4; color:#245c5e; font-size:11px; font-weight:800; }
.chip.word { background:#e2ecf8; color:var(--navy); }
.chip.ppe { background:#fff0e0; color:#8a4a00; }
.link,.text-link { padding:0; border:0; color:var(--blue); background:none; font-weight:900; text-decoration:underline; }
.alternative-matches { display:flex; gap:7px; overflow:auto; margin:10px 0 6px; padding-bottom:4px; }
.alternative-matches button { min-width:190px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; font-size:11px; }
.prompt-card { margin-top:14px; padding:15px; border-radius:13px; background:var(--panel); border:1px solid var(--line); }
.prompt-card h3 { margin:0 0 10px; font-size:15px; }
.prompt-card ul { margin:0; padding-left:19px; }
.prompt-card li { margin:7px 0; color:var(--ink-strong); font-size:12px; line-height:1.4; }

/* Checks */
.check-list { display:grid; gap:10px; }
.check-card { padding:14px; border:1.5px solid var(--line); border-radius:14px; }
.check-card.no { border-color:#eaa; background:#fdf1f0; }
.check-card strong,.check-card small { display:block; }
.check-card small { margin-top:4px; color:var(--ink); line-height:1.35; }
.yes-no { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
.yes-no button { min-height:46px; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:800; }
.yes-no .yes.active { border-color:var(--success); color:#1c6b30; background:#eaf7ee; }
.yes-no .no.active { border-color:var(--error); color:#8f1c14; background:#fdecea; }
.stop { display:flex; gap:12px; align-items:center; margin-top:15px; padding:15px; border-radius:13px; color:#8f1c14; background:#fdecea; }
.stop b { padding:8px 10px; border-radius:8px; color:#fff; background:var(--error); font-weight:900; }
.stop span { font-size:12px; line-height:1.4; }
.suggestion-title { display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.suggestion-title h3 { margin:0; font-size:15px; }
.suggestion-title small { color:var(--ink); font-size:11px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.decision { margin-top:18px; padding:15px; border-radius:13px; }
.decision.stop-state { color:#8f1c14; background:#fdecea; }
.decision.review { color:#6a5300; background:#fff6da; }
.decision strong,.decision span { display:block; }
.decision span { margin-top:5px; font-size:12px; line-height:1.4; }
.requirement-list { margin:0; padding-left:20px; }
.requirement-list li { margin:7px 0; font-size:12px; line-height:1.4; }
.hazard-list { margin-top:9px; padding:10px 14px 10px 30px; border-radius:12px; color:#0b3a6b; background:#eaf2fb; }
.display-list { margin:7px 0 0; padding-left:18px; }
.display-list li { margin:4px 0; line-height:1.4; }

/* Fatigue result */
.score-band { margin-top:18px; padding:18px; border-radius:14px; text-align:center; color:#fff; }
.score-band.green { background:var(--success); }
.score-band.amber { background:var(--warn); }
.score-band.red { background:var(--error); }
.score-band .score-num { font-size:40px; font-weight:900; line-height:1; }
.score-band .score-cap { font-size:12px; opacity:.9; margin-top:4px; }
.score-band h3 { color:#fff; margin:12px 0 6px; font-size:20px; }
.score-band p { margin:0; font-size:13px; line-height:1.45; }
.score-breakdown { margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.score-breakdown .sb-row { display:flex; justify-content:space-between; padding:9px 13px; font-size:12px; border-bottom:1px solid var(--line); }
.score-breakdown .sb-row:last-child { border-bottom:0; font-weight:900; background:var(--panel); color:var(--navy); }
.score-breakdown .sb-pts { font-weight:800; color:var(--navy); }

/* Photo */
.photo-drop { margin-top:8px; }
.photo-thumb { margin-top:10px; display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.photo-thumb img { width:64px; height:64px; object-fit:cover; border-radius:8px; }
.photo-thumb small { color:var(--ink); font-size:11px; }
.photo-thumb button { margin-left:auto; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--error); font-size:11px; font-weight:800; }

/* Emergency banner */
.emergency-banner { display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; padding:15px; border-radius:13px; color:#fff; background:var(--error); }
.emergency-banner .ico { font-size:22px; line-height:1; }
.emergency-banner strong { display:block; margin-bottom:3px; }
.emergency-banner span { font-size:12px; line-height:1.45; opacity:.95; }

/* Library */
.search-sticky { position:sticky; top:0; z-index:4; margin:-22px -18px 0; padding:16px 18px 12px; background:#fff; }
.search-row { display:flex; gap:8px; }
.search-row input { flex:1; }
.search-row select { width:110px; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:10px; padding:4px; border-radius:11px; background:var(--panel); }
.tabs button { min-height:38px; border:0; border-radius:8px; color:var(--ink); background:transparent; font-size:11px; font-weight:900; }
.tabs button.active { color:var(--navy); background:#fff; box-shadow:0 2px 8px rgba(0,60,113,.12); }
.result-count { margin:14px 0 9px; color:var(--ink); font-size:11px; }
.swi-list { display:grid; gap:9px; }
.swi-row { width:100%; display:grid; grid-template-columns:44px 1fr 20px; gap:11px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fff; text-align:left; }
.dept { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; color:#fff; background:var(--blue); font-size:9px; font-weight:900; text-align:center; padding:3px; }
.swi-row strong,.swi-row small { display:block; }
.swi-row strong { line-height:1.25; color:var(--ink-strong); }
.swi-row small { margin-top:4px; color:var(--ink); font-size:10px; }
.register-row { display:grid; grid-template-columns:60px 1fr auto; gap:9px; padding:11px 3px; border-bottom:1px solid var(--line); font-size:11px; }
.register-row b { color:var(--blue); }
.register-row span:last-child { color:var(--ink); }
.control-banner { margin-bottom:16px; padding:13px 14px; border-left:5px solid var(--gold); border-radius:0 11px 11px 0; color:#6a5300; background:#fff6da; font-size:11px; line-height:1.45; }
.detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.meta-box { padding:11px; border-radius:10px; background:var(--panel); border:1px solid var(--line); }
.meta-box span,.meta-box strong { display:block; }
.meta-box span { color:var(--ink); font-size:9px; text-transform:uppercase; }
.meta-box strong { margin-top:4px; font-size:12px; color:var(--navy); }
.detail-section h3 { margin:22px 0 9px; font-size:16px; }
.step-block { margin-top:10px; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.step-task { padding:13px; background:var(--panel); font-size:12px; line-height:1.4; }
.step-grid { display:grid; grid-template-columns:1fr 1fr; }
.step-grid div { padding:12px; font-size:11px; line-height:1.45; }
.step-grid div:first-child { color:#8f1c14; background:#fdf1f0; }
.step-grid div:last-child { color:#1c6b30; background:#eef7f0; }
.step-grid b { display:block; margin-bottom:5px; font-size:9px; text-transform:uppercase; }

/* Records */
.empty { padding:35px 15px; color:var(--ink); text-align:center; }
.rec-list { display:grid; gap:9px; }
.rec-row { padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.rec-row .rec-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.rec-row strong { display:block; color:var(--ink-strong); }
.rec-row small { display:block; margin-top:4px; color:var(--ink); font-size:11px; }
.rec-tag { padding:3px 8px; border-radius:999px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.rec-tag.mod { background:#e7edf3; color:var(--navy); }
.rec-ref { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:6px; background:#eaf2fb; color:var(--blue); font-size:11px; font-weight:800; font-family:"Courier New",monospace; }
.rec-ref.queued { background:#fff0e0; color:#8a4a00; }
.flag-badge { padding:3px 8px; border-radius:999px; font-size:9px; font-weight:900; text-transform:uppercase; color:#fff; }
.flag-badge.stop { background:var(--error); } .flag-badge.fatigue { background:var(--warn); } .flag-badge.incident { background:var(--error); }
.rec-row.flagged { border-left:5px solid var(--error); }

/* Supervisor trend */
.trend-tile { margin:6px 0 18px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.trend-tile h3 { margin:0 0 4px; font-size:15px; }
.trend-tile .trend-sub { margin:0 0 12px; color:var(--ink); font-size:11px; }
.trend-bar { display:grid; grid-template-columns:110px 1fr 34px; align-items:center; gap:8px; margin:7px 0; font-size:12px; }
.trend-bar .bar { height:14px; border-radius:7px; background:var(--blue); min-width:3px; }
.trend-bar .bar.stopwork { background:var(--error); }
.trend-bar .cnt { text-align:right; font-weight:900; color:var(--navy); }
.super-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.super-summary .ss { padding:12px 8px; border-radius:12px; text-align:center; color:#fff; }
.super-summary .ss.total { background:var(--navy); }
.super-summary .ss.flagged { background:var(--error); }
.super-summary .ss.queued { background:var(--warn); }
.super-summary .ss strong { display:block; font-size:22px; }
.super-summary .ss span { display:block; font-size:10px; opacity:.9; margin-top:2px; }

/* Modal */
.modal-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:18px; background:rgba(0,30,60,.66); }
.modal-card { width:min(100%,440px); max-height:90vh; overflow:auto; padding:22px; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.34); }
.modal-mark { display:grid; place-items:center; width:48px; height:48px; margin-bottom:14px; border-radius:14px; color:#fff; background:var(--navy); font-size:24px; font-weight:900; }
.modal-mark.stop { background:var(--error); }
.modal-mark.ok { background:var(--success); }
.modal-card h2 { margin:0 0 8px; font-size:21px; }
.modal-card p { margin:0; color:var(--ink); line-height:1.5; font-size:14px; }
.modal-list { margin:14px 0 0; padding:12px 14px 12px 30px; border-radius:11px; color:#6a5300; background:#fff6da; }
.modal-list li { margin:6px 0; font-size:12px; line-height:1.4; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }
.modal-actions .btn { margin-top:0; min-height:48px; }

/* Payload preview */
.payload-head { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.payload-head .tag { padding:4px 8px; border-radius:6px; background:var(--navy); color:#fff; font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.payload-note { margin:0 0 12px; color:var(--ink); font-size:12px; line-height:1.45; }
.payload-json { max-height:300px; overflow:auto; margin:0; padding:14px; border-radius:12px; background:#0e2233; color:#d6e4f0; font-family:"Courier New",monospace; font-size:11.5px; line-height:1.5; white-space:pre; }
.payload-json .k { color:#7fc4ff; } .payload-json .s { color:#ffcf7a; } .payload-json .n { color:#a5e29a; } .payload-json .b { color:#ff9b9b; }
.sending { text-align:center; padding:10px 0 4px; }
.spinner { width:44px; height:44px; margin:6px auto 14px; border:5px solid #dbe3ea; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.ref-box { margin-top:14px; padding:14px; border-radius:12px; background:#eaf2fb; text-align:center; }
.ref-box .rf { font-family:"Courier New",monospace; font-size:22px; font-weight:900; color:var(--navy); letter-spacing:.02em; }
.ref-box .rl { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:4px; }

@media (min-width:700px) {
  body { padding:22px 0; }
  .app, .signin { min-height:calc(100vh - 44px); border-radius:22px; overflow:hidden; }
  .bottom-nav { bottom:22px; border-radius:0 0 22px 22px; }
}
@media (max-width:380px) { .step-grid { grid-template-columns:1fr; } .poc-strip span { display:none; } }
@media print { .bottom-nav,.poc-strip,.net-strip,.back,.btn { display:none!important; } .app { width:100%; box-shadow:none; } .content { padding-bottom:20px; } }

/* ---------------------------------------------------------------------------
   Additions for the pilot build: sign-out, activation screen, live banner.
   Same Civeo tokens as everything above. Gold stays structural and is never
   used to say that something is safe.
   --------------------------------------------------------------------------- */
.poc-strip.live { background:var(--navy); }
.poc-strip.live strong { color:var(--gold); }
.who .signout-btn { margin-top:5px; }
.btn.ghost { margin-top:10px; color:var(--navy); background:#fff; border:2px solid var(--navy); box-shadow:none; }
.signin-body label { display:block; margin:14px 0 5px; font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); }
.signin-body input[type="password"] { width:100%; padding:14px; border:2px solid var(--line); border-radius:11px; font-size:16px; }

/* ---------------------------------------------------------------------------
   THE CLIENT LAYER (2026-08-13)
   Civeo runs each village for one client, and the client's own requirements are
   shown beside the Civeo instruction, never inside it. These styles exist to
   make that separation impossible to miss: a different background, a heavy left
   edge and the word "Client" on the panel. Two authors, two approval routes.
   Gold stays structural, as everywhere else, and is never used to say that
   anything is safe or approved.
   --------------------------------------------------------------------------- */
.client-panel { margin:14px 0 4px; padding:14px 16px; border-left:6px solid var(--navy); border-radius:12px; background:#eef3f8; }
.client-head { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.client-chip { padding:3px 9px; border-radius:999px; background:var(--navy); color:#fff; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.client-head strong { color:var(--navy); font-size:14px; }
.client-intro { margin:0 0 10px; font-size:12px; line-height:1.5; color:var(--ink); }
.client-list { margin:0; padding:0 0 0 2px; list-style:none; }
.client-list li { padding:10px 0; border-top:1px solid #d5e0ea; }
.client-list li:first-child { border-top:0; }
.client-list li strong { display:block; color:var(--ink-strong); font-size:13px; }
.client-list li span { display:block; margin-top:4px; font-size:13px; line-height:1.5; }
.client-list .client-scope { display:block; margin:2px 0 4px; font-size:11px; font-weight:700; color:var(--navy); }
.client-list .client-source { display:block; margin-top:6px; font-size:11px; color:var(--ink); }
.client-note { margin:10px 0; padding:9px 12px; border-radius:10px; background:#f2f5f8; font-size:12px; line-height:1.5; }

/* Read and understood. A plain button, and a plain statement once it is done.
   It records that a person read a VERSION, so the version is always on it. */
.ack-btn { margin-top:12px; }
.ack-done { margin-top:12px; padding:10px 12px; border-left:5px solid var(--success); border-radius:10px; background:#eef8f0; font-size:12px; line-height:1.5; }
.ack-done strong { display:block; color:#1d6b30; }

/* ---------------------------------------------------------------------------
   Confidential psychosocial reporting, and notices.

   The assurance panel is styled to look like a promise being made rather than
   another form field, because that is what it is: it is where the worker is
   told who reads this, who does not, and the one limit Civeo cannot promise
   past. It sits ABOVE the boxes on purpose. Somebody who has already typed out
   what happened to them and then reads the terms has been treated badly.
   --------------------------------------------------------------------------- */
.confidential-assurance { margin:14px 0; padding:14px 16px; border-left:6px solid #5b2d8e; border-radius:12px; background:#f4eefb; }
.confidential-assurance h3 { margin:0 0 8px; font-size:14px; color:#3f1f66; }
.confidential-assurance ul { margin:0; padding-left:18px; }
.confidential-assurance li { margin:6px 0; font-size:13px; line-height:1.5; color:var(--ink-strong); }
.confidential-tick { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding-top:12px; border-top:1px solid #ddcdf0; font-size:14px; font-weight:700; color:#3f1f66; }
.confidential-tick input { width:20px; height:20px; margin-top:1px; }
.control-banner.confidential-on { border-left-color:#5b2d8e; background:#f4eefb; color:#3f1f66; }
.control-banner.confidential-off { border-left-color:var(--warn, #b8860b); background:#fdf6e3; }

.notice-list { display:flex; flex-direction:column; gap:12px; }
.notice-card { padding:14px 16px; border-radius:12px; background:#fff; border:1px solid #dde5ed; }
.notice-card.outstanding { border-left:6px solid var(--navy); background:#eef3f8; }
.notice-card h3 { margin:0 0 4px; font-size:15px; color:var(--navy); }
.notice-when { margin:0 0 8px; font-size:11px; color:var(--ink); }
.ack-done { display:inline-block; margin-top:8px; font-size:12px; font-weight:800; color:var(--success, #1b7a3d); }

.conf-list { display:flex; flex-direction:column; gap:10px; }
.conf-row { display:block; width:100%; text-align:left; padding:12px 14px; border-radius:12px; border:1px solid #ddcdf0; background:#f4eefb; }
.conf-row strong { display:block; color:#3f1f66; font-size:14px; }
.conf-row small { display:block; margin-top:3px; font-size:12px; color:var(--ink); }
.conf-fields { margin:10px 0; }
.conf-field { padding:8px 0; border-top:1px solid #e4e9ef; }
.conf-field b { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
.conf-field span { display:block; margin-top:3px; font-size:14px; line-height:1.5; color:var(--ink-strong); }
.conf-photo { display:block; max-width:100%; margin:10px 0; border-radius:10px; }

/* ---------------------------------------------------------------------------
   FOLLOW-UP NOTES (2026-08-13)
   Added underneath the report, never on top of it. The original is drawn
   exactly as it was filed and there is no edit control anywhere in this block,
   on purpose: a note can be added and can never be changed or removed.
   --------------------------------------------------------------------------- */
.conf-followups { margin:8px 0 16px; padding:12px 14px; border-left:6px solid #5b2d8e;
  border-radius:0 12px 12px 0; background:#f8f4fd; }
.fu-intro { margin:0 0 10px; font-size:12px; line-height:1.55; color:#3f1f66; }
.fu-note { margin:8px 0; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid #ddcdf0; }
.fu-note small { display:block; font-size:11px; color:var(--ink); }
.fu-note p { margin:5px 0 0; font-size:14px; line-height:1.5; color:var(--ink-strong); white-space:pre-wrap; }
.fu-done { margin:8px 0; padding:10px 12px; border-radius:10px; background:#eaf6ec; color:#1d6b2e; font-size:12px; }
.fu-tag { display:inline-block; max-width:100%; margin-top:5px; padding:3px 8px; border-radius:999px;
  background:#e7edf3; color:var(--navy); font-size:10px; font-weight:900; letter-spacing:.03em;
  line-height:1.5; overflow-wrap:anywhere; }
.fu-tag.warn { background:var(--warn); color:#fff; }
.fu-tag.stop { background:var(--error); color:#fff; }
.fu-tag.ok   { background:var(--success); color:#fff; }
.conf-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.conf-sub { margin:18px 0 6px; font-size:14px; color:#3f1f66; }