/* The office skin (CEO, Oct 21, 2026: "Has the UI/UX been upgraded to match a professional AMS?"; design/office-app-critique.html).
   A work tool is a quiet surface the data sits on: one white ground with a hairline between rail and page, one sans-serif at six sizes
   (Newsreader for the page title only), 36px controls with 8px corners, cards without shadows, tables that are rows of text. It applies to
   the office view only (body.skin), at every width; the caregiver and family apps keep their own styles. Coral stays for urgent. */
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/figtree-400.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/figtree-500.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/figtree-600.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/figtree-700.woff2) format('woff2'); }

body.skin {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F1EC; --surface-3: #EBE8E1; --faint: #F8F7F4; --ground-2: #F3F1EC; --ground-3: #F3F1EC; --tint: #F3F1EC;
  --line: #EBE8E1; --line-2: #D9D4C9; --card-line: #EBE8E1; --ink: #17282A; --ink-2: #3E5451; --ink-3: #6B7A78; --ink-4: #8A9592;
  --gold-soft: #8A9592; --bronze-ink: #8A9592; --gold: #D4A24F;
  --wash: #E6EEEA; --mist: #F3F1EC; --teal-line: #C9D9D4;
  --shadow-sm: none; --shadow: none; --shadow-lift: 0 8px 24px -12px rgba(23, 40, 42, .25); --ring: 0 0 0 1px var(--line);
  --r: 8px; --r-lg: 12px; --r-xl: 12px; --r-2xl: 12px; --head-h: 56px;
  --f-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #fff; color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5;
}
body.skin :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- type: six sizes ---------- */
body.skin h1 { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
body.skin h2, body.skin h3, body.skin .card-h h2, body.skin .card.tb .card-h h2 { font-family: var(--f-ui); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); letter-spacing: 0; }
body.skin .card-h h2::after, body.skin .sect-h h2::after { display: none; }
body.skin .card-h h2 .hic, body.skin .card-h h2 > .i { color: var(--ink-4); width: 1em; height: 1em; }
body.skin .pm-sh { font: 600 14px/1.3 var(--f-ui); color: var(--ink-2); letter-spacing: 0; text-transform: none; }
body.skin .cap, body.skin .bn-k, body.skin .stat-l, body.skin .rail-h, body.skin .ams-more .rail-h, body.skin .next-k, body.skin .ov-adds-l, body.skin .wm-s { font: 700 11px/1.3 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
body.skin .muted { color: var(--ink-3); }
body.skin .small, body.skin small { font-size: 13px; }
body.skin .row-t strong, body.skin .newsrow strong { font-size: 14px; }

/* ---------- the page header: where am I, then the data ---------- */
body.skin .pagehead, body.skin .banner { padding: 12px 0 4px; margin-bottom: 12px; gap: 2px; }
body.skin .banner .bn-t { display: grid; gap: 2px; }
body.skin .pagehead h1 { font-size: 24px; color: var(--ink); line-height: 1.2; }
body.skin .pagehead p, body.skin .banner p { font-size: 13px; color: var(--ink-3); max-width: 72ch; }
body.skin .banner .bn-k { margin-bottom: 2px; }

/* ---------- controls: 36px, 8px corners ---------- */
body.skin .btn { min-height: 36px; padding: 0 14px; border-radius: 8px; font: 600 13px/1 var(--f-ui); border-width: 1px; gap: 6px; letter-spacing: 0; box-shadow: none; }
body.skin .btn.sm { min-height: 32px; padding: 0 11px; font-size: 13px; }
body.skin .btn.grow { min-height: 36px; }
body.skin .btn .i { width: .95em; height: .95em; }
body.skin .btn.quiet .i, body.skin .btn.ghost .i, body.skin .btn.sm.quiet .i { display: none; }
body.skin .btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
body.skin .btn.quiet { background: #fff; border: 1px solid var(--line-2); color: var(--ink); }
body.skin .btn.ghost { background: none; border: 1px solid transparent; color: var(--ink-2); }
body.skin .btn.ghost:hover, body.skin .btn.quiet:hover { background: var(--tint); }
body.skin .btn.gold { background: var(--primary); color: #fff; border-color: var(--primary); }
body.skin .btn.danger { background: #fff; color: #B4442E; border-color: #E8B8AE; }
body.skin .icon-btn { width: 36px; height: 36px; min-height: 36px; border-radius: 8px; }
body.skin .link { font-size: 13px; min-height: 28px; }
body.skin .fld > span { font: 600 13px/1.3 var(--f-ui); color: var(--ink-2); }
body.skin .fld input[type="text"], body.skin .fld input[type="date"], body.skin .fld input[type="search"], body.skin .fld input[type="tel"], body.skin .fld input[type="email"], body.skin .fld input[type="time"], body.skin .fld input[type="number"], body.skin .fld input[type="url"], body.skin .fld input:not([type]), body.skin .fld select, body.skin .fld textarea, body.skin .pf-ta, body.skin .search input, body.skin .msearch input {
  min-height: 36px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; box-shadow: none; }
body.skin .fld textarea, body.skin .pf-ta { min-height: 72px; line-height: 1.45; }
body.skin .fld input:focus, body.skin .fld select:focus, body.skin .fld textarea:focus, body.skin .pf-ta:focus { border-color: var(--primary); outline: 2px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: 0; }
body.skin .fchip, body.skin .chip-btn, body.skin .askchips button { min-height: 32px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; font: 600 13px/1 var(--f-ui); color: var(--ink-2); box-shadow: none; }
body.skin .fchip[aria-pressed="true"], body.skin .chip-btn[aria-pressed="true"], body.skin .pq-b[aria-pressed="true"] { background: var(--wash); border-color: var(--teal-line); color: var(--primary); }
body.skin .fchip[aria-pressed="true"] .i { color: var(--primary); }
body.skin .pq-b { min-height: 32px; border-radius: 6px; font-size: 13px; }

/* ---------- tabs: text with one underline, in one row ---------- */
body.skin .tabs { background: none; padding: 0; margin: 4px 0 16px; border-radius: 0; border-bottom: 1px solid var(--line); gap: 4px; width: 100%; max-width: 100%; }
body.skin .tabs button { min-height: 40px; padding: 0 10px; border-radius: 0; font: 500 14px/1 var(--f-ui); color: var(--ink-3); box-shadow: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
body.skin .tabs button .i { display: none; }
body.skin .tabs button:hover { color: var(--ink); background: none; }
body.skin .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--primary); background: none; box-shadow: none; font-weight: 600; }
body.skin .hub-filters { gap: 6px; margin: 8px 0 12px; }
body.skin .chips.scroll { padding-bottom: 2px; }

/* ---------- cards, stats, notices ---------- */
body.skin .card { border-radius: 12px; border: 1px solid var(--line); box-shadow: none; padding: 16px; margin-bottom: 16px; background: #fff; }
body.skin .card.tb, body.skin .card.fin { box-shadow: none; }
body.skin .card-h { margin-bottom: 10px; align-items: center; }
body.skin .glance { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; margin-bottom: 16px; }
body.skin .stat { background: #fff; box-shadow: none; border-radius: 0; border-left: 1px solid var(--line); padding: 12px 16px; gap: 2px; }
body.skin .stat:first-child { border-left: 0; }
body.skin .stat strong { font: 600 22px/1.2 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
body.skin .stat small { font-size: 12px; color: var(--ink-3); }
body.skin .stat.attn { background: #fff; box-shadow: none; }
body.skin .stat.attn strong { color: #B4442E; }
body.skin .stat.attn small { color: #B4442E; font-weight: 600; }
body.skin button.stat:hover { background: var(--tint); box-shadow: none; }
body.skin .notice { border: 1px solid var(--line); border-radius: 8px; background: none; padding: 10px 12px; gap: 10px; font-size: 14px; }
body.skin .notice.warn { background: #FFF8EC; border-color: #F0DDB5; }
body.skin .notice.bad { background: #FFF1EE; border-color: #F0C9BE; }
body.skin .stat3, body.skin .stats3 { box-shadow: none; }
body.skin .empty { text-align: center; color: var(--ink-3); font-size: 14px; padding: 36px 0; }
body.skin .empty.small { padding: 8px 0; text-align: left; }
body.skin .empty-s { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; text-align: center; }
body.skin .empty-s .es-i { width: 40px; height: 40px; border-radius: 10px; background: var(--tint); display: grid; place-items: center; color: var(--ink-3); margin-bottom: 4px; }
body.skin .empty-s b { font: 600 14px/1.3 var(--f-ui); color: var(--ink); }
body.skin .empty-s small { font-size: 13px; color: var(--ink-3); }
body.skin .empty-s .btn { margin-top: 8px; }

/* ---------- chips: counts and tags; status reads as a dot and a word in tables ---------- */
body.skin .chip { border-radius: 6px; padding: 2px 8px; font: 600 12px/1.5 var(--f-ui); letter-spacing: 0; }
body.skin .chip.bad { background: #FDE3DC; color: #A33A2A; }
body.skin .chip.ok { background: #DDF1E6; color: #1B7A4E; }
body.skin .chip.gold, body.skin .chip.warn { background: #FFF0D6; color: #8A5A00; }
body.skin .chip.neutral { background: var(--tint); color: var(--ink-2); }
body.skin .ts .chip { background: none; padding: 0; font: 600 13px/1.4 var(--f-ui); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
body.skin .ts .chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; }
body.skin .ts .chip.ok { color: #1B7A4E; } body.skin .ts .chip.ok::before { background: #1B7A4E; }
body.skin .ts .chip.bad { color: #A33A2A; } body.skin .ts .chip.bad::before { background: #D9694F; }
body.skin .ts .chip.gold, body.skin .ts .chip.warn { color: #8A5A00; } body.skin .ts .chip.gold::before, body.skin .ts .chip.warn::before { background: #D4A24F; }

/* ---------- tables and lists: rows of text with hairlines ---------- */
body.skin .tscroll { box-shadow: none; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
body.skin .card > .tscroll { border: 0; border-radius: 0; margin: 0 -16px; width: calc(100% + 32px); }
body.skin .ts { min-width: 0; font-size: 14px; }
body.skin .ts th, body.skin .ts td { padding: 11px 14px; border-top: 1px solid var(--line); white-space: normal; vertical-align: middle; }
body.skin .ts thead th { background: none; border-top: 0; border-bottom: 1px solid var(--line); font: 700 11px/1.3 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
body.skin .ts tbody tr:hover td, body.skin .ts tbody tr:hover th { background: var(--faint); }
body.skin .ts td.num, body.skin .ts th.num { text-align: right; font-variant-numeric: tabular-nums; }
body.skin .ts .btn.sm { min-height: 28px; padding: 0 9px; }
body.skin .tb tr.tb-hot td { background: #FFF6F3; }
body.skin .tbl-head > div { background: none; color: var(--ink-4); font: 700 11px/1.3 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; }
body.skin .rows > li + li { border-top: 1px solid var(--line); }
body.skin .row { min-height: 44px; padding: 8px 8px; margin-inline: -8px; width: calc(100% + 16px); gap: 12px; border-radius: 8px; }
body.skin button.row:hover { background: var(--faint); }
body.skin .av { width: 32px; height: 32px; font-size: 12px; }
body.skin .av.sm { width: 28px; height: 28px; font-size: 11px; }
body.skin .nrow { min-height: 36px; padding: 6px 0; }
body.skin .ov-row { min-height: 36px; }
body.skin .ov-pen { opacity: 0; border: 0; background: none; color: var(--ink-3); font: 600 13px/1 var(--f-ui); padding: 4px 8px; border-radius: 6px; }
body.skin .ov-pen .i, body.skin .ov-pen svg { display: none; }
body.skin .ov-row:hover .ov-pen, body.skin .ov-row:focus-within .ov-pen, body.skin .ov-pen:focus-visible { opacity: 1; }
body.skin .ov-row.on { background: var(--faint); border-radius: 8px; }
body.skin details.ov-more { margin-top: 6px; }
body.skin details.ov-more > summary { cursor: pointer; font: 600 13px/1.4 var(--f-ui); color: var(--ink-3); list-style: none; padding: 6px 0; }
body.skin details.ov-more > summary::-webkit-details-marker { display: none; }
body.skin .ov-adds { display: grid; gap: 0; margin-top: 4px; }
body.skin .ov-adds .ov-add { display: flex; justify-content: space-between; align-items: center; min-height: 36px; padding: 6px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font: 400 14px/1.3 var(--f-body); color: var(--ink); width: 100%; }
body.skin .ov-adds .ov-add em { font: 600 13px/1 var(--f-ui); font-style: normal; color: var(--ink-4); }
body.skin .ov-adds .ov-add:hover em { color: var(--primary); }
body.skin .ov-adds .ov-add .i { display: none; }

/* ---------- the shell: white rail, hairline, flat top bar ---------- */
body.skin .topbar { background: #fff; border-bottom: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.skin .topbar-in { min-height: 56px; }
body.skin .callbtn { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); min-height: 36px; min-width: 36px; border-radius: 8px; font: 600 13px/1 var(--f-ui); }
body.skin .callbtn:hover { background: var(--tint); }
body.skin .askbtn, body.skin .viewas-btn, body.skin .me-btn, body.skin .msgbtn, body.skin .bell { border-radius: 8px; min-height: 36px; box-shadow: none; }
body.skin .viewas-btn { border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: 600 13px/1 var(--f-ui); }
body.skin .cmd { min-height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; box-shadow: none; font-size: 14px; }
body.skin .cmd:hover { box-shadow: none; border-color: var(--ink-4); }
body.skin .cmd kbd { border-radius: 4px; }
@media (min-width: 900px) {
  body.skin .shell { grid-template-columns: 220px minmax(0, 1fr); }
  body.skin .rail { background: #fff; border-right: 1px solid var(--line); box-shadow: none; padding: 14px 10px 20px; top: calc(56px + env(safe-area-inset-top, 0px)); height: calc(100vh - 56px); }
  body.skin .rail-nav { gap: 1px; }
  body.skin .rail-h { padding: 14px 10px 4px; color: var(--ink-4); }
  body.skin .rail .nv { min-height: 36px; padding: 0 10px; gap: 10px; border-radius: 8px; font: 500 14px/1 var(--f-ui); color: var(--ink-2); }
  body.skin .rail .nv-i { width: 20px; height: 20px; border-radius: 0; background: none; color: var(--ink-4); font-size: 1rem; }
  body.skin .rail .nv:hover { background: var(--faint); color: var(--ink); }
  body.skin .rail .nv[aria-current="page"] { background: #E6EEEA; color: var(--primary); box-shadow: none; font-weight: 600; }
  body.skin .rail .nv[aria-current="page"] .nv-i { background: none; color: var(--primary); }
  body.skin .rail .nv-badge { background: #D9694F; color: #fff; border-radius: 10px; font: 700 11px/1 var(--f-ui); padding: 3px 6px; }
  body.skin .rail-more { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
  body.skin .rail-foot { border-top: 1px solid var(--line); }
  body.skin .rail-foot .me-name, body.skin .rail-foot small { color: var(--ink-3); }
  body.skin .msearch input { background: var(--faint); border: 1px solid var(--line); color: var(--ink); }
  body.skin .msearch input::placeholder { color: var(--ink-4); }
  body.skin .msearch kbd { color: var(--ink-4); border-color: var(--line-2); }
  body.skin .main > .gut { max-width: 1240px; padding-top: 4px; }
  body.skin .card { padding: 20px; }
  body.skin .card > .tscroll { margin: 0 -20px; width: calc(100% + 40px); }
  body.skin { font-size: 14px; }
  body.skin .cols { gap: 16px; }
}
/* phone: the office keeps 44px targets */
@media (max-width: 899px) {
  body.skin .btn, body.skin .fchip, body.skin .fld input, body.skin .fld select { min-height: 44px; }
  body.skin .btn.sm, body.skin .fchip { min-height: 40px; }
  body.skin .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.skin .glance .stat:nth-child(2n + 1) { border-left: 0; } body.skin .glance .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- feedback: a small toast that does not cover the data; skeleton rows while data loads ---------- */
body.skin #toast { left: 20px; bottom: 20px; translate: 0 10px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 13px/1.3 var(--f-ui); padding: 10px 14px; box-shadow: var(--shadow-lift); max-width: 360px; }
body.skin #toast.on { translate: 0 0; }
@media (max-width: 899px) { body.skin #toast { left: 50%; translate: -50% 10px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } body.skin #toast.on { translate: -50% 0; } }
body.skin .skel { display: grid; gap: 10px; padding: 8px 0; }
body.skin .skel i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--tint) 25%, #faf9f7 50%, var(--tint) 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
body.skin .upd-bar { border-radius: 8px; }
/* leftovers from the brand skin */
body.skin .card-h::after { display: none; }
body.skin .card-h { position: static; border-bottom: 0; padding-bottom: 0; }
body.skin .tb thead th, body.skin .tb thead th:first-child { background: none !important; }
body.skin .stat.attn { border-left: 1px solid var(--line); box-shadow: none !important; }
body.skin .stat.attn:first-child { border-left: 0; }
@media (min-width: 900px) { body.skin .rail-nav.rail-foot { background: #fff; border-top: 1px solid var(--line); margin: 12px -10px -20px; padding: 8px 10px 14px; }
  body.skin .rail-foot .nv, body.skin .rail-foot .me-name { color: var(--ink-2); } body.skin .rail-foot .av { background: var(--wash); color: var(--primary); } }
body.skin .db-bar p.fin-top { border-radius: 8px; }
body.skin .search input { padding-left: 36px; }
body.skin .search .i { color: var(--ink-4); }
/* the brand on the white surface: the word-mark in the top bar, teal where it carries meaning */
body.skin .brand { min-height: 36px; }
body.skin .logo-img.hdr { height: 34px; }
@media (min-width: 900px) { body.skin .logo-img.hdr { height: 38px; } }
body.skin a, body.skin .link { color: var(--primary); }
body.skin .rail .nv[aria-current="page"] { box-shadow: inset 3px 0 0 var(--primary); }
/* legibility (CEO, Oct 21, 2026: "the font is too thin"): darker ink, a touch more weight, nothing lighter than mid-grey */
body.skin { color: #15302D; font-weight: 450; font-size: 15px; --ink: #15302D; --ink-2: #334744; --ink-3: #5F6368; --ink-4: #6B7280; }
@media (min-width: 900px) { body.skin { font-size: 15px; } }
@media (max-width: 899px) { body.skin { font-size: 16px; } }
body.skin h2, body.skin h3, body.skin .card-h h2, body.skin .row-t strong, body.skin .fld > span, body.skin .btn, body.skin .fchip, body.skin .rail .nv[aria-current="page"], body.skin .tabs button[aria-selected="true"], body.skin .stat strong, body.skin .empty-s b { font-weight: 650; }
body.skin .rail .nv, body.skin .tabs button { font-weight: 550; }
body.skin .muted, body.skin small, body.skin .small, body.skin .row-t small, body.skin .stat small, body.skin .pagehead p, body.skin .banner p { color: #5F6368; font-weight: 450; }
body.skin .cap, body.skin .bn-k, body.skin .stat-l, body.skin .rail-h, body.skin .ts thead th { color: #5F6368; }
body.skin .ts { font-size: 15px; }
body.skin .ts td, body.skin .ts th { color: #15302D; }
body.skin .row-t strong, body.skin .ts td, body.skin .nrow .nv, body.skin .ov-row .nv { font-weight: 500; }
body.skin { font-weight: 500; }
body.skin h2, body.skin h3, body.skin .card-h h2, body.skin .stat strong, body.skin .empty-s b, body.skin .row-t strong, body.skin .fld > span, body.skin .btn, body.skin .fchip, body.skin .tabs button[aria-selected="true"], body.skin .rail .nv[aria-current="page"] { font-weight: 700; }
body.skin .rail .nv, body.skin .tabs button, body.skin .muted, body.skin small, body.skin .small, body.skin .row-t small, body.skin .pagehead p, body.skin .banner p { font-weight: 500; }
body.skin .ts td, body.skin .nrow .nv, body.skin .ov-row .nv { font-weight: 500; }
body.skin .cap, body.skin .bn-k, body.skin .stat-l, body.skin .rail-h, body.skin .ts thead th, body.skin .ams-more .rail-h { font-weight: 700; color: #5F6368; }
/* weight that every rule inherits unless it asks for more (a lot of older rules use the font shorthand with 400) */
body.skin :where(p, span, small, li, td, th, label, a, div, dd, dt, input, select, textarea, summary) { font-weight: 500; }
body.skin :where(.muted, small, .small, .stat small, .row-t small, .pagehead p, .banner p, .fin-x small, .nl small, .ms-how, .sub, .hint) { color: #5F6368; }
/* tabs past seven sit under More */
body.skin .tabs-more { position: relative; }
body.skin .tabs-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; font: 500 14px/1 var(--f-ui); color: var(--ink-3); cursor: pointer; }
body.skin .tabs-more > summary::-webkit-details-marker { display: none; }
body.skin .tabs-more > summary .i { display: inline; width: .8em; height: .8em; }
body.skin .tabs-menu { position: absolute; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift); padding: 6px; display: grid; min-width: 180px; }
body.skin .tabs-menu button { justify-content: flex-start; min-height: 36px; border: 0 !important; border-radius: 8px; width: 100%; font-weight: 500; }
body.skin .tabs-menu button:hover { background: var(--faint); }
body.skin .tabs-menu button[aria-selected="true"] { background: var(--wash); color: var(--primary); }
/* first paint: skeleton rows until the data is here */
.skel { display: grid; gap: 12px; padding: 24px 0; max-width: 720px; }
.skel i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #f3f1ec 25%, #faf9f7 50%, #f3f1ec 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }

/* Dark panels keep their light text. The skin's heading and caption colours were leaking into the caregiver Today hero,
   the onboarding summary and the profile preview card (CEO, Oct 21, 2026: "so many bugs, even the dashboard"). */
body.skin :is(.hero, .next, .mission, .resume, .onb-sum, .pf-hero, .bd-hero) :is(h1, h2, h3, h4, p, small, strong, .cap, .next-k, .muted, .stat-l, .bn-k, .small) { color: inherit; }
body.skin .hero-t h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); letter-spacing: -.02em; line-height: 1.08; }
body.skin :is(.next, .resume) h2, body.skin .mission h2, body.skin .onb-sum-t strong { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.2; }
body.skin .next-k { color: var(--gold-soft); }
body.skin :is(.hero-line, .next-s, .next-f, .onb-sum-t .muted, .pf-hero p, .pf-hero small) { color: rgba(254, 249, 243, .84); }
body.skin .pf-hero h3 { color: #fff; font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; }
/* #main is focused after every route change so screen readers land on the new page; the skin's focus ring must not draw a
   line under the content (it showed as a dark rule under short pages like My pay and Open visits) */
body.skin #main:focus, body.skin #main:focus-visible { outline: 0; }
body.skin .bd-hero :is(h2, p, strong, span, small) { color: inherit; }
body.skin .bd-hero h2 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 500; }
/* the tab strip clipped its own More menu (app.css gives .tabs overflow-x: auto), so Intake and the other tabs under More
   could not be reached (CEO, Oct 21, 2026) */
body.skin .tabs { overflow: visible; flex-wrap: wrap; }
body.skin .tabs-more[open] > summary { color: var(--ink); }

/* ---------- dimension (CEO, Oct 21, 2026: "everything is barely noticeable, too much on the base, just white text, nothing is
   separate; add colors or dimension when you can") ----------
   The page is a soft off-white; cards are white with a border and a small shadow, 16px apart; anything that needs a tap sits on
   a tinted surface with an accent bar and a bold title; secondary buttons are outlined; status pills keep their colour. */
body.skin { background: #F6F4EF; }
body.skin .main, body.skin .shell { background: #F6F4EF; }
body.skin .topbar { background: #fff; }
body.skin .card { background: #fff; border: 1px solid #E4E0D7; box-shadow: 0 1px 2px rgba(23, 40, 42, .06), 0 4px 14px -8px rgba(23, 40, 42, .12); margin-bottom: 18px; }
body.skin .glance { background: #fff; border-color: #E4E0D7; box-shadow: 0 1px 2px rgba(23, 40, 42, .06), 0 4px 14px -8px rgba(23, 40, 42, .12); margin-bottom: 18px; }
body.skin .glance .stat { background: #fff; }
body.skin .glance .stat.attn { background: #FFF6F3; }
body.skin .card-h { margin-bottom: 12px; }
body.skin .card-h h2, body.skin .sect-h h2 { font-size: 17px; font-weight: 700; color: var(--ink); }
body.skin .card-h h2 > .i, body.skin .card-h h2 .hic { color: var(--primary); }
body.skin .sect-h, body.skin h2.sect { margin-top: 28px; }
body.skin .pagehead h1 { font-size: 26px; }
/* action cards: a request, an offer, a hold, an alert; the person must do something here */
body.skin .card.ask-card, body.skin .card.needs, body.skin .card.offer-card, body.skin .card.alert-card, body.skin .card.rdy { background: #FFFBF2; border-color: #F0DDB5; border-left: 4px solid var(--gold); }
body.skin .card.ask-card .card-h h2, body.skin .card.needs .card-h h2, body.skin .card.offer-card .card-h h2 { color: #6B4A00; }
body.skin .card.ask-card .rows > li, body.skin .card.needs .rows > li { background: #fff; border: 1px solid #F0DDB5; border-radius: 10px; margin: 8px 0; padding: 4px 8px; }
body.skin .card.ask-card .rows > li + li { border-top: 1px solid #F0DDB5; }
body.skin .card.ask-card .row, body.skin .card.needs .row { flex-wrap: wrap; gap: 10px 12px; margin: 0; width: 100%; padding: 8px 4px; }
body.skin .card.ask-card .row-t strong { font-size: 15px; font-weight: 700; }
body.skin .card.ask-card .row-t small, body.skin .card.needs .row-t small { color: var(--ink-2); font-weight: 500; }
body.skin .tb tr.tb-hot td { background: #FFF1EE; border-left: 0; }
body.skin .tb tr.tb-hot td:first-child { box-shadow: inset 4px 0 0 #B4442E; }
body.skin .notice { background: #fff; border-color: #E4E0D7; box-shadow: 0 1px 2px rgba(23, 40, 42, .05); }
body.skin .notice.warn { background: #FFF8EC; border-color: #F0DDB5; border-left: 4px solid var(--gold); }
body.skin .notice.bad { background: #FFF1EE; border-color: #F0C9BE; border-left: 4px solid #B4442E; }
body.skin .banner { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #E4E0D7; box-shadow: 0 1px 2px rgba(23, 40, 42, .05); }
/* buttons: filled teal to do it, outlined to do something else, red-outlined to decline or undo */
body.skin .btn.primary { box-shadow: 0 1px 2px rgba(24, 78, 73, .25); }
body.skin .btn.primary:hover { background: #143F3B; border-color: #143F3B; }
body.skin .btn.quiet, body.skin .btn.ghost { background: #fff; border: 1px solid #C9CFCB; color: var(--primary); font-weight: 600; }
body.skin .btn.quiet:hover, body.skin .btn.ghost:hover { background: var(--wash); border-color: var(--primary); }
body.skin .btn.ghost[data-act="ask-no"], body.skin .btn.ghost[data-act="offer-no"], body.skin .btn.danger { color: #B4442E; border-color: #E8B8AE; background: #fff; }
body.skin .btn.ghost[data-act="ask-no"]:hover, body.skin .btn.ghost[data-act="offer-no"]:hover, body.skin .btn.danger:hover { background: #FFF1EE; border-color: #B4442E; }
body.skin .btn.ghost[data-act="layer-close"], body.skin .btn.ghost.link-like { border-color: transparent; }
/* pills: colour says the state */
body.skin .chip { border: 1px solid transparent; font-weight: 700; }
body.skin .chip.ok { background: #DDF1E6; color: #1B6A44; border-color: #BFE3CF; }
body.skin .chip.bad { background: #FDE3DC; color: #9A2F20; border-color: #F3C9BD; }
body.skin .chip.gold, body.skin .chip.warn { background: #FFF0D6; color: #7A4F00; border-color: #F0DDB5; }
body.skin .chip.neutral { background: #EEF0ED; color: var(--ink-2); border-color: #DADFDB; }
/* rows inside a card separate from each other */
body.skin .rows > li + li { border-top: 1px solid #ECE9E2; }
body.skin .row:hover { background: var(--faint); }
/* tables: zebra rows so the eye can follow a line */
body.skin .ts tbody tr:nth-child(even) td { background: #FAF9F6; }
body.skin .ts thead th { color: var(--ink-3); border-bottom: 2px solid #E4E0D7; }
/* the left menu stays a quiet column but sits on the same off-white as the page, with a clear hairline */
body.skin .rail { background: #fff; border-right: 1px solid #E4E0D7; }
body.skin .rail .nv[aria-current="page"] { background: var(--wash); color: var(--primary); }