/* Cornerstone Shift Companion — visual identity shared with the iOS app.
   Palette and type must stay in step with Brand in ShiftCompanionApp.swift. */
:root{
  --paper:#faf6ee; --card:#ffffff; --ink:#20313a; --muted:#54666f;
  --teal:#125868; --teal-deep:#0d414c; --teal-soft:#e3edee;
  --terra:#a8451f; --terra-soft:#f9e9e1;
  --amber:#8a6400; --amber-soft:#fdf0c8;
  --sand:#f4ecdc; --line:#d8dcd9;
  --ok:#2e6b3f; --ok-soft:#e2efe4;
  --focus:#125868; --note:#c7332e;
  --shadow:0 1px 2px rgba(24,48,56,.08), 0 5px 16px rgba(24,48,56,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101d22; --card:#182a31; --ink:#e8edea; --muted:#9db1b4;
    --teal:#7fc4cf; --teal-deep:#a8d8df; --teal-soft:#1b3640;
    --terra:#e8926a; --terra-soft:#3a251c;
    --amber:#e3c05e; --amber-soft:#3a2f14;
    --sand:#22302f; --line:#2c4048;
    --ok:#8fc79c; --ok-soft:#1e3326;
    --focus:#7fc4cf; --note:#ff8178;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#101d22; --card:#182a31; --ink:#e8edea; --muted:#9db1b4;
  --teal:#7fc4cf; --teal-deep:#a8d8df; --teal-soft:#1b3640;
  --terra:#e8926a; --terra-soft:#3a251c;
  --amber:#e3c05e; --amber-soft:#3a2f14;
  --sand:#22302f; --line:#2c4048;
  --ok:#8fc79c; --ok-soft:#1e3326;
  --focus:#7fc4cf; --note:#ff8178;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  font-size:16.5px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:Poppins,"Segoe UI",system-ui,sans-serif; font-weight:600; margin:0; color:var(--teal-deep); text-wrap:balance}
p{margin:0 0 .7em}
a{color:var(--teal); font-weight:700}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}
button{font:inherit}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{max-width:560px; margin:0 auto; padding:0 14px calc(110px + env(safe-area-inset-bottom))}

/* masthead */
.mast{
  background:linear-gradient(150deg,#125868,#0d414c);
  color:#fff; border-radius:0 0 20px 20px;
  padding:calc(26px + env(safe-area-inset-top)) 20px 20px; margin:0 -14px 14px;
}
:root[data-theme="dark"] .mast, :root:not([data-theme="light"]) .mast{background:linear-gradient(150deg,#173e49,#0e2a33)}
.mast .k{font-family:Poppins,sans-serif; font-weight:500; letter-spacing:.24em; text-transform:uppercase; font-size:.66rem; color:#ffd89b; margin-bottom:6px}
.mast h1{color:#fff; font-size:1.65rem; margin-bottom:4px}
.mast p{color:#d6e7e9; font-size:.92rem; margin:0; max-width:44ch}
.mast .datebar{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap}
.mast .today{font-family:Poppins,sans-serif; font-weight:600; font-size:.85rem; background:rgba(255,255,255,.14); border-radius:999px; padding:6px 14px}
.pill{
  font-family:Poppins,sans-serif; font-weight:600; font-size:.85rem;
  background:#fff; color:#0d414c; border:none; border-radius:999px; padding:7px 16px; cursor:pointer;
}
.pill.ghost{background:rgba(255,255,255,.14); color:#fff}

/* progress chips */
.chips{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px}
.chip{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 6px; text-align:center; box-shadow:var(--shadow)}
.chip b{display:block; font-family:Poppins,sans-serif; font-weight:600; font-size:1.05rem; color:var(--teal-deep); font-variant-numeric:tabular-nums}
.chip span{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.chip.full b{color:var(--ok)}

/* Shift focus: one operational summary before the detailed timeline. */
.shiftfocus{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:13px; margin:0 0 20px;
}
.focushead{display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.focushead h2{font-size:1.05rem}
.focushead span{margin-left:auto; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em}
.focusgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px}
.focuscard{
  min-width:0; padding:9px 6px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink); text-align:center;
}
.focuscard b{display:block; color:var(--teal-deep); font:600 1rem Poppins,sans-serif; font-variant-numeric:tabular-nums}
.focuscard span{display:block; margin-top:2px; color:var(--muted); font-size:.66rem; line-height:1.25}
.focuscard.complete b{color:var(--ok)}
.focuscard.attention b,.focuscard.warning b{color:var(--note)}
button.focuscard{cursor:pointer; font:inherit}
button.focuscard:active{background:var(--teal-soft)}
.focusnext{
  margin:10px 0 0; padding:8px 10px; border-radius:9px;
  background:var(--teal-soft); color:var(--teal-deep); font-size:.82rem; font-weight:700;
}
.focusnext.live{background:var(--ok-soft); color:var(--ok)}
@media (max-width:420px){
  .focusgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .focuscard.handover{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:7px}
  .focuscard.handover b,.focuscard.handover span{display:inline; margin:0}
}

/* sections */
section{margin-bottom:22px}
.shead{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.shead .n{
  font-family:Poppins,sans-serif; font-weight:600; font-size:.95rem;
  background:var(--terra); color:#fff; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.shead h2{font-size:1.22rem}
.shead .count{margin-left:auto; font-family:Poppins,sans-serif; font-weight:600; font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums}
.shead .count.full{color:var(--ok)}
.shead .count.hasentries, .chip.hasentries b{color:var(--note)}
.group{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:6px 8px; margin-bottom:10px}
.glabel{font-family:Poppins,sans-serif; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--terra); padding:10px 12px 2px}

.check{
  display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  background:none; border:none; border-radius:10px; padding:12px; min-height:48px;
  color:var(--ink); cursor:pointer; font-size:1rem; line-height:1.4;
}
.check:active{background:var(--teal-soft)}
.check .box{
  width:26px; height:26px; border-radius:8px; border:2.5px solid var(--teal);
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:15px; font-weight:700; transition:background .12s;
}
.check[aria-pressed="true"] .box{background:var(--ok); border-color:var(--ok); color:#fff}
.check[aria-pressed="true"] .t{color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px}
.check .t strong{font-weight:700}
.check + .check{border-top:1px solid var(--line); border-radius:0 0 10px 10px}

/* Repeatable event rows use the former tick-box position as a count. */
.entryrow{
  display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  background:none; border:none; border-radius:10px; padding:12px; min-height:48px;
  color:var(--ink); cursor:pointer; font-size:1rem; line-height:1.4;
}
.entryrow:active{background:var(--teal-soft)}
.entryrow + .entryrow{border-top:1px solid var(--line); border-radius:0 0 10px 10px}
.entrycount{
  width:26px; height:26px; border-radius:8px; border:2.5px solid var(--teal);
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-family:Poppins,sans-serif; font-weight:600;
  font-size:.8rem; font-variant-numeric:tabular-nums;
}
.entryrow .t{flex:1 1 auto}
.entrycount.hasentries{color:var(--note); border-color:var(--note); background:color-mix(in srgb,var(--note) 10%,transparent)}

/* callouts */
.callout{
  border-radius:12px; padding:12px 15px; margin:10px 0;
  background:var(--sand); border:1px solid var(--line); border-left:5px solid var(--amber);
  font-size:.92rem;
}
.callout.urgent{background:var(--terra-soft); border-left-color:var(--terra)}
.callout.calm{background:var(--teal-soft); border-left-color:var(--teal)}
.callout .nt{font-family:Poppins,sans-serif; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; color:var(--terra)}
.callout.calm .nt{color:var(--teal)}
.callout p:last-child, .callout ul:last-child, .callout table:last-child{margin-bottom:0}
.callout ul{margin:0 0 .7em; padding-left:1.2em}
.callout li{margin-bottom:.3em}

/* notes / text entry */
.pad{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px; margin-bottom:12px}
.pad h3{font-size:1.05rem; display:flex; align-items:center; gap:9px; margin-bottom:4px}
.pad .hint{font-size:.85rem; color:var(--muted); margin-bottom:10px}
textarea{
  width:100%; min-height:110px; resize:vertical;
  background:var(--paper); color:var(--ink);
  border:1.5px solid var(--line); border-radius:10px;
  padding:12px 14px; font:inherit; font-size:1rem; line-height:1.5;
}
textarea:focus{border-color:var(--teal); outline:none; box-shadow:0 0 0 3px var(--teal-soft)}
textarea::placeholder{color:var(--muted); opacity:.75}
.padrow{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap}
.saved{font-size:.78rem; color:var(--ok); font-weight:700; opacity:0; transition:opacity .25s}
.saved.show{opacity:1}
.minibtn{background:none; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.78rem; padding:5px 13px; cursor:pointer}
.minibtn:active{border-color:var(--teal); color:var(--teal)}
.minibtn.danger:active{border-color:var(--terra); color:var(--terra)}
.padrow .minibtn:first-of-type{margin-left:auto}

/* phone table */
.phone{width:100%; border-collapse:collapse; font-size:.95rem; margin-bottom:.7em}
.phone td{padding:9px 4px; border-top:1px solid var(--line)}
.phone tr:first-child td{border-top:none}
.phone td.w{font-weight:700}
.phone td.n{text-align:right; white-space:nowrap}
.phone td.n a{font-family:Poppins,sans-serif; font-weight:600; text-decoration:none; border-bottom:1.5px dotted var(--teal)}

.foot{font-size:.78rem; color:var(--muted); margin-top:20px; padding-top:12px; border-top:1px solid var(--line)}
.code{font-family:Poppins,sans-serif; font-weight:700}

/* emergency button */
.sos{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:60;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.92rem;
  background:var(--terra); color:#fff; border:none; border-radius:999px;
  padding:13px 20px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.3);
  display:flex; align-items:center; gap:8px;
}

/* sheets (emergency + history) */
.sheetwrap{position:fixed; inset:0; z-index:70; display:none; align-items:flex-end; justify-content:center; padding:14px; background:rgba(10,20,24,.55)}
.sheetwrap.open{display:flex}
.sheet{
  background:var(--card); color:var(--ink); border-radius:18px; max-width:480px; width:100%;
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 12px 44px rgba(0,0,0,.4); border-top:6px solid var(--terra);
  max-height:86vh; overflow:auto;
}
.sheet.calm{border-top-color:var(--teal)}
.sheet h2{font-size:1.2rem}
.sheet .big{font-family:Poppins,sans-serif; font-weight:600; font-size:1.9rem; color:var(--terra); margin:2px 0 8px}
.sheet .big a{color:inherit; text-decoration:none; border-bottom:2px solid currentColor}
.sheetclose{float:right; background:none; border:none; font-size:1.5rem; color:var(--muted); cursor:pointer; line-height:1; padding:2px 8px}

/* history */
.hist{list-style:none; margin:12px 0 0; padding:0}
.hist li{border-top:1px solid var(--line); padding:11px 2px}
.hist li:first-child{border-top:none}
.hist .when{font-family:Poppins,sans-serif; font-weight:600; font-size:.95rem; color:var(--teal-deep)}
.hist .meta{font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums}
.hist .diary{font-size:.88rem; margin:5px 0 0; padding:8px 11px; background:var(--paper); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere}
.hist .empty{color:var(--muted); font-size:.9rem}

/* load failure */
.oops{background:var(--terra-soft); border:1px solid var(--terra); border-left:5px solid var(--terra); border-radius:12px; padding:16px 18px; margin:14px 0}
.oops h2{font-size:1.05rem; color:var(--terra); margin-bottom:6px}
.oops code{font-family:ui-monospace,Menlo,monospace; font-size:.85em; background:var(--card); padding:1px 5px; border-radius:4px}

/* ---- rooms: one row that ticks the lot, + opens the individual checks ---- */
.room + .room{border-top:1px solid var(--line)}
.roomhead{display:flex; align-items:stretch; gap:0}
.roomhead .check{flex:1 1 auto; border-radius:10px 0 0 10px}
.check.parent .t{font-family:Poppins,sans-serif; font-weight:600}
.check.parent .floor{
  display:block; font-family:Poppins,sans-serif; font-weight:600; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:1px;
}
.check.partial .box{background:var(--teal-soft); border-color:var(--teal); color:var(--teal)}
.check.partial .box::after{content:"–"; font-size:17px; line-height:1}
.check.partial .box{color:var(--teal)}
.check.partial .t{color:var(--ink); text-decoration:none}
.expand{
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  background:none; border:none; border-left:1px solid var(--line);
  color:var(--muted); cursor:pointer; padding:0 14px; min-width:64px; justify-content:flex-end;
}
.expand .cnt{font-family:Poppins,sans-serif; font-weight:600; font-size:.8rem; font-variant-numeric:tabular-nums}
.expand .plus{
  font-family:Poppins,sans-serif; font-weight:600; font-size:1.15rem; line-height:1;
  width:26px; height:26px; border-radius:8px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--teal);
}
.expand[aria-expanded="true"] .plus{background:var(--teal-soft); border-color:var(--teal)}
.subs{padding:2px 0 8px 20px; margin:0 8px 4px; border-left:2px solid var(--teal-soft)}
.check.sub{padding:9px 12px; min-height:44px; font-size:.95rem}
.check.sub .box{width:22px; height:22px; border-width:2px; font-size:13px}
.check.sub + .check.sub{border-top:none}

/* ---- callout extras ---- */
.callout ol{margin:0 0 .7em; padding-left:1.3em}
.callout ol li, .procbody ol li{margin-bottom:.35em}
.callout .leadin, .procbody .leadin{margin-bottom:.35em; font-weight:700}
.callout .cfoot, .procbody .cfoot{margin-bottom:0; font-style:italic}

/* ---- emergency procedures ---- */
.proc{border:1px solid var(--line); border-left:5px solid var(--amber); border-radius:12px; background:var(--sand); margin:8px 0}
.proc.urgent{background:var(--terra-soft); border-left-color:var(--terra)}
.proc.calm{background:var(--teal-soft); border-left-color:var(--teal)}
.proc summary{
  cursor:pointer; list-style:none; padding:12px 15px; min-height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.92rem; color:var(--teal-deep);
}
.proc.urgent summary{color:var(--terra)}
.proc summary::-webkit-details-marker{display:none}
.proc summary::after{content:"+"; font-size:1.15rem; color:var(--muted); flex:0 0 auto}
.proc[open] summary::after{content:"−"}
.procbody{padding:0 15px 12px; font-size:.92rem}
.procbody ul{margin:0 0 .7em; padding-left:1.2em}
.procbody li{margin-bottom:.3em}
.procbody p:last-child, .procbody ul:last-child, .procbody ol:last-child{margin-bottom:0}

/* ---- contact groups ---- */
.cgtitle{font-size:.78rem; font-family:Poppins,sans-serif; text-transform:uppercase; letter-spacing:.09em; color:var(--terra); margin:18px 0 4px}
.cgnote{font-size:.82rem; color:var(--muted); margin-bottom:6px}
.phone td.w .rank{
  display:inline-block; font-family:Poppins,sans-serif; font-weight:600; font-size:.68rem;
  background:var(--teal-soft); color:var(--teal-deep); border-radius:5px;
  padding:1px 6px; margin-right:7px; vertical-align:1px;
}
.phone td.w .cnote{display:block; font-weight:400; font-size:.78rem; color:var(--muted)}
.phone td.n a{display:block; margin-bottom:3px}
.phone td.n a:last-child{margin-bottom:0}

/* ---- today: the day arranged automatically from the programme ---- */
.today{margin-bottom:22px}
.today:empty{display:none}
.timeline{list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.tl{display:flex; gap:12px; padding:11px 14px; border-top:1px solid var(--line); align-items:baseline}
.tl:first-child{border-top:none}
.tl time{
  flex:0 0 62px; font-family:Poppins,sans-serif; font-weight:600; font-size:.82rem;
  color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tlbody{flex:1 1 auto; min-width:0}
.tlbody b{display:block; font-size:.97rem; line-height:1.3}
.tlheading{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nowbadge{
  display:inline-flex; align-items:center; min-height:20px; padding:2px 8px;
  border-radius:999px; background:var(--ok); color:#fff; font-family:Poppins,sans-serif;
  font-size:.65rem; font-weight:700; letter-spacing:.055em; line-height:1; text-transform:uppercase;
}
.tlbody span{display:block; font-size:.8rem; color:var(--muted); margin-top:1px}
.tlbody .tlcontact{display:block; font-size:.8rem; color:var(--muted); margin-top:1px}
.tlbody a.tlcontact{font-weight:700; color:var(--teal); text-decoration:none; border-bottom:1.5px dotted var(--teal); width:max-content; max-width:100%}
.tl.group{cursor:pointer}
.tl.group:focus-visible{outline-offset:-4px}
.activitycount{
  flex:0 0 auto; color:var(--note); font-family:Poppins,sans-serif; font-weight:600;
  font-size:.9rem; font-variant-numeric:tabular-nums; margin-left:auto;
}
.tl.open, .tl.lock{background:var(--sand)}
.tl.open .tlbody b, .tl.lock .tlbody b{color:var(--terra)}
.tl.open time, .tl.lock time{color:var(--terra)}
.tl.past{opacity:.5}
.tl.now{background:var(--ok-soft); box-shadow:inset 5px 0 0 var(--ok)}
.tl.now time{color:var(--ok)}
.tl.next{box-shadow:inset 3px 0 0 var(--teal)}
.tl.next time{color:var(--teal)}

/* ---- explicit, opt-in secure handover -------------------------------- */
.handoversheet{max-width:620px}
.handoverconsent{
  display:flex; gap:12px; align-items:flex-start; margin:14px 0; padding:14px;
  border:1px solid var(--line); border-radius:14px; background:var(--teal-soft); color:var(--teal-deep);
}
.handoverconsent input{width:23px; height:23px; flex:0 0 auto; margin:1px 0 0; accent-color:var(--teal)}
.handoverconsent strong,.handoverconsent small{display:block}
.handoverconsent small{margin-top:3px; color:var(--muted); font-weight:400}
.handoverprivacy{margin:12px 0; border-left:5px solid var(--terra); border-radius:10px; padding:13px 14px; background:var(--sand)}
.handoverprivacy p{margin:6px 0 0; font-size:.86rem; color:var(--muted)}
.handoversummary{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0}
.handoversummary div{border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--card)}
.handoversummary b,.handoversummary span{display:block}
.handoversummary b{font-family:Poppins,sans-serif; color:var(--teal-deep); font-size:1.15rem}
.handoversummary span{color:var(--muted); font-size:.77rem}
.handoverstatus{min-height:23px; margin:8px 0; color:var(--muted); font-weight:700}
.handoverstatus.error{color:#9c3030}
.handoversend{width:100%}

/* ---- role profile, assignments and protected instructions ------------ */
.assignmentpanel{margin:18px 0 22px;border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--card);box-shadow:0 7px 24px rgba(5,45,54,.08)}
.assignmentpanel[hidden]{display:none}
.assignmentpanel h2{margin:0 0 5px;font-size:1.35rem;color:var(--teal-deep)}
.assignmentpanel>.cgnote{margin:0 0 14px}
.assignmentlist{display:grid;gap:10px}
.assignmentcard{border-left:5px solid var(--teal);border-radius:13px;padding:14px;background:var(--teal-soft)}
.assignmentcard.current{border-left-color:var(--terra);background:var(--sand)}
.assignmentcard h3{margin:0 0 5px;font:600 1.1rem Poppins,sans-serif;color:var(--teal-deep)}
.assignmentmeta{display:flex;flex-wrap:wrap;gap:5px 12px;margin:0 0 9px;color:var(--muted);font-size:.84rem;font-weight:700}
.assignmentcard p{margin:7px 0}
.assignmenttasks{margin:9px 0;padding-left:21px}
.assignmentactions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.assignmentactions .minibtn,.assignmentactions a{min-height:38px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.newbadge{display:inline-block;margin-left:6px;border-radius:999px;padding:2px 8px;background:var(--terra);color:#fff;font:700 .7rem/1.4 inherit;vertical-align:middle;letter-spacing:.03em}
.assignmentnews{margin:0 0 12px;border-radius:13px;padding:12px 14px;background:var(--sand);border:1px solid var(--terra)}
.assignmentnews p{margin:0 0 6px}
.assignmentnews ul{margin:4px 0 8px;padding-left:18px}
.assignmentrole{display:inline-block;margin-bottom:10px;border-radius:999px;padding:4px 9px;background:var(--teal-deep);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.alarmlaunch{border-color:#bb5c37;color:#8e3f22}
.alarmreveal{max-width:520px;text-align:center}
.alarmcode{margin:20px 0 12px;border:2px solid var(--line);border-radius:16px;padding:20px;background:#fff;font:600 clamp(2.5rem,14vw,4.4rem) Poppins,sans-serif;letter-spacing:.2em;color:var(--teal-deep)}
.alarmstatus{min-height:24px;color:var(--muted);font-weight:700}
.alarmstatus.error{color:#9c3030}

/* ---- programme tables ---- */
.prog{width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:14px}
.prog td{padding:7px 4px; border-top:1px solid var(--line); vertical-align:top}
.prog tr:first-child td{border-top:none}
.prog td.pt{white-space:nowrap; font-family:Poppins,sans-serif; font-weight:600; color:var(--teal-deep); font-variant-numeric:tabular-nums; width:1%; padding-right:12px}
.prog td b{font-weight:700}
.prog td .pd{display:block; font-size:.8rem; color:var(--muted)}

/* repeatable-entry sheet ------------------------------------------------ */
.entrysheet textarea{margin-top:7px}
.entrynotelist{
  margin:10px 0 4px; padding:10px 12px 10px 30px; border-radius:10px;
  background:var(--paper); overflow-wrap:anywhere;
}
.entrynotelist li{padding:2px 0}
.entrynotelist li::marker{color:var(--terra); font-weight:700}
.sheetactions{display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:10px}
.donebtn{
  border:0; border-radius:999px; padding:7px 18px; cursor:pointer;
  background:var(--teal); color:#fff; font-family:Poppins,sans-serif; font-weight:600;
}
.donebtn:disabled{opacity:.42; cursor:default}

/* five-detail booking form --------------------------------------------- */
.sheetguidance{
  margin:10px 0 13px; padding:11px 13px; border:1px solid var(--line);
  border-left:5px solid var(--amber); border-radius:10px; background:var(--sand);
}
.sheetguidance:last-child{margin-bottom:0}
.sheetsectiontitle{margin-top:4px; font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; color:var(--terra)}
.bookingform{
  display:grid; grid-template-columns:minmax(88px, 34%) 1fr;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--paper); margin:12px 0 10px;
}
.bookingform label{
  padding:11px 9px; border-bottom:1px solid var(--line);
  color:var(--teal-deep); font-family:Poppins,sans-serif;
  font-size:.72rem; font-weight:600;
}
.bookingform input{
  min-width:0; width:100%; border:0; border-left:1px solid var(--line);
  border-bottom:1px solid var(--line); border-radius:0;
  background:var(--card); color:var(--ink); padding:10px; font:inherit;
}
.bookingform label:nth-last-of-type(1), .bookingform input:last-child{border-bottom:0}
.bookingform input:focus{outline:2px solid var(--teal); outline-offset:-2px}
.booking-save{display:block; margin-left:auto}
.bookingsaved{margin:4px 0 12px}
.bookingpager{display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; margin-bottom:8px}
.bookingpager strong{
  padding:8px 12px; border-radius:999px; background:var(--paper); color:var(--teal-deep);
  text-align:center; font-family:Poppins,sans-serif; font-size:.88rem; font-variant-numeric:tabular-nums;
}
.bookingpager button{
  min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--teal-deep); font:700 1.45rem/1 Poppins,sans-serif; cursor:pointer;
}
.bookingpager button:disabled{opacity:.28; cursor:default}
.bookingcarousel{
  display:flex; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.bookingcarousel::-webkit-scrollbar{display:none}
.bookingcard{
  flex:0 0 100%; scroll-snap-align:start; box-sizing:border-box; min-width:0;
  padding:13px; border:1px solid var(--line); border-radius:11px; background:var(--paper);
}
.bookinggrid{display:grid; grid-template-columns:auto 1fr; gap:3px 9px; margin:0; min-width:0}
.bookinggrid dt{color:var(--muted); font-size:.75rem; font-weight:700}
.bookinggrid dd{margin:0; font-size:.88rem; overflow-wrap:anywhere}

/* one four-step checklist per payment --------------------------------- */
.paymentprocedure h3{font-size:.83rem; text-transform:uppercase; letter-spacing:.08em; color:var(--amber)}
.paymentprocedure ol{margin:8px 0 0; padding-left:1.4em}
.paymentprocedure li{margin:.4em 0}
.paymentnew{grid-template-columns:minmax(112px, 38%) 1fr}
.paymentlist{margin-top:14px; border-top:1px solid var(--line); padding-top:2px}
.paymentcard{margin:12px 0 0; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--card)}
.paymentcardhead{display:flex; align-items:baseline; gap:9px; padding:10px 11px; background:var(--paper)}
.paymentcardhead h3{flex:1 1 auto; min-width:0; font-size:.95rem; overflow-wrap:anywhere}
.paymentcardhead span{color:var(--muted); font-size:.76rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.paymentcardhead span.complete{color:var(--ok)}
.paymentstep{
  display:flex; align-items:flex-start; gap:10px; width:100%; min-height:48px;
  padding:9px 10px; border:0; border-top:1px solid var(--line);
  background:var(--card); color:var(--ink); text-align:left; cursor:pointer;
}
.paymentcheck{
  flex:0 0 auto; width:25px; height:25px; border:2.5px solid var(--teal);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:Poppins,sans-serif; font-weight:600;
}
.paymentstep.checked .paymentcheck{background:var(--ok); border-color:var(--ok)}
.paymentsteptext{display:flex; align-items:flex-start; gap:6px; min-width:0; line-height:1.35}
.paymentsteptext > b{color:var(--terra); font-family:Poppins,sans-serif; font-size:.78rem; padding-top:.13em}
.paymentsteptext > span{overflow-wrap:anywhere}

/* activity-linked key and equipment loans ----------------------------- */
.equipmentgroup{margin:12px 0; padding:0; border:1px solid var(--line); border-radius:11px; overflow:hidden}
.equipmenthead{display:flex; align-items:center; gap:10px; padding:10px 11px; background:var(--paper)}
.equipmenthead > div{flex:1 1 auto; min-width:0}
.equipmenthead h3{font-size:.95rem; margin:0}
.equipmenthead span{display:block; color:var(--muted); font-size:.75rem}
.equipmentadd{
  flex:0 0 auto; width:30px; height:30px; border:1.5px solid var(--teal);
  border-radius:8px; background:var(--teal-soft); color:var(--teal);
  font:600 1.1rem Poppins,sans-serif; cursor:pointer;
}
.loanrow,.loandraft{
  display:flex; align-items:center; gap:9px; width:100%; min-height:46px;
  padding:8px 10px; border:0; border-top:1px solid var(--line);
  background:var(--card); color:var(--ink); text-align:left; font:inherit;
}
.loanrow{cursor:pointer}
.loanstatus{
  flex:0 0 auto; width:26px; height:26px; border:2.5px solid var(--note);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:var(--note); font-family:Poppins,sans-serif; font-weight:600;
}
.loanrow.returned .loanstatus{background:var(--ok); border-color:var(--ok); color:#fff}
.loanrow.returned .loantext{color:var(--muted); text-decoration:line-through}
.loantext{overflow-wrap:anywhere}
.loandraft input{
  flex:1 1 auto; min-width:0; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); padding:8px 9px; font:inherit;
}
.loanwarn{color:var(--note)}
.loanok{color:var(--ok)}
.reminder-limit{margin-top:12px}

/* saved activity and event entries shown against their past shift */
.historynotes{font-size:.88rem; margin:5px 0 0; padding:8px 11px; background:var(--paper); border-radius:8px}
.historynotetitle{font-family:Poppins,sans-serif; font-weight:600; color:var(--teal-deep); font-size:.8rem}
.historynotes ul{margin:4px 0 0; padding-left:1.2em}
.historynotes li{border:0; padding:1px 0}


/* handbook -------------------------------------------------------------- */
.hbsearch{
  width:100%; box-sizing:border-box; margin:10px 0 4px; padding:11px 13px;
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
}
.hbsearch:focus{outline:2px solid var(--teal); outline-offset:1px}
.hbsec{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:13px 4px; background:none; border:0; border-bottom:1px solid var(--line);
  font:inherit; color:var(--ink); cursor:pointer;
}
.hbsec:last-child{border-bottom:0}
.hbnum{
  flex:0 0 auto; width:25px; height:25px; border-radius:7px; background:var(--teal);
  color:#fff; font-family:Poppins,sans-serif; font-weight:600; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
}
.hbback{
  background:none; border:0; padding:6px 0; margin-bottom:2px; cursor:pointer;
  font:inherit; font-weight:600; color:var(--teal);
}
.hbfrom{
  font-family:Poppins,sans-serif; font-weight:600; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:14px 0 5px;
}
.hbnone{color:var(--muted); padding:18px 2px}
/* Tables read as heading + values. Three columns squeezed into a phone width
   is unreadable, and this is looked up mid-shift. */
.hbrow{padding:7px 0; border-bottom:1px solid var(--line)}
.hbrow:last-child{border-bottom:0}
.hbrow .rk{font-weight:600}
.hbrow .rv{color:var(--muted); font-size:.94rem}