/* The design system. Tokens come from the preliminary design (00-head.html);
   a client with other colors overrides the brand tokens (partials/theme).
   Type is in rem so the phone's text size setting and the "Aa" large text
   mode scale everything. Class reference: docs/CONVENTIONS.md. */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-700-italic.woff2") format("woff2"); }

:root {
  --ink: #2B2320; --brown: #5A4B42; --brown-2: #8A7A70; --muted: #6E6057;
  --line: #E4DED3; --line-2: #EFEAE1;
  --paper: #FBFAF6; --cream: #F5F1E8; --card: #FFFFFF; --sand: #EDE8DE;
  --leaf: #81B63A; --leaf-d: #5E8F24; --forest: #00401B; --pine: #00713D; --pine-d: #005A30; --sage: #467C5E; --mint: #EAF3DD;
  --fit: #5F9E2F; --sharp: #1F8A8C; --engaged: #D4812A; --involved: #8A4F7D;
  --fit-bg: #EAF4DF; --sharp-bg: #DFF1F0; --engaged-bg: #FBEBD8; --involved-bg: #F2E4EE;
  --fit-ink: #3F6D1C; --sharp-ink: #155F61; --engaged-ink: #8A4E12; --involved-ink: #6A3560;
  --alert: #F4E7B8; --alert-ink: #5E470C; --danger: #B4432F; --danger-bg: #F8E2DC; --ok-bg: #E6F2DA; --ok-ink: #2F5A12;
  --info-bg: #E1F0F8; --info-ink: #1E5F82;
  --dp: #0A9BDB; --dp-d: #0775A8;
  /* Brand tints. A client with its own colors overrides these and pine, forest,
     leaf and mint in a <style> from partials/head.html (web.Theme). */
  --tint: #F3F8EC; --tint-2: #F7FBF2; --tint-row: #F0F6E8; --select: #CDE7A8; --mint-line: #C9DDB0;
  --mark-a: #9BCB55; --mark-b: #4E8F2A;
  --side-ink: #DCE8D8; --side-muted: #A9C7A3; --side-accent: var(--leaf); --navpill: rgba(129,182,58,.25);
  --accent: var(--pine);
  --serif: "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --radius: 0.875rem; --radius-lg: 1.125rem; --radius-sm: 0.5rem;
  --tap: 3rem;            /* 48px minimum target */
  --shadow: 0 1px 2px rgba(60, 40, 20, .06);
  --shadow-lg: 0 10px 30px rgba(40, 30, 20, .14);
  /* The page's side margin: 1rem, but never more than 4.5vw, so large text
     keeps the width of a phone for words instead of margins. */
  --gutter: min(1rem, 4.5vw);
  --card-px: 1.125rem;    /* a card's side padding (narrower at large text in the app) */
  --tabbar-h: 4.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lt { font-size: 125%; }           /* "Aa" large text */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; }
h1, .h1 { font-family: var(--serif); font-size: 1.75rem; letter-spacing: -.005em; }
h2, .h2 { font-family: var(--serif); font-size: 1.375rem; }
h3, .h3 { font-family: var(--sans); font-size: 1.125rem; font-weight: 700; }
p { margin: 0 0 .75em; }
a { color: var(--pine); text-underline-offset: .15em; }
a:hover { color: var(--pine-d); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--dp); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--select); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }

[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: .5rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: var(--radius-sm); }
.skip:focus { top: .5rem; color: #fff; }

svg.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.25em; }

