/* Layout: SYRNOS workbook look - pale blue page, header band, menu on the left, white cards with coloured top rows */
:root {
  --bg: #BFDFF3; --band: #DDF6FF; --side: #6FC6EB; --ink: #074F69; --ink2: #285A6E;
  --line: #B4DCEC; --nav: #D6F1FC; --card: #FFFFFF; --act: #0F9ED5; --act-dk: #0B7FAD;
  --save: #4EA72E; --warn: #E97132; --admin: #E8C5E4; --admin-ink: #5B1F56;
  --hand: #8FF1D7; --hand-ink: #14594B; --muted: #EEF6FA; --danger: #C0392B;
  --font: Calibri, Carlito, "Source Sans 3", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.4; margin: 0 }
button, input, select, textarea { font: inherit; color: inherit }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.2 }
.pilot { background: #FFF4D6; color: #6B4A00; text-align: center; font-size: 13px; padding-block: 5px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
header.band { background: linear-gradient(180deg, #F2FBFF, var(--band)); border-bottom: 2px solid #5FB8DD;
  padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.brand { font-weight: 700; font-size: 22px; letter-spacing: .5px }
.brand small { font-weight: 400; font-size: 14px; color: var(--ink2); letter-spacing: 0; margin-left: 6px }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px }
.who b { font-weight: 700 }
.shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start;
  padding-block: 16px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  max-width: 1560px; margin: 0 auto }
nav.menu { background: var(--side); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px }
nav.menu .grp { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #06425A; margin: 6px 4px 0; font-weight: 700 }
nav.menu button { background: rgba(214, 241, 252, .75); border: 1px solid rgba(255,255,255,.6); border-radius: 4px; padding: 8px 10px; text-align: left; cursor: pointer; font-weight: 600 }
nav.menu button[aria-current="page"] { background: #fff; box-shadow: 0 1px 3px rgba(7,79,105,.25) }
nav.menu button .count { float: right; background: var(--warn); color: #fff; border-radius: 9px; font-size: 12px; padding: 0 7px; line-height: 18px; margin-top: 1px }
nav.menu .ver { font-size: 12px; color: #06425A; margin: 8px 4px 0 }
main { min-width: 0; max-width: 1300px }
.page-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px }
.page-head h1 { font-size: 26px }
.intro { color: var(--ink2); margin: 0 0 14px; max-width: 75ch }
.btn { border: 0; border-radius: 4px; padding: 7px 14px; cursor: pointer; font-weight: 600; background: var(--act); color: #fff; white-space: nowrap }
.btn:hover { background: var(--act-dk) }
.btn.light { background: #E6EEF2; color: var(--ink) } .btn.light:hover { background: #D6E2E8 }
.btn.save { background: var(--save) } .btn.save:hover { background: #3E8A23 }
.btn.warn { background: var(--warn) } .btn.warn:hover { background: #CF5E22 }
.btn.mgr { background: var(--admin); color: var(--admin-ink) }
.btn.small { padding: 4px 10px; font-size: 13px }
.btn:disabled { opacity: .5; cursor: not-allowed }
:focus-visible { outline: 3px solid #F5B400; outline-offset: 2px }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px }
.panel h2 { font-size: 18px; margin-bottom: 10px }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.stack { display: flex; flex-direction: column; gap: 16px }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.note { font-size: 13px; color: var(--ink2) }
.empty { color: var(--ink2); font-style: italic; padding: 8px 0 }
label.f { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 14px; min-width: 0 }
label.f span.hint { font-weight: 400; color: var(--ink2); font-size: 13px }
input[type=text], input[type=password], input[type=time], input[type=number], select, textarea {
  background: #fff; border: 1px solid #8CC5DD; border-radius: 4px; padding: 7px 9px; width: 100%; min-width: 0 }
textarea { min-height: 80px; resize: vertical }
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 14px }
.filters label.f { width: 190px }
/* logbook buttons, as on Home */
.logbtns { display: flex; flex-direction: column; gap: 8px }
.logbtns .r { display: flex; flex-wrap: wrap; gap: 8px }
.logbtns button { background: var(--act); color: #fff; border: 0; border-radius: 4px; padding: 7px 12px; cursor: pointer; font-weight: 600; min-width: 150px; text-align: left }
.logbtns button:hover { background: var(--act-dk) }
.logbtns button.warn { background: var(--warn) }
.logbtns button.light { background: #DCE4E8; color: var(--ink) }
.logbtns button.praise { background: #3D7BD9 }
/* cards */
.dayhead { font-weight: 700; font-size: 16px; margin: 18px 0 8px; padding-bottom: 3px; border-bottom: 2px solid #5FB8DD }
.dayhead:first-child { margin-top: 0 }
.cards { display: flex; flex-direction: column; gap: 10px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.card .top { padding: 7px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px }
.card .top b { font-size: 15px }
.card .body { padding: 9px 12px; white-space: pre-wrap; overflow-wrap: anywhere }
.card .meta { padding: 0 12px 9px; font-size: 13px; color: var(--ink2) }
.card .addenda { margin: 0 12px 10px; padding: 7px 10px; background: var(--muted); border-radius: 4px; font-size: 14px; white-space: pre-wrap }
.card .addenda div + div { margin-top: 4px }
.card .acts { padding: 0 12px 10px; display: flex; gap: 8px; flex-wrap: wrap }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: #fff; border: 1px solid currentColor }
.pill.notread { color: #B3261E; background: #FFECEA }
.pill.read { color: #2E6B1F; background: #EAF6E4 }
.pill.cleared { color: #5A6B73; background: #F0F3F5 }
.hcard .top { background: var(--hand); color: #10302A }
.hsec { padding: 6px 12px 0 }
.hsec h4 { margin: 0; font-size: 13px; color: var(--hand-ink); text-transform: uppercase; letter-spacing: .05em }
.hsec p { margin: 2px 0 6px; white-space: pre-wrap; overflow-wrap: anywhere }
/* home */
.banner { background: var(--hand); color: #10302A; border-radius: 6px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-weight: 600 }
.banner.ok { background: #E6F7EF; font-weight: 400 }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
table.t th { text-align: left; background: #E3F3FB; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap }
table.t td { padding: 6px 8px; border-bottom: 1px solid #E3EEF3; vertical-align: middle }
.tw { overflow-x: auto }
.todo { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #E3EEF3 }
.todo:last-child { border-bottom: 0 }
.todo input { margin-top: 4px; width: 18px; height: 18px; flex: none }
.todo .tx { min-width: 0; overflow-wrap: anywhere }
.todo .sub { font-size: 13px; color: var(--ink2) }
.todo.done .tx > span:first-child { text-decoration: line-through; color: var(--ink2) }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2FA84F; margin-right: 6px }
.people { display: flex; flex-direction: column; gap: 6px }
.shiftcode { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; border-radius: 3px; padding: 0 5px; background: #E3F3FB }
/* sign in */
.signin { max-width: 440px; margin: 40px auto; display: flex; flex-direction: column; gap: 14px }
.signin .panel { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px }
.err { color: var(--danger); font-weight: 600 }
/* modal */
.scrim { position: fixed; inset: 0; background: rgba(7, 47, 64, .45); display: flex; align-items: flex-start; justify-content: center; z-index: 50; overflow-y: auto;
  padding-block: max(30px, env(safe-area-inset-top, 0px)) 30px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.modal { background: #fff; border-radius: 8px; width: 100%; max-width: 640px; box-shadow: 0 10px 40px rgba(0,0,0,.25) }
.modal .mh { padding: 12px 18px; font-weight: 700; font-size: 18px; background: var(--band); border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--line) }
.modal .mb { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px }
.modal .mf { padding: 12px 18px 16px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.modal.wide { max-width: 860px }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom, 0px)); background: #0B3A4E; color: #fff;
  padding: 10px 18px; border-radius: 6px; z-index: 60; box-shadow: 0 4px 18px rgba(0,0,0,.25); max-width: calc(100% - 32px) }
.status { font-size: 13px; color: var(--ink2) }
.status.bad { color: var(--danger) }
/* stage 2: banners on Home */
.banner.urgent { background: #FDE4E4; color: #7A1B12 }
.banner.rotab { background: #E3F3FB; color: var(--ink) }
.linkbtn { background: none; border: 0; padding: 2px 4px; color: #4F7586; font-size: 13px; cursor: pointer; text-decoration: none }
.linkbtn:hover { color: var(--ink); text-decoration: underline }
/* Daily Observations: one card per young person and category, entries in time order */
.card.obs .top { font-size: 15px; justify-content: center; text-align: center; color: var(--ink); padding: 8px 12px }
.card.obs .entry + .entry { border-top: 1px solid #E1EEF5 }
.card.obs .body { line-height: 1.55; font-size: 16px; color: #1E1E1E }
.card.obs .body .time { font-weight: 700; color: var(--ink2); margin-right: 10px; font-variant-numeric: tabular-nums }
.card.obs .meta { color: #6E8C9B }
.card .history { margin: 0 12px 10px; padding: 7px 10px; background: #FAFBFC; border: 1px solid #E6EEF2; border-radius: 4px; font-size: 13px; color: #56707C }
.card .history div + div { margin-top: 4px }
.card .history span { overflow-wrap: anywhere }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid #B4C8D2; margin-right: 6px; vertical-align: -1px }
fieldset.others { border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 }
fieldset.others legend { font-weight: 600; font-size: 14px; padding: 0 4px }
/* Rota: W1 blue, W2 green, like the office rota */
.rotawk { padding: 0; overflow: hidden }
table.rota { table-layout: fixed; min-width: 760px }
table.rota th, table.rota td { text-align: center; border-left: 1px solid #E3EEF3 }
table.rota th.nm, table.rota td.nm { text-align: left; width: 190px; border-left: 0 }
table.rota th:last-child, table.rota td.hrs { width: 64px }
.rotawk.w1 thead th { background: #5BC8F0; color: #06374A } .rotawk.w1 tbody tr:nth-child(even) td { background: #F1FAFE }
.rotawk.w2 thead th { background: #8FD97A; color: #173F0B } .rotawk.w2 tbody tr:nth-child(even) td { background: #F3FBF0 }
table.rota thead th.today { box-shadow: inset 0 -4px 0 #F5B400 }
table.rota td.today { background: #FFF8DD !important }
table.rota td.cell { font-weight: 700; font-size: 15px; position: relative }
table.rota td.cell.click { cursor: pointer } table.rota td.cell.click:hover { outline: 2px solid var(--act); outline-offset: -2px }
table.rota td.cell.changed::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #E97132 transparent transparent }
table.rota td.cell.away { color: #7A5A00; background: #FFF2C6 !important }
table.rota .suf { font-size: 11px; font-weight: 600; color: #7A4B9A; margin-left: 2px; vertical-align: super }
table.rota .dotw { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E97132; margin-left: 3px; vertical-align: middle }
table.rota tr.me td { font-weight: 700 } table.rota tr.me td.nm { color: #0B5D7E }
.pos { display: block; font-size: 12px; font-weight: 400; color: var(--ink2) }
table.rota tr.cover td { background: #F6FAFC !important; font-size: 12px; vertical-align: top; padding-top: 8px }
.cv { display: inline-block; padding: 0 4px; border-radius: 3px; font-weight: 700; margin: 1px 0 }
.cv.short { background: #FDE4E4; color: #A3231A } .cv.ok { color: #2E6B1F }
.other { font-size: 11px; color: #3F6475; margin-top: 3px }
.prob { font-size: 11px; color: #A3231A; font-weight: 700; margin-top: 3px }
.req { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #E3EEF3 }
.req:last-child { border-bottom: 0 }
.req > span:first-child { min-width: 0; overflow-wrap: anywhere; flex: 1 1 320px }
.needs { border-color: #E97132; box-shadow: inset 4px 0 0 #E97132 }
.preview { background: var(--muted); border-radius: 4px; padding: 8px 10px }
table.pat select { padding: 3px 1px; width: 56px } table.pat input[type=date] { width: 136px; padding: 4px }
table.pat td, table.pat th { padding: 4px 3px }
table.pat th.w1h { background: #CCEBFA } table.pat th.w2h { background: #DDF2D3 }
table.pat td.nm { min-width: 170px }
input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid #8CC5DD; border-radius: 4px; background: #fff }
input[type=date] { background: #fff; border: 1px solid #8CC5DD; border-radius: 4px; padding: 7px 9px; min-width: 0 }
@media print {
  .pilot, header.band, nav.menu, .noprint, .intro, .toast { display: none !important }
  body { background: #fff }
  .shell { display: block; padding: 0 }
  .rotawk { break-after: page; border: 0 }
  table.rota td.cell.changed::after { border-color: transparent #999 transparent transparent }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr) }
  nav.menu { position: static; flex-direction: row; flex-wrap: wrap }
  nav.menu .grp, nav.menu .ver { display: none }
  .grid2 { grid-template-columns: minmax(0, 1fr) }
  .logbtns button { min-width: 0; flex: 1 1 140px }
  .filters label.f { width: calc(50% - 7px) }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }