:root {
  --green: #3b4a2f; --green-2: #55683f; --khaki: #c9b98a; --sand: #f4f1e8;
  --bg: #f4f1e8; --card: #fff; --text: #1d2118; --muted: #6b6f63; --line: #ddd8c8;
  --red: #b3261e; --pass: #2e7d32; --fail: #b3261e; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171a14; --card: #22261d; --text: #ecebe4; --muted: #a3a697; --line: #3a3f32; --sand: #2a2e24; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.45; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; margin-top: 1.4em; }
.muted { color: var(--muted); font-weight: normal; }
.err { color: var(--red); min-height: 1em; margin: 0; }
.center { text-align: center; }
[hidden] { display: none !important; }

.bar { background: var(--green); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 12px; position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { background: var(--khaki); color: var(--green); font-weight: 800; font-size: .75rem; letter-spacing: .08em; padding: 4px 7px; border-radius: 6px; }
.who { display: flex; align-items: center; gap: 10px; font-size: .9rem; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.narrow { max-width: 560px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid2 .card { margin-bottom: 0; } .grid2 { margin-bottom: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.between { justify-content: space-between; }
.wrapr { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 4px; }

label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; }
label.check { flex-direction: row; align-items: center; font-weight: 500; }
input, select, textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--green); transform: scale(1.3); }
input.short { width: 110px; }
textarea { resize: vertical; }
.row input:not([type]), .row input[type=text] { flex: 1; }

.btn { font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--sand); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn:hover { filter: brightness(.96); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.danger { color: var(--red); }
.btn.small { padding: 5px 9px; font-size: .82rem; }
.btn.big { padding: 14px 20px; font-size: 1.05rem; flex: 1; }
.btn:disabled { opacity: .45; cursor: default; }
.bar .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; }
.tabs button { font: inherit; font-weight: 600; background: none; border: 0; padding: 10px 16px; border-radius: 8px; cursor: pointer; color: var(--muted); }
.tabs button.active { background: var(--card); color: var(--green); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .tabs button.active { color: var(--khaki); } }

.list { list-style: none; padding: 0; margin: 12px 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }

.qrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.qrcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.qrcard.closed { opacity: .55; }
.qrcard .qr { background: #fff; border-radius: 8px; padding: 6px; }
.qrcard .qr svg { width: 100%; height: auto; display: block; }
.link { font-size: .75rem; word-break: break-all; color: var(--muted); }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--sand); }
.qrcard > .tag { position: absolute; top: 10px; right: 10px; }
.tag.pass { background: #e3f1e4; color: var(--pass); } .tag.fail { background: #fbe6e4; color: var(--fail); }

.qedit { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.qedit > .row { align-items: flex-start; }
.qn { min-width: 30px; padding-top: 8px; }
.optrow { padding-left: 38px; align-items: center; }
.qedit > [data-addo] { align-self: flex-start; margin-left: 38px; }
.example { background: var(--sand); padding: 10px; border-radius: 8px; font-size: .85rem; white-space: pre-wrap; margin: 0; }
.sticky { position: sticky; bottom: 0; background: var(--card); padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.stats div { background: var(--sand); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; }
.stats b { font-size: 1.5rem; }
.stats span { color: var(--muted); font-size: .85rem; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }

dialog { border: 0; border-radius: var(--radius); max-width: 640px; width: calc(100% - 32px); background: var(--card); color: var(--text); padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.5); }
.review { padding: 10px; border-radius: 8px; margin: 8px 0; border-left: 4px solid; }
.review.ok { border-color: var(--pass); background: rgba(46,125,50,.08); }
.review.bad { border-color: var(--fail); background: rgba(179,38,30,.08); }

/* Cadet test page */
.take .card h2 { font-size: 1.25rem; }
.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.opt { font: inherit; text-align: left; display: flex; gap: 12px; align-items: center; padding: 14px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; }
.opt span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; font-weight: 700; }
.opt.sel { border-color: var(--green); background: rgba(59,74,47,.08); }
.opt.sel span { background: var(--green); color: #fff; }
.progress { height: 6px; background: var(--line); border-radius: 99px; margin-bottom: 14px; overflow: hidden; }
.progress div { height: 100%; background: var(--green-2); transition: width .2s; }
.dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; justify-content: center; }
.dots button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.dots button.ans { background: var(--sand); font-weight: 700; }
.dots button.cur { outline: 2px solid var(--green); }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 8px; }
.timer.low { background: var(--red); }
.bigscore { font-size: 4rem; font-weight: 800; margin: 10px 0; }
.bigscore.pass { color: var(--pass); } .bigscore.fail { color: var(--fail); }

/* roles, archive */
body.detachment [data-admin], body.detachment [data-county], body.company [data-county] { display: none !important; }
.seg { display: inline-flex; background: var(--sand); border-radius: 9px; padding: 3px; }
.seg button { font: inherit; font-weight: 600; border: 0; background: none; padding: 6px 14px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.seg button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.filters { margin-top: 12px; }
.bulkbar { margin-bottom: 8px; }
.rolepill { font-size: .75rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--sand); color: var(--muted); margin-left: 6px; }
.filters select { width: auto; min-width: 200px; flex: 0 1 auto; }

.brand .logo { width: 30px; height: 30px; flex: none; display: block; }

/* iPhone / iPad: keep content clear of the notch, Dynamic Island and home bar */
.bar { padding-top: calc(10px + env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
body { padding-bottom: env(safe-area-inset-bottom); }
/* stop iOS zooming into inputs (needs 16px+) and tidy tap highlights */
input, select, textarea { font-size: max(16px, 1em); }
button, .btn, .opt { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ---------- phones (iPhone portrait) ---------- */
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-2); outline-offset: 1px; }
.brand span:last-child { white-space: nowrap; }
.rolepill { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; display: inline-block; }
@media (max-width: 640px) {
  .whoname { display: none; }
  .rolepill { max-width: 150px; }
  .wrap { padding: 12px; }
  .card { padding: 14px; }
  .tabs button { padding: 9px 12px; }
  .filters select { min-width: 0; flex: 1; }
  .bulkbar .btn { flex: 1; text-align: center; }
  /* results as cards */
  #resTable thead { display: none; }
  #resTable, #resTable tbody { display: block; }
  #resTable tr { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "sel name score" "sel test test" "sel when when" "sel det det" "sel act act";
    column-gap: 10px; row-gap: 3px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--card); }
  #resTable td { border: 0; padding: 0; white-space: normal; }
  #resTable td[colspan] { grid-column: 1 / -1; }
  .c-sel { grid-area: sel; padding-top: 2px !important; } .c-name { grid-area: name; font-weight: 700; }
  .c-score { grid-area: score; } .c-test { grid-area: test; } .c-when { grid-area: when; color: var(--muted); font-size: .85rem; }
  .c-det { grid-area: det; color: var(--muted); font-size: .85rem; } .c-act { grid-area: act; padding-top: 6px !important; }
  .qrgrid { grid-template-columns: 1fr; }
}
@media (max-width: 440px) { .brand .long, #viewAsBtn .long { display: none; } }

/* ---------- top banners (like the testing sheets site) ---------- */
#topbanners { position: relative; z-index: 6; }
.updbanner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px;
  background: #2b2d2a; color: #f1efe8; font-size: .95rem; text-align: center;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
.updbanner b { font-weight: 800; }
.upd-reload { font: inherit; font-weight: 700; font-size: .9rem; color: #fff; background: transparent; border: 1.5px solid #f1efe8;
  padding: 7px 14px; cursor: pointer; }
.upd-reload:hover { background: #f1efe8; color: #2b2d2a; }
.updbanner a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.devbanner { background: repeating-linear-gradient(135deg, #e8a33d 0 14px, #d9912a 14px 28px); color: #1d1406; font-weight: 800; font-size: .8rem;
  letter-spacing: .06em; text-align: center; padding: 6px 12px; }
#topbanners > .devbanner.trainbanner { background: repeating-linear-gradient(135deg, #3d8fc4 0 14px, #2f7fb3 14px 28px); color: #fff; }
#topbanners > .devbanner:first-child { padding-top: calc(6px + env(safe-area-inset-top)); }
#topbanners + .bar { padding-top: 10px; }

.verfoot { text-align: center; font-size: .78rem; color: var(--muted); padding: 18px 16px 26px; }
.verfoot a { color: var(--green-2); font-weight: 700; }

/* ---------- What's new page (like the testing sheets site) ---------- */
.clpage { --accent: #55683f; }
@media (prefers-color-scheme: dark) { .clpage { --accent: #c9b98a; } }
.clpanel { max-width: 1100px; margin: 28px auto 0; padding: 40px 56px 50px; background: var(--card); border: 1px solid var(--line); }
.clback { display: inline-block; color: var(--muted); font-weight: 700; text-decoration: none; margin-bottom: 18px; }
.clback:hover { color: var(--text); }
.clkick { font-weight: 800; letter-spacing: .16em; font-size: .9rem; color: var(--accent); }
.clh1 { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; margin: 10px 0 18px; }
.clrule { height: 5px; background: var(--accent); margin-bottom: 8px; }
.clv { padding: 24px 0 22px; border-bottom: 1px solid var(--line); }
.clv:last-child { border-bottom: 0; }
.clv.current { border-left: 5px solid var(--accent); padding-left: 26px; margin-top: 12px; }
.clv h2 { font-size: 1.9rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.clbadge { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid var(--accent);
  color: var(--text); padding: 4px 10px; }
.cldate { color: var(--muted); margin: 6px 0 10px; }
.clv ul { margin: 0; padding-left: 22px; }
.clv li { font-size: 1.12rem; line-height: 1.55; margin: 6px 0; }
@media (max-width: 640px) {
  .clpanel { margin: 0; padding: 24px 18px 34px; border-left: 0; border-right: 0; }
  .clv.current { padding-left: 16px; }
  .clv h2 { font-size: 1.5rem; } .clv li { font-size: 1rem; }
}

/* ---------- admin panel ---------- */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.subnav button { font: inherit; font-weight: 700; font-size: .9rem; background: none; border: 1px solid transparent; color: var(--muted); padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.subnav button.active { background: var(--green); color: #fff; }
.subnav button:not(.active):hover { border-color: var(--line); color: var(--text); }
@media (prefers-color-scheme: dark) { .subnav button.active { background: var(--khaki); color: #1d2118; } }
.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 16px; }
.kpis > div { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; }
.kpis small { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.kpis .clickable { cursor: pointer; } .kpis .clickable:hover { border-color: var(--green-2); }
.atable td { vertical-align: middle; }
.atable tr.off td { opacity: .55; } .atable tr.off td.acts { opacity: 1; }
.atable td.acts { text-align: right; } .atable td.acts .row { justify-content: flex-end; }
.rolepill.admin { background: var(--green); color: #fff; }
@media (prefers-color-scheme: dark) { .rolepill.admin { background: var(--khaki); color: #1d2118; } }
.activity { list-style: none; padding: 0; margin: 0 0 10px; }
.activity li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.4; }
.activity li:last-child { border-bottom: 0; }
.act-when { color: var(--muted); font-size: .8rem; padding-top: 1px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; flex-direction: row; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: .15s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: .15s; }
.switch input:checked + span { background: var(--green-2); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--green-2); outline-offset: 2px; }
.dangerbtn { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.narrowcard { max-width: 520px; }
.asgform { display: grid; grid-template-columns: 2fr 1.3fr 1.6fr auto; gap: 12px; align-items: end; }
body.detachment .asgform { grid-template-columns: 2fr 1.6fr auto; }
#fdlg { max-width: 480px; }
#fdlg h2 { margin-bottom: 4px; }
#fdlgBody { display: flex; flex-direction: column; gap: 12px; }
#pane-dets #detForm input { min-width: 240px; }
@media (max-width: 800px) { .asgform, body.detachment .asgform { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  /* admin tables become cards on phones and portrait tablets */
  .atable thead { display: none; }
  .atable, .atable tbody { display: block; }
  .atable tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
  .atable td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; white-space: normal; text-align: right; }
  .atable td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; text-align: left; }
  .atable td:first-child { font-size: 1.05rem; } .atable td:first-child::before { content: none; }
  .atable td[colspan]::before { content: none; }
  .atable td.acts { display: block; padding-top: 8px; } .atable td.acts .row { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  #pane-dets #detForm { width: 100%; } #pane-dets #detForm input { min-width: 0; flex: 1; }
  .activity li { grid-template-columns: 1fr; gap: 2px; }
}

/* admin tables: fit the card, keep actions on one line */
.atable th { font-size: .82rem; }
.atable td:first-child { white-space: normal; min-width: 150px; }
.atable td.acts .row { flex-wrap: nowrap; gap: 6px; }
.atable td, .atable th { padding: 9px 7px; }
.err.ok { color: var(--pass); }
#uSearch { flex: 1 1 220px; width: auto; }
.filters select { flex: 0 1 auto; }
#pane-overview .grid2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1150px) { #pane-overview .grid2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
#ovDets th { white-space: normal; }
/* tabs & admin menu stay on one line on phones (scroll sideways if needed) */
.tabs button, .subnav button { white-space: nowrap; }
@media (max-width: 640px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .subnav button { padding: 7px 12px; }
  .tabs button { padding: 9px 11px; }
  .atable td:first-child { min-width: 0; }
}
@media (min-width: 641px) and (max-width: 900px) { .atable { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } .atable tbody { display: contents; } }

/* ---------- question types on the cadet's phone ---------- */
.qhint { color: var(--muted); font-weight: 600; font-size: .9rem; margin: -2px 0 10px; }
.qimg { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; cursor: zoom-in; margin: 4px 0 12px; }
.qimg img { display: block; width: 100%; max-height: 38vh; object-fit: contain; }
.qimg.zoom { position: fixed; inset: 0; z-index: 50; border-radius: 0; margin: 0; background: rgba(0,0,0,.92); cursor: zoom-out; display: grid; place-items: center; }
.qimg.zoom img { max-height: 100vh; }
.opt.multi span { border-radius: 6px; }
.opt.multi.sel span { background: var(--green); color: #fff; }
.opts.pics { display: block; }
.picgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.picopt { font: inherit; padding: 0; border: 3px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.picopt img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.piclabel { display: flex; gap: 8px; align-items: center; padding: 8px 10px; font-size: .92rem; }
.piclabel b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; font-size: .8rem; }
.picopt.sel { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.picopt.sel .piclabel b { background: var(--green); color: #fff; }
.typed { font-size: 1.15rem; padding: 14px; border-width: 2px; }
.typed:focus { border-color: var(--green); outline: none; }

/* ---------- test editor: question types ---------- */
.qhead { align-items: center; }
.qhead select { flex: 1; min-width: 0; font-weight: 600; }
.qedit textarea { width: 100%; }
.qedit.problem { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179,38,30,.25); }
.qpic { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.picthumb { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.picthumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.picthumb.small { width: 120px; }
.picedit { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pictile { border: 2px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pictile.right { border-color: var(--green-2); }
.pictile .check { font-weight: 600; }
.picadd { aspect-ratio: 4 / 3; width: 100%; border-style: dashed; }
.okmark { color: var(--pass); font-weight: 800; width: 18px; text-align: center; }
.addrow { align-self: flex-start; }
#addQType { width: auto; }
/* result review */
.rtype { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.review > div { margin-top: 3px; }
.rqimg img { max-width: 220px; max-height: 140px; border-radius: 6px; margin-top: 6px; display: block; }
.rchoice { display: inline-flex; align-items: center; gap: 6px; }
.rchoice img { width: 54px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.rline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- test categories ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 99px;
  background: var(--sand); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }
.chip.star { background: #3b4a2f; color: #f4f1e8; border-color: #3b4a2f; }
.chip.syl { background: #e9e1c8; color: #4a4125; border-color: #d8cca6; }
@media (prefers-color-scheme: dark) { .chip.star { background: #c9b98a; color: #1d2118; border-color: #c9b98a; } .chip.syl { background: #3a3522; color: #e6dcb8; border-color: #4d4630; } }
#tTable .chip, #asgList .chip { cursor: pointer; }
#qfSearch { flex: 1 1 200px; width: auto; }
.qrfilters { margin: 4px 0 6px; }
#qfCount:empty { display: none; }
.catrow { display: grid; grid-template-columns: 1fr 1.2fr 2fr; gap: 12px; align-items: start; }
.chipsin { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 42px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: text; font-weight: 400; }
.chipsin input { border: 0; padding: 4px 2px; flex: 1; min-width: 110px; width: auto; background: transparent; }
.chipsin input:focus { outline: none; }
.chipsin:focus-within { outline: 2px solid var(--green-2); outline-offset: 1px; }
.chip button { border: 0; background: none; color: inherit; font-size: 1rem; line-height: 1; padding: 0 0 0 2px; cursor: pointer; }
.catcard summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.catcard summary::-webkit-details-marker { display: none; }
.catcard summary::before { content: "▸"; color: var(--muted); }
.catcard[open] summary::before { content: "▾"; }
.catcard summary h2 { margin: 0; }
.catcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.catcols h3 { margin-top: 0; }
.catlist { list-style: none; padding: 0; margin: 0 0 10px; }
.catlist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.catlist li .row { flex-wrap: nowrap; gap: 4px; }
.catadd input { flex: 1; }
#tfSearch { flex: 1 1 200px; width: auto; }
@media (max-width: 800px) { .catrow { grid-template-columns: 1fr; } }
#sCats { margin: 0 0 6px; }
.catlist li > span:first-child { flex: 1; min-width: 0; }
.catlist .btn.small { padding: 4px 9px; min-width: 30px; }

/* county / company / detachment levels */
.chip.owner { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.chip.owner.co { border-style: solid; border-color: var(--green-2); color: var(--green-2); }
#tOwnerWrap { max-width: 420px; }
.readonly-note { font-size: .8rem; color: var(--muted); }
#detForm, #coForm { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#detForm input, #coForm input { width: auto; flex: 1 1 200px; }
#detForm select { width: auto; flex: 0 1 200px; }

/* detachment view banner */
.viewbar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px max(16px, env(safe-area-inset-left)); background: #1f5f8b; color: #fff; font-size: .92rem; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.viewbar .btn { background: #fff; color: #1f5f8b; border-color: #fff; }
body.viewing .bar { background: #1f5f8b; }

/* choosing which detachments get a test */
.detpicks { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.detgroup { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; }
.detgroup legend { font-weight: 700; padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.detpick { padding: 6px 0; font-weight: 500; }
.btn.linkish { background: transparent; border-style: dashed; font-weight: 600; }
#fdlg { width: min(640px, calc(100vw - 32px)); }

/* ================= Welfare (camp welfare requests) ================= */
body.wf { --wf: #1f5f66; --wf-2: #2d7a83; --u-high: #b3261e; --u-mid: #c77700; --u-low: #2e7d32; }
@media (prefers-color-scheme: dark) { body.wf { --wf: #8fc9cf; --wf-2: #6fb3ba; --u-high: #ff8a80; --u-mid: #ffb74d; --u-low: #81c784; } }
body.wf .bar { background: #1f5f66; }
body.wf .btn.primary { background: #1f5f66; border-color: #1f5f66; color: #fff; }
body.wf .tabs .count { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 99px; background: var(--line); color: var(--text); font-size: .78rem; margin-left: 4px; }
body.wf .tabs .count.hot { background: var(--u-high); color: #fff; animation: wfpulse 1.2s ease-in-out infinite; }
@keyframes wfpulse { 50% { opacity: .55; } }
.req { color: var(--u-high); }
.warn { color: var(--u-mid); font-weight: 600; }

/* CFAV request page */
.wfreq h1 { font-size: 1.35rem; }
.pinbox { font-size: 2rem; letter-spacing: .4em; text-align: center; font-weight: 700; }
.wfq { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.wfq legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.wfq .hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
.wfq.missing { outline: 3px solid var(--u-high); outline-offset: 6px; border-radius: 6px; }
.urgopts, .pillopts { display: grid; gap: 8px; }
.pillopts { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pillopts.two { grid-template-columns: 1fr 1fr; }
.urgopt, .pillopt { position: relative; cursor: pointer; }
.urgopt input, .pillopt input { position: absolute; opacity: 0; pointer-events: none; }
.urgopt span, .pillopt span { display: block; padding: 13px 14px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); font-weight: 600; line-height: 1.25; }
.urgopt span { border-left-width: 8px; }
.urgopt.lvl0 span { border-left-color: var(--u-low); } .urgopt.lvl1 span { border-left-color: var(--u-mid); } .urgopt.lvl2 span { border-left-color: var(--u-high); }
.pillopt input:checked + span { border-color: var(--wf); background: color-mix(in srgb, var(--wf) 12%, var(--card)); }
.urgopt input:checked + span { border-color: currentColor; background: color-mix(in srgb, var(--wf) 10%, var(--card)); box-shadow: 0 0 0 2px var(--wf) inset; }
.urgopt input:focus-visible + span, .pillopt input:focus-visible + span { outline: 3px solid var(--wf-2); outline-offset: 2px; }
.wfsent { color: var(--u-low); font-weight: 700; font-size: 1.1rem; }
.steps { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 0; }
.steps li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0 9px 28px; position: relative; color: var(--muted); border-left: 2px solid var(--line); margin-left: 8px; }
.steps li::before { content: ''; position: absolute; left: -8px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.steps li.done { color: var(--text); border-left-color: var(--wf); } .steps li.done::before { background: var(--wf); border-color: var(--wf); }
.steps li.now { color: var(--text); font-weight: 700; } .steps li.now::before { background: var(--u-mid); border-color: var(--u-mid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--u-mid) 30%, transparent); }
.steps time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 400; }
.wfdone { opacity: .75; }

/* team board */
.wfbar { margin-bottom: 10px; align-items: center; }
.wfbar p { margin: 0; flex: 1 1 300px; }
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.lane { background: color-mix(in srgb, var(--line) 35%, transparent); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.lane h3 { margin: 2px 4px 4px; font-size: .95rem; display: flex; justify-content: space-between; }
.lane h3 .count { background: var(--card); border-radius: 99px; padding: 0 8px; font-size: .8rem; }
.lane-new { background: color-mix(in srgb, var(--u-high) 9%, transparent); }
.lane .empty { margin: 6px 4px; }
.wcase { font: inherit; text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--wf); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; width: 100%; }
.wcase:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.wcase.u-high { border-left-color: var(--u-high); } .wcase.u-mid { border-left-color: var(--u-mid); } .wcase.u-low { border-left-color: var(--u-low); }
.wcase .ref { font-variant-numeric: tabular-nums; }
.wcase .wname { font-weight: 700; font-size: 1.05rem; }
.wcase .wline { font-size: .88rem; }
.urgtag { align-self: flex-start; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; background: var(--line); }
.u-high .urgtag { background: var(--u-high); color: #fff; } .u-mid .urgtag { background: var(--u-mid); color: #fff; } .u-low .urgtag { background: var(--u-low); color: #fff; }
.wcase.flash { animation: wfflash 1s ease-in-out 4; }
@keyframes wfflash { 50% { box-shadow: 0 0 0 4px var(--u-high); } }
.wfstart { margin-bottom: 10px; }

/* one case */
.casegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; margin-top: 10px; }
@media (max-width: 860px) { .casegrid { grid-template-columns: 1fr; } }
.casehead { border-left: 8px solid var(--wf); }
.casehead.u-high { border-left-color: var(--u-high); } .casehead.u-mid { border-left-color: var(--u-mid); } .casehead.u-low { border-left-color: var(--u-low); }
.casehead h1 { margin: 0; font-size: 1.5rem; }
.urgline { font-weight: 700; margin: 4px 0 0; }
.spill { font-weight: 800; font-size: .8rem; padding: 4px 10px; border-radius: 99px; background: var(--line); }
.spill.s-new { background: var(--u-high); color: #fff; } .spill.s-collecting { background: var(--u-mid); color: #fff; } .spill.s-checkedin { background: var(--wf); color: #fff; } .spill.s-closed { background: var(--muted); color: #fff; }
.track { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; margin: 0 0 6px; counter-reset: t; }
.track li { counter-increment: t; text-align: center; font-size: .78rem; font-weight: 700; color: var(--muted); padding-top: 30px; position: relative; }
.track li::before { content: counter(t); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background: var(--line); color: var(--text); }
.track li.done { color: var(--text); } .track li.done::before { content: '✓'; background: var(--wf); color: #fff; }
.track li.now { color: var(--text); } .track li.now::before { background: var(--u-mid); color: #fff; }
#collectForm input { flex: 1 1 200px; width: auto; }
dl.answers { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 12px; margin: 0; }
dl.answers dt { color: var(--muted); font-size: .9rem; } dl.answers dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.timeline { list-style: none; padding: 0; margin: 0 0 12px; }
.timeline li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.timeline li time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--wf); }
.timeline li.status span:first-child { color: var(--muted); font-style: italic; }
.timeline li > div { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.tlacts { display: flex; gap: 4px; }
.noteform .short input { width: 150px; }
.noteform .row { align-items: center; gap: 10px; flex-wrap: wrap; }
.btn.linkish { background: transparent; border-style: dashed; }

/* request form editor */
.fedit { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; }
.fgrid .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } }
#outcomesText { width: 100%; }
#campForm input[name=name] { flex: 1 1 260px; width: auto; }
.pinshow { font-variant-numeric: tabular-nums; letter-spacing: .1em; }

/* printing: only the report or poster */
.printonly { display: none; }
@media print {
  body.wf > *:not(#printArea) { display: none !important; }
  body.wf #printArea { display: block !important; }
  body.wf { background: #fff; color: #000; }
  .wposter { text-align: center; font: 13pt/1.35 system-ui, sans-serif; color: #000; padding-top: 2mm; break-inside: avoid; }
  .wposter img { width: 18mm; } .wposter h1 { font-size: 32pt; margin: 3mm 0 2mm; } .wposter .lead { font-size: 16pt; margin: 2mm 0; }
  .wposter .pq svg { width: 105mm; height: 105mm; } .wposter ol { text-align: left; display: inline-block; font-size: 14pt; margin: 3mm 0; }
  @page { size: A4; margin: 14mm; }
  @page report { size: A4; margin: 15mm 14mm 16mm;
    @top-center { content: 'CONFIDENTIAL — WELFARE'; font: 700 7.5pt system-ui, sans-serif; letter-spacing: .14em; color: #555; }
    @bottom-right { content: 'Page ' counter(page) ' of ' counter(pages); font: 7.5pt system-ui, sans-serif; color: #555; }
    @bottom-left { content: 'MyDet welfare report'; font: 7.5pt system-ui, sans-serif; color: #555; } }
}

.rolepill.welfare { background: #1f5f66; color: #fff; }

.wfq .ql { display: block; } .wfq .optl { font-weight: 400; color: var(--muted); font-size: .85rem; }
.campline { margin: 0 0 4px; font-size: .85rem; font-weight: 700; color: var(--wf); text-transform: uppercase; letter-spacing: .04em; }

.casepin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; background: color-mix(in srgb, var(--wf) 10%, var(--card)); border: 2px dashed var(--wf); border-radius: 10px; padding: 12px; margin: 8px 0; }
.casepin div { display: flex; flex-direction: column; } .casepin span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.casepin b { font-size: 1.6rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.casepin p { grid-column: 1 / -1; margin: 0; font-size: .85rem; }
.refbox { font-size: 1.4rem; letter-spacing: .1em; font-weight: 700; width: 9em; text-transform: uppercase; }
.wcase .tags { gap: 4px; }
.ctag { font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 99px; border: 1.5px solid var(--wf); color: var(--wf); }
.wcase .timing { font-weight: 600; color: var(--wf); }
.countyline { margin: 2px 0; }
table.times { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.times th, table.times td { padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: normal; }
table.times th { font-weight: 600; color: var(--muted); width: 32%; } table.times td:nth-child(2) { font-weight: 700; font-variant-numeric: tabular-nums; width: 18%; }
.withteam { font-size: 1.05rem; margin: 10px 0 4px; } .withteam b { color: var(--wf); }
#leftForm .grow { flex: 1 1 200px; } #leftForm .grow input { width: 100%; } #leftForm .short input { width: 150px; }
.campcard h2 { margin: 0 0 4px; } .campcard.off { opacity: .7; } .campcard .qrgrid { margin-top: 12px; }
.addcounty { justify-content: center; border-style: dashed; } .addcounty input { width: 100%; }
#campForm input[name=counties] { flex: 1 1 320px; width: auto; }
@media print {
  .wposter .pcounty { font-size: 22pt; font-weight: 800; margin: 0 0 1mm; }
}
.choice { font: inherit; text-align: left; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 2px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--text); cursor: pointer; }
.choice:hover, .choice:focus-visible { border-color: var(--wf); outline: none; }
.choice .ci { flex: 0 0 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; background: color-mix(in srgb, var(--wf) 14%, var(--card)); color: var(--wf); }
.choice > span:last-child { display: flex; flex-direction: column; gap: 2px; } .choice b { font-size: 1.15rem; } .choice b + span { color: var(--muted); font-size: .9rem; }
#goRequest { border-color: var(--wf); }

/* ---------- printed welfare report ---------- */
@media print {
  .report { page: report; font: 9.5pt/1.4 'Helvetica Neue', Arial, system-ui, sans-serif; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; --rt: #1f5f66; --rl: #d9e6e4; --rg: #f3f5f4; }
  .report h2 { font-size: 10.5pt; text-transform: uppercase; letter-spacing: .08em; color: var(--rt); margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1.5px solid var(--rt); break-after: avoid; }
  .report h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #666; font-size: 8.5pt; margin-left: 6px; }
  .report .rsec, .report .rsign { margin-top: 7px; }
  .report .rlab { display: block; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; }
  /* header */
  .report .rhead { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding-bottom: 8px; border-bottom: 3px solid var(--rt); }
  .report .rhead img { width: 44px; }
  .report .rkick { font-size: 7.5pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt); }
  .report .rtitle h1 { font-size: 21pt; line-height: 1.1; margin: 1px 0 2px; }
  .report .rtitle p { margin: 0; color: #444; }
  .report .rref { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
  .report .rref span:first-child { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em; color: #666; font-weight: 700; }
  .report .rref b { font-size: 20pt; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .report .rstamp { margin-top: 4px; border: 1.5px solid #b3261e; color: #b3261e; font-weight: 800; font-size: 7.5pt; letter-spacing: .16em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; }
  /* summary */
  .report .rsum { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin-top: 10px; break-inside: avoid; }
  .report .rwho, .report .rout { background: var(--rg); border-radius: 6px; padding: 10px 12px; }
  .report .rout { background: #fff; border: 1.5px solid var(--rt); }
  .report .rname { display: block; font-size: 15pt; line-height: 1.2; margin: 2px 0; }
  .report .rwho p, .report .rout p { margin: 2px 0 0; }
  .report .rout b { display: block; font-size: 12pt; color: var(--rt); margin: 2px 0; }
  .report .rtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; }
  .report .rtag { font-size: 8pt; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: #fff; border: 1px solid #bbb; }
  .report .rtag.u-high { background: #b3261e; border-color: #b3261e; color: #fff; } .report .rtag.u-mid { background: #c77700; border-color: #c77700; color: #fff; } .report .rtag.u-low { background: #2e7d32; border-color: #2e7d32; color: #fff; }
  /* times strip */
  .report .rsteps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); break-inside: avoid; }
  .report .rsteps li { position: relative; padding-top: 16px; text-align: center; color: #999; }
  .report .rsteps li::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: #ccc; }
  .report .rsteps li:first-child::before { left: 50%; } .report .rsteps li:last-child::before { right: 50%; }
  .report .rsteps li.on::before { background: var(--rt); }
  .report .rsteps i { position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid #ccc; }
  .report .rsteps li.on i { background: var(--rt); border-color: var(--rt); }
  .report .rsteps span { display: block; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .report .rsteps li.on span { color: #555; }
  .report .rsteps b { display: block; font-size: 11pt; color: #111; font-variant-numeric: tabular-nums; }
  .report .rsteps li:not(.on) b { color: #bbb; }
  .report .rsteps small { display: block; font-size: 7.5pt; color: #555; }
  .report .rstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
  .report .rstats div { background: var(--rg); border-radius: 5px; padding: 5px 9px; }
  .report .rstats div:nth-child(3) { background: var(--rt); color: #fff; } .report .rstats div:nth-child(3) span { color: #d9efef; }
  .report .rstats span { display: block; font-size: 7.5pt; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
  .report .rstats b { font-size: 11.5pt; }
  /* request fields */
  .report .rfields { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 0 18px; margin: 0; }
  .report .rfields div { padding: 3px 0; border-bottom: 1px solid #e3e3e3; break-inside: avoid; }
  .report .rfields .wide { grid-column: 1 / -1; }
  .report .rfields dt { font-size: 7.5pt; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
  .report .rfields dd { margin: 1px 0 0; overflow-wrap: anywhere; }
  .report .rnone { color: #aaa; }
  /* timeline */
  .report .rtl { list-style: none; padding: 0; margin: 4px 0 0; }
  .report .rtl li { display: grid; grid-template-columns: 62px 14px 1fr; gap: 0 8px; position: relative; break-inside: avoid; }
  .report .rtl li::after { content: ''; position: absolute; left: 75px; top: 0; bottom: 0; width: 2px; background: var(--rl); }
  .report .rtl li:first-child::after { top: 8px; } .report .rtl li:last-child::after { bottom: calc(100% - 10px); }
  .report .rtl time { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rt); padding: 2px 0; white-space: nowrap; font-size: 9pt; }
  .report .rtl i { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--rt); margin-top: 5px; z-index: 1; justify-self: center; }
  .report .rtl li.note i { background: var(--rt); }
  .report .rtl li > div { padding: 2px 0 3px; }
  .report .rtl p { margin: 0; overflow-wrap: anywhere; }
  .report .rtl li.status p { color: #555; font-style: italic; font-size: 9pt; }
  .report .rtl li.st-closed p, .report .rtl li.st-checkedin p, .report .rtl li.st-left p { color: #222; font-weight: 600; font-style: normal; }
  .report .rtl small { color: #777; font-size: 8pt; }
  /* sign-off + footer */
  .report .rsign { break-inside: avoid; }
  .report .rsigns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .report .rsigns > div:not(.rreopen) { border: 1px solid #bbb; border-radius: 6px; padding: 6px 12px 5px; }
  .report .rsigns b { font-size: 9pt; } .report .rsign h2 { display: none; }
  .report .rsigns span { display: block; border-bottom: 1px solid #333; padding-top: 12px; font-size: 7pt; color: #777; text-transform: uppercase; letter-spacing: .06em; }
  .report .rfoot { margin-top: 6px; padding-top: 4px; border-top: 1px solid #bbb; font-size: 7.2pt; color: #444; break-inside: avoid; }
  .report .rfoot p { margin: 0 0 2px; }
}

/* reopen from a printed report */
.rsways { display: flex; gap: 10px; flex-wrap: wrap; }
#rsVideo { width: 100%; max-height: 50vh; border-radius: 10px; background: #000; object-fit: cover; }
.rsstatus { min-height: 1.4em; }
.rsok { background: color-mix(in srgb, var(--u-low) 12%, var(--card)); border: 1.5px solid var(--u-low); border-radius: 10px; padding: 10px 12px; }
@media print {
  .report .rreopen { margin-top: 9px; padding: 6px 8px; border: 1.5px dashed var(--rt); border-radius: 6px; break-inside: avoid; display: flex; gap: 10px; align-items: center; }
  .report .rqrs { display: flex; gap: 5mm; flex: none; }
  .report .rqrs > div { border: 0 !important; padding: 0 !important; text-align: center; } .report .rqrs svg { display: block; } .report .rqrs span { font-size: 7pt; color: #555; }
  .report .rreopen.multi .rqrs { gap: 22mm; }
  .report .rreopen p { margin: 0; font-size: 7.6pt; line-height: 1.3; color: #333; } .report .rreopen p b { color: var(--rt); }
  .report .rsigns.withqr { grid-template-columns: 1fr 1fr auto; }
  .report .rsigns.withqr .rreopen { margin: 0; flex-direction: column; align-items: stretch; padding: 5px 6px; }
  .report .rsigns.withqr .rreopen p { max-width: 62mm; font-size: 6.8pt; }
}

/* earlier visits (a cadet seen more than once) */
.visit { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.visit summary { cursor: pointer; } .visit[open] summary { margin-bottom: 8px; }
.visit .timeline li { opacity: .85; }
.ctag.visitn { border-color: #6a4c93; color: #6a4c93; }
.linklist { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow: auto; }
.linkpick { align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-weight: 400; }

@media print {
  .report .rsum.withqr { grid-template-columns: 1fr 1fr auto; gap: 8px; }
  .report .rsum.withqr .rreopen { margin: 0; flex-direction: row; align-items: center; gap: 6px; padding: 4px 6px; }
  .report .rsum.withqr .rreopen p { width: 27mm; font-size: 6.3pt; line-height: 1.25; }
  .report .rtag.rvis { background: #6a4c93; border-color: #6a4c93; color: #fff; }
  .report .rvisit { border: 1px solid #ddd; border-left: 3px solid #6a4c93; border-radius: 5px; padding: 5px 9px; margin-top: 5px; break-inside: avoid; }
  .report .rvisit .rvhead { margin: 0 0 3px; font-size: 8.8pt; }
  .report .rvisit .rtl li { font-size: 8.6pt; } .report .rvisit .rtl p { font-size: 8.6pt; }
  .report .rvnote { margin: 2px 0 0; font-size: 8.4pt; }
}
.seenbefore { background: color-mix(in srgb, #6a4c93 10%, var(--card)); border: 1px solid #6a4c93; border-radius: 10px; padding: 8px 10px; margin: 8px 0 0; }

/* end-of-day report */
.daypreview .kpis { grid-template-columns: repeat(4, 1fr); }
@media print {
  .report .dnote { margin: 8px 0 0; padding: 6px 10px; background: var(--rg); border-radius: 5px; font-size: 8.5pt; }
  .report .dkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
  .report .dkpis div { background: var(--rg); border-radius: 6px; padding: 6px 10px; }
  .report .dkpis div.hot { background: var(--rt); color: #fff; } .report .dkpis div.hot span { color: #d9efef; }
  .report .dkpis b { display: block; font-size: 15pt; line-height: 1.15; } .report .dkpis span { font-size: 7.5pt; color: #555; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
  .report .dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 9px; }
  .report .dbars { width: 100%; border-collapse: collapse; font-size: 8.6pt; }
  .report .dbars th { text-align: left; font-weight: 500; width: 46%; padding: 1.5px 6px 1.5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
  .report .dbars td { padding: 1.5px 0; } .report .dbars .dn { width: 22px; text-align: right; font-weight: 700; }
  .report .dbar { display: block; height: 9px; border-radius: 2px; background: var(--rt); }
  .report .dbar.o { background: #2e7d32; } .report .dbar.c { background: #6a4c93; } .report .dbar.u { background: #c77700; }
  .report .dhours { display: flex; gap: 3px; align-items: flex-end; height: 26mm; margin-top: 4px; }
  .report .dhours div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; }
  .report .dhours span { display: block; background: var(--rt); color: #fff; font-size: 7pt; font-weight: 700; border-radius: 2px 2px 0 0; min-height: 0; }
  .report .dhours small { font-size: 6.8pt; color: #666; border-top: 1px solid #999; }
  .report .dsmall { font-size: 8pt; color: #444; margin: 4px 0 0; }
  .report .dlist { width: 100%; border-collapse: collapse; font-size: 8pt; }
  .report .dlist th { text-align: left; font-size: 7pt; text-transform: uppercase; letter-spacing: .04em; color: #555; border-bottom: 1.5px solid var(--rt); padding: 3px 4px; }
  .report .dlist td { padding: 2.5px 4px; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
  .report .dlist tr { break-inside: avoid; }
  .report .dvis { font-size: 6.8pt; background: #6a4c93; color: #fff; border-radius: 99px; padding: 0 5px; }
}

/* reopening a closed case: amend it, or start a new visit */
.reopenpick { display: flex; flex-direction: column; gap: 8px; }
.reopenpick .linkpick:has(input:checked) { border-color: var(--wf); background: color-mix(in srgb, var(--wf) 9%, transparent); }
.ctag.amendtag { border-color: var(--u-mid); color: var(--u-mid); }
@media print {
  .report .rstamp.ramend { border-color: #a35a00; color: #a35a00; }
  .report .dvis.damend { background: #a35a00; }
}

/* who has picked up a case */
.leadline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--wf) 8%, transparent); }
.leadline .row { gap: 6px; }
.lockline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 6px 0; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 14%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); }
.lockline span { flex: 1 1 260px; }
.wcase .wline.lead { font-weight: 700; }
.wcase .wline.lead.mine { color: var(--wf); }
@media print { .report .rout p.rlead { margin-top: 4px; font-size: 7.5pt; color: #555; line-height: 1.3; } .report .rout .rlead b { display: inline; font-size: inherit; color: #222; margin: 0; } }

/* welfare: only the Welfare OC changes the form, camps and QR codes */
body.notoc :is(#campAddCard, [data-cpin], [data-crename], [data-cact], [data-cdel], [data-qcounty], [data-qnew], [data-qact], [data-qdel], [data-addcounty], #resetForm, #saveForm, #addField) { display: none !important; }
.ocnote { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--wf) 9%, transparent); }
.ctag.ocTag { border-color: var(--wf); background: var(--wf); color: var(--card); }
.teamrow { padding: 8px 0; border-bottom: 1px solid var(--line); }
.teamrow:last-child { border-bottom: 0; }
.rolepill.welfare.waiting { background: transparent; color: #1f5f66; border: 1.5px dashed #1f5f66; }
@media (prefers-color-scheme: dark) { .rolepill.welfare.waiting { color: #8fc9cf; border-color: #8fc9cf; } }

/* passkeys */
.orline{display:flex;align-items:center;gap:12px;color:var(--muted);margin:14px 0}
.orline:before,.orline:after{content:'';flex:1;border-top:1px solid var(--line)}
.pkbtn{width:100%}
.pklist{list-style:none;padding:0;margin:8px 0 14px}
.pklist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ok{color:var(--pass)}
.soundbar{display:block;width:100%;border:0;padding:12px 16px;background:var(--u-mid);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-align:center}
.soundbar[hidden]{display:none}
.pwbar{background:#fff4dc;color:#5a3d00;padding:10px 16px;text-align:center;font-weight:600}
.pwbar[hidden]{display:none}
@media (prefers-color-scheme: dark){.pwbar{background:#4a3a14;color:#ffe2a6}}

/* question boxes (wipe after printing, delete, …) */
.askdlg { max-width: 440px; width: calc(100% - 32px); padding: 26px 24px 20px; text-align: center; border-top: 6px solid var(--wf, #1f5f66); }
.askdlg.tone-warn { border-top-color: var(--u-high, #b3261e); }
.askdlg.tone-good { border-top-color: var(--wf, #1f5f66); }
.askdlg .askicon { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem;
  background: color-mix(in srgb, var(--wf, #1f5f66) 12%, var(--card)); }
.askdlg.tone-warn .askicon { background: color-mix(in srgb, var(--u-high, #b3261e) 12%, var(--card)); }
.askdlg h2 { margin: 0 0 12px; font-size: 1.3rem; }
.askdlg .askbody { text-align: left; }
.askdlg .askbody p { margin: 10px 0 0; }
.askcase { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--wf, #1f5f66) 7%, var(--card)); border: 1px solid var(--line); }
.askcase b { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--wf, #1f5f66); }
.askcase span:not(.muted) { font-weight: 700; }
.askcheck { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.askcheck li { position: relative; padding-left: 28px; }
.askcheck li::before { content: '✓'; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800;
  color: #fff; background: var(--u-low, #2e7d32); }
.askfine { font-size: .85rem; color: var(--muted); }
.askbtns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.askbtns .btn.danger { font-weight: 800; background: var(--red); border-color: var(--red); color: #fff; }
.askdlg.three .askbtns { display: grid; grid-template-columns: 1fr 1fr; }
.askdlg.three .askbtns .btn.danger { grid-column: 1 / -1; order: -1; padding: 12px; font-size: 1.05rem; }
@media (max-width: 480px) { .askbtns { flex-direction: column-reverse; } .askbtns .btn { width: 100%; } .askdlg.three .askbtns { grid-template-columns: 1fr; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: #1f2a2b; color: #fff; padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); font-weight: 600; max-width: calc(100% - 32px); transition: opacity .6s, transform .6s; }
.toast.gone { opacity: 0; transform: translate(-50%, 12px); }
a.rqrs { color: inherit; text-decoration: none; }

/* ---------- maintainer dashboard (/maintainer) ---------- */
.rolepill.maint { background: #2f3b4a; color: #fff; }
body.mt { --ok: #2e7d32; --warn: #b26a00; --bad: #b3261e; --okbg: #e6f2e7; --warnbg: #fdf1dc; --badbg: #fbe6e4; }
@media (prefers-color-scheme: dark) { body.mt { --ok: #7cc785; --warn: #f0b04f; --bad: #ff8a80; --okbg: #1f3321; --warnbg: #3a2e17; --badbg: #3d2220; } }
.mt .small { font-size: .85rem; }
.mt span.bad, .mt td.bad { color: var(--bad); font-weight: 600; }
.mtwrap { max-width: 1240px; }
.sitepill { white-space: nowrap; font-size: .72rem; font-weight: 800; letter-spacing: .1em; padding: 4px 8px; border-radius: 6px; }
.sitepill.live { background: #e3f1e4; color: #1e5a22; } .sitepill.dev { background: #ffcf66; color: #3b2a00; }
.sitepill.train { background: #d9ecf7; color: #10405e; }
.mthero { display: flex; align-items: center; gap: 18px; border-width: 2px; }
.mthero.st-ok { border-color: var(--ok); } .mthero.st-warn { border-color: var(--warn); } .mthero.st-bad { border-color: var(--bad); }
.herobadge { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff; }
.mthero.st-ok .herobadge { background: var(--ok); } .mthero.st-warn .herobadge { background: var(--warn); } .mthero.st-bad .herobadge { background: var(--bad); }
.herotext { flex: 1; min-width: 0; } .herotext h1 { margin: 0 0 4px; font-size: 1.6rem; } .herotext p { margin: 2px 0; }
.mttiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.mttile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mttile span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mttile b { font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mttile small { color: var(--muted); font-size: .8rem; }
.mttile.st-warn { border-color: var(--warn); background: var(--warnbg); }
.mtgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.mtgrid > .card { margin-bottom: 0; min-width: 0; }
.stpill { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .78rem; font-weight: 800; color: #fff; }
.stpill.ok { background: var(--ok); color: #fff; } .stpill.warn { background: var(--warn); color: #fff; } .stpill.bad { background: var(--bad); color: #fff; }
.attn { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.attn li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; }
.attn li.st-warn { background: var(--warnbg); } .attn li.st-bad { background: var(--badbg); }
.attn p { margin: 3px 0 0; font-size: .9rem; } .attn .fix { color: var(--muted); }
.allclear { padding: 14px; border-radius: 10px; background: var(--okbg); color: var(--ok); font-weight: 700; }
.mtcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; background: var(--sand); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; word-break: break-all; }
.btn.tiny { padding: 2px 7px; font-size: .72rem; margin-left: 6px; vertical-align: middle; }
table.kv { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.kv td { white-space: normal; overflow-wrap: anywhere; }
table.kv th, table.kv td { white-space: normal; text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.kv th { width: 34%; padding-right: 12px; font-weight: 600; color: var(--muted); font-size: .88rem; }
.ulog { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.ulog li { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.ulog time { color: var(--muted); font-variant-numeric: tabular-nums; }
.ulog li.bad span { color: var(--bad); font-weight: 600; } .ulog li.ok span { color: var(--ok); }
.tchart { width: 100%; height: auto; display: block; margin: 6px 0 10px; }
.tchart .grid { stroke: var(--line); stroke-width: 1; }
.tchart .tick, .tchart .xl text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.tchart .bar { fill: var(--green-2); }
@media (prefers-color-scheme: dark) { .tchart .bar { fill: var(--khaki); } }
.tchart .hit { fill: transparent; }
.tchart .hb:hover .bar { fill: var(--green); }
@media (prefers-color-scheme: dark) { .tchart .hb:hover .bar { fill: #e7dbb5; } }
.tchart .hb:hover .hit { fill: var(--sand); }
.tchart .errdot { fill: var(--bad); stroke: var(--card); stroke-width: 2; }
.errkey { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); vertical-align: middle; }
.tstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tstats div { background: var(--sand); border-radius: 10px; padding: 8px 12px; }
.tstats b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; } .tstats span { font-size: .8rem; color: var(--muted); }
.errtbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.errtbl th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.errtbl td { white-space: normal; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.errtbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.errtbl pre, .crash pre { white-space: pre-wrap; font-size: .76rem; background: var(--sand); padding: 8px; border-radius: 6px; max-height: 260px; overflow: auto; margin: 6px 0 0; }
.kind { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.kind.server { background: var(--badbg); color: var(--bad); } .kind.page { background: var(--warnbg); color: var(--warn); }
.crash { background: var(--badbg); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.checkcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 24px; }
.checkcols h3 { margin: 10px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.chk { list-style: none; padding: 0; margin: 0; }
.chk li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.chk li div { display: flex; flex-direction: column; } .chk li span { font-size: .84rem; color: var(--muted); }
.mtbtns { margin-top: 14px; gap: 8px; }
.mtmore { margin-top: 12px; } .mtmore summary { cursor: pointer; font-weight: 600; }
@media (max-width: 1000px) { .mttiles { grid-template-columns: repeat(3, 1fr); } .tstats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .mtgrid { grid-template-columns: 1fr; }
  .mttiles { grid-template-columns: repeat(2, 1fr); } .tstats { grid-template-columns: repeat(2, 1fr); }
  .mthero { flex-wrap: wrap; gap: 12px; } .herobadge { width: 44px; height: 44px; font-size: 1.4rem; } .herotext { flex: 1 1 calc(100% - 60px); } .herotext h1 { font-size: 1.25rem; } .mthero #refresh { width: 100%; }
  table.kv th { width: 40%; }
  .ulog li { grid-template-columns: 1fr; gap: 0; }
  .errtbl thead { display: none; } .errtbl tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .errtbl td { display: block; border: 0; padding: 2px 0; } .errtbl td.num { text-align: left; }
  .errtbl td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-size: .78rem; }
}

/* ---------- welfare practice ---------- */
body.wf { --prac: #6a4c93; --pracbg: #f2ecfa; }
@media (prefers-color-scheme: dark) { body.wf { --prac: #c3a6ee; --pracbg: #2c2438; } }
.ptag { display: inline-block; vertical-align: middle; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--prac); border-radius: 99px; padding: 2px 7px; margin-left: 4px; }
.wcase.practice { background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--prac) 9%, transparent) 14px 28px); }
.practicebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; margin: 0 0 12px; border-radius: 10px;
  background: var(--pracbg); border: 1.5px dashed var(--prac); color: var(--text); }
.practicebar.slim { margin: 8px 0; padding: 8px 12px; font-size: .9rem; }
.practicebar b { color: var(--prac); }
.practiceintro { border-color: var(--prac); }
.practiceintro h2 { color: var(--prac); }
.prlinks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.prlinks li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.prcheck { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.prcheck .check { font-weight: 400; align-items: flex-start; }
.prend { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prend h3 { margin-top: 0; }
.drillon { margin: 0 0 8px; color: var(--prac); }
body.practicing .bar { background: var(--prac); }
/* maintainer: backups and restore */
.mdlg { max-width: 520px; } .mdlg.wide { max-width: 640px; }
.mdlg h2 { margin-top: 0; }
.btn.dangerfill { background: var(--red); border-color: var(--red); color: #fff; }
.okline { background: var(--okbg); color: var(--ok); font-weight: 700; padding: 10px 12px; border-radius: 10px; }
.badline { background: var(--badbg); color: var(--bad); font-weight: 600; padding: 10px 12px; border-radius: 10px; }
.warnbox { background: var(--warnbg); border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.warnbox ul { margin: 6px 0 0; padding-left: 18px; } .warnbox li { margin: 3px 0; }
table.cmp { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.cmp th, table.cmp td { padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: normal; }
table.cmp th { text-align: left; font-weight: 600; color: var(--muted); } table.cmp .num { text-align: right; font-variant-numeric: tabular-nums; }
.bktbl td { vertical-align: middle; } .bkacts { white-space: nowrap; text-align: right; } .bkacts .btn.tiny { margin-left: 4px; }
.restorenote { background: var(--sand); border-radius: 10px; padding: 8px 12px; }
.lanes > .practicebar { grid-column: 1 / -1; margin: 0; }
#practiceArea .card > h3:first-child { margin-top: 0; }
.practicebar.slim { display: block; }
/* maintainer: welfare test and start fresh */
.wtgrid { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 20px; }
.wtgrid h3 { margin-top: 4px; }
.wtfacts, .wtres { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.wtfacts li, .wtres li { display: flex; gap: 8px; align-items: flex-start; }
.wtfacts li > span, .wtres li > span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; background: var(--ok); }
.wtfacts li.no > span { background: var(--warn); } .wtres li.no > span { background: var(--bad); }
.wtres { margin-top: 12px; } .wtres li div { display: flex; flex-direction: column; } .wtres small { color: var(--muted); }
.mt .okt { color: var(--ok); font-weight: 700; }
.wtdrill { margin-top: 8px; }
.freshcard { border-color: var(--bad); }
.freshcard h2 { color: var(--bad); }
.freshlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.freshlist .check, .mdlg .check { align-items: flex-start; font-weight: 400; }
@media (max-width: 900px) { .wtgrid { grid-template-columns: 1fr; } }
.wtfacts li, .wtres li { color: var(--text); }

/* ---------- the front door: logging in, then the home page ---------- */
body.door { background: var(--bg); }
body.door .verfoot { display: none; }
/* logging in */
.doorbg { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px 16px; position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 85% 110%, rgba(201, 185, 138, .16), transparent 60%), radial-gradient(900px 500px at -10% -10%, rgba(255, 255, 255, .06), transparent 60%), var(--green); }
.doorbg::before, .doorbg::after { content: ''; position: absolute; border-radius: 50%; border: 56px solid rgba(201, 185, 138, .08); pointer-events: none; }
.doorbg::before { width: 520px; height: 520px; right: -180px; bottom: -200px; }
.doorbg::after { width: 300px; height: 300px; left: -140px; top: -120px; border-width: 36px; }
.doorcol { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; z-index: 1; }
.doorbrand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.9rem; letter-spacing: .01em; color: #f4f1e8; }
.doorbrand img { width: 52px; height: 52px; }
.doortag { margin: -6px 0 8px; color: var(--khaki); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; font-size: .78rem; }
.doorcard { width: 100%; background: var(--card); border-radius: 20px; padding: 30px 28px; box-shadow: 0 24px 60px rgba(10, 14, 6, .35); }
.doorcard h2 { font-size: 1.6rem; margin: 0 0 4px; }
.doorcard form { margin-top: 18px; }
.doorkick { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); margin-bottom: 6px; }
.doorforgot { margin: 16px 0 0; }
.doorlinks { display: flex; gap: 10px; margin: 6px 0 0; font-size: .92rem; color: rgba(244, 241, 232, .6); }
.doorlinks a { color: #f4f1e8; text-decoration: none; opacity: .85; } .doorlinks a:hover { opacity: 1; text-decoration: underline; }
.pwwrap { display: flex; position: relative; } .pwwrap input { flex: 1; padding-right: 64px; }
.pwshow { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: .8rem; font-weight: 700; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px 8px; }
/* home */
.homepage { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.homebar { background: var(--green); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; }
.homebar .logo { width: 30px; height: 30px; }
.homeme { display: flex; align-items: center; gap: 10px; }
.mechip { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; padding: 3px 12px 3px 3px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.mechip:hover { background: rgba(255, 255, 255, .18); }
.avatar.sm { width: 30px; height: 30px; font-size: .8rem; background: var(--khaki); color: var(--green); }
.homewrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px 32px; flex: 1; }
.homehello { background: var(--green); color: #f4f1e8; padding: 30px 20px 40px; position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); margin-bottom: 26px; }
.homehello .in { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.homehello::after { content: ''; position: absolute; right: max(-90px, calc(50% - 640px)); top: -130px; width: 320px; height: 320px; border-radius: 50%; border: 44px solid rgba(201, 185, 138, .1); }
.homehello h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 4px 0 12px; color: #fff; letter-spacing: -.01em; }
.hometoday { margin: 0; color: var(--khaki); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.homepills { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.homepills .rolepill { margin: 0; font-size: .8rem; padding: 4px 10px; max-width: none; background: rgba(255, 255, 255, .14); color: #fff; }
.homepills .rolepill.where { background: transparent; border: 1px solid rgba(255, 255, 255, .3); }
.homeh { font-size: 1.05rem; margin: 0 0 12px; color: var(--muted); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left; font: inherit; color: var(--text); text-decoration: none; background: var(--card);
  border: 1.5px solid var(--line); border-radius: 18px; padding: 20px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; overflow: hidden; }
.tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tc, var(--green)); }
.tile:hover:not([aria-disabled]), .tile:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30, 35, 20, .12); border-color: var(--tc, var(--green)); outline: none; }
.tilehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tileicon { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: color-mix(in srgb, var(--tc, var(--green)) 14%, var(--card)); }
.tiletext { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .tiletext b { font-size: 1.2rem; } .tiletext span { color: var(--muted); font-size: .92rem; }
.tilebadge { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; background: var(--tc, var(--green)); color: #fff; white-space: nowrap; }
.tilebadge.mystart { background: var(--sand); color: var(--muted); border: 1px solid var(--line); }
.tilego { font-weight: 700; font-size: .9rem; color: var(--tc, var(--green)); }
.tile:hover .tilego { text-decoration: underline; }
.tile.small { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 14px 18px; }
.tile.small::before { display: none; } .tile.small .tilehead { display: contents; } .tile.small .tiletext { flex: 1; } .tile.small .tiletext span { font-size: .88rem; } .tile.small .tileicon { width: 40px; height: 40px; font-size: 1.2rem; }
.tile.small .tiletext b { font-size: 1.05rem; }
.t-training { --tc: #3b4a2f; } .t-admin { --tc: #7a5a2e; } .t-welfare { --tc: #1f5f66; } .t-maint { --tc: #2f3b4a; } .t-account { --tc: #8a7a45; } .t-programme { --tc: #6a4c93; } .t-myadmin { --tc: #2f6a8a; }
@media (prefers-color-scheme: dark) { .t-admin { --tc: #d6b37a; } .t-training { --tc: #9db37f; } .t-welfare { --tc: #6fb3ba; } .t-maint { --tc: #9fb2c9; } .t-account { --tc: #c9b98a; } .t-programme { --tc: #c3a6ee; } .t-myadmin { --tc: #8cc3e0; } }
.tile.soon { border-style: dashed; background: color-mix(in srgb, var(--tc) 5%, var(--card)); }
.tile.soon::before { display: none; }
.tile.soon .tiletext b { color: var(--tc); }
.tile.off { cursor: default; opacity: .75; }
label.check.remember { margin-top: 18px; font-weight: 400; align-items: flex-start; } .remember input { margin-top: 3px; flex: none; }
.pkoffer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; margin-bottom: 22px; border-radius: 14px; background: var(--card); border: 1.5px dashed var(--khaki); }
.homefoot { text-align: center; padding: 18px 16px 26px; font-size: .9rem; color: var(--muted); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.homefoot a { color: var(--muted); }
.soondlg { max-width: 480px; } .soondlg h2 { margin: 6px 0 4px; }
.soonbadge.admin { background: #2f6a8a; }
.soonbadge { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: #6a4c93; color: #fff; }
.soonlist { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .doorbg { place-items: start center; padding-top: 36px; }
  .doorbrand { font-size: 1.6rem; } .doorbrand img { width: 44px; height: 44px; }
  .doorcard { padding: 24px 20px; border-radius: 18px; }
  .homebar { padding: 8px 16px; } .homewrap { padding: 0 16px 24px; }
  .homehello { margin-bottom: 20px; padding: 22px 16px 28px; }
  .tiles { grid-template-columns: 1fr; gap: 12px; }
  .tile { flex-direction: row; align-items: center; padding: 16px; gap: 14px; } .tileicon { width: 44px; height: 44px; font-size: 1.3rem; }
  .tilego { display: none; }
  .tilehead { display: contents; }
  .tile .tilebadge { position: absolute; top: 10px; right: 12px; font-size: .6rem; padding: 3px 8px; } .tile:has(.tilebadge) { padding-top: 32px; }
}

/* ---------- my account ---------- */
.acctwrap { max-width: 1000px; }
.accthero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; background: var(--green); color: var(--khaki); }
.herotxt { flex: 1; min-width: 200px; } .herotxt h1 { margin: 0 0 6px; } .herotxt p { margin: 2px 0; }
.herofacts { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; }
.herofacts dt { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .herofacts dd { margin: 2px 0 0; font-weight: 600; }
.acctgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acctgrid > .card { margin: 0; min-width: 0; } .acctwide { grid-column: 1 / -1; }
.startopts { display: flex; flex-direction: column; gap: 8px; }
.startopt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 400; }
.startopt:has(input:checked) { border-color: var(--green); background: color-mix(in srgb, var(--green) 7%, var(--card)); }
.startopt span { display: flex; flex-direction: column; } .startopt small { color: var(--muted); }
.pwstate.soon { color: var(--red); }
.pwbarline { height: 6px; border-radius: 99px; background: var(--sand); overflow: hidden; margin: 6px 0 14px; } .pwbarline span { display: block; height: 100%; background: var(--green-2); border-radius: 99px; }
.devlist { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.devlist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.devlist li.cur { border-color: var(--green-2); }
.devlist li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .devlist small { color: var(--muted); }
.devicon { font-size: 1.5rem; }
.actlist { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.actlist li { display: grid; grid-template-columns: 11em 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.actlist time { color: var(--muted); font-variant-numeric: tabular-nums; }
.aboutgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .aboutgrid h3 { margin-top: 0; font-size: .95rem; }
.acctlink { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ok { color: var(--pass); }
@media (max-width: 760px) { .acctgrid, .aboutgrid { grid-template-columns: 1fr; } .actlist li { grid-template-columns: 1fr; gap: 0; } .herofacts { gap: 14px; } }

.startopt { flex-direction: row; } .devlist .tag { align-self: flex-start; margin-top: 2px; }
body.acct a:not(.btn) { color: var(--green-2); }
@media (prefers-color-scheme: dark) { body.acct a:not(.btn) { color: var(--khaki); } }

/* ---------- picture library ---------- */
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
.libitem { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.libimg { aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.libimg img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.libmeta { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.libmeta b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libmeta .muted { font-size: .78rem; }
.libtags { display: flex; flex-wrap: wrap; gap: 4px; }
.libtags span, .libchips button { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--sand); color: var(--muted); border: 1px solid var(--line); }
.libacts { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.libempty { grid-column: 1 / -1; text-align: center; padding: 34px 16px; border: 2px dashed var(--line); border-radius: 14px; color: var(--muted); }
.libcard.dragging { outline: 3px dashed var(--green-2); outline-offset: -8px; background: color-mix(in srgb, var(--green) 6%, var(--card)); }
.libhint { margin: 14px 0 0; }
.libup { opacity: .6; } .libup .libimg::after { content: 'Uploading…'; font-size: .8rem; color: var(--muted); }
.libdlg { width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); }
.libdlg h2 { margin: 0; }
.libpickbar input[type=search] { flex: 1; min-width: 180px; }
.libchips { display: flex; flex-wrap: wrap; gap: 6px; }
.libchips button { cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: 4px 11px; }
.libchips button.on { background: var(--green); color: #fff; border-color: var(--green); }
.libgrid.pick { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: min(52vh, 520px); overflow: auto; margin-top: 4px; padding: 2px; }
.libgrid.pick .libitem { cursor: pointer; font: inherit; color: inherit; text-align: left; padding: 0; }
.libgrid.pick .libitem:hover, .libgrid.pick .libitem:focus-visible { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); outline: none; }
.libgrid.pick .libmeta { padding: 6px 8px 8px; } .libgrid.pick .libmeta b { font-size: .82rem; }
.libsave { font-size: .78rem; }
@media (prefers-color-scheme: dark) { .libchips button.on { background: var(--khaki); color: #1d2118; border-color: var(--khaki); } }
@media (max-width: 560px) { .libgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .libgrid.pick { grid-template-columns: repeat(3, 1fr); } }
.libimg.editprev { max-height: 180px; aspect-ratio: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.libimg.editprev img { max-height: 166px; }
.libacts .btn.tiny { margin-left: 0; padding: 4px 10px; font-size: .78rem; }
/* phones: icon-only header buttons so Log out always fits */
@media (max-width: 600px) { .bar .who .btn .long { display: none; } .bar .who { gap: 6px; } .bar .who .whoname { display: none; } }
@media (max-width: 560px) { .libgrid.pick { grid-template-columns: repeat(2, 1fr); } .libgrid.pick .libtags { display: none; } .libgrid.pick .libmeta b { white-space: normal; } }
body.area-admin .tabs { display: none; }

/* My Welfare: the request form is the Welfare OC's (team members keep Camps for the camp PIN, and Team to see who's on) */
body.notoc .tabs [data-tab="form"], body.notoc #tab-form { display: none !important; }
body.notoc .tabs [data-tab="practice"], body.notoc #tab-practice { display: none !important; }
.keptpill { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: #1f5f66; color: #fff; margin-right: 4px; }
.keepopts { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.keepopts legend { font-weight: 700; font-size: .9rem; padding: 0 4px; }
.keepopts .check { font-weight: 500; }
.report .ddays th { width: 30%; } .report .ddays td.muted { font-size: .85em; font-weight: 400; white-space: nowrap; padding-left: 8px; width: 60px; }