/* ---------- utilities ---------- */
.stack > * + * { margin-top: var(--stack, 1rem); }
.stack-sm { --stack: .5rem; } .stack-lg { --stack: 1.5rem; }
.row { display: flex; align-items: center; gap: .75rem; }
.row-top { align-items: flex-start; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.cluster { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.grow { flex: 1; min-width: 0; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: .75rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.center { text-align: center; }
.right { text-align: right; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.125rem; color: var(--brown); }
.nowrap { white-space: nowrap; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.hidden { display: none !important; }

.eyebrow { font-family: var(--sans); font-size: .9375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: .75rem 1.25rem;
  border-radius: var(--radius); border: 1.5px solid transparent; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.15;
  text-decoration: none; cursor: pointer; background: #fff; color: var(--ink); border-color: var(--line); text-align: center; }
.btn:hover { color: var(--ink); background: var(--cream); }
.btn-primary, .btn.pri { background: var(--pine); border-color: var(--pine); color: #fff; }
.btn-primary:hover, .btn.pri:hover { background: var(--pine-d); border-color: var(--pine-d); color: #fff; }
.btn-secondary, .btn.sec { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-danger { background: #fff; border-color: #E2B6AB; color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--pine); }
.btn-ghost:hover { background: var(--mint); color: var(--pine-d); }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 3.5rem; font-size: 1.1875rem; }
.btn-sm { min-height: 2.25rem; padding: .375rem .75rem; font-size: .875rem; border-radius: var(--radius-sm); }
/* In the resident, staff and public shells a small button is still a 48px target with 17px words. */
.shell-app .btn-sm, .shell-public .btn-sm { min-height: var(--tap); padding: .5rem .875rem; font-size: 1.0625rem; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .ico { width: 1.3em; height: 1.3em; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--pine); text-decoration: underline; cursor: pointer; font: inherit; }
.inline-form { display: inline; margin: 0; }

.iconbtn { position: relative; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: #fff;
  border: 1px solid var(--line); color: var(--brown); text-decoration: none; cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: 1.125rem; padding: 0; }
.iconbtn:hover { background: var(--cream); color: var(--ink); }
.iconbtn .ico { width: 1.4rem; height: 1.4rem; }
.iconbtn[aria-pressed="true"] { background: var(--mint); color: var(--pine-d); border-color: var(--mint-line); }
.badge { position: absolute; top: -.2rem; right: -.2rem; min-width: 1.35rem; height: 1.35rem; border-radius: .7rem; background: var(--danger); color: #fff;
  font: 700 .8125rem/1.35rem var(--sans); text-align: center; padding: 0 .3rem; border: 2px solid var(--paper); }

/* ---------- cards, lists, chips ---------- */
.card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1rem var(--card-px); }
.card-flush { padding: 0; overflow: hidden; }
.card-title { font-family: var(--serif); font-size: 1.4375rem; font-weight: 600; line-height: 1.2; margin: .5rem 0 .4rem; }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover { color: inherit; border-color: var(--line); background: #FFFEFB; }
.card + .card { margin-top: .75rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-top: 1px solid var(--line-2); }
.list > li:first-child { border-top: 0; }
.list-item { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .625rem 1rem; color: inherit; text-decoration: none; }
a.list-item:hover { background: var(--cream); color: inherit; }
.list-item .title { font-weight: 700; font-size: 1.0625rem; }
.list-item .sub { color: var(--muted); font-size: .9375rem; }
.list-item > .ico:last-child { color: var(--brown-2); }

.chip { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .875rem; line-height: 1; padding: .4rem .65rem; border-radius: 1rem;
  white-space: nowrap; background: var(--cream); color: var(--brown); }
.chip i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; background: currentColor; }
.c-fit { background: var(--fit-bg); color: var(--fit-ink); } .c-fit i { background: var(--fit); }
.c-sharp { background: var(--sharp-bg); color: var(--sharp-ink); } .c-sharp i { background: var(--sharp); }
.c-engaged { background: var(--engaged-bg); color: var(--engaged-ink); } .c-engaged i { background: var(--engaged); }
.c-involved { background: var(--involved-bg); color: var(--involved-ink); } .c-involved i { background: var(--involved); }
.c-staff { background: #E7EEF6; color: #2F5F86; }
.pdot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; margin-right: .35rem; vertical-align: .08em; }
.pillar-fit { --pillar: var(--fit); } .pillar-sharp { --pillar: var(--sharp); } .pillar-engaged { --pillar: var(--engaged); } .pillar-involved { --pillar: var(--involved); }

.stat { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .8125rem; line-height: 1; padding: .3rem .5rem; border-radius: .7rem; white-space: nowrap; }
.st-ok { background: var(--ok-bg); color: #3C6B1A; } .st-warn { background: #FBEBD2; color: #7E4C0F; } .st-off { background: #EEEAE3; color: #6B5F57; }
.st-blue { background: var(--info-bg); color: var(--info-ink); } .st-danger { background: var(--danger-bg); color: #9A3523; }

.avatar { border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem; flex: none;
  width: 2.75rem; height: 2.75rem; letter-spacing: .02em; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 2rem; height: 2rem; font-size: .75rem; } .avatar-lg { width: 5rem; height: 5rem; font-size: 1.6rem; }
.av1 { background: #6F8F6C; } .av2 { background: #96714F; } .av3 { background: #5E7890; } .av4 { background: #8C6A87; }
.av5 { background: #9A7B35; } .av6 { background: #4F7D75; } .av7 { background: #8A5F4E; } .av8 { background: #6B6E96; }

.bar { height: .45rem; border-radius: .25rem; background: #EEEAE2; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: .25rem; background: var(--leaf); }
.bar-fit > i { background: var(--fit); } .bar-sharp > i { background: var(--sharp); } .bar-engaged > i { background: var(--engaged); }
.bar-involved > i { background: var(--involved); } .bar-warn > i { background: var(--engaged); } .bar-danger > i { background: var(--danger); }

/* ---------- notices ---------- */
.alert { display: flex; gap: .75rem; align-items: flex-start; border-radius: var(--radius); padding: .875rem 1rem; background: var(--alert); color: var(--alert-ink); }
.alert .ico { width: 1.5rem; height: 1.5rem; margin-top: .1rem; }
.alert-title { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.alert-body { margin-top: .2rem; }
.alert > :not(.ico) { flex: 1 1 auto; min-width: 0; }
.alert-urgent { background: var(--danger-bg); color: #7C2A1A; border-left: 5px solid var(--danger); }
.alert-info { background: var(--info-bg); color: var(--info-ink); }
.alert-ok { background: var(--ok-bg); color: var(--ok-ink); }
a.alert { text-decoration: none; }
/* A link on a tinted notice is the brand's darker shade, so it keeps 4.5:1 on every tint (WCAG AA). */
.alert a:not(.btn), .flash a:not(.btn) { color: var(--pine-d); }
.flashes { display: grid; gap: .5rem; margin-bottom: 1rem; }
.flash { border-radius: var(--radius); padding: .75rem 1rem; font-weight: 700; background: var(--ok-bg); color: var(--ok-ink); }
.flash-warn { background: #FBEBD2; color: #6E420C; } .flash-error { background: var(--danger-bg); color: #8E2E1D; } .flash-info { background: var(--info-bg); color: var(--info-ink); }

/* ---------- forms ---------- */
.field { margin-bottom: 1rem; }
.field > label, .label { display: block; font-weight: 700; margin-bottom: .4rem; }
.help { color: var(--muted); font-size: .9375rem; margin-top: .3rem; }
.error-text { color: var(--danger); font-weight: 700; margin-top: .3rem; }
.input, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=url],
input[type=date], input[type=time], input[type=datetime-local], input[type=password], select, textarea {
  width: 100%; min-height: var(--tap); padding: .625rem .875rem; border: 1.5px solid #D8D0C4; border-radius: var(--radius-sm);
  background: #fff; font-size: 1.0625rem; line-height: 1.3; }
textarea { min-height: 7rem; resize: vertical; }
input[type=file] { max-width: 100%; }
/* A file field in the resident, staff and public shells is a 48px button
   ("Choose photo") with the chosen file's name beside it. :where() keeps
   these at no specificity, so a module's own file field (drawn as its label,
   the input itself hidden) keeps its rules. */
:where(.shell-app, .shell-public) :where(input[type=file]) { display: block; width: 100%; min-height: var(--tap); font-size: 1.0625rem; line-height: 1.3; }
:where(.shell-app, .shell-public) :where(input[type=file])::file-selector-button {
  min-height: var(--tap); margin: 0 .75rem 0 0; padding: .625rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
:where(.shell-app, .shell-public) :where(input[type=file])::file-selector-button:hover { background: var(--cream); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(10, 155, 219, .35); border-color: var(--dp); }
.input-code { font-size: 1.75rem; letter-spacing: .4em; text-align: center; font-weight: 700; font-family: var(--sans); }
.check { display: flex; align-items: center; gap: .75rem; min-height: var(--tap); cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; accent-color: var(--pine); flex: none; }
.choices { display: grid; gap: .5rem; }
.choice { display: flex; align-items: center; gap: .875rem; min-height: 3.5rem; padding: .75rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; }
.choice input { width: 1.4rem; height: 1.4rem; accent-color: var(--pine); flex: none; margin: 0; }
.choice:has(input:checked) { border-color: var(--pine); background: var(--tint); }
.choice .title { font-weight: 700; }
.choice .sub { color: var(--muted); font-size: .9375rem; }
/* The screen style choice on More (partials/style; SPEC 2, "Two styles"):
   Modern and High contrast one under the other, below the three text size
   buttons (partials/textsize, css/textsize.css), each a full width button at
   least 56px tall, marked like a chosen .choice when it is the page's style
   (aria-pressed: the chosen border and tint, a check in a filled circle). */
.stylechoices { display: grid; gap: .5rem; }
.stylechoice { width: 100%; display: flex; align-items: center; gap: min(.75rem, 3.2vw); min-height: 3.5rem; margin: 0;
  padding: .75rem min(1rem, 4.2vw); border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
  font: inherit; line-height: 1.25; text-align: left; overflow-wrap: normal; cursor: pointer; }
.stylechoice:hover { background: var(--cream); }
.stylechoice[aria-pressed="true"] { border-color: var(--pine); background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--pine); }
.stylechoice .title { font-weight: 700; }
.stylechoice .sub { color: var(--muted); font-size: 1.0625rem; }
.stylemark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: min(1.6rem, 7.5vw); height: min(1.6rem, 7.5vw);
  border: 2px solid var(--brown-2); border-radius: 50%; background: #fff; }
.stylemark .ico { width: 70%; height: 70%; stroke-width: 3; visibility: hidden; }
.stylechoice[aria-pressed="true"] .stylemark { border-color: var(--pine); background: var(--pine); color: #fff; }
.stylechoice[aria-pressed="true"] .stylemark .ico { visibility: visible; }

.seg { display: flex; flex-wrap: wrap; background: var(--sand); border-radius: .75rem; padding: .2rem; gap: .2rem; }
.seg a, .seg button, .seg label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; border-radius: .6rem;
  font-weight: 700; color: var(--brown); text-decoration: none; border: 0; background: transparent; cursor: pointer; padding: .4rem .5rem; text-align: center; }
.seg a[aria-current], .seg .on, .seg label:has(input:checked) { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
/* Resident, staff and public shells: every choice is a 48px target, and when
   the choices do not fit on one line (large text) they wrap to the next one
   whole, never cut inside a word. */
.shell-app .seg a, .shell-app .seg button, .shell-app .seg label, .shell-public .seg a, .shell-public .seg button, .shell-public .seg label {
  min-height: var(--tap); flex: 1 1 auto; min-width: min-content; overflow-wrap: normal; }

.searchbox { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); border: 1.5px solid var(--line); border-radius: .75rem; background: #fff;
  padding: 0 .875rem; color: var(--muted); }
.searchbox input { border: 0; padding: 0; min-height: calc(var(--tap) - 4px); outline: 0; background: transparent; }
.searchbox:focus-within { outline: 3px solid rgba(10, 155, 219, .35); border-color: var(--dp); }

/* ---------- tables (admin) ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.t th { text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: .65rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: .6rem .75rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.selrow td { background: var(--tint-row); }
table.t tr.selrow a:not(.btn):not(.abtn) { color: var(--pine-d); }
table.t .num { text-align: right; font-variant-numeric: tabular-nums; }
/* position: relative keeps absolutely positioned bits inside the scroll box (an .sr-only label in a header
   cell), so a wide table scrolls here instead of widening the whole page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }

/* ---------- empty states ---------- */
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.empty .ico { width: 2.5rem; height: 2.5rem; color: var(--brown-2); margin-bottom: .5rem; }
.empty h2, .empty h3 { color: var(--ink); margin-bottom: .35rem; }

/* ---------- the presenter's Back to me (SPEC 6.5.4) ---------- */
/* No demo banner (Eric 2026-10-22: "yea make that go away"). A persona
   session a presenter picked shows one quiet Back to me at the top of every
   page, in the page's own colors: muted words, 17px, a 48px target, nothing
   yellow and nothing worded like a warning. */
.presenter-bar .in { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: flex-end; }
.shell-admin .presenter-bar .in { max-width: none; padding: 0 1rem; }
.presenter-bar form { margin: 0; }
.presenter-back { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: 0 .25rem; font: 600 1.0625rem/1.2 var(--sans);
  color: var(--muted); background: none; border: 0; cursor: pointer; }
.presenter-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.presenter-back .ico { width: 1.15em; height: 1.15em; }

/* ================= Resident and staff shells ================= */
/* Text residents read never goes below 17px (CONVENTIONS 7.8): the shared
   small classes grow in the resident, staff and public shells. */
.shell-app .eyebrow, .shell-public .eyebrow, .shell-app .help, .shell-public .help, .shell-app .small, .shell-public .small,
.shell-app .choice .sub, .shell-public .choice .sub, .shell-app .list-item .sub, .shell-public .persona .sub,
.shell-public .public-foot { font-size: 1.0625rem; }
/* Chips, status pills and the staff pill are words residents and staff read
   too (the console keeps its compact sizes). They may wrap at large sizes. */
.shell-app .chip, .shell-public .chip, .shell-app .stat, .shell-public .stat { font-size: 1.0625rem; line-height: 1.15; white-space: normal; max-width: 100%; overflow-wrap: normal; }
/* Large text (Aa, the phone's largest text sizes) never makes a page wider
   than the phone: a word that cannot fit its line breaks inside it, and flex
   and grid items may shrink below their longest word. Layouts stack at large
   sizes so ordinary words always fit (tests/e2e/a11y-sweep.mjs checks both). */
.shell-app, .shell-public { overflow-wrap: anywhere; }
.shell-app { --card-px: min(1.125rem, 4.7vw); font-size: 1.1875rem; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
/* At large text sizes the pictures beside words (avatars, tile icons, round
   buttons) stop growing at a share of the phone's width, and cards and list
   rows keep narrow side padding, so the words get the room. At the normal
   size on a phone nothing changes. :where() keeps the shell out of the
   specificity, so a module's own size for its avatar or icon still applies. */
:where(.shell-app) .avatar { width: min(2.75rem, 12vw); height: min(2.75rem, 12vw); font-size: min(1rem, 4.4vw); }
:where(.shell-app) .avatar-sm { width: min(2rem, 9vw); height: min(2rem, 9vw); font-size: min(.75rem, 3.4vw); }
:where(.shell-app) .avatar-lg { width: min(5rem, 21vw); height: min(5rem, 21vw); font-size: min(1.6rem, 7.5vw); }
:where(.shell-app) .iconbtn { width: max(48px, min(var(--tap), 13vw)); height: max(48px, min(var(--tap), 13vw)); }
.shell-app .list-item { padding-left: min(1rem, 4.2vw); padding-right: min(1rem, 4.2vw); gap: min(.75rem, 3.2vw); }
/* Large text: a list row's words keep at least 6.5rem; what follows them (a
   status pill, a button) goes to the next line rather than squeezing them. */
html.lt .shell-app .list-item, html.lt .shell-app .row { flex-wrap: wrap; row-gap: .35rem; }
html.lt .shell-app .list-item > .grow { flex: 1 1 6.5rem; }
html.lt .shell-app .list-item > .ico:last-child { margin-left: auto; }
/* Huge: a card link's decorative icon tile (Invite a family member, Your
   photos ...) goes, so its words get the row (about 60px more on a 375px
   phone) and a word like "announcements" no longer breaks. */
html.ts-huge .card-link .row > .ti[aria-hidden="true"] { display: none; }
.shell-app .choice { padding-left: min(1rem, 4.2vw); padding-right: min(1rem, 4.2vw); gap: min(.875rem, 3.5vw); }
.shell-app .choice input { width: min(1.4rem, 7vw); height: min(1.4rem, 7vw); }
.shell-app .page { max-width: 40rem; margin: 0 auto; padding: .25rem var(--gutter) 1.5rem; }
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(251, 250, 246, .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent; }
.topbar .in { max-width: 40rem; margin: 0 auto; padding: .625rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 4.25rem; }
.topbar .brand-logo { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: var(--tap); flex: 0 1 auto; text-decoration: none; }
/* The logo and the round buttons grow with the text but never past a share of
   the phone's width, so the top bar stays one row at every text size. */
.topbar .brand-logo img { height: min(2.1rem, 9vw); width: auto; max-width: min(11.5rem, 42vw); min-width: 0; flex: 0 1 auto; object-fit: contain; object-position: left center; display: block; }
.shell-staff .topbar .brand-logo img { max-width: min(9rem, 36vw); height: min(1.8rem, 8vw); }
/* A community without a logo shows its name in the logo's place, never a broken image. */
.topbar .brand-name { min-width: 0; font-family: var(--serif); font-weight: 700; font-size: min(1.25rem, 6vw); line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.topbar .iconbtn { width: max(48px, min(var(--tap), 13vw)); height: max(48px, min(var(--tap), 13vw)); font-size: min(1.125rem, 7.5vw); }
.topbar .iconbtn .ico { width: min(1.4rem, 6.5vw); height: min(1.4rem, 6.5vw); }
.topbar .actions { flex: none; }
.topbar .actions { display: flex; gap: .625rem; align-items: center; }
/* The resident top bar's Back button (partials/backbutton, CONVENTIONS 7.11):
   the first circle, at the upper left, before the logo. It never shrinks; the
   logo is what gives way when the row is tight (360 px and below, Aa, large
   text), and the bell and Aa stay at the right. */
.topbar .topback { flex: none; }
.shell-resident .topbar .actions { margin-left: auto; }
/* The bell's unread count stops growing at 17px, so at Huge it covers a corner of the bell, not half of it (a .8125rem
   count was 35px wide over a 23 to 28px bell). High contrast's own count rule (contrast.css) comes later and wins. */
.shell-resident .topbar .badge { font-size: min(.8125rem, 17px); min-width: 1.6em; height: 1.6em; line-height: calc(1.6em - 4px); padding: 0 .3em; border-radius: .8em; top: -.4em; right: -.4em; }
/* The resident shell's hidden Skip to content link sits just above the page by its own height, not at top: -4rem:
   at the largest text sizes (55 and 62 px roots, and from 50 px at 320 px wide) it wraps taller than 4rem and its
   foot covered the top bar's Back, logo, bell and Aa. Its foot is at the top edge by layout (bottom: 100%), not by
   a transform, which would paint a fractional foot into the first pixel row. Focused, as above. Only the link
   itself, the body's first child: a survey's missed answer is also class "skip" (assessments/review). */
.shell-resident > a.skip { top: auto; bottom: 100%; }
.shell-resident > a.skip:focus { top: .5rem; bottom: auto; }
/* The STAFF badge stops growing at 18px, so at Large and Huge the logo beside
   it keeps its width (at Huge a 27px badge squeezed the logo to 9px words). */
.pill-staff { flex: none; font-weight: 700; font-size: min(1.0625rem, 18px); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; background: var(--forest); color: #fff; padding: .3rem .5rem; border-radius: .45rem; }
.backlink { display: inline-flex; align-items: center; gap: .25rem; min-height: var(--tap); font-weight: 700; color: var(--pine); text-decoration: none; margin-left: -.35rem; }
.backlink .ico { width: 1.6rem; height: 1.6rem; }
.page-title { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.1; margin: .25rem 0 1rem; }

/* The tab bar's labels are 17px and grow with the text like every other word.
   It is a size container (em below = the label size): when four labels no
   longer fit side by side (a small phone, Aa, the largest text sizes) it
   becomes two rows of two, with the icon beside the word while there is room
   and the word alone after that. A row is at least 48px tall and the two rows
   fill --tabbar-h, which grows to fit them. */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); container-type: inline-size; font-size: 1.0625rem; }
.tabbar ul { list-style: none; margin: 0 auto; padding: .375rem 0 0; max-width: 40rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tabbar li { min-width: 0; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 4.25rem; color: #6F635B;
  text-decoration: none; font-weight: 700; font-size: 1em; line-height: 1.1; border-radius: .75rem; padding: .25rem .1rem .4rem; text-align: center;
  overflow-wrap: normal; }
.tabbar a .ico { width: 1.85rem; height: 1.85rem; stroke-width: 1.9; }
/* The unread count after a tab's word (the prospect tab bar's Messages), in the line with it. */
.tabbar .badge { position: static; display: inline-block; margin-left: .3em; vertical-align: .1em; }
html.lt { --tabbar-h: max(4.75rem, 104px); }
@media (max-width: 369px) { :root { --tabbar-h: max(4.75rem, 104px); } }
@container (max-width: 18em) {
  .shell-resident .tabbar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 .25rem; }
  .shell-resident .tabbar a { flex-direction: row; gap: .3em; min-height: max(48px, calc((var(--tabbar-h) - 2px) / 2)); padding: .1rem .25rem; }
  .shell-resident .tabbar a .ico { width: 1.2em; height: 1.2em; }
}
@container (max-width: 21.5em) {
  .shell-staff .tabbar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 .25rem; }
  .shell-staff .tabbar a { flex-direction: row; gap: .3em; min-height: max(48px, calc((var(--tabbar-h) - 2px) / 2)); padding: .1rem .25rem; }
  .shell-staff .tabbar a .ico { width: 1.2em; height: 1.2em; }
}
@container (max-width: 14.5em) {
  .shell-app .tabbar a .ico { display: none; }
}
.tabbar a[aria-current="page"] { color: var(--pine); }
.tabbar a[aria-current="page"] .ico { stroke-width: 2.3; }
.tabbar a:hover { color: var(--ink); background: var(--cream); }

/* Resident Home (design page 3) */
.greeting { padding: .25rem 0 1rem; }
.greeting h1 { font-size: 1.75rem; }
.greeting .when { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .5rem; font-size: 1.0625rem; color: var(--brown); }
.greeting .when .ico { width: 1.5rem; height: 1.5rem; }
.home-slot > * + * { margin-top: .75rem; }
.home-slot:not(:empty) { margin-bottom: .875rem; }
.upnext > .row { flex-wrap: wrap; row-gap: .4rem; }
.upnext .meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--brown); font-size: 1.0625rem; }
.upnext .meta span { display: inline-flex; align-items: center; gap: .35rem; }
.upnext .going { display: flex; align-items: center; gap: .4rem; margin-top: .75rem; font-weight: 700; color: var(--pine); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; margin: 0; padding: 0; list-style: none; font-size: 1.0625rem; }
/* Home's tiles: three across at the normal text size, two with Aa, one at the
   very largest sizes (a column is never narrower than 5.6 labels' em, which
   holds "Documents"). */
.shell-app .tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.6em), 1fr)); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 6.25rem; padding: .75rem .25rem;
  background: #fff; border: 1px solid var(--line-2); border-radius: 1rem; box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 1em; text-align: center; line-height: 1.15; overflow-wrap: normal; }
.tile:hover { color: var(--ink); border-color: var(--line); background: #FFFEFB; }
.ti { width: 2.75rem; height: 2.75rem; border-radius: .8rem; display: grid; place-items: center; flex: none; }
.ti .ico { width: 1.5rem; height: 1.5rem; }
/* In the app the tile icon stops growing at 12vw (the avatar caps above say why). */
:where(.shell-app) .ti { width: min(2.75rem, 12vw); height: min(2.75rem, 12vw); }
:where(.shell-app) .ti .ico { width: min(1.5rem, 6.5vw); height: min(1.5rem, 6.5vw); }
.tone-mint { background: var(--mint); color: var(--pine); } .tone-blue { background: #E6EEF4; color: #2F5F86; }
.tone-amber { background: #FBEBD8; color: #8A5112; } .tone-clay { background: #F1E7E1; color: #7A4B35; }
.tone-violet { background: #EDEAF4; color: #5A4D8A; } .tone-rose { background: #F4E4EC; color: #8A3F63; }
.tone-teal { background: var(--sharp-bg); color: var(--sharp-ink); } .tone-gold { background: #F6EED3; color: #7A5E12; }
.frontdesk { margin-top: .875rem; }

/* Staff Home (design page 6) */
.commchip { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; background: #fff; border: 1.5px solid var(--line); border-radius: 1.2rem;
  padding: .45rem .75rem; min-height: 2.75rem; }
.commchip select { border: 0; min-height: auto; padding: 0 1.25rem 0 0; font-weight: 700; background: transparent; width: auto; font-size: 1.0625rem; }
/* A community picker drawn as a chip: the select fills the chip and is the 48px target. */
.shell-app .commchip:has(> select) { padding-top: 0; padding-bottom: 0; }
.shell-app .commchip > select { min-height: var(--tap); }
/* The staff community switcher: the whole chip is the select's tap area. */
.commswitch { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.commchip-select { position: relative; padding: 0; min-height: var(--tap); }
.commchip-select select { -webkit-appearance: none; appearance: none; min-height: var(--tap); padding: 0 2.25rem 0 2.6rem; border-radius: 1.2rem;
  font-size: 1.0625rem; cursor: pointer; }
.commchip-select .ico { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--brown); width: 1.15rem; height: 1.15rem; }
.commchip-select .ico:first-child { left: .85rem; }
.commchip-select .ico:last-child { right: .8rem; }
/* At Huge a long community name fits the phone: the switcher, its chip and the select shrink to the row and the name
   ends in an ellipsis, so Staff Home never scrolls sideways (the office: "Hollyhock Green" made the page 409px on a
   375 phone; text-sizes.mjs, office-home). */
.commswitch { max-width: 100%; }
.commchip-select, .commchip-select select { max-width: 100%; min-width: 0; }
.commchip-select select { text-overflow: ellipsis; }
.attention { border-left: 5px solid var(--danger); }
.attention .eyebrow { color: var(--danger); }
.qlinks { display: flex; flex-wrap: wrap; gap: .5rem; }
.qlink { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: .5rem .875rem; background: #fff; border: 1px solid var(--line);
  border-radius: .75rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.qlink:hover { background: var(--cream); color: var(--ink); }
.qlink .ico { width: 1rem; height: 1rem; color: var(--brown-2); }
.callb { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--mint); color: var(--pine); flex: none; }
:where(.shell-app) .callb { width: max(48px, min(var(--tap), 13vw)); height: max(48px, min(var(--tap), 13vw)); }

/* More tab */
.section { margin-top: 1.5rem; }
.section > h2 { font-size: 1.375rem; margin-bottom: .625rem; }
.steps { margin: .25rem 0 0; padding-left: 1.4rem; }
.steps li { margin: .35rem 0; }
.me-card { display: flex; gap: .875rem; align-items: center; }

/* ================= Public and sign in ================= */
.shell-public { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: 1.125rem; }
.public-top { padding: 1.25rem var(--gutter) .5rem; }
.public-top .in { max-width: 30rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.public-main { flex: 1; padding: .5rem var(--gutter) 2rem; }
.public-main .in { max-width: 30rem; margin: 0 auto; }
.public-wide .public-main .in, .public-wide .public-top .in { max-width: 56rem; }
.public-foot { padding: 1.25rem var(--gutter) 2rem; color: var(--muted); font-size: .9375rem; text-align: center; text-wrap: balance; }
.public-foot-app, .public-foot-co { display: block; max-width: 30rem; margin: 0 auto; }
.public-foot-co { margin-top: .2rem; font-weight: 700; }
.lm-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); min-width: 0; flex: 1 1 auto; min-height: var(--tap); }
.lm-mark { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: linear-gradient(150deg, var(--mark-a), var(--mark-b)); display: grid; place-items: center; color: #fff; flex: none; }
.lm-mark .ico { width: 1.6rem; height: 1.6rem; }
.lm-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: .005em; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.lm-by { display: block; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: .02em; color: var(--pine); }
.signin-card { padding: 1.5rem 1.25rem; }
.signin-card h1 { font-size: 1.875rem; margin-bottom: .4rem; }
.qr { display: block; width: 15rem; max-width: 100%; height: auto; margin: 0 auto; image-rendering: pixelated; border: 1px solid var(--line); border-radius: .5rem; background: #fff; }
.secret { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; letter-spacing: .05em; background: var(--cream); padding: .5rem .75rem; border-radius: .5rem; word-break: break-all; }

/* ================= Admin console (design page 7) ================= */
.shell-admin { font-size: .9375rem; background: #F7F5F0; }
.admin-wrap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side { background: var(--forest); color: var(--side-ink); padding: 1rem .75rem 1.5rem; display: flex; flex-direction: column; gap: .125rem; }
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.side .brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .4rem 1rem; color: #fff; text-decoration: none; min-width: 0; }
.side .brand .lm-mark { width: 2rem; height: 2rem; border-radius: .6rem; }
.side .brand .lm-mark .ico { width: 1.3rem; height: 1.3rem; }
.side .brand .lm { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; line-height: 1; }
.side .brand small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--side-accent); margin-top: .3rem; }
.viewing { margin: 0 0 .75rem; padding: .5rem .625rem; border-radius: .6rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.viewing label, .viewing .vlabel { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--side-ink); margin-bottom: .2rem; }
.viewing .vrow { display: flex; align-items: center; gap: .4rem; }
.viewing .vrow .ico { width: 1rem; height: 1rem; color: var(--side-muted); }
.viewing select { background: transparent; color: #fff; border: 0; padding: 0; min-height: 1.75rem; font-weight: 700; font-size: 1rem; width: 100%; }
.viewing select option { color: var(--ink); }
.viewing .static { color: #fff; font-weight: 700; }
.viewing .vgo { margin-top: .4rem; min-height: 2rem; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.nav { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: .45rem .65rem; border-radius: .5rem; color: #D2E1CE; text-decoration: none; font-weight: 500; }
.nav .ico { width: 1.1rem; height: 1.1rem; stroke-width: 1.9; opacity: .9; }
.nav:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.nav .navpill { margin-left: auto; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; padding: .2rem .35rem; border-radius: .25rem; background: var(--navpill); color: var(--select); }
/* The sidebar's small labels use the brand's sidebar tokens (AA on the dark
   sidebar for LifeMinded and the show client), never a fixed green. */
.navlbl { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--side-muted); padding: .75rem .65rem .35rem; }
.navsep { height: 1px; background: rgba(255,255,255,.12); margin: .5rem .4rem; }
.side .logged { margin-top: auto; padding: 1rem .65rem 0; font-size: .8125rem; color: var(--side-muted); display: flex; gap: .4rem; align-items: center; }
.side .logged .ico { width: .95rem; height: .95rem; }
.amain { min-width: 0; display: flex; flex-direction: column; }
/* The phone drawer's controls (Menu, the brand in the top bar, Close, the shade): shown under 900px only. */
.amenu, .abrand, .aclose, .aback { display: none; }
.atop { position: sticky; top: 0; z-index: 15; min-height: 3.75rem; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .75rem; padding: .5rem 1.25rem; }
.asearch { flex: 1; max-width: 26rem; display: flex; align-items: center; gap: .5rem; background: #F4F1EB; border-radius: .5rem; padding: 0 .65rem; color: var(--muted); min-height: 2.5rem; }
.asearch input { border: 0; background: transparent; min-height: 2.4rem; padding: 0; font-size: 1rem; outline: 0; }
.asearch:focus-within { outline: 3px solid rgba(10, 155, 219, .35); }
.abtn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .4rem .875rem; border-radius: .5rem; font-weight: 700; font-size: .9375rem;
  text-decoration: none; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.abtn:hover { background: var(--cream); color: var(--ink); }
.abtn.pri, .abtn-primary { background: var(--pine); border-color: var(--pine); color: #fff; }
.abtn.pri:hover, .abtn-primary:hover { background: var(--pine-d); color: #fff; }
.abtn .ico { width: 1rem; height: 1rem; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40; min-width: 14rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem;
  box-shadow: var(--shadow-lg); padding: .35rem; list-style: none; margin: 0; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.5rem; padding: .45rem .65rem; border-radius: .5rem; color: var(--ink);
  text-decoration: none; background: none; border: 0; cursor: pointer; font-size: .9375rem; text-align: left; }
.menu-list a:hover, .menu-list button:hover { background: var(--cream); }
.menu-list .ico { width: 1.05rem; height: 1.05rem; color: var(--brown); }
.me { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .875rem; line-height: 1.2; text-align: left; }
.me small { display: block; font-weight: 500; color: var(--muted); font-size: .8125rem; }
.me summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; border-radius: .5rem; padding: .2rem .35rem; }
.abody { padding: 1.25rem; max-width: 84rem; width: 100%; }
.abody.wide { max-width: none; }
.ahead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ahead h1 { font-size: 1.625rem; }
.ahead .sub { color: var(--muted); margin-top: .25rem; }
.period { display: flex; gap: .5rem; align-items: center; margin: 0; }
.shell-admin .period select { width: auto; min-height: 2.5rem; }
.atop .iconbtn { width: 2.5rem; height: 2.5rem; }
.afoot { margin-top: 2rem; padding: 1rem 1.25rem 1.5rem; color: var(--muted); font-size: .875rem; display: flex; gap: .4rem; align-items: center; border-top: 1px solid var(--line); }
.afoot .ico { width: 1rem; height: 1rem; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: .75rem; }
.panel-pad { padding: 1rem; }
.phead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line-2); font-weight: 700; }
.phead a { font-size: .875rem; font-weight: 700; text-decoration: none; }
.kpi { padding: 1rem 1.1rem; }
.kpi .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi .val { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; margin: .6rem 0 .45rem; }
.kpi .sub { font-size: .875rem; color: var(--brown); margin-top: .45rem; }
.kpi .up { color: var(--pine); font-weight: 700; }
.kpi .down { color: var(--danger); font-weight: 700; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dash-row { display: grid; grid-template-columns: 1.45fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.dash-panels { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.nlist { list-style: none; margin: 0; padding: 0; }
.nlist li { display: flex; gap: .65rem; align-items: center; padding: .65rem 1rem; border-top: 1px solid var(--line-2); }
.nlist li:first-child { border-top: 0; }
.nlist .ic { width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: grid; place-items: center; flex: none; }
.nlist .ic .ico { width: 1rem; height: 1rem; }
.nlist a { font-weight: 700; white-space: nowrap; text-decoration: none; }
.dash-more { border-top: 1px solid var(--line-2); }
.dash-more > summary { cursor: pointer; padding: .65rem 1rem; font-weight: 700; color: var(--pine); min-height: 2.75rem; display: flex; align-items: center; }
.dash-more > summary:hover { text-decoration: underline; }
.dash-more[open] > summary { border-bottom: 1px solid var(--line-2); }
.tone-warn { background: #FBEBD2; color: #8A5412; } .tone-info { background: var(--info-bg); color: #1E6A91; } .tone-neutral { background: #EEEAE3; color: #6B5F57; }
.tone-ok { background: var(--ok-bg); color: #3C6B1A; } .tone-danger { background: var(--danger-bg); color: #9A3523; }
.erow { display: grid; grid-template-columns: 1fr 7rem; gap: .75rem; align-items: center; padding: .65rem 1rem; border-top: 1px solid var(--line-2); }
.erow:first-child { border-top: 0; }
.erow .nm { font-weight: 700; }
.erow .sb { font-size: .8125rem; color: var(--muted); margin-top: .15rem; }
.erow .cap { font-size: .8125rem; font-weight: 700; color: var(--brown); text-align: right; margin-bottom: .3rem; }
.admin-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; position: relative; }
.admin-tabs a { padding: .65rem .875rem; text-decoration: none; color: var(--brown); font-weight: 700; border-bottom: 3px solid transparent; white-space: nowrap; }
.admin-tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--pine); }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.toolbar .grow { flex: 1; }
.shell-admin .field > label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.shell-admin input[type=text], .shell-admin input[type=email], .shell-admin input[type=tel], .shell-admin input[type=number], .shell-admin input[type=search],
.shell-admin input[type=url], .shell-admin input[type=date], .shell-admin input[type=time], .shell-admin input[type=datetime-local], .shell-admin select, .shell-admin textarea {
  min-height: 2.5rem; font-size: 1rem; padding: .45rem .7rem; }
.shell-admin .btn { min-height: 2.5rem; font-size: .9375rem; padding: .45rem 1rem; }
.idle-warn { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff; border-radius: .75rem;
  padding: .75rem 1rem; display: flex; gap: .75rem; align-items: center; box-shadow: var(--shadow-lg); max-width: calc(100% - 2rem); }
.idle-warn .btn { min-height: 2.25rem; }

/* ================= Print layouts ================= */
.shell-print { background: #fff; color: #000; font-size: 12pt; }
.print-page { padding: .4in; }
.print-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; margin-bottom: .75rem; }
.print-head img { height: .55in; width: auto; }
.print-head h1 { font-size: 22pt; }
.print-foot { margin-top: .5rem; font-size: 9pt; color: #555; display: flex; justify-content: space-between; }
.print-actions { position: sticky; top: 0; background: var(--cream); padding: .5rem 1rem; display: flex; gap: .5rem; align-items: center; border-bottom: 1px solid var(--line); }
@media print {
  .no-print, .print-actions, .presenter-bar, .tabbar, .topbar, .side, .atop, .afoot, .idle-warn { display: none !important; }
  body { background: #fff !important; padding: 0 !important; }
  .shell-app .page, .abody { max-width: none; padding: 0; }
  .admin-wrap { display: block; }
  a { color: inherit; text-decoration: none; }
  .card, .panel { box-shadow: none; break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page landscape { size: letter landscape; margin: .4in; }
@page portrait { size: letter portrait; margin: .5in; }
.print-landscape { page: landscape; }
.print-portrait { page: portrait; }

/* ================= Lobby screens (1920x1080) ================= */
.shell-screen { width: 1920px; height: 1080px; overflow: hidden; background: var(--forest); color: #fff; font-size: 2rem; }
.screen { width: 1920px; height: 1080px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; padding: 3rem 3.5rem; }
.screen h1 { font-size: 3.5rem; color: #fff; }
.screen .panel { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; border-radius: 1.25rem; padding: 1.5rem 1.75rem; }

/* ================= Device pages (/tv: in room TV, kiosks) ================= */
/* A 10 foot layout for interactive device pages: big type, big focus ring,
   no fixed size and no automatic refresh (layout "device"). Passive lobby
   screens use the 1920x1080 "screen" layout above. */
.shell-device { min-height: 100vh; min-height: 100dvh; background: var(--paper); font-size: clamp(1.25rem, .5rem + 1.5vw, 2.25rem); }
.device-main { padding: 2rem 3rem; }
.shell-device :focus-visible { outline-width: 5px; outline-offset: 4px; }

/* ================= Responsive ================= */
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row, .dash-panels { grid-template-columns: minmax(0, 1fr); }
}
/* Admin console under 900px (phones and small tablets at the booth): the sidebar is a drawer behind the top
   bar's Menu button, the top bar is two rows (Menu, brand, bell, account; then search and New), and nothing on
   the page is wider than the screen. Tables scroll inside .table-wrap (or their own box), forms and two column
   layouts stack, and module pages keep to minmax(0, 1fr) columns. admin.js opens and closes the drawer
   (body.nav-open); without scripts the Menu link opens it through :target. */
@media (max-width: 900px) {
  .admin-wrap { display: block; min-height: 0; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(20rem, 86vw); overflow-y: auto; overscroll-behavior: contain;
    padding: .75rem .75rem 2rem; padding-top: max(.75rem, env(safe-area-inset-top)); transform: translateX(-102%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s; box-shadow: var(--shadow-lg); }
  .nav-open .side, body:not(.drawer-js) .side:target { transform: none; visibility: visible; transition: transform .2s ease; }
  .aback { position: fixed; inset: 0; z-index: 65; background: rgba(20, 16, 12, .45); }
  .nav-open .aback, body:not(.drawer-js) .side:target + .aback { display: block; }
  .nav-open { overflow: hidden; }
  .side .brand { padding: .25rem .4rem .75rem; }
  .aclose { display: inline-flex; align-items: center; gap: .35rem; flex: none; min-height: 2.75rem; padding: .35rem .75rem; border-radius: .6rem;
    color: #fff; text-decoration: none; font-weight: 700; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
  .aclose:hover { color: #fff; background: rgba(255,255,255,.2); }
  .aclose .ico { width: 1.1rem; height: 1.1rem; }
  .side .nav { min-height: 2.75rem; }
  .viewing select { min-height: 2.5rem; }

  .atop { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "menu brand brand me" "search search bell new";
    align-items: center; gap: .5rem; padding: .5rem 1rem; padding-top: max(.5rem, env(safe-area-inset-top)); }
  .atop:not(:has(.anew)) { grid-template-areas: "menu brand brand me" "search search search bell"; }
  .atop > .grow { display: none; }
  .amenu { grid-area: menu; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem .8rem; border-radius: .6rem;
    border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; }
  .amenu:hover { background: var(--cream); color: var(--ink); }
  .amenu .ico { width: 1.25rem; height: 1.25rem; }
  .abrand { grid-area: brand; display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
  .abrand .lm-mark { width: 2rem; height: 2rem; border-radius: .6rem; }
  .abrand .lm-mark .ico { width: 1.3rem; height: 1.3rem; }
  .abrand .lm { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .atop > .iconbtn { grid-area: bell; width: 2.75rem; height: 2.75rem; }
  .atop > .me { grid-area: me; justify-self: end; }
  .atop > .anew { grid-area: new; justify-self: end; }
  .atop .abtn, .me summary { min-height: 2.75rem; }
  .asearch { grid-area: search; max-width: none; min-width: 0; min-height: 2.75rem; }
  .asearch input { min-height: 2.65rem; min-width: 0; }
  .menu-list { max-width: calc(100vw - 2rem); }

  .abody { padding: 1rem; }
  /* Panels and cards inside module grids may shrink to the column: a wide table in one scrolls in its
     .table-wrap instead of stretching the column (and the page) to the table's width. */
  .abody .panel, .abody .card, .abody form, .abody fieldset, .abody section { min-width: 0; }
  .afoot { margin-top: 1rem; padding: 1rem; }
  .ahead { align-items: flex-start; }
  .ahead > * { min-width: 0; max-width: 100%; }
  .toolbar > * { min-width: 0; max-width: 100%; }
  .abody .abtn { white-space: normal; max-width: 100%; }
  /* Any console table not already in a .table-wrap scrolls inside its own box instead of widening the page. */
  .abody table.t:not(.table-wrap table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .abody .table-wrap { max-width: 100%; }
  .abody pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .abody img, .abody video, .abody iframe { max-width: 100%; }
}
/* Print pages opened on a phone (rosters, letters, flyers) fit the screen; paper is unchanged. */
@media screen and (max-width: 600px) {
  .print-page { padding: 1rem; }
  .print-head { flex-wrap: wrap; }
  .print-head img { max-width: 100%; height: auto; max-height: .55in; }
  .print-head > * { min-width: 0; }
  .print-actions { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell-admin .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .me .who { display: none; }
  .shell-admin .period { flex-wrap: wrap; }
  /* Rows of a panel head or list wrap their last items under the first when a larger text size needs it. */
  .shell-admin .phead, .shell-admin .nlist li { flex-wrap: wrap; }
  .shell-admin .phead > * { min-width: 0; }
  .shell-admin .period select { max-width: 100%; }
}
@media (max-width: 360px) {
  .tiles { gap: .5rem; }
  .tile { min-height: 5.75rem; }
}
@media (min-width: 700px) {
  .shell-app .page { padding-top: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --muted: #4E4038; --line: #BDB2A4; --line-2: #D6CEC2; }
}