/* 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; --glass: rgba(255,255,255,.85); --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 }
/* the workbook's glass look: a soft pastel gradient behind every page (sky, lavender, mint, mist), a little stronger since stage 20 */
body { background: radial-gradient(ellipse at 0% 0%, #94C6F9, rgba(148,198,249,0) 60%), radial-gradient(ellipse at 100% 10%, #A4B2F6, rgba(164,178,246,0) 55%),
  radial-gradient(ellipse at 85% 100%, #88D6EE, rgba(136,214,238,0) 60%), radial-gradient(ellipse at 10% 90%, #AAD5F4, rgba(170,213,244,0) 55%) #C2E0FC;
  background-attachment: fixed; min-height: 100vh; 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)) }
/* SYRN-OS once, very large and faint, from the left edge of the header in frosted glass (cropped top and bottom) */
header.band { background: url(header-watermark.svg) -18px 50% / auto 230% no-repeat, rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(255,255,255,.85); box-shadow: 0 3px 8px rgba(31,133,200,.12);
  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; display: flex; align-items: center; gap: 4px }
.brand .logo { height: 30px; width: auto; display: block }
.brand .online { font-weight: 600; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: #5A9C8A; margin-left: 8px }
.signin .logo { height: 44px; width: auto; display: block; margin: 0 auto 6px }
.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: url(watermark.svg) 0 40px / 100% auto repeat-y, linear-gradient(180deg, #1F85C8, #4CB2EC 70%, #3FA6E2); border-radius: 6px;
  border: 1px solid rgba(255,255,255,.35); box-shadow: 3px 0 10px rgba(7,79,105,.12); padding: 10px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto }
nav.menu .navbody { display: flex; flex-direction: column; gap: 2px }
nav.menu .home { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin: 2px 4px 2px; font-weight: 700 }
nav.menu .homesw select { width: 100%; font: inherit; text-transform: none; letter-spacing: 0; color: #fff; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.45); border-radius: 6px; padding: 2px 4px; cursor: pointer }
nav.menu .homesw select option { color: #1d2a33; background: #fff }
nav.menu button { background: rgba(214, 241, 252, .7); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 2px rgba(7,47,64,.15); border-radius: 4px; padding: 3px 10px; line-height: 18px; text-align: left; cursor: pointer; font-weight: 600; width: 100% }
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 .navgrp { display: flex; flex-direction: column; gap: 2px; margin-top: 1px }
nav.menu .navgrp .items { display: flex; flex-direction: column; gap: 3px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,.45); margin-left: 4px }
nav.menu .navgrp .items button { padding: 2px 8px; font-size: 13px; line-height: 17px }
nav.menu .navgrp .items button .count { line-height: 15px; margin-top: 0 }
nav.menu button.grp { background: transparent; border: 0; box-shadow: none; padding: 2px 4px; line-height: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; font-weight: 700 }
nav.menu button.grp:hover { background: rgba(255,255,255,.18) }
nav.menu button.grp .chev { display: inline-block; width: 14px; letter-spacing: 0 }
nav.menu button.grp .count { letter-spacing: 0; text-transform: none }
nav.menu .menutoggle { display: none }
nav.menu .ver { font-size: 12px; color: #E6F4FC; margin: 4px 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 }
/* glass buttons: a white edge, a soft light across the top half and a soft shadow, over the button's own colour */
.btn { border: 1px solid rgba(255,255,255,.6); border-radius: 4px; padding: 6px 13px; cursor: pointer; font-weight: 600; background-color: var(--act); color: #fff; white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%); box-shadow: 0 1px 3px rgba(7,47,64,.18) }
.btn:hover { background-color: var(--act-dk) }
.btn.light { background-color: rgba(240,246,250,.85); color: var(--ink) } .btn.light:hover { background-color: #D6E2E8 }
.btn.save { background-color: var(--save) } .btn.save:hover { background-color: #3E8A23 }
.btn.warn { background-color: var(--warn) } .btn.warn:hover { background-color: #CF5E22 }
.btn.mgr { background-color: var(--admin); color: var(--admin-ink) }
.btn.small { padding: 3px 9px; font-size: 13px }
.btn:disabled { opacity: .5; cursor: not-allowed }
:focus-visible { outline: 3px solid #F5B400; outline-offset: 2px }
.panel { background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); 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 }
/* a hint (optional, an example, a rule) sits under its box, so boxes side by side line up whether they have a hint or not */
label.f > span.hint { order: 1; margin-top: -1px }
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 .lggrp h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); margin: 0 0 5px }
.logbtns { gap: 12px }
.logbtns button.custom { color: var(--ink) }
.lbhide { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px }
.lbchip { display: inline-block; border-radius: 4px; padding: 2px 8px; font-weight: 600; white-space: nowrap }
.logbtns button { background-color: var(--act); background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%); box-shadow: 0 1px 3px rgba(7,47,64,.18);
  color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; padding: 6px 11px; cursor: pointer; font-weight: 600; min-width: 150px; text-align: left }
.logbtns button:hover { background-color: var(--act-dk) }
.logbtns button.warn { background-color: var(--warn) }
.logbtns button.light { background-color: #DCE4E8; color: var(--ink) }
.logbtns button.praise { background-color: #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(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); 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 }
/* glass boxes (stage 27): the boxes are 85% white over the background; tables and typing boxes inside them stay solid white */
table.t { background: #fff; 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: flex-start; text-align: left; 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 td.cell.away.family { color: #5B3A78; background: #EFE4F7 !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 }
/* stage 3: Key Working (purple, as in the workbook) and the Care Plan */
.banner.carebn { background: #FFF1D6; color: #6B4A00 }
.banner.kwbn { background: #EDE9FE; color: #4C1D95 }
.todo.kwt { align-items: center }
.todo.kwt .kwdot { width: 12px; height: 12px; border-radius: 50%; background: #7C3AED; flex: none; margin: 0 3px }
.todo.kwt .tx > span:first-child { color: #5B21B6; font-weight: 600 }
.btn.kwbtn { background-color: #7C3AED } .btn.kwbtn:hover { background-color: #6D28D9 }
.card.kwc .top { background: #EDE9FE; color: #3B1A78 }
.kpart { padding: 7px 12px 0 }
.kpart h4 { margin: 0; font-size: 12px; color: #4F6B78; text-transform: uppercase; letter-spacing: .05em }
.kpart p { margin: 2px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5 }
.kpart.said p { font-style: italic; font-size: 16px; color: #1E1E1E }
.kpart.open h4 { color: #9C5700 }
.kpart.links { font-size: 13px; color: var(--ink2); padding-bottom: 6px }
.card .meta { padding-top: 4px }
.okline { color: #2E6B1F } .waitline { color: #9C5700 }
.kwsum { border-color: #C4B5FD }
.kwsum h2 { color: #5B21B6 } .kwsum h3 { font-size: 15px; margin: 12px 0 4px; color: #5B21B6 }
.kwline { margin: 0; color: #1E1E1E } .kwline.warnline { color: #9C5700 }
.agitem { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #EEE9FB }
.agitem:last-child { border-bottom: 0 }
.agtx { min-width: 0; overflow-wrap: anywhere } .agtx .sub { display: block }
.agitem.done b { text-decoration: line-through; color: var(--ink2) }
.sub { font-size: 13px; color: var(--ink2) }
details summary { cursor: pointer; font-size: 14px; color: var(--ink2); margin-top: 6px }
ul.sentlist { margin: 8px 0 0; padding-left: 20px } ul.sentlist li + li { margin-top: 4px }
.cptop { border-bottom: 1px solid var(--line) }
.cphead { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; align-items: center; padding: 9px 12px; font-weight: 700; font-size: 15px }
.cphead.overdue > span:first-child { color: #9C0006 } .cphead.soon > span:first-child { color: #9C5700 }
.cphead.old { color: #6E7882; background: #EEF1F3; font-weight: 600 }
.cplinks { display: flex; gap: 6px; flex-wrap: wrap }
.linkbtn.strong { font-weight: 700; color: var(--ink) }
.cpnone { margin: 0; padding: 9px 12px }
.cpsugg { margin: 8px 12px 0; padding: 7px 10px; background: #FFF9E6; border-radius: 4px; font-size: 14px }
.cpsugg h4, .cpwork h4 { margin: 0 0 3px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #8A6100 }
.cpsugg .sg { display: flex; gap: 8px; justify-content: space-between; align-items: baseline } .cpsugg .sg + .sg { margin-top: 4px }
.cpsugg .sg span { overflow-wrap: anywhere; min-width: 0 }
.cpwork { margin: 8px 12px 0; padding: 7px 10px; background: #EAF7EE; border-radius: 4px; font-size: 14px; color: #14462A }
.cpwork h4 { color: #1E6E32 } .cpwork div + div { margin-top: 4px }
.cpsign { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 8px 12px 0; padding: 7px 10px;
  background: #FFEBEB; color: #9C0006; border-radius: 4px; font-weight: 700; font-size: 14px }
.cpread { margin: 8px 12px 4px; font-size: 13px; text-align: left } .cpread.all { color: #1E6E32 } .cpread.part { color: #9C5700 }
.cpold { border-top: 2px dashed var(--line); color: #56636B; background: #FAFBFC; padding-bottom: 4px }
.cpsum h2 { margin-bottom: 0 }
b.bad { color: #9C0006 }
.upd { padding: 7px 12px; border-bottom: 1px solid #E3EEF3; overflow-wrap: anywhere } .upd:last-child { border-bottom: 0 }
/* stage 4: collapsible key work cards, Wishes and Feelings, the care plan check on the key work form */
.card.kwc .top .kwtog { margin-left: 4px; font-weight: 700; color: #5B21B6 }
.kwshort { padding: 8px 12px; color: #1E1E1E; cursor: pointer; overflow-wrap: anywhere }
.kwshort.warnline, .badline { color: #9C5700 }
td.badline { font-weight: 700 }
.wfsum { border-color: #C4B5FD } .wfsum h2 { color: #5B21B6 }
.wfpart .top { justify-content: space-between; color: var(--ink) }
.wfticks { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 600; font-size: 14px }
.wff { padding: 8px 12px 0 } .wfpart .meta { padding-top: 8px }
.wfpart.done textarea { background: #F6F8F9; color: #34505C }
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; box-shadow: 0 -2px 10px rgba(7,79,105,.12) }
.kfmatch { border-radius: 4px; padding: 8px 10px; font-size: 14px }
.kfmatch.found { background: #EAF7EE; color: #14462A } .kfmatch.new { background: #FFF9E6; color: #6B4A00 }
.kfmatch div { margin-top: 4px; overflow-wrap: anywhere } .kfmatch .sub { display: block; margin-top: 4px }
.kfmatch mark { background: #FFE58A; color: inherit; padding: 0 1px }
/* stage 5: Comms Book, House Rules, Reminders, Calendar */
.card.cbc .top { color: var(--ink) }
.cbmsg + .cbmsg { border-top: 1px dashed #C9DCE5 }
.cbmsg .cbhead { padding: 8px 12px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px }
.cbmsg .body { padding-top: 4px }
/* stage 24: what was said is a chat bubble, so the conversation stands out from the details around it */
.cbsaid { display: flex; padding: 8px 12px 10px }
.cbsaid.out { justify-content: flex-end }
.cbsaid .bubble { position: relative; max-width: min(78%, 760px); padding: 10px 14px; border-radius: 16px; font-size: 16.5px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 3px rgba(7,79,105,.18) }
.cbsaid.in .bubble { background: #FFFFFF; border: 1px solid #B9D3DF; border-bottom-left-radius: 4px; color: #11313D }
.cbsaid.out .bubble { background: #0F9ED5; border: 1px solid #0B7FAD; border-bottom-right-radius: 4px; color: #fff }
.cbsaid .bubble .saidby { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2px; opacity: .75 }
.card.cbc .cbmsg { background: #F3F8FB }
@media print { .cbsaid .bubble { box-shadow: none; background: #fff !important; color: #000 !important; border-color: #999 !important } }
.cbfol { margin: 0 12px 8px; font-size: 14px; color: #2E6B1F }
.cbfol.open { color: #8A4B00; font-weight: 600 }
table.t.hr td, table.t.hr th { text-align: center; vertical-align: middle }
table.t.hr td.hrrule { text-align: left; min-width: 180px } table.t.hr .hrrule .sub { display: block; font-size: 12px; color: var(--ink2) }
.hrv { font-weight: 700; min-width: 130px }
.hrv.yes { background: #D4EDDA; color: #155724 } .hrv.no { background: #FACDCD; color: #9C0006 } .hrv.time { background: #FFF3CD; color: #7C5400 }
.hrv select, .hrv input { background: transparent; border-color: rgba(7,79,105,.25); font-weight: 700; color: inherit; text-align: center }
.hrkey { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px } .hrkey span { padding: 2px 8px; border-radius: 4px; min-width: 0 }
.hrwarn { background: #FFF3CD; color: #6B4A00; border: 1px solid #F0C36D; border-radius: 4px; padding: 8px 12px; font-size: 14px }
.hrwarn ul { margin: 6px 0; padding-left: 20px }
.panel.rem { border-left: 5px solid #F5B400 }
.remrow { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #E3EEF3 }
.remrow:last-of-type { border-bottom: 0 } .remrow .tx { min-width: 0; overflow-wrap: anywhere } .remrow .sub { font-size: 13px; color: var(--ink2) }
.cuday { padding: 5px 0; border-bottom: 1px solid #E3EEF3 } .cuday:last-child { border-bottom: 0 }
.cuitem { margin: 2px 0 0 12px; overflow-wrap: anywhere } .cuitem .time { font-weight: 700; margin-right: 6px; font-variant-numeric: tabular-nums }
.calmonth { font-size: 20px; margin-bottom: 8px }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.calhd { font-weight: 700; text-align: center; font-size: 14px; padding: 4px 0 }
.calday { background: #fff; border: 1px solid var(--line); border-radius: 4px; min-height: 110px; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.calday.other { background: #F1F7FA; color: #7A97A4 }
.calday.today { border: 2px solid var(--act) }
.calday.has { cursor: pointer } .calday.has:hover { background: #F4FBFF }
.calday .num { font-weight: 700; font-size: 14px }
.calday .ci { font-size: 12px; line-height: 1.25; padding: 1px 4px; border-radius: 3px; background: #E3F3FB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.calday .ci.birthday { background: #FCE4F1 } .calday .ci.kw { background: #EEE6FA } .calday .ci.more { background: none; color: var(--ink2) }
.calitem { padding: 8px 0; border-bottom: 1px solid #E3EEF3 } .calitem:last-child { border-bottom: 0 }
/* stage 6: Appointments and Assessments */
[hidden] { display: none !important }
.card.apc .top { color: var(--ink); background: #EEF1F3 }
.card.apc.booked .top { background: #E2F5E2; color: #1E6E32 } .card.apc.today .top { background: #DBEAFE; color: #1D4ED8 }
.card.apc.needed .top { background: #FFF3CD; color: #9C5700 } .card.apc.dna .top { background: #FDE4E4; color: #9C0006 }
.card.apc.done .top { background: #EEF1F3; color: #1E503C }
.card.apc .aphead { padding: 4px 12px 0; font-size: 12px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em }
.card.apc .aphead + .body { padding-top: 2px }
.card .apline { margin: 0 12px 8px; font-size: 14px; font-weight: 600; color: var(--ink2) } .card .apline.ok { color: #1E6E32 }
.card.asc .top { background: #EEF1F3 }
.card.asc.overdue .top { background: #FDE4E4; color: #9C0006 } .card.asc.soon .top { background: #FFF3CD; color: #7C5400 }
.card.asc.none .top { background: #EEE6FA; color: #4B2D7F } .card.asc.ok .top { background: #E2F5E2; color: #1E6E32 }
.aspill { font-weight: 700; font-size: 12px; padding: 1px 6px; border-radius: 4px }
.aspill.overdue { background: #FDE4E4; color: #9C0006 } .aspill.soon { background: #FFF3CD; color: #7C5400 } .aspill.none { background: #EEE6FA; color: #4B2D7F } .aspill.ok { background: #E2F5E2; color: #1E6E32 }
.calday .ci.appt { background: #E2F5E2 }
/* stage 7: Staff Records, Supervisions and appraisals */
.card.hrc .top, .card.suc .top { background: #EEF1F3 }
.card.hrc.overdue .top { background: #FDE4E4; color: #9C0006 } .card.hrc.soon .top { background: #FFF3CD; color: #7C5400 }
.card.hrc.ok .top { background: #E2F5E2; color: #1E6E32 } .card.hrc.none .top { background: #EEF1F3; color: var(--ink2) }
.card.hrc .top .linkbtn { margin-left: auto }
.card .aphead { padding: 4px 12px 0; font-size: 12px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em }
.card .aphead + .body { padding-top: 2px }
.hrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; padding: 4px 12px 10px }
.hrf { display: flex; flex-direction: column; font-size: 14px; min-width: 0; overflow-wrap: anywhere } .hrf .sub { font-size: 12px; color: var(--ink2) }
.hrf.late span:last-child, table.t td.late { color: #9C0006; font-weight: 700 }
.card.suc .top { background: #DEEEFA; color: #12324A } .card.suc.appr.wait .top { background: #FFF3CD; color: #7C5400 } .card.suc.appr.done .top { background: #E2F0D9; color: #1E503C }
h3.hrh { margin: 6px 0 0; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2) }
details.apprtheirs summary { cursor: pointer; font-weight: 600; padding: 4px 0 } details.apprtheirs .card { margin-top: 6px; max-height: 340px; overflow: auto }
.calday .ci.staff { background: #DEEEFA }
/* Registers: Daily Registers and the year at a glance */
.rgdate { gap: 8px; margin-bottom: 6px } .rgdate input[type=date] { width: auto; font-weight: 700 }
.rginfo { margin: 6px 0 12px; font-size: 15px }
table.rgtab td, table.rgtab th { vertical-align: middle } table.rgtab th.c { text-align: center }
table.rgtab select.rgsel { min-width: 74px; font-weight: 700; text-align: center }
table.rgtab select.rgsel.sugg { outline: 3px solid #FFD43B; outline-offset: -3px; background: #FFF29C }
table.rgtab td.rgoff { background: #D9D9D9; text-align: center; color: #666 }
table.rgtab input.rgnote { min-width: 180px } table.rgtab td.sub { font-size: 12px; color: var(--ink2); white-space: nowrap }
table.rgtab td.rgrs { font-size: 13px; font-weight: 700; color: #7F6000 }
.rgkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px }
.rgchip { display: inline-block; min-width: 30px; text-align: center; font-weight: 700; padding: 1px 5px; border-radius: 3px; border: 1px solid #C8D6DD }
table.rygrid { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums }
table.rygrid td, table.rygrid th { border: 1px solid #DDE7EC; padding: 2px 3px; text-align: center; min-width: 30px }
table.rygrid th.rym { background: #E3F3FB; text-align: left; padding: 4px 8px; min-width: 90px }
table.rygrid tr.rymh td { background: #F4F9FB; color: var(--ink2); line-height: 1.15 } table.rygrid tr.rymh td.we { background: #E6EEF2 }
table.rygrid tr.rymh td.today { outline: 2px solid var(--act); outline-offset: -2px }
table.rygrid td.ryc { font-weight: 700; height: 26px } table.rygrid tr.ryed td { font-size: 11px; font-weight: 700 }
table.rygrid tr.ryi td { font-size: 10px; color: var(--ink2); border-bottom: 2px solid #B4DCEC }
/* Missing from care and Accidents */
.card.mfc .top { background: #EEF1F3 } .card.mfc.miss .top { background: #FDE4E4; color: #9C0006 } .card.mfc.miss { border-color: #E9A3A3 }
.card.mfc.wait .top { background: #FFF7D6; color: #7C5400 } .card.mfc.late .top { background: #FDECDC; color: #9C0006 } .card.mfc.done .top { background: #E2F5E2; color: #1E6E32 }
.card.acc .top { background: #FDECDC } .card.acc.serious .top { background: #FDE4E4; color: #9C0006 }
.mfhints { background: #FFF7D6; border: 1px solid #F0D98A; border-radius: 6px; padding: 8px 12px; font-size: 14px }
.mfhints ul { margin: 2px 0 6px; padding-left: 20px } .mfhints .aphead { padding: 4px 0 0 }
ol.proc { margin: 0 0 8px; padding-left: 22px } ol.proc li + li { margin-top: 5px }
/* Incidents, Consequences, Complaints, Ofsted Notifications and the Reporting overview */
.card.rep .top { background: #EEF1F3 } .card.rep.wait .top { background: #FFF7D6; color: #7C5400 } .card.rep.late .top { background: #FDE4E4; color: #9C0006 }
.card.rep.done .top { background: #E2F5E2; color: #1E6E32 } .card.rep.praise .top { background: #DCEBFF; color: #1F4E79 }
.reptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px }
.reptile { background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); border-top: 5px solid #5FB8DD; border-radius: 6px; padding: 10px 14px; text-align: left;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer }
.reptile:hover:not([disabled]) { box-shadow: 0 2px 8px rgba(7,79,105,.18) } .reptile[disabled] { cursor: default }
.reptile.warn { border-top-color: var(--warn) }
.reptile .rt { font-weight: 700; font-size: 16px } .reptile .rn { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums }
.reptile .rl { font-size: 13px; color: var(--ink2); margin-bottom: 4px } .reptile .rx { font-size: 14px }
/* Manager Area, Reports and Annex A (stage 12) */
.mgrh { font-size: 18px; margin: 0 0 10px }
.panel + .panel { margin-top: 14px }
.mgrlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px }
.mgritem { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; color: #8B1A1A; font-weight: 700; text-align: left }
button.mgritem { cursor: pointer } button.mgritem:hover { background: var(--muted) }
.mgritem b { background: var(--warn); color: #fff; border-radius: 10px; padding: 0 9px; font-size: 14px; min-width: 26px; text-align: center }
.mgrfigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.mgrfig { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: var(--muted) }
.mgrfig .rn { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums } .mgrfig .rt { font-weight: 700; font-size: 14px }
.mgrfig .rl { font-size: 13px; color: var(--ink2) }
.formhead { font-size: 15px; margin: 6px 0 -4px; border-bottom: 1px solid var(--line); padding-bottom: 3px }
.axwide { grid-column: 1 / -1 }
.pre { white-space: pre-wrap }
.axsec { font-size: 17px; margin: 18px 0 8px; padding-left: 10px; border-left: 8px solid var(--line) }
.axitems { display: flex; flex-direction: column; gap: 6px }
.axitem { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; break-inside: avoid }
.axitem .axno { flex: none; width: 64px; padding: 8px 6px; font-weight: 700; text-align: center }
.axitem .axmain { padding: 7px 12px; min-width: 0; flex: 1 }
.axitem .axq { font-size: 14px; color: var(--ink2) }
.axitem .axa { font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0 }
.axitem.blank .axa { font-weight: 400; color: var(--warn) }
.axitem .axsrc { font-size: 12px; color: var(--ink2) }
.axt td { vertical-align: top }
/* Stage 13: Quick actions, School holidays, Meetings, NVQ and the home photo */
.quick { gap: 10px }
.quick .count { background: var(--warn); color: #fff; border-radius: 9px; font-size: 12px; padding: 0 7px; line-height: 18px; margin-left: 8px }
.shrow { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #E3EEF3 }
.calday .ci.school { background: #FFF1D6 } .calday .ci.meeting { background: #E0F2F1 }
button.top.mttog { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit }
.card.mtc .top { background: #E0F2F1; color: #134E4A }
.card.mtc.chase .top { background: #FDE4E4; color: #7A1B12 } .card.mtc.wait .top { background: #FFF3CD; color: #7A4B00 } .card.mtc.got .top { background: #E2F5E2; color: #1E503C }
.card.mtc .aphead, .card.nvu .aphead, .nvpick .aphead { padding: 4px 12px 0; font-size: 12px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em }
.nvpick .aphead { padding: 8px 0 2px }
.card.mtc .aphead + .body { padding-top: 2px }
.card .apline.late { color: #9C0006 }
.pbar { height: 12px; border-radius: 6px; background: #E3EEF3; overflow: hidden; margin-top: 8px }
.pbar span { display: block; height: 100%; background: linear-gradient(90deg, #34A0A4, #2E7D32); border-radius: 6px }
.card.nvu .top { background: #EEF4FF; color: #1E3A8A }
.card.nvu.notdoing .top { background: #F0F3F5; color: #5A6B73 }
.card.nvu .nvbar { padding-top: 0 }
.nvqs { padding: 4px 12px 8px }
.nvq { padding: 8px 0; border-bottom: 1px solid #E3EEF3 } .nvq:last-child { border-bottom: 0 }
.nvq .code { min-width: 34px } .nvq.done > .row > span { color: #2E6B1F } .nvq.part > .row > span { color: #7A4B00 }
.nvq select { width: auto; min-width: 150px }
.nvq .addenda { margin: 6px 0 0 44px }
.nvsup { border: 1px solid #DCE6FF; background: #F5F8FF; border-radius: 6px; padding: 8px 12px }
.nvsup summary { color: #1E3A8A; margin: 0 }
.nvsu { margin-top: 10px }
.homephoto { height: 36px; width: auto; border-radius: 6px; vertical-align: middle; margin-right: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.18) }
.homephoto.big { height: 90px; margin: 0 }

@media print {
  .card { break-inside: avoid; border-color: #999 }
  .cpsign { display: none }
  .acts, .linkbtn { display: none !important }
}
@media print {
  .pilot, header.band, nav.menu, .noprint, .intro, .toast { display: none !important }
  body { background: #fff }
  .panel, .card, .reptile { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none }
  .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; max-height: none; padding: 8px }
  nav.menu .menutoggle { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.85); font-size: 16px; padding: 9px 12px }
  nav.menu .menutoggle .here { margin-left: auto; font-weight: 400; color: var(--ink2); font-size: 14px }
  nav.menu .menutoggle .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); flex: none }
  nav.menu .navbody { display: none; margin-top: 8px }
  nav.menu.shown .navbody { display: flex }
  nav.menu .navgrp .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
  .grid2 { grid-template-columns: minmax(0, 1fr) }
  .logbtns button { min-width: 0; flex: 1 1 140px }
  .filters label.f { width: calc(50% - 7px) }
  .calday { min-height: 64px; padding: 3px }
  .calday .ci { font-size: 0; height: 6px; padding: 0 }
  .calday .ci.more { display: none }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* Reg 44 Visit */
.r44h { font-size: 18px; margin: 18px 0 8px }
.r44 { padding: 10px 0; border-bottom: 1px solid var(--line) } .r44:last-child { border-bottom: 0 }
.r44 input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; flex: none }
.r44 .tickd { width: 20px; flex: none; color: #1E6E32; font-weight: 700; font-size: 18px }
.r44.seen { color: #4A5A62 } .r44 .stamp { color: #1E6E32; font-weight: 700; font-size: 13px }
.r44 .acts { margin-top: 6px; padding-left: 30px } .r44 .addenda { margin-left: 30px }
.r44 > label.row { flex-wrap: nowrap }
.card.rep.prog .top { background: #DEEEFA; color: #1F4E79 }
.reptile.visit { border-top-color: #8C7AE6 } .reptile.visit.warn { border-top-color: var(--warn) }

/* stage 14: maintenance, photos and files */
.pill.st.bad { color: #9C0006; background: #FDE4E4 } .pill.st.wait { color: #7A4B00; background: #FFF3CD } .pill.st.good { color: #1E6E32; background: #E2F5E2 }
.pill.st.off { color: #5A6B73; background: #F0F3F5 }
.card.job .top { background: #EEF4F8 } .card.job.p1 .top { background: #FDE4E4; color: #7A1B12 } .card.job.p2 .top { background: #FFE9D6; color: #7A3A00 }
.card.job.p3 .top { background: #FFF6D6; color: #5C4600 } .card.job.p4 .top { background: #E8F1F8; color: #1C4E6B } .card.job.shut { opacity: .8 } .card.job.shut .top { background: #F0F3F5; color: var(--ink2) }
.card.cc .top, .card.pol .top, .card.veh .top, .card.ct .top, .card.chk .top { background: #E8F1F8; color: #1C4E6B }
.card.cc.bad .top, .card.pol.bad .top, .card.veh.bad .top, .card.ct.bad .top { background: #FDE4E4; color: #7A1B12 }
.card.cc.wait .top, .card.pol.wait .top, .card.veh.wait .top, .card.chk.hasissue .top { background: #FFF3CD; color: #7A4B00 }
.card.cc.good .top, .card.pol.good .top, .card.veh.good .top { background: #E2F5E2; color: #1E503C }
.files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 12px 10px }
.files .thumb { padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; width: 76px; height: 76px; overflow: hidden }
.files .thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.files .fchip { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 3px 10px; font-size: 14px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left }
img.fullphoto { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 4px }
.vhdates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; padding: 9px 12px }
.vhdates div { display: flex; flex-direction: column; gap: 2px } .vhdates .pill { align-self: flex-start }
.ckarea { border-top: 1px solid var(--line); padding-top: 4px } .ckarea .dayhead { display: flex; justify-content: space-between; align-items: center }
.ckrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 6px 0; border-bottom: 1px dashed #E3EAEE; align-items: center }
.ckrow .ckissue { grid-column: 1 / -1 }
.ckopts { display: flex; gap: 6px } .ckopt { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 14px; background: #fff }
.ckopt.pass:has(input:checked) { background: #E2F5E2; border-color: #7CB97C } .ckopt.iss:has(input:checked) { background: #FDE4E4; border-color: #D98080 }
.ckopt.na:has(input:checked) { background: #F0F3F5; border-color: #9AA9B1 }
tr.ckbad td { background: #FFF1F1 } tr.off td { color: var(--ink2) }
.reptile.maint { border-top-color: #4F9D8A } .reptile.maint.warn { border-top-color: var(--warn) }
@media (max-width: 640px) { .ckrow { grid-template-columns: minmax(0, 1fr) } }

/* stage 15: the registers year view lines the weekdays up, the young person's profile, risk assessments and room searches */
table.rygrid tr.rywk th { background: #E3F3FB; color: var(--ink2); font-weight: 700; position: sticky; top: 0 } table.rygrid tr.rywk th.we { background: #D3E6EF }
table.rygrid td.ryoff { background: #F6F6F6; border-color: #EEE }
table.t tr.today td { background: #FFF8E1 }
input.rgmeal { width: 100%; min-width: 120px }
.welf { background: #EEF6FF; border: 1px solid #C9DFF5; border-radius: 10px; padding: 8px 10px; align-items: flex-start }
.banner.welfare { background: #EAF4FF; border-color: #9CC5EE }
.banner.welfare.late { background: #FDE4E4; border-color: #E79A9A }
.pfhead { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap }
.pfphoto { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; background: #EEF1F3; border: 1px solid var(--line, #DDE7EC) }
.pfnophoto { width: 120px; height: 120px; border-radius: 14px; background: #EEF1F3; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #9AA9B2 }
.pfstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.pfstat { background: #F4F9FB; border: 1px solid #DDE7EC; border-radius: 10px; padding: 8px 10px }
.pfstat b { display: block; font-size: 20px } .pfstat.warn { background: #FFF3CD; border-color: #F0D58A } .pfstat span { font-size: 13px; color: var(--ink2) }
.pfstat button { all: unset; cursor: pointer; display: block }
dl.pfdl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 } dl.pfdl dt { color: var(--ink2) } dl.pfdl dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere }
.pflist { margin: 0; padding: 0; list-style: none } .pflist li { padding: 5px 0; border-bottom: 1px solid #EEF1F3 } .pflist li:last-child { border-bottom: 0 }
.card.yra .top { background: #EEF1F3 } .card.yra.High .top { background: #FDE4E4 } .card.yra.Medium .top { background: #FFF3CD } .card.yra.Low .top { background: #E2F5E2 }
.rlvl { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700 }
.rlvl.High { background: #F8CBAD; color: #833C0B } .rlvl.Medium { background: #FFE699; color: #7F6000 } .rlvl.Low { background: #C6EFCE; color: #006100 }
.card.src .top { background: #FCE9DA } .card.src.found .top { background: #FDE4E4 }
@media (max-width: 640px) { dl.pfdl { grid-template-columns: 1fr } dl.pfdl dt { margin-top: 6px } }

/* stage 16: Home "Needs you" panel */
.panel.needs h2 .count { background: var(--warn); color: #fff; border-radius: 10px; font-size: 13px; padding: 0 8px; vertical-align: middle }
/* stage 24: each group folds to one line (title, count, the top item); press it to open the list */
.needgrp + .needgrp { margin-top: 6px }
.needgrp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; font-size: 14px;
  border-left: 4px solid #0F9ED5; background: #EAF6FC }
.needgrp > summary::-webkit-details-marker { display: none }
.needgrp > summary:hover { filter: brightness(.97) }
.needgrp > summary:focus-visible { outline: 2px solid var(--act); outline-offset: 2px }
.needgrp .ngt { flex: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); min-width: 112px }
.needgrp .ngn { flex: none; min-width: 22px; text-align: center; border-radius: 10px; background: #0F9ED5; color: #fff; font-size: 12px; font-weight: 700; padding: 1px 7px }
.needgrp .ngfirst { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.needgrp .ngfirst i { font-style: normal; color: var(--ink2) }
.needgrp .ngmore::after { content: 'Show all ▾'; font-size: 13px; color: var(--act-dk); white-space: nowrap; font-weight: 600 }
.needgrp[open] .ngmore::after { content: 'Hide ▴' }
.needgrp[open] .ngfirst { visibility: hidden }
.needgrp .needlist { padding: 4px 0 2px 10px }
.needgrp.urgent > summary { border-left-color: #D13438; background: #FDECEC }
.needgrp.urgent .ngt { color: #9C0006 } .needgrp.urgent .ngn { background: #D13438 }
.needgrp.home > summary { border-left-color: #4EA72E; background: #EFF8EA }
.needgrp.home .ngn { background: #4EA72E }
@media (max-width: 600px) { .needgrp .ngt { min-width: 0 } .needgrp .ngmore::after { content: '▾' } .needgrp[open] .ngmore::after { content: '▴' } }
.need { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-left: 4px solid #8FBFD6; background: #F4FAFD; border-radius: 3px; margin-bottom: 3px; font-size: 14px }
.need[data-needrow] { cursor: pointer } .need[data-needrow]:hover { background: #E3F3FB }
.need.urgent { border-left-color: #D13438; background: #FDF1F1 } .need.urgent[data-needrow]:hover { background: #FBE2E2 }
.need.you { border-left-color: #0F9ED5 }
.need.home { border-left-color: #4EA72E; background: #F5FAF2 } .need.home[data-needrow]:hover { background: #E8F4E2 }
.need .ne { flex: none; width: 20px; text-align: center }
.need .nt { flex: 1 1 auto; min-width: 0 }
.need .linkbtn { flex: none; white-space: nowrap }

/* stage 16: compact Logbook, one line per entry */
.lglist { display: flex; flex-direction: column; gap: 2px }
.lgrow { background: #fff; border: 1px solid #DCEBF2; border-left: 6px solid #E8F4FA; border-radius: 3px }
.lgline { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 3px 8px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 14px; color: inherit }
.lgline:hover { background: #F2F9FC }
.lgline .lt { flex: none; width: 42px; font-weight: 700; font-variant-numeric: tabular-nums }
.lgline .ly { flex: none; width: 110px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lgline .le { flex: none; width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lgline .ld { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2) }
.lgline .lx { flex: none; font-size: 12px }
.lgline .lb { flex: none; width: 130px; text-align: right; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lgrow.open .lgline { background: #F2F9FC; border-bottom: 1px solid #DCEBF2 }
.lgmore { padding: 8px 12px }
.lgmore .body { white-space: pre-wrap; margin-bottom: 6px }
@media (max-width: 640px) {
  .lgline .lb { display: none } .lgline .ly { width: 70px } .lgline .le { width: 96px }
}

/* stage 16: money pages */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
@media (max-width: 640px) { .grid3 { grid-template-columns: minmax(0, 1fr) } }
.fintiles { margin-bottom: 4px } .fintiles .panel { margin: 0 }
.fintile { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px } .fintile b { font-size: 22px; font-variant-numeric: tabular-nums }
.row.tabs { gap: 6px; margin: 6px 0 10px; flex-wrap: wrap }
table.t.inc th, table.t.inc td { padding: 3px 1px; text-align: center; font-size: 12px }
table.t.inc th.tg { text-align: left; min-width: 170px; max-width: 200px; padding: 4px 8px; white-space: normal; position: sticky; left: 0; background: #E3F3FB; z-index: 1 }
table.t.inc th.tg .sub { display: block; font-weight: 400; color: var(--ink2) }
table.t.inc th.today { background: #BFE3F3 } table.t.inc th.wkend { color: #5A6B73 }
table.t.inc tr.tot td { font-weight: 700; font-size: 10px }
table.t.inc td.today, table.t.inc th.today { background: #E8F5FB } table.t.inc tr.ini td { color: var(--ink2) }
.incbox { width: 27px; height: 26px; border: 1px solid #B4DCEC; border-radius: 3px; background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0 }
.incbox.yes { background: #DFF3D6; color: #2E6B1F; border-color: #9FD08A } .incbox.no { background: #FDE4E4; color: #9C0006; border-color: #EFA9A9 }
.incbox:disabled { cursor: default; opacity: .75 }
.inctg { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px }
table.t.goalt { table-layout: fixed } table.t.goalt th { width: 72px } table.t.goalt td:last-child { width: 120px }
table.t.goalt th, table.t.goalt td { text-align: center; vertical-align: top; padding: 4px }
table.t.goalt .sub { display: block; font-size: 11px; color: var(--ink2) }
.goalbox { width: 100%; min-width: 0; min-height: 34px; border: 1px solid #B4DCEC; border-radius: 3px; background: #fff; font-size: 11px; cursor: pointer; color: var(--ink2) }
.goalbox.achieved { background: #DFF3D6; color: #2E6B1F; font-weight: 700 } .goalbox.notachieved { background: #FDE4E4; color: #9C0006; font-weight: 700 }
.goalbox.na { background: #F0F3F5; color: #5A6B73 } .goalbox:disabled { cursor: default }
/* stage 17: time sheets and wages */
.banner.warn { background: #FFF3CD; color: #5C3D00; font-weight: 400; margin-bottom: 12px }
.t tr.muted td { color: #8A979E }
.t tr.tsask td { background: #FFE7A3 }
.t.wages td, .t.wages th { white-space: nowrap; font-variant-numeric: tabular-nums }
.t.wages td.strong { font-weight: 700 }
.t tr.total td { border-top: 2px solid var(--ink) }

/* stage 18: Report a bug under Sign out, Visitors, Page access, Bugs and Suggestions */
.whobtns { display: flex; flex-direction: column; align-items: flex-end; gap: 1px }
.bugbtn { font-size: 12px; padding: 0 2px }
.card.vis .top { background: #F0F3F5; color: var(--ink) }
.card.vis.here .top { background: #EDE7F6; color: #3B1A78 }
.card.bug .top { background: #F0F3F5; color: var(--ink) }
table.pa td.c, table.pa th.c { text-align: center; width: 120px }
table.pa input[type=checkbox] { width: 18px; height: 18px }
table.pa input[type=checkbox]:disabled { opacity: .35 }
table.pa { table-layout: fixed } table.pa th:first-child { width: 220px }
/* stage 21: the key work agenda as its own card in a deeper purple, Staff Meetings, the Holiday Planner and Documents */
.kwagenda { background: linear-gradient(180deg, #F1EBFF, #FFFFFF 70%); border: 1px solid #A78BFA; border-top: 0; padding-top: 0; overflow: hidden }
.kwagenda .agh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 -16px 8px; padding: 10px 16px; background: linear-gradient(90deg, #4C1D95, #6D28D9); color: #fff }
.kwagenda .agh h2 { color: #fff; margin: 0 } .kwagenda .agh .per { margin-left: auto; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px 10px }
.kwagenda .agitem { border-bottom-color: #E4DAFD } .kwagenda .agitem b { color: #3B1A78 }
.kwagenda .agbtns { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none }
.kwagenda .linkbtn { color: #5B21B6 } .kwagenda details summary { cursor: pointer; color: #5B21B6; font-weight: 600 }
.kwagenda .row { align-items: flex-start; gap: 16px }
.btn.agadd { background-color: #6D28D9 } .btn.agadd:hover { background-color: #5B21B6 }
.aim { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 6px; background: #EDE9FE; color: #4C1D95 }
.aim.soon { background: #FFE9C7; color: #7A4B00 } .aim.late { background: #FDE4E4; color: #9C0006 }
.agyp { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #E4DAFD; align-items: start }
.agyp:last-child { border-bottom: 0 } .agyp .linkbtn { text-align: left; padding: 3px 0 }
.agchips { display: flex; flex-wrap: wrap; gap: 6px }
.agchip { background: #fff; border: 1px solid #C4B5FD; border-radius: 8px; padding: 4px 9px; font-size: 14px; color: #3B1A78 } .agchip .sub { display: block; font-size: 12px; color: #5B4A86 }
@media (max-width: 640px) { .agyp { grid-template-columns: minmax(0, 1fr) } }
.card.smc .top { background: #E3F0FB } .card.smc.due .top { background: #FFF3CD; color: #7A4B00 } .card.smc.held .top { background: #E2F5E2; color: #1E503C }
.card.smc.gone .top { background: #EEF1F3; color: var(--ink2) } .card.smc.gone b { text-decoration: line-through }
.card.smc .acts { align-items: center }
.smwho { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; margin: 4px 0 8px }
.smwho select { padding: 2px 4px; font-size: 13px; margin-left: auto }
.calday .ci.staffmtg { background: #E3F0FB }
.hpwrap { overflow-x: auto }
table.hpt { table-layout: fixed; min-width: 1100px; font-size: 13px }
table.hpt th, table.hpt td { text-align: center; padding: 4px 1px; border-left: 1px solid #E3EEF3 }
table.hpt th.nm, table.hpt td.nm { text-align: left; width: 170px; padding-left: 10px; border-left: 0; font-size: 14px }
table.hpt td.nm .pos { display: block; font-size: 12px; color: var(--ink2) }
table.hpt .wkend { background: #F4F8FB } table.hpt .bank { background: #E9E2FB }
table.hpt .today { box-shadow: inset 0 0 0 2px #F5B400 }
table.hpt td.hp { font-weight: 700; font-size: 11px } table.hpt td.hol { background: #FFF2C6; color: #7A5A00 } table.hpt td.part { background: #FFF8DF; color: #7A5A00 }
table.hpt td.ask { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #FFF2C6 4px, #FFF2C6 8px); color: #7A5A00; font-weight: 400 }
table.hpt td.fam { background: #FCE4F1; color: #7A1E55 }
table.hpt tr.me td.nm { font-weight: 700 }
table.hpt tr.hpoff td { font-weight: 700; background: #F7FAFC } table.hpt tr.hpoff td.over { background: #FDE4E4; color: #9C0006 }
.hpkey { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px; border: 1px solid #E3EEF3 }
.hpkey.hol { background: #FFF2C6; color: #7A5A00 } .hpkey.part { background: #FFF8DF; color: #7A5A00 } .hpkey.fam { background: #FCE4F1; color: #7A1E55 } .hpkey.bank { background: #E9E2FB }
.hpkey.ask { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #FFF2C6 4px, #FFF2C6 8px); color: #7A5A00; font-weight: 400 }
.card.doc .top { background: #EEF4F8 } .card.doc.tosign .top { background: #FFF3CD; color: #7A4B00 }
.card.doc details.body { white-space: normal } .card.doc details summary { cursor: pointer; font-weight: 600 }
.t th .sub { display: block; font-weight: 400 }
/* stage 22: two-step sign-in and the subject access copy */
.tfsteps { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px }
.tfsteps li > input { display: block; margin-top: 6px; width: 140px; font-size: 20px; letter-spacing: 4px }
.tfsteps .hint { display: block }
img.qr { display: block; margin: 8px 0; width: 180px; height: 180px; image-rendering: pixelated; background: #fff; border-radius: 6px }
.tfkey { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; user-select: all }
#tfCode { font-size: 20px; letter-spacing: 4px }
.tfcodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 12px 0 0 }
.tfcodes code { font-size: 17px; letter-spacing: 1px; background: #F4F8FA; border: 1px solid #DCE6EB; border-radius: 6px; padding: 6px 10px; text-align: center }
.sarcopy { background: #fff; border-radius: 10px; padding: 20px 24px; color: #1C2B33 }
.sarcopy h1 { font-size: 22px; margin: 0 0 6px }
.sarcopy h2 { font-size: 17px; margin: 22px 0 8px; border-bottom: 2px solid #DCE6EB; padding-bottom: 4px }
.sarrec { border: 1px solid #E3EBEF; border-radius: 8px; padding: 8px 12px; margin: 0 0 8px; break-inside: avoid }
.sarref { font-size: 12px; color: #5A6B73; margin-bottom: 4px }
.sarrec dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 13.5px }
.sarrec dt { color: #5A6B73 } .sarrec dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere }
@media print { .sarcopy { padding: 0 } .sarrec { border-color: #bbb } }
@media (max-width: 600px) { .sarrec dl { grid-template-columns: minmax(0, 1fr) } .sarrec dd { margin-bottom: 4px } }

/* stage 23: the office wall display */
body.dispmode header.band { display: none }
body.dispmode #app { padding: 0 }
.dsscreen { padding: 18px 22px; max-width: 1900px; margin: 0 auto; font-size: 17px }
.dstop { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px }
.dsbrand { display: flex; align-items: center; gap: 14px } .dsbrand .homephoto { height: 64px; margin: 0 }
.dsbrand b { display: block; font-size: 26px } .dsbrand span { color: var(--ink2) }
.dsclock { text-align: right } .dsclock b { display: block; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums } .dsclock span { font-size: 18px; color: var(--ink2) }
.dsmissing { background: #C00000; color: #fff; font-weight: 700; font-size: 26px; padding: 14px 18px; border-radius: 10px; margin-bottom: 12px; animation: dsflash 2s ease-in-out infinite }
@keyframes dsflash { 50% { background: #8B0000 } }
@media (prefers-reduced-motion: reduce) { .dsmissing { animation: none } }
.dsalerts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px } .dsalerts span { background: #FFF3CD; color: #7A4B00; border-radius: 8px; padding: 6px 12px; font-weight: 600 }
.dserr { background: #EEF1F3; border-radius: 8px; padding: 6px 12px; margin-bottom: 12px }
.dsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px }
.dsp h2 { font-size: 21px; margin: 0 0 8px } .dsp h3 { font-size: 16px; margin: 10px 0 4px; color: var(--ink2) } .dsp .t { font-size: 17px }
.dswide { grid-column: 1 / -1 }
.dsyps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.dsyp { border-radius: 10px; padding: 10px 12px; background: #E2F5E2; color: #1E503C } .dsyp b { display: block; font-size: 20px } .dsyp .st { font-weight: 700 }
.dsyp .sub { display: block; font-size: 14px } .dsyp.out { background: #FFF7D6; color: #6B4E00 } .dsyp.miss { background: #C00000; color: #fff }
.dslist { list-style: none; margin: 0; padding: 0 } .dslist li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid #E8EEF1 } .dslist li:last-child { border-bottom: 0 }
.dslist .tm { min-width: 52px; font-variant-numeric: tabular-nums; color: var(--ink2) }
.dsfoot { margin-top: 14px; color: var(--ink2); font-size: 14px; text-align: center }
.dsnight { min-height: 100vh; background: #05080C; color: #8A97A0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 20px; text-align: center }
.dsnight .dsclock { text-align: center } .dsnight .dsclock b { font-size: 120px; color: #9FB0BA } .dsnight .dsclock span { color: #6B7880 }
.dsnight .dsnsleep { font-size: 24px } .dsnight .dsfoot { color: #4D5961 } .dsnight .dsmissing { font-size: 30px }
.dsoff { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 16px } .dsoff .panel { max-width: 560px }
.dscode { font-size: 30px; font-weight: 700; letter-spacing: 2px; text-align: center; background: #F4F8FA; border: 1px solid #DCE6EB; border-radius: 8px; padding: 12px; margin: 12px 0; font-variant-numeric: tabular-nums }
@media (max-width: 600px) { .dsscreen { padding: 12px 16px } .dsgrid { grid-template-columns: minmax(0, 1fr) } .dsclock b { font-size: 38px } .dstop { flex-wrap: wrap } }

/* stage 23: wages to print or save as PDF */
.wgprint { background: #fff; border-radius: 10px; padding: 20px 24px; color: #1C2B33; overflow-x: auto }
.wghead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #DCE6EB; padding-bottom: 6px; margin-bottom: 10px }
.wghead h1 { font-size: 22px; margin: 0 } .wgstate { font-weight: 600 } .wgstate.draft { color: #9C0006 }
table.wgprt { font-size: 12px } table.wgprt th, table.wgprt td { padding: 4px 5px }
.wgslip { max-width: 680px; margin-bottom: 28px } .wgslip h2 { font-size: 18px; margin: 8px 0 } .wgslip th { text-align: left; font-weight: 500; width: 55% }
.wgslip tr.total td, .wgslip tr.total th { font-weight: 700 }
@page wgland { size: A4 landscape; margin: 10mm }
@media print {
  .wgprint { padding: 0; border-radius: 0; overflow: visible } body:has(.wgprint.month) { page: wgland }
  table.wgprt { font-size: 9px } table.wgprt th, table.wgprt td { padding: 2px 3px }
  .wgslip { break-after: page; margin: 0 } .wgslip:last-child { break-after: auto }
  .wgprint.draft::before { content: 'DRAFT'; position: fixed; top: 38%; left: 0; right: 0; text-align: center; font-size: 110px; font-weight: 800; color: rgba(156, 0, 6, .10); transform: rotate(-18deg); pointer-events: none }
}

/* stage 23: the Holiday Planner year view */
.seg { display: inline-flex } .seg .btn { border-radius: 0 } .seg .btn:first-child { border-radius: 8px 0 0 8px } .seg .btn:last-child { border-radius: 0 8px 8px 0 }
table.hyt { table-layout: fixed; min-width: 1100px; font-size: 13px }
table.hyt th, table.hyt td { padding: 4px 2px; text-align: center }
table.hyt th.nm, table.hyt td.nm { text-align: left; width: 170px; padding-left: 10px; font-size: 14px } table.hyt td.nm .pos { display: block; font-size: 12px; color: var(--ink2) }
table.hyt .lft { width: 70px }
.hystrip { display: flex; height: 22px; border: 1px solid #E3EEF3; border-radius: 3px; overflow: hidden }
.hystrip i { flex: 1 1 0; min-width: 1px }
.hystrip i.we { background: #F1F5F8 } .hystrip i.bk { background: #E9E2FB }
.hystrip i.hol { background: #F5C542 } .hystrip i.part { background: #FBE7A1 } .hystrip i.fam { background: #F2A7CF }
.hystrip i.ask { background: repeating-linear-gradient(45deg, #fff, #fff 2px, #F5C542 2px, #F5C542 4px) }
.hystrip i.td { box-shadow: inset 0 0 0 2px #C08A00 }
tr.hybusy .hystrip { height: 10px } .hystrip i.over { background: #E8590C }

/* stage 23: staff meetings on the rota */
table.rota th .smmark { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: #fff; background: #7C3AED; border-radius: 4px; padding: 1px 4px; white-space: nowrap }
table.rota td.cell .smdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7C3AED; margin-left: 4px; vertical-align: middle }
table.rota td.cell .smoff { color: #7C3AED; font-weight: 700; font-size: 12px }
@media print { table.rota th .smmark { color: #000; background: none; border: 1px solid #000 } }
.dsgrid > .panel { margin: 0 }
table.wgprt td:first-child { min-width: 120px }
@media print { body:has(.wgprint), body:has(.wgprint) #app, body:has(.wgprint) .shell, body:has(.wgprint) main { min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important } }

/* stage 24: Settings in sections that fold open */
.setgroups { display: flex; flex-direction: column; gap: 10px }
details.setgrp { padding: 0 }
details.setgrp > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 17px; list-style: none; display: flex; gap: 8px; align-items: baseline }
details.setgrp > summary::-webkit-details-marker { display: none }
details.setgrp > summary::before { content: '▸'; color: var(--act); width: 14px; flex: none }
details.setgrp[open] > summary::before { content: '▾' }
details.setgrp > summary .hint { font-weight: 400; margin-left: auto }
details.setgrp[open] > summary { border-bottom: 1px solid var(--line) }
details.setgrp .tw { padding: 4px 8px 8px }
.t tr.tssug td { background: #F1E9FB }
/* stage 24: On this day on Home */
.panel.otd { background: linear-gradient(135deg, #FFF8FC, #FFFFFF 60%) }
.panel.otd h2 .hint { font-weight: 400; font-size: 14px; margin-left: 6px }
.otdline { border-left: 5px solid #FCE7F3; padding: 6px 10px; margin-top: 6px; background: rgba(255,255,255,.8); border-radius: 3px }
.otdline div { overflow-wrap: anywhere; font-style: italic }
/* stage 24: the User guide and Print buttons */
.gdbody { padding: 4px 16px 12px }
.gdq + .gdq { border-top: 1px dashed var(--line) }
.gdq h3 { font-size: 15px; margin: 10px 0 2px }
.gdq p { margin: 0 0 8px; max-width: 900px }
.page-head .printbtn { margin-left: auto }
@media print {
  .page-head[data-printed]::after { content: attr(data-printed); display: block; width: 100%; font-size: 11px; color: #555; margin-top: 4px }
  .printbtn { display: none !important }
  details.setgrp.guide { break-inside: avoid }
}
/* Company page (stage 26): a card for each home */
.cohomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0 16px }
.cofigs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px }
.cofig { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: var(--muted) }
.cofig .rn { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums } .cofig .rl { font-size: 13px; color: var(--ink2) }
.cofig.bad { background: #FDE4E4; border-color: #F2B8B8 } .cofig.bad .rn { color: #9C0006 }
@media (max-width: 700px) { .cohomes { grid-template-columns: 1fr } .cofigs { grid-template-columns: repeat(2, 1fr) } }

/* Search everything on Home (stage 27) */
.srall input[type=search] { font-size: 16px; padding: 9px 12px }
.saacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.sagrp { margin-top: 12px }
.sagrp h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); margin: 0 0 4px }
.saitem { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid #E3EEF3;
  border-radius: 4px; padding: 6px 10px; margin-top: 3px; cursor: pointer; font: inherit; font-size: 14px; color: inherit }
.saitem:hover { border-color: var(--act); background: #F4FAFD }
.saitem .sat { font-weight: 600 } .saitem .sal { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .saitem .saw { color: var(--ink2); white-space: nowrap; font-size: 13px }
@media (max-width: 700px) { .saitem { grid-template-columns: 1fr } .saitem .sal { white-space: normal } }

/* stage 28: hints from recent records, Daily checks, Admission and discharge */
.hintbox { background: #FFF7D6; border: 1px solid #F0D98A; border-radius: 6px; padding: 8px 12px; font-size: 14px; margin: 4px 0 8px }
.hintbox .hrow { margin-top: 4px } .hintbox .hl { font-weight: 600; margin-right: 4px }
.hchip { font: inherit; font-size: 13px; background: #fff; border: 1px solid #D9C772; border-radius: 14px; padding: 2px 10px; margin: 2px 4px 2px 0; cursor: pointer; color: inherit; text-align: left }
.hchip:hover { background: #FFF1B8 }
.chks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px }
.dkbad, tr.dkbad td { color: #9C0006; font-weight: 600 }
.dkmiss { color: #999; background: #F6F6F6 }
.dkgrid td, .dkgrid th { text-align: center; white-space: nowrap } .dkgrid td:first-child, .dkgrid th:first-child { text-align: left }