/* Beacon design system. Harbor-teal palette inspired by the resident-facing
   look Plymouth Harbor residents already know, with a signature amber "beacon"
   accent. High contrast, large type, and generous touch targets for a senior
   audience. Theme-aware (light/dark). */

:root {
  --ground: #eef3f2;
  --surface: #ffffff;
  --inset: #e9eef4;
  --ink: #10262b;
  --text: #2c4147;
  --muted: #5f7671;
  --brand: #0f6f63;
  --brand-strong: #0b5147;
  --on-brand: #ffffff;
  --accent: #0d7d6f;
  --accent-ink: #0b5f54;
  --badge-bg: #dff0ec;
  --beacon: #e2952a;
  --darkcard: #142530;
  --border: #d7e5e0;
  --shadow: 0 1px 2px rgba(16,38,43,.05), 0 8px 22px rgba(16,38,43,.07);
  --focus: #0d7d6f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0a1513; --surface:#101f1c; --inset:#152a2f; --ink:#eaf5f1; --text:#c9ded8;
    --muted:#8aa39d; --brand:#0f6f63; --brand-strong:#0b5147; --on-brand:#ffffff; --accent:#45c6b4;
    --accent-ink:#7ad9ca; --badge-bg:#143029; --beacon:#f0b45a; --darkcard:#0c1a22; --border:#20403a;
    --focus:#45c6b4; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"]{
  --ground:#eef3f2; --surface:#ffffff; --inset:#e9eef4; --ink:#10262b; --text:#2c4147; --muted:#5f7671;
  --brand:#0f6f63; --brand-strong:#0b5147; --on-brand:#ffffff; --accent:#0d7d6f; --accent-ink:#0b5f54;
  --badge-bg:#dff0ec; --beacon:#e2952a; --darkcard:#142530; --border:#d7e5e0; --focus:#0d7d6f;
  --shadow:0 1px 2px rgba(16,38,43,.05), 0 8px 22px rgba(16,38,43,.07);
}
:root[data-theme="dark"]{
  --ground:#0a1513; --surface:#101f1c; --inset:#152a2f; --ink:#eaf5f1; --text:#c9ded8; --muted:#8aa39d;
  --brand:#0f6f63; --brand-strong:#0b5147; --on-brand:#ffffff; --accent:#45c6b4; --accent-ink:#7ad9ca;
  --badge-bg:#143029; --beacon:#f0b45a; --darkcard:#0c1a22; --border:#20403a; --focus:#45c6b4;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.1875rem; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }

.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar .wrap { max-width: none; padding: 0 clamp(1rem, 3vw, 2rem); height: 4.3rem; display: flex; align-items: center; gap: 1rem; }
.iconbtn { border: none; background: transparent; color: var(--ink); cursor: pointer; padding: .5rem; border-radius: 10px; display: inline-flex; }
.iconbtn:hover { background: var(--inset); }
.brand { display: flex; align-items: center; gap: .55rem; }
.brand-logo { width: 40px; height: 40px; display: block; }
.brand-name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.spacer { flex: 1; }
/* Ask Beacon, next to the wordmark. Tinted rather than plain chrome so it reads
   as something you can do, using the badge/accent pairing the drawer icons
   already use in both themes. */
.askai { align-items: center; gap: .4rem; background: var(--badge-bg); color: var(--accent); padding: .45rem .7rem; font-weight: 800; text-decoration: none; }
.askai:hover { background: var(--badge-bg); color: var(--accent-ink); }
.askai-label { font-size: 1rem; letter-spacing: -.01em; }
/* The bar has to hold hamburger, mark, this, search and avatar on a 360px
   phone. The lighthouse carries the identity on its own, so the wordmark is
   what gives way, and the Ask label goes just before it. */
@media (max-width: 30rem) { .askai-label { display: none; } }
@media (max-width: 24rem) { .brand-name { display: none; } }

/* Slide-out navigation drawer (hamburger) */
body.no-scroll { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer-scrim { position: absolute; inset: 0; border: none; padding: 0; background: rgba(9,26,23,.45); opacity: 0; transition: opacity .2s ease; cursor: pointer; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer-panel { position: absolute; top: 0; left: 0; height: 100%; width: min(21rem, 84vw); background: var(--surface); border-right: 1px solid var(--border); box-shadow: var(--shadow); transform: translateX(-100%); transition: transform .22s ease; display: flex; flex-direction: column; padding: 1rem; overflow-y: auto; }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .3rem .85rem; border-bottom: 1px solid var(--border); }
.drawer-nav { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; }
/* Section headings chunk a long menu without hiding anything or adding a tap.
   Quiet on purpose: they are a resting point for the eye, not a target. */
.drawer-heading { margin: 1.1rem 0 .2rem; padding: 0 .7rem; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.drawer-heading:first-child { margin-top: .2rem; }
.drawer-nav a { display: flex; align-items: center; gap: .9rem; padding: .85rem .7rem; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.1rem; }
.drawer-nav a .mi { display: inline-flex; color: var(--brand); }
.drawer-nav a:hover { background: var(--inset); }
.drawer-nav a[aria-current="page"] { background: var(--brand); color: #fff; }
.drawer-nav a[aria-current="page"] .mi { color: #fff; }
.drawer-nav a:focus-visible, .drawer .iconbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Expandable drawer groups (Dining / Messages / Directory). Tap the top to open. */
.drawer-group { display: flex; flex-direction: column; }
.drawer-group > summary { display: flex; align-items: center; gap: .9rem; padding: .85rem .7rem; border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; }
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary .mi { display: inline-flex; color: var(--brand); }
.drawer-group > summary:hover { background: var(--inset); }
.drawer-group > summary.active { color: var(--brand); }
.drawer-group .dg-label { flex: 1; }
.drawer-group .dg-chev { color: var(--muted); font-size: 1.4rem; line-height: 1; transition: transform .15s ease; }
.drawer-group[open] > summary .dg-chev { transform: rotate(90deg); }
.drawer-sub { display: flex; flex-direction: column; padding: .1rem 0 .35rem 3.2rem; }
.drawer-sub a { padding: .6rem .7rem; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.drawer-sub a:hover { background: var(--inset); }
@media (prefers-reduced-motion: reduce) { .drawer-group .dg-chev { transition: none; } }
@media (prefers-reduced-motion: reduce) { .drawer-panel, .drawer-scrim { transition: none; } }

/* Search page */
.searchbar { display: flex; gap: .6rem; margin-bottom: 1.4rem; }
.searchbar input { flex: 1; min-width: 0; font-size: 1.1rem; padding: .8rem .9rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); }
.searchbar input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.searchbar .btn { margin-top: 0; width: auto; padding: .8rem 1.3rem; }
.srch-group { margin-bottom: 1.6rem; }
.srch-group h2 { font-size: .85rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 .5rem .2rem; }
.srch-item { display: flex; align-items: center; gap: .8rem; padding: .85rem .3rem; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.srch-item:first-child { border-top: none; }
.srch-item .st-body { flex: 1; min-width: 0; }
.srch-item .st-title { display: block; font-weight: 700; color: var(--ink); }
.srch-item .st-meta { display: block; color: var(--muted); font-size: .92rem; }
.srch-item .chev { color: var(--muted); font-size: 1.5rem; line-height: 1; }
.srch-item:hover { background: var(--inset); border-radius: 10px; }

/* Theme switcher (account menu) */
.themewrap { padding: .5rem .3rem .3rem; }
.themelabel { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 .2rem .35rem; }
.themeswitch { display: flex; gap: .25rem; padding: .25rem; background: var(--inset); border-radius: 10px; }
.themeswitch button { flex: 1; border: none; background: transparent; color: var(--ink); font-family: inherit; font-size: .92rem; font-weight: 700; padding: .45rem .3rem; border-radius: 7px; cursor: pointer; }
.themeswitch button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(16,38,43,.18); color: var(--brand); }
.themeswitch button:hover:not(.on) { color: var(--brand); }
.themeswitch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* In-site document viewer */
.doctoolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.doctoolbar .btn { margin-top: 0; width: auto; }
.docframe { width: 100%; height: 78vh; min-height: 30rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }

/* The Bay (resident social feed) */
.bay-composer { margin-bottom: 1.2rem; }
.bay-composer-top { display: flex; gap: .6rem; align-items: flex-start; }
.bay-composer-top .ravatar { flex: 0 0 auto; }
.bay-composer textarea { flex: 1; min-width: 0; font-size: 1.05rem; padding: .6rem .8rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: inherit; resize: vertical; }
.bay-composer-actions { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.bay-composer-actions .btn { margin-top: 0; width: auto; }
.bay-photo-btn { margin-top: 0; width: auto; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.bay-photo-names { font-size: .9rem; }

.bpost { margin-bottom: 1.1rem; }
.bpost-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.bpost-who { flex: 1; min-width: 0; }
.bpost-name { display: block; font-weight: 800; color: var(--ink); }
.bpost-meta { display: block; color: var(--muted); font-size: .85rem; }
.bpost-body { color: var(--text); font-size: 1.05rem; margin: .2rem 0 .6rem; }

.bay-gallery { display: grid; gap: .35rem; margin: .2rem 0 .6rem; border-radius: 12px; overflow: hidden; }
.bay-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--inset); }
.bay-gallery.n1 { grid-template-columns: 1fr; }
.bay-gallery.n1 img { max-height: 34rem; object-fit: contain; }
.bay-gallery.n2, .bay-gallery.n3, .bay-gallery.n4 { grid-template-columns: 1fr 1fr; }
.bay-gallery.n2 img, .bay-gallery.n3 img, .bay-gallery.n4 img { aspect-ratio: 1 / 1; }
.bay-gallery.n3 img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

.bpost-rsum { display: flex; gap: .9rem; margin: .2rem 0; color: var(--muted); font-size: .95rem; font-weight: 700; }
.bay-react { display: flex; gap: .4rem; margin: .4rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .35rem 0; }
.rx { border: 1px solid transparent; background: transparent; font-size: 1.3rem; line-height: 1; padding: .3rem .6rem; border-radius: 999px; cursor: pointer; }
.rx:hover { background: var(--inset); }
.rx.on { background: var(--badge-bg); border-color: var(--brand); }
.rx:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.bay-comments { margin-top: .4rem; }
.bcomment { display: flex; gap: .55rem; margin: .5rem 0; align-items: flex-start; }
.bcomment .ravatar { width: 2.2rem; height: 2.2rem; font-size: .8rem; flex: 0 0 auto; }
.bcomment-bubble { background: var(--inset); border-radius: 14px; padding: .5rem .8rem; flex: 1; min-width: 0; }
.bcomment-name { font-weight: 700; color: var(--ink); margin-right: .4rem; }
.bcomment-text { color: var(--text); }
.bcomment-meta { display: block; color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.bcomment-meta .linkbtn { font-size: .8rem; margin-left: .5rem; }
.bcomment-add { display: flex; gap: .5rem; margin-top: .6rem; }
.bcomment-add input[type=text] { flex: 1; min-width: 0; font-size: 1rem; padding: .6rem .85rem; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); }
.bcomment-add .btn { margin-top: 0; width: auto; padding: .6rem 1.1rem; }

.bpost-actions { display: flex; align-items: center; gap: .6rem; }
.bay-edit textarea { width: 100%; font-size: 1.05rem; padding: .6rem .8rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: inherit; resize: vertical; }
.bay-edit .form-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.bay-edit .btn { margin-top: 0; width: auto; }
.bay-morec { display: inline-block; margin: .2rem 0 .5rem; font-weight: 700; }
.bay-edit-photos { display: flex; flex-wrap: wrap; gap: .6rem; margin: .7rem 0 .3rem; }
.bay-editphoto { width: 5rem; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.bay-editphoto.dragging { opacity: .5; cursor: grabbing; }
.bay-editphoto img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--border); pointer-events: none; }
.bay-editphoto-rm { display: flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); margin-top: .25rem; cursor: pointer; }
.bay-editphoto-rm input { width: auto; }
.bay-editphoto:has(input:checked) img { opacity: .35; outline: 2px solid var(--bad, #c0392b); outline-offset: -2px; }
.bay-editphoto:has(input:checked) .bay-editphoto-rm { color: var(--bad, #c0392b); font-weight: 700; }
.bay-gallery img { cursor: zoom-in; }

.bay-lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 1.5rem; cursor: zoom-out; }
.bay-lightbox[hidden] { display: none; }
.bay-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.baylb-close { position: absolute; top: .8rem; right: 1.1rem; background: none; border: none; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; z-index: 2; }
.baylb-close:focus-visible, .baylb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.baylb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); border: none; color: #fff; font-size: 2.6rem; line-height: 1; width: 3.2rem; height: 4.4rem; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.baylb-nav[hidden] { display: none; }
.baylb-nav:hover { background: rgba(0,0,0,.7); }
.baylb-prev { left: 1rem; }
.baylb-next { right: 1rem; }
.baylb-count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); color: #fff; font-size: 1rem; font-weight: 700; padding: .3rem .85rem; border-radius: 999px; z-index: 2; }
.baylb-count[hidden] { display: none; }

/* Dining venues + menu photos */
.venue-loc { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .95rem; }
.venue-loc svg { flex: 0 0 auto; }
.v-chev { transition: transform .18s ease; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .v-chev { transition: none; } }

/* Venue grid (list page): photo cards linking to a detail page */
.venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.3rem; }
/* Month "Tiles" view: fixed 4-per-line grid of compact event tiles (reuses .venue-tile). */
.ev-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ev-tiles .vt-photo { aspect-ratio: auto; height: 7rem; }
.ev-tiles .vt-body { padding: .6rem .75rem .75rem; gap: .15rem; }
.ev-tiles .vt-name { font-size: 1rem; }
.ev-tiles .vt-cat { font-size: .82rem; }
@media (max-width: 62rem) { .ev-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .ev-tiles { grid-template-columns: 1fr; } }
.venue-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.venue-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.venue-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.vt-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--inset); background-size: cover; background-position: center; }
.venue-tile.past { opacity: .6; }
.venue-tile.past .vt-photo { filter: grayscale(.55); }
.vt-noimg { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 800; color: var(--muted); }
.vt-body { padding: .85rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.vt-name { font-weight: 800; font-size: 1.2rem; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
.vt-cat { color: var(--muted); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .venue-tile { transition: none; } }

/* Venue detail page */
.vd-title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; color: var(--ink); margin: .3rem 0 1.1rem; }
.vd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.6rem; align-items: start; }
.vd-layout.vd-nohours { grid-template-columns: minmax(0, 1fr); }
.vd-photo { width: 100%; border-radius: 16px; display: block; margin-bottom: 1.1rem; background: var(--inset); }
.vd-name { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--ink); margin: .2rem 0 .5rem; letter-spacing: -.01em; }
.vd-loc { margin-bottom: .5rem; font-size: 1rem; }
.vd-cat { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.1rem; }
.vd-desc { color: var(--text); line-height: 1.6; font-size: 1.05rem; }
.vd-desc p { margin: 0 0 .85rem; }
.vd-desc p:last-child { margin-bottom: 0; }
.vd-hours { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.vd-hours h2 { text-align: center; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin: 0; padding: 1rem; border-bottom: 1px solid var(--border); }
.vd-day { border-bottom: 1px solid var(--border); }
.vd-day:last-child { border-bottom: none; }
.vd-day > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; font-weight: 700; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.vd-day > summary::-webkit-details-marker { display: none; }
.vd-day > summary:hover { background: var(--inset); }
.vd-day > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.vd-day[open] > summary .v-chev { transform: rotate(180deg); }
.vd-today > summary { background: var(--inset); }
.vd-todaytag { color: var(--accent); font-weight: 700; }
.vd-day-body { padding: 0 1rem .85rem; }
.vd-meal { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; color: var(--text); }
.vd-meal-name { color: var(--muted); }
.vd-meal-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-closed { color: var(--muted); margin: .2rem 0; }
@media (max-width: 48rem) { .vd-layout { grid-template-columns: 1fr; } }

/* Admin: structured hours editor */
.hours-editor-wrap { overflow-x: auto; margin-top: .4rem; }
.hours-editor { border-collapse: collapse; width: 100%; min-width: 42rem; }
.hours-editor th, .hours-editor td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.hours-editor thead th { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.hours-editor .he-day { font-weight: 700; color: var(--ink); white-space: nowrap; }
.he-range { display: flex; align-items: center; gap: .4rem; }
.he-range input[type=time] { padding: .3rem .4rem; width: auto; }
.he-to { color: var(--muted); font-size: .85rem; }
.menu-photo { width: 100%; max-width: 26rem; border-radius: 12px; margin: .5rem 0; display: block; }
.portal-frame { width: 100%; height: 80vh; min-height: 32rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }

/* Menu date strip (pick a day) */
.menu-datestrip { display: flex; align-items: stretch; gap: .5rem; margin-bottom: 1.3rem; }
.mds-days { display: flex; flex: 1; gap: .4rem; overflow-x: auto; }
.mds-day { flex: 1 0 0; min-width: 4.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .55rem .3rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; text-align: center; }
.mds-day:hover { background: var(--inset); }
.mds-day:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mds-md { font-weight: 800; font-size: 1rem; }
.mds-dow { font-size: .8rem; color: var(--muted); }
.mds-day.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.mds-day.sel .mds-dow { color: rgba(255,255,255,.9); }
.mds-day.today:not(.sel) .mds-md { color: var(--accent); }
.mds-arrow, .mds-todaybtn { display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; }
.mds-arrow { width: 2.6rem; color: var(--ink); font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.mds-todaybtn { padding: 0 1rem; color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.mds-arrow:hover, .mds-todaybtn:hover { background: var(--inset); }
@media (max-width: 40rem) { .mds-dow { font-size: .72rem; } .mds-day { min-width: 3.9rem; } .mds-todaybtn { padding: 0 .7rem; } }

/* Meal-period tag (menu cards + detail) */
.mt-tag { align-self: flex-start; display: inline-block; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 800; color: var(--accent); background: var(--inset); padding: .15rem .5rem; border-radius: 6px; }

/* Menu detail page */
.menu-hero { max-width: 42rem; margin: 0 auto 1.1rem; }
.md-date { color: var(--muted); font-size: 1.05rem; margin: .15rem 0 1.1rem; }
.detail .mt-tag { margin-bottom: .5rem; }

.drawer-badge { margin-left: auto; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 800; padding: .05rem .5rem; border-radius: 999px; min-width: 1.4rem; text-align: center; }
.avatar { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--badge-bg); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; border: 1px solid var(--border); }

.hello { padding-top: 1.6rem; }
.hello h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.hello p { margin: .25rem 0 0; color: var(--muted); }

.layout { display: grid; grid-template-columns: 1fr 21rem; gap: 1.5rem; padding: 1.4rem 0 3.5rem; align-items: start; }
.feed { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
/* Sidebar sticks near the top and flows with the page (no inner scrollbar);
   the normal page scroll reveals the rest, including Explore. */
.side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 5.5rem; }
.feed-label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: .4rem 0 .8rem; }
/* The home feed keeps its tighter, tuned spacing (its parent .feed adds flex gap
   below each label). Everywhere else the label needs a real bottom margin. */
.feed .feed-label { margin: .4rem 0 -.35rem; }

.post { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; transition: transform .15s ease; }
.post:hover { transform: translateY(-2px); }
.media { position: relative; aspect-ratio: 16 / 8; display: flex; align-items: flex-end; padding: 1.15rem; background-size: cover; background-position: center; }
.media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,20,18,0) 35%, rgba(6,20,18,.72) 100%); }
.m-sunset { background: linear-gradient(120deg,#0f6f63 0%, #2a9d8f 40%, #e2952a 100%); }
.m-teal   { background: linear-gradient(120deg,#0b5147 0%, #0f6f63 60%, #2a9d8f 100%); }
.m-bay    { background: linear-gradient(120deg,#12617a 0%, #2a9d8f 55%, #8ecae6 100%); }
.chip { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; background: rgba(9,26,23,.6); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 8px; }
.media .cap { position: relative; z-index: 2; color: #fff; }
.media .cap h3 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(0,0,0,.35); text-wrap: balance; }
.media .cap .meta { margin-top: .2rem; font-size: .9rem; color: #dfeee9; font-weight: 600; }

.post .body { padding: 1.05rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.post .body h3 { margin: 0; color: var(--ink); font-size: 1.3rem; letter-spacing: -.01em; }
.post .body .meta { color: var(--muted); font-size: .92rem; font-weight: 600; }
.post .body p { margin: 0; }

.post.dark { background: var(--darkcard); border-color: transparent; color: #eaf2f4; }
.post.dark .body { padding: 1.4rem 1.3rem; gap: .4rem; }
.post.dark .label { display: inline-flex; align-items: center; gap: .5rem; color: var(--beacon); font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.post.dark h3 { color: #fff; font-size: 1.5rem; }
.post.dark p { color: #b9ccd0; }
.post.dark .link { color: #7ad9ca; }

.empty { background: var(--surface); border: 1px dashed var(--border); border-radius: 18px; padding: 1.6rem; color: var(--muted); text-align: center; }

.link { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 1.15rem; }
.card-h { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ink); font-size: 1.15rem; margin-bottom: .85rem; }
.card-h svg { color: var(--accent); }

.inset { background: var(--inset); border-radius: 14px; padding: .85rem 1rem; display: flex; align-items: center; gap: .9rem; }
.inset + .inset { margin-top: .7rem; }
.bignum { font-size: 2.5rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.inset .lines { line-height: 1.25; }
.inset .lines .t1 { font-weight: 800; color: var(--ink); }
.inset .lines .t2 { color: var(--muted); font-size: .95rem; }

.btn { margin-top: .95rem; width: 100%; border: none; cursor: pointer; background: var(--brand); color: var(--on-brand); font-size: 1.05rem; font-weight: 800; padding: .8rem 1rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; }
.btn:hover { background: var(--brand-strong); }

.menu { display: flex; flex-direction: column; }
.menu a { display: flex; align-items: center; gap: .85rem; padding: .7rem .3rem; text-decoration: none; color: var(--ink); border-top: 1px solid var(--border); font-weight: 600; }
.menu a:first-child { border-top: none; }
.menu a:hover .label { color: var(--accent-ink); }
.menu .mi { width: 2.4rem; height: 2.4rem; border-radius: 11px; background: var(--badge-bg); color: var(--accent); display: grid; place-items: center; flex: none; }
.menu .label { flex: 1; }
.menu .new { background: var(--beacon); color: #3a2a08; font-weight: 800; font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; }
.menu .chev { color: var(--muted); }

.fab { position: fixed; right: 1.4rem; bottom: 1.4rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--brand); color: #fff; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(11,81,71,.4); display: grid; place-items: center; z-index: 30; }
.fab:hover { background: var(--brand-strong); }
.fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fab.speaking { background: var(--brand-strong); animation: fabpulse 1.4s ease-in-out infinite; }
@keyframes fabpulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(11,81,71,.4), 0 0 0 0 rgba(15,111,99,.45); }
  50%      { box-shadow: 0 8px 24px rgba(11,81,71,.4), 0 0 0 .8rem rgba(15,111,99,0); }
}
@media (prefers-reduced-motion: reduce) { .fab.speaking { animation: none; } }
.fab:hover { background: var(--brand-strong); }

a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .feed > *, .side > * { animation: rise .5s ease both; }
  .feed > *:nth-child(2){animation-delay:.05s} .feed > *:nth-child(3){animation-delay:.1s}
  @keyframes rise { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform:none; } }
}
/* Section pages (list + detail) */
.page { padding: 1.6rem 0 3.5rem; }
.page-head { margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.page-head p { margin: .25rem 0 0; color: var(--muted); }
.backlink { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-ink); font-weight: 700; text-decoration: none; margin-bottom: 1rem; }
.backlink:hover { text-decoration: underline; }

.event-list { display: flex; flex-direction: column; gap: .9rem; }
.event-item { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .15s ease; }
.event-item:hover { transform: translateY(-2px); }
.date-badge { flex: none; width: 3.7rem; text-align: center; background: var(--badge-bg); color: var(--accent-ink); border-radius: 12px; padding: .5rem 0; }
.date-badge .d { font-size: 1.55rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.date-badge .m { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.event-item .info { flex: 1; min-width: 0; }
.event-item .info h3 { margin: 0 0 .15rem; font-size: 1.2rem; color: var(--ink); }
.event-item .info .meta { color: var(--muted); font-size: .95rem; }
.event-item .chev { color: var(--muted); font-size: 1.6rem; line-height: 1; }

.detail { max-width: 46rem; }
.hero { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 7; display: flex; align-items: flex-end; padding: 1.3rem; margin-bottom: 1.3rem; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,18,0) 35%, rgba(6,20,18,.75) 100%); }
.hero .cap { position: relative; z-index: 2; color: #fff; }
.hero .cap h1 { margin: .3rem 0 0; font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0,0,0,.4); text-wrap: balance; }
.chip.inline { position: static; display: inline-block; }
.meta-row { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-bottom: 1.1rem; }
.meta-row .k { display: flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 600; }
.meta-row svg { color: var(--accent); flex: none; }
.desc { font-size: 1.1rem; line-height: 1.65; color: var(--text); }
.desc p { margin: 0 0 1rem; }
.rsvp { margin-top: 1.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.3rem; box-shadow: var(--shadow); }
.rsvp h2 { margin: 0 0 .4rem; font-size: 1.35rem; color: var(--ink); }
.rsvp .spots { font-weight: 700; color: var(--ink); }
.rsvp .muted { color: var(--muted); font-size: .97rem; margin: .2rem 0 0; }
.rsvp .btn { max-width: 22rem; }
.rsvp-people { display: flex; flex-direction: column; gap: .9rem; }
.rsvp-person { padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.rsvp-person:last-child { padding-bottom: 0; border-bottom: none; }
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.rp-name { font-weight: 700; color: var(--ink); }
.rp-none { color: var(--muted); font-size: .9rem; }
.rsvp-person form { margin: 0; }
.notice { background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; padding: 1.6rem; color: var(--muted); }

@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; order: -1; }
}
@media (max-width: 520px) { body { font-size: 1.125rem; } }

/* Semantic success color (separate from the teal accent) */
:root { --good: #2f8f6a; }
@media (prefers-color-scheme: dark) { :root { --good: #4fbf90; } }
:root[data-theme="light"] { --good: #2f8f6a; }
:root[data-theme="dark"] { --good: #4fbf90; }

/* Account menu + logout */
.acct { display: flex; align-items: center; gap: .7rem; }
.acct form { margin: 0; }
.linkbtn { background: none; border: none; color: var(--accent-ink); font-weight: 700; cursor: pointer; font-size: 1rem; padding: .4rem .2rem; }
.linkbtn:hover { text-decoration: underline; }

/* Account dropdown (avatar menu) */
.acctmenu { position: relative; }
.acctmenu > summary { list-style: none; cursor: pointer; }
.acctmenu > summary::-webkit-details-marker { display: none; }
.acctmenu > summary::marker { content: ''; }
.acctmenu > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acctpanel { position: absolute; right: 0; top: calc(100% + .55rem); min-width: 15rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px rgba(16,38,43,.2); padding: .5rem; z-index: 40; }
.acctinfo { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .7rem; border-bottom: 1px solid var(--border); margin-bottom: .35rem; }
.acctwho { min-width: 0; }
.acctwho .an { display: block; font-weight: 800; color: var(--ink); }
.acctwho .ae { display: block; color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; }
.acctlinks { display: flex; flex-direction: column; }
.acctlinks a, .acctlinks button { display: block; width: 100%; text-align: left; background: none; border: none; padding: .65rem .7rem; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; font-family: inherit; }
.acctlinks a:hover, .acctlinks button:hover { background: var(--inset); }
.acctlinks form { margin: 0; }

/* Flash messages */
.flash { background: color-mix(in srgb, var(--good) 15%, var(--surface)); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--surface)); border-radius: 12px; padding: .8rem 1.1rem; margin: 1rem 0 0; font-weight: 600; }

/* RSVP status pills */
.pill { display: inline-block; padding: .3rem .75rem; border-radius: 999px; font-weight: 800; font-size: .92rem; }
.pill.reg { background: color-mix(in srgb, var(--good) 18%, var(--surface)); color: var(--good); }
.pill.wait { background: color-mix(in srgb, var(--beacon) 22%, var(--surface)); color: color-mix(in srgb, var(--beacon) 70%, #000); }

/* Auth pages (login, forgot, set-pin) */
.auth-page { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%); }
.auth-card { width: 100%; max-width: 26rem; background: var(--surface); border-radius: 20px; padding: 2rem 1.8rem 1.8rem; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.auth-card .mark { display: flex; justify-content: center; margin-bottom: .7rem; }
.auth-card h1 { margin: 0; text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.auth-card .lede { text-align: center; color: var(--muted); margin: .35rem 0 1.4rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.field input { width: 100%; font-size: 1.1rem; padding: .8rem .9rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); }
.field input:focus { outline: none; border-color: var(--accent); }
.field .hint { color: var(--muted); font-size: .9rem; margin-top: .35rem; }
.auth-actions .btn { margin-top: .3rem; }
.auth-alert { border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1.1rem; font-weight: 600; }
.auth-alert.error { background: color-mix(in srgb, #d64545 14%, var(--surface)); color: #cf4040; border: 1px solid color-mix(in srgb, #d64545 40%, var(--surface)); }
.auth-alert.ok { background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--surface)); }
.auth-links { text-align: center; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.auth-links a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* ---------- Staff admin ---------- */
body.admin { background: var(--ground); }
.admin-top { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.admin-top .wrap { height: 4rem; display: flex; align-items: center; gap: 1rem; max-width: none; padding: 0 clamp(1rem, 3vw, 2rem); }
.admin-top .brand-name { font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; text-decoration: none; }
.admin-top .tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--brand); padding: .15rem .45rem; border-radius: 6px; margin-left: .45rem; vertical-align: middle; }
.admin-top .viewsite { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.admin-top .viewsite:hover { text-decoration: underline; }

.admin-shell { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; max-width: none; margin: 0; padding: 1.5rem clamp(1rem, 2.5vw, 2.5rem) 3rem; align-items: start; }
.admin-side { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: .15rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .6rem; }
.admin-side a, .admin-side .navsoon { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
.admin-side a:hover { background: var(--inset); }
.admin-side a.active { background: var(--badge-bg); color: var(--accent-ink); }
.admin-side .navsoon { color: var(--muted); cursor: default; }
.admin-side .soon { font-size: .68rem; background: var(--inset); color: var(--muted); padding: .1rem .45rem; border-radius: 999px; margin-left: auto; }
.admin-side-home { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--accent); }
.admin-side details.navgroup { display: flex; flex-direction: column; }
.admin-side details.navgroup > summary { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 10px; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.admin-side details.navgroup > summary::-webkit-details-marker { display: none; }
.admin-side details.navgroup > summary::after { content: '\25B8'; margin-left: auto; opacity: .55; font-size: .9em; }
.admin-side details.navgroup[open] > summary::after { content: '\25BE'; }
.admin-side details.navgroup > summary:hover { background: var(--inset); }
.admin-side details.navgroup > summary.active { background: var(--badge-bg); color: var(--accent-ink); }
.admin-side .navsub { display: flex; flex-direction: column; gap: .1rem; margin: .1rem 0 .2rem .5rem; padding-left: .5rem; border-left: 2px solid var(--border); }
.admin-side .navsub a { padding: .5rem .7rem; font-weight: 500; font-size: .95rem; }

/* Resident contacts (tap to call) */
.contact-list { display: grid; gap: .8rem; }
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.2rem; }
.cc-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cc-name { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.cc-desc { color: var(--muted); }
.cc-phone { color: var(--muted); font-variant-numeric: tabular-nums; }
.cc-call { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.1rem; padding: .8rem 1.5rem; flex: 0 0 auto; }
.cc-actions { display: flex; gap: .5rem; flex-wrap: wrap; flex: 0 0 auto; }
.dow-picker { display: flex; gap: .4rem; flex-wrap: wrap; }
.dow-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; font-weight: 600; cursor: pointer; }
.addr-field { position: relative; }
.addr-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: .2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 16rem; overflow-y: auto; }
.addr-suggest button { display: block; width: 100%; text-align: left; padding: .65rem .85rem; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--ink); font-size: 1rem; line-height: 1.35; }
.addr-suggest button:last-child { border-bottom: 0; }
.addr-suggest button:hover, .addr-suggest button.active { background: var(--inset); }
.addr-csz { align-items: flex-end; }
.addr-map { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); margin: .2rem 0; }
.addr-map .leaflet-container { height: 100%; width: 100%; background: var(--inset); }
.map-pin::before { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: var(--accent); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.55); }
.leaflet-control-attribution { font-size: .68rem; }

/* Transport week list */
.tr-list { display: flex; flex-direction: column; }
.tr-line { display: flex; align-items: center; gap: .8rem; padding: .6rem .2rem; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); flex-wrap: wrap; }
.tr-list .tr-line:first-child { border-top: 0; }
.tr-line:hover { background: var(--inset); }
.tr-time { flex: 0 0 auto; font-weight: 700; color: var(--accent-ink); min-width: 5.5rem; }
.tr-who { flex: 1 1 12rem; }

/* Transport month calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-weight: 700; color: var(--muted); font-size: .8rem; padding: .3rem 0; }
.cal-cell { min-height: 6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .3rem; display: flex; flex-direction: column; gap: .15rem; overflow: hidden; }
.cal-cell.empty { background: transparent; border: 0; min-height: 0; }
.cal-cell.today { border-color: var(--accent); }
.cal-num { font-weight: 700; color: var(--ink); text-decoration: none; align-self: flex-start; padding: 0 .2rem; }
.cal-ride { font-size: .72rem; background: var(--badge-bg); color: var(--accent-ink); border-radius: 5px; padding: .1rem .3rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: .72rem; color: var(--muted); text-decoration: none; }
@media (max-width: 700px) { .cal-cell { min-height: 4rem; } .cal-ride, .cal-more { font-size: .6rem; } }

/* Home quick actions */
.quickactions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .8rem; margin: 0 0 1.4rem; }
.qa-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; text-decoration: none; padding: 1.1rem .7rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-weight: 700; font-size: 1.05rem; min-height: 6.2rem; transition: background .12s, border-color .12s; }
.qa-tile { position: relative; }
.qa-tile:hover { background: var(--inset); border-color: var(--accent); }
.qa-tile .qa-ic { width: 2.1rem; height: 2.1rem; color: var(--accent); }
/* Unread count badge on the Messages quick-action tile. */
.qa-badge { position: absolute; top: .55rem; right: .55rem; background: var(--beacon); color: #3a2a08; font-weight: 800; font-size: .74rem; line-height: 1; padding: .28rem .5rem; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* "Add Beacon to your Home Screen" card (built by assets/js/install.js).
   Home page only, and only when the site is not already installed. Quiet on
   purpose: this is an invitation, not a warning, so it stays on brand teal and
   leaves --beacon amber for things that actually need attention. */
#installmount[hidden] { display: none !important; }
.install-card { display: flex; align-items: flex-start; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 1.15rem; margin: 0 0 1.4rem; }
.ic-mark { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 14px; background: var(--inset); display: grid; place-items: center; overflow: hidden; }
.ic-mark img { width: 2.6rem; height: 2.6rem; }
.ic-body { flex: 1; min-width: 0; }
.ic-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ic-text { margin: .35rem 0 0; color: var(--muted); line-height: 1.55; }
.ic-steps { margin: .8rem 0 0; padding-left: 1.35rem; color: var(--ink); line-height: 1.75; }
.ic-steps li { margin: .2rem 0; }
.ic-share { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; vertical-align: -.3rem; color: var(--accent-ink); }
.ic-share svg { width: 1.35rem; height: 1.35rem; }
.ic-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.ic-go { border: none; cursor: pointer; background: var(--brand); color: var(--on-brand); font-size: 1.05rem; font-weight: 800; padding: .75rem 1.4rem; border-radius: 12px; }
.ic-go:hover { background: var(--brand-strong); }
.ic-not { border: 1px solid var(--border); cursor: pointer; background: transparent; color: var(--muted); font-size: 1rem; font-weight: 700; padding: .75rem 1.2rem; border-radius: 12px; }
.ic-not:hover { background: var(--inset); color: var(--ink); }
@media (max-width: 34rem) {
  .install-card { flex-direction: column; gap: .8rem; }
  .ic-actions > * { flex: 1; }
}

/* The how-to recording, on the card and in Help. Folded away by default and
   capped in height, since the source is a phone screen recording and at full
   height it would push everything else off the page. */
.ic-watch { margin-top: .9rem; }
.ic-watch > summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--accent-ink); padding: .5rem 0; display: inline-flex; align-items: center; gap: .45rem; }
.ic-watch > summary::-webkit-details-marker { display: none; }
.ic-watch > summary::before { content: '\25B8'; opacity: .7; }
.ic-watch[open] > summary::before { content: '\25BE'; }
.ic-video { display: block; margin: .6rem auto 0; width: auto; height: auto; max-width: 100%; max-height: 62vh; border-radius: 14px; border: 1px solid var(--border); background: #000; }

/* ---- Ask Beacon --------------------------------------------------------- */
.agent-page { max-width: 46rem; }
.agent-intro { color: var(--muted); line-height: 1.6; margin: .3rem 0 1.2rem; }
.agent-log { display: flex; flex-direction: column; gap: .8rem; min-height: 8rem; margin-bottom: 1.1rem; }
.agent-msg { max-width: 90%; padding: .85rem 1.05rem; border-radius: 16px; line-height: 1.55; }
.agent-msg p { margin: 0; white-space: pre-wrap; }
.agent-msg.from-beacon { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--ink); }
.agent-msg.from-you { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 5px; }
.agent-msg.is-thinking { color: var(--muted); font-style: italic; }
/* A problem, not a warning: amber is the attention colour, and --brand would
   read as ordinary chrome here. */
.agent-msg.is-problem { border-color: var(--beacon); }
.agent-msg .link { display: inline-block; margin-top: .5rem; }

.agent-starters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.agent-chip { cursor: pointer; background: var(--inset); border: 1px solid var(--border); color: var(--ink); border-radius: 999px; padding: .6rem 1rem; font-size: 1rem; font-weight: 600; }
.agent-chip:hover { border-color: var(--brand); }

.agent-ask { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: .9rem; box-shadow: var(--shadow); }
.agent-ask textarea { width: 100%; border: none; resize: vertical; background: transparent; color: var(--ink); font: inherit; font-size: 1.15rem; line-height: 1.5; padding: .3rem; min-height: 3.2rem; }
.agent-ask textarea:focus { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.agent-controls { display: flex; gap: .6rem; align-items: center; margin-top: .5rem; }
.agent-mic { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; background: transparent; color: var(--accent-ink); border: 1px solid var(--border); border-radius: 12px; padding: .7rem 1.1rem; font-size: 1.02rem; font-weight: 700; }
.agent-mic:hover { background: var(--inset); }
/* Listening is the one state that must be unmistakable across the room. */
.agent-mic.is-listening { background: var(--beacon); border-color: var(--beacon); color: #3a2a08; }
.agent-send { margin-left: auto; cursor: pointer; border: none; background: var(--brand); color: var(--on-brand); font-size: 1.08rem; font-weight: 800; padding: .75rem 1.6rem; border-radius: 12px; }
.agent-send:hover { background: var(--brand-strong); }
.agent-send:disabled { opacity: .6; cursor: default; }
.agent-hint { margin: .7rem .3rem 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }

.agent-foot { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.agent-voice { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.agent-voice[hidden] { display: none; }
.agent-speed { display: flex; align-items: center; gap: .6rem; }
.agent-speed-lbl { font-weight: 600; color: var(--muted); }
.agent-speed .themeswitch { max-width: 20rem; }
.agent-speak { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.agent-speak input { width: 1.15rem; height: 1.15rem; }
.agent-small { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }

@media (max-width: 34rem) {
  .agent-msg { max-width: 100%; }
  .agent-send { padding: .75rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-msg { scroll-behavior: auto; }
}

/* Admin: the Ask Beacon readiness checklist and its unanswered list. */
.agent-status { list-style: none; padding: 0; margin: .3rem 0 .8rem; line-height: 2; font-size: 1.02rem; }
.agent-status code { background: var(--inset); padding: .1rem .4rem; border-radius: 6px; }
.agent-todo { margin: .6rem 0 0; padding-left: 1.3rem; line-height: 1.9; }
.agent-todo code { font-size: .92rem; color: var(--muted); }
.atable tr.is-done td { opacity: .55; }

/* Admin: ticking the meals a dining menu covers. Big targets, since staff
   often do this on a laptop trackpad in a hurry. */
.mealpick { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.mealpick-opt { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; color: var(--ink); background: var(--inset); border: 1px solid var(--border); border-radius: 12px; padding: .55rem .9rem; }
.mealpick-opt:hover { border-color: var(--brand); }
.mealpick-opt input { width: 1.1rem; height: 1.1rem; }
.form-label { display: block; font-weight: 700; color: var(--ink); }

/* Help & how-to */
.help-list { display: grid; gap: .7rem; }
.help-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 1.2rem; }
.help-item > summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 1.15rem; color: var(--ink); padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.help-item > summary::-webkit-details-marker { display: none; }
.help-item > summary::after { content: '\25B8'; opacity: .5; flex: 0 0 auto; }
.help-item[open] > summary::after { content: '\25BE'; }
.help-body { padding: 0 0 1.1rem; line-height: 1.65; }
.help-body ol, .help-body ul { padding-left: 1.4rem; margin: .5rem 0; }
.help-body li { margin: .35rem 0; }

/* Print: strip the app chrome so pages print cleanly on paper */
@media print {
  .topbar, .admin-top, .drawer, .drawer-scrim, .fab, .quickactions, .searchbar, .install-card, .ic-watch,
  .acctmenu, .alert-bar, .viewtoggle, .daybar, .backlink, .btn, [data-print],
  .admin-side, .admin-side-home, .mds-nav, .menu-datestrip { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .wrap, main, .admin-main, .admin-shell { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  a { color: #000 !important; text-decoration: none; }
  .card, .card-panel, .venue-tile, .venue-detail, .vd-hero, .ev-card, .post {
    break-inside: avoid; box-shadow: none !important; border-color: #ccc !important; background: #fff !important;
  }
  h1, h2, h3 { color: #000 !important; }
}
.admin-main { min-width: 0; }
.admin-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.admin-h h1 { margin: 0; font-size: 1.8rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; }
.stat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.stat .n { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-weight: 600; }

.card-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.atable { width: 100%; border-collapse: collapse; }
.atable th, .atable td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.atable th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.atable tr:last-child td { border-bottom: none; }
.atable .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Let wide admin tables scroll sideways inside the card instead of being
   clipped by the card's overflow:hidden (which hid the Actions buttons). */
.card-panel:has(> table.atable) { overflow-x: auto; }
/* Keep the hidden attribute working for search filtering (author display rules
   would otherwise beat the UA [hidden] rule). */
.atable tr[hidden] { display: none !important; }
.dir-group[hidden], .contact-card[hidden] { display: none !important; }

/* Admin People: stacked cards (responsive at every width) */
.ppl-list { display: flex; flex-direction: column; gap: .8rem; }
.ppl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 1rem 1.1rem; display: flex; gap: .8rem 1.4rem; align-items: center; flex-wrap: wrap; }
.ppl-main { flex: 1 1 18rem; min-width: 0; }
.ppl-id { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.ppl-name { font-size: 1.12rem; color: var(--ink); }
.pill-type { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--inset); padding: .12rem .5rem; border-radius: 999px; }
.ppl-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; color: var(--text); font-size: .95rem; }
.ppl-facts .k { color: var(--muted); font-weight: 700; margin-right: .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.ppl-actions { flex-shrink: 0; }
.ppl-avatar { width: 3rem; height: 3rem; flex: 0 0 auto; font-size: 1rem; }
.ppl-section { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 1.6rem 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.ppl-section:first-of-type { margin-top: .6rem; }
.ppl-section span { font-size: .8rem; font-weight: 800; color: var(--muted); background: var(--inset); padding: .1rem .55rem; border-radius: 999px; }
.ppl-search { width: 100%; max-width: 30rem; font-size: 1.05rem; padding: .7rem .9rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); margin-bottom: .4rem; }
.ppl-search:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.atable .empty-row td { color: var(--muted); text-align: center; padding: 2.2rem; }
.status { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-weight: 800; font-size: .76rem; }
.status.pub { background: color-mix(in srgb, var(--good) 18%, var(--surface)); color: var(--good); }
.status.draft { background: var(--inset); color: var(--muted); }

.btn-secondary { background: var(--surface); color: var(--accent-ink); border: 2px solid var(--border); }
.btn-secondary:hover { background: var(--inset); }
.btn-danger { background: #c0392b; color: #fff; }
.btn-danger:hover { background: #a5311f; }
.btn-sm { width: auto; margin: 0; padding: .45rem .8rem; font-size: .95rem; display: inline-flex; }
.btn-disabled, .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; background: var(--surface); color: var(--muted); border: 2px solid var(--border); }

/* Rich-text formatting toolbar (staff text boxes) */
.rt-toolbar { display: flex; gap: .35rem; margin-bottom: .4rem; flex-wrap: wrap; }
.rt-btn { cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 8px; padding: .32rem .7rem; font-size: .9rem; font-weight: 700; line-height: 1; }
.rt-btn:hover { background: var(--inset); }

/* Rendered rich text (messages, events, menus, venues) */
/* Documents: choose file vs typed text (admin), and read a typed document. */
.doctype-opts { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.doctype-opt { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.doctype-opt input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.doc-written { max-width: 46rem; font-size: 1.12rem; line-height: 1.7; color: var(--text); }
.doc-written h1, .doc-written h2, .doc-written h3, .doc-written h4 { color: var(--ink); }
.doc-written p { margin: 0 0 1rem; }
.doc-written img { max-width: 100%; height: auto; border-radius: 8px; margin: .4rem 0; }
/* Document rich-text editor (contenteditable WYSIWYG). */
.rte { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem; border-bottom: 1px solid var(--border); background: var(--inset); }
.rte-btn { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 7px; padding: .35rem .65rem; font-size: .92rem; cursor: pointer; line-height: 1; }
.rte-btn:hover { background: var(--badge-bg); border-color: var(--accent); }
.rte-area { min-height: 20rem; max-height: 60vh; overflow-y: auto; padding: 1rem 1.1rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink); }
.rte-area:focus { outline: none; }
.rte-area img { max-width: 100%; height: auto; border-radius: 8px; margin: .3rem 0; }
.rte-area h2, .rte-area h3 { color: var(--ink); }
.rte-area a { color: var(--accent-ink, var(--accent)); text-decoration: underline; }

.desc a, .vd-desc a, .menu-body a { color: var(--accent-ink, var(--accent)); text-decoration: underline; }
.desc ul, .vd-desc ul, .menu-body ul { margin: .5rem 0; padding-left: 1.4rem; }
.desc li, .vd-desc li, .menu-body li { margin: .25rem 0; }
.lk-ext { white-space: nowrap; }

.form-grid { display: grid; gap: 1.1rem; padding: 1.3rem; }
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-row { display: flex; flex-direction: column; gap: .35rem; }
.form-row label { font-weight: 700; color: var(--ink); }
.form-row input, .form-row select, .form-row textarea { font-size: 1.05rem; padding: .7rem .8rem; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: inherit; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); }
.form-row textarea { min-height: 8rem; resize: vertical; }
.form-row .hint { color: var(--muted); font-size: .9rem; }
.form-check { display: flex; align-items: center; gap: .6rem; }
.form-check input { width: 1.3rem; height: 1.3rem; }
.form-check label { font-weight: 600; }
.form-actions { display: flex; gap: .8rem; padding: 0 1.3rem 1.3rem; flex-wrap: wrap; align-items: center; }

@media (max-width: 820px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .admin-side-home { margin-top: 0; padding-top: .7rem; border-top: none; }
  .form-cols { grid-template-columns: 1fr; }
  .atable thead { display: none; }
  .atable, .atable tbody, .atable tr, .atable td { display: block; width: 100%; }
  .atable tr { border-bottom: 1px solid var(--border); padding: .5rem 0; }
  .atable td { border: none; padding: .3rem 1rem; }
}

/* Admin reports */
.rep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
/* Wellness "I'm OK today" check-in card on the home feed */
.checkin-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(120deg, var(--brand) 0%, var(--brand-strong) 100%); color: #fff; border-radius: 16px; padding: 1.1rem 1.3rem; margin-bottom: 1.3rem; box-shadow: var(--shadow); }
.checkin-card .ci-text { font-size: 1.1rem; line-height: 1.4; flex: 1 1 16rem; }
.checkin-card .ci-btn { margin: 0; width: auto; background: #fff; color: var(--brand-strong); font-size: 1.1rem; padding: .8rem 1.5rem; white-space: nowrap; }
.checkin-card .ci-btn:hover { background: #f0f4f3; }
.checkin-card.done { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.checkin-card.done svg { color: var(--accent); flex: 0 0 auto; }
.celebrate-card .cel-emoji { font-size: 1.15rem; }
.cel-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid var(--border); }
.cel-row:first-of-type { border-top: none; padding-top: .1rem; }
.cel-row .btn { margin: 0; flex: 0 0 auto; }
/* Quick poll card */
.poll-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1.3rem; margin-bottom: 1.3rem; box-shadow: var(--shadow); }
.poll-q { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-bottom: .8rem; }
.poll-form { display: flex; flex-direction: column; gap: .1rem; }
.poll-opt { display: flex; align-items: center; gap: .6rem; padding: .55rem .2rem; font-size: 1.05rem; color: var(--text); cursor: pointer; }
.poll-form .btn { margin-top: .7rem; align-self: flex-start; }
.poll-result { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; margin: .35rem 0; border: 1px solid var(--border); border-radius: 10px; background: var(--inset); }
.poll-result.mine { border-color: var(--accent); }
.pr-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: 0; }
.poll-result.mine .pr-bar { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.pr-label, .pr-pct { position: relative; z-index: 1; }
.pr-label { font-weight: 600; color: var(--ink); }
.pr-pct { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* My Week agenda */
.mw-section { margin-bottom: 1.8rem; }
.mw-h { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0 0 .8rem; }
.mw-list { display: flex; flex-direction: column; gap: .6rem; }
.mw-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .9rem 1.1rem; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.mw-item:hover { background: var(--inset); }
.mw-when { flex: 0 0 6.5rem; display: flex; flex-direction: column; font-weight: 800; color: var(--accent-ink); }
.mw-when .mw-time { font-weight: 600; color: var(--muted); font-size: .9rem; }
.mw-body { display: flex; flex-direction: column; gap: .15rem; }
.mw-title { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.mw-loc { color: var(--muted); font-size: .92rem; }
.mw-menus { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .3rem; }
.mw-menu { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .35rem .8rem; text-decoration: none; color: var(--ink); font-weight: 600; }
.mw-menu:hover { background: var(--inset); }
/* Daily nugget card */
.nugget-card .nug-emoji { font-size: 1.1rem; }
.nugget-card .nug-body { margin: .1rem 0 0; color: var(--text); line-height: 1.55; }
.nugget-answer { margin-top: .6rem; }
.nugget-answer summary { cursor: pointer; color: var(--accent-ink); font-weight: 700; }
.nugget-answer p { margin: .4rem 0 0; color: var(--text); }
/* Event photo album */
.album-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 1rem; }
.album-add input[type=text] { flex: 1 1 12rem; }
.album-add .btn { margin: 0; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }
.album-item { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.album-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--inset); }
.album-item figcaption { padding: .5rem .65rem; font-size: .85rem; color: var(--muted); display: flex; flex-direction: column; gap: .2rem; }
.album-cap { color: var(--ink); font-weight: 600; }
.album-by { font-size: .8rem; }
.album-item .linkbtn { align-self: flex-start; }
/* Service requests */
.req-list { display: flex; flex-direction: column; gap: .8rem; }
.req-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.req-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.req-cat { font-weight: 800; color: var(--ink); }
.req-det { margin: .1rem 0 .5rem; color: var(--text); }
.req-note { margin: .1rem 0 .5rem; color: var(--text); background: var(--inset); border-radius: 8px; padding: .5rem .7rem; font-size: .95rem; }
.req-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .85rem; }
.req-admin-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.req-admin-form input[type=text] { flex: 1 1 14rem; }
.req-admin-form .btn { margin: 0; }
/* Neighbors who share interests */
.nbor-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; text-decoration: none; color: inherit; border-top: 1px solid var(--border); }
.nbor-row:first-of-type { border-top: none; }
.nbor-row:hover .nbor-txt strong { color: var(--accent-ink); }
.nbor-txt { display: flex; flex-direction: column; min-width: 0; }
.nbor-txt strong { color: var(--ink); }
.nbor-shared { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-int { margin-top: .3rem; color: var(--accent-ink); font-size: .95rem; }
.wx-icon { font-size: 1.9rem; width: 2.6rem; text-align: center; flex: 0 0 auto; }
/* Marketplace */
.market-post > summary { display: inline-flex; cursor: pointer; list-style: none; }
.market-post > summary::-webkit-details-marker { display: none; }
.market-price { font-size: 1.35rem; font-weight: 800; color: var(--accent-ink); margin: .2rem 0 .3rem; }
.market-grid .vt-photo .chip { top: .7rem; left: .7rem; }
/* Event feedback */
.fb-btns { display: flex; gap: .5rem; }
.fb-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .3rem; cursor: pointer; font-weight: 700; color: var(--ink); font-size: .82rem; }
.fb-btn:hover { background: var(--inset); border-color: var(--accent); }
.fb-emoji { font-size: 1.6rem; }
.fb-comment { margin: .35rem 0; color: var(--text); font-size: .95rem; line-height: 1.45; }
/* Larger-text accessibility mode: scale the root so rem-based sizing grows. */
:root[data-textsize="large"] { font-size: 112.5%; }
:root[data-textsize="xlarge"] { font-size: 125%; }
/* Admin feature toggles */
.feat-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.feat-row:first-child { border-top: none; }
.feat-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.feat-txt strong { color: var(--ink); }
.feat-row form { margin: 0; }
.feat-toggle { min-width: 4.5rem; }
.feat-toggle.is-on { background: var(--accent); color: #fff; }
/* Admin -> Home buttons: pick which quick-action tiles residents see, and order them. */
.hb-row { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.hb-row:first-child { border-top: none; }
.hb-move { display: flex; flex-direction: column; gap: .2rem; flex: none; }
.hb-btn { width: 2rem; height: 1.5rem; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 7px; cursor: pointer; font-size: .7rem; line-height: 1; padding: 0; }
.hb-btn:hover { background: var(--inset); border-color: var(--accent); }
.hb-main { flex: 1; display: flex; align-items: center; gap: .8rem; min-width: 0; cursor: pointer; }
.hb-ic { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 11px; background: var(--badge-bg); color: var(--accent); display: grid; place-items: center; }
.hb-labels { display: flex; flex-direction: column; gap: .05rem; min-width: 0; flex: 1; }
.hb-labels strong { color: var(--ink); }
.hb-labels .muted { font-size: .85rem; }
.hb-check { flex: none; width: 1.4rem; height: 1.4rem; accent-color: var(--accent); cursor: pointer; }
/* Emergency alert banner (site-wide) */
.alert-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .85rem 1.25rem; color: #fff; font-weight: 700; font-size: 1.05rem; text-align: center; line-height: 1.35; }
.alert-bar.info { background: var(--brand); }
.alert-bar.warning { background: #c47f16; }
.alert-bar.urgent { background: #b3261e; }
.alert-bar .ab-icon { font-size: 1.3rem; flex: 0 0 auto; }
.alert-bar .ab-msg { flex: 0 1 auto; }
.alert-bar .ab-ack { background: #fff; color: #16302c; border: none; border-radius: 8px; padding: .45rem 1rem; font-weight: 800; cursor: pointer; text-decoration: none; font-size: .95rem; white-space: nowrap; flex: 0 0 auto; }
.alert-bar .ab-ack:hover { background: #eef2f1; }
.rep-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.rep-stat .n { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rep-stat .l { color: var(--muted); font-size: .85rem; font-weight: 600; }
.rep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.5rem; }
.rep-panel { padding: 1.1rem 1.2rem; }
.rep-chart { display: flex; align-items: flex-end; gap: .35rem; height: 9rem; }
.rep-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .2rem; }
.rep-bar-fill { width: 100%; max-width: 2rem; background: var(--brand); border-radius: 6px 6px 0 0; }
.rep-bar-num { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rep-bar-label { font-size: .7rem; color: var(--muted); }
.rep-row { display: flex; align-items: center; gap: .6rem; margin: .45rem 0; }
.rep-row-label { width: 6rem; flex: 0 0 auto; font-weight: 600; color: var(--ink); font-size: .92rem; }
.rep-row-val { width: 3rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.rep-track { flex: 1; height: .7rem; background: var(--inset); border-radius: 999px; overflow: hidden; }
.rep-track-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.rep-readcell { display: flex; align-items: center; gap: .5rem; }
.rep-pct { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
@media (max-width: 820px) { .rep-two { grid-template-columns: 1fr; } }

/* Videos gallery */
/* Videos are grouped under their category. A real heading and a rule, not the
   quiet .feed-label used elsewhere: those groups sit inside bordered panels
   that already separate them, and a bare grid has nothing to divide it. */
/* Kept tight on purpose. Most categories here hold a single video, so generous
   spacing turned a one-screen page into three and left a lot of nothing beside
   each lone card. */
.vid-group { margin-bottom: 1.5rem; }
.vid-cat { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; margin: 0 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.vid-cat .n { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
/* The heading aligns on the baseline, which would hang an icon oddly high, so
   the icon centres itself against the row instead. */
.vid-cat .vc-icon { align-self: center; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; object-fit: cover; border-radius: 6px; }
/* Cards top-align, so one long title cannot drag a whole row out of line. */
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; align-items: start; }
.vid { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit; }
.vid .thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; display: grid; place-items: center; box-shadow: var(--shadow); background-size: cover; background-position: center; background-color: var(--inset); overflow: hidden; }
.vid .play { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand-strong); display: grid; place-items: center; transition: transform .15s ease; }
.vid:hover .play { transform: scale(1.08); }
.vid .vtitle { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.vid .vcat { color: var(--muted); font-size: .92rem; }
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: #000; }
.embed iframe, .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Events (day/month views + detail) ---------- */
.muted { color: var(--muted); }

.viewtoggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .2rem; }
.viewtoggle a, .viewtoggle button { padding: .45rem 1.1rem; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1rem; }
.viewtoggle button { background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.viewtoggle a.active, .viewtoggle button.active { background: var(--brand); color: #fff; }
/* Directory sort control */
.dir-sort { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.dir-sort-label { color: var(--muted); font-weight: 700; font-size: .95rem; }

.daybar { display: flex; align-items: stretch; gap: .5rem; }
.daybar .days { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .7rem .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--ink); text-align: center; }
.day:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.day.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.day .dnum { font-weight: 800; font-size: 1.05rem; }
.day .ddow { font-size: .82rem; opacity: .85; }
.daynav { display: flex; align-items: center; justify-content: center; width: 2.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--accent-ink); text-decoration: none; font-size: 1.6rem; font-weight: 800; }
.daynav:hover { background: var(--inset); }
.weeklabel { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; color: var(--ink); font-size: 1.1rem; }
.month-mobile-note { display: none; }
/* Hide the month option/grid on phones (the calendar is too cramped to read). */
@media (max-width: 40rem) {
  .hide-mobile { display: none !important; }
  .cal { display: none; }
  .month-mobile-note { display: block; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; }
}

.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; }
.ev-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .15s ease; }
.ev-card:hover { transform: translateY(-2px); }
.ev-card.past { opacity: .55; }
.ev-card.past .ev-photo { filter: grayscale(0.6); }
.ev-photo { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; display: block; }
.ev-photo .chip { position: absolute; top: .7rem; left: .7rem; }
.ev-body { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1rem; }
.ev-title { font-size: 1.2rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ev-meta { color: var(--muted); font-size: .95rem; }
.ev-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .3rem; }
.ev-status { color: var(--muted); font-weight: 600; font-size: .92rem; }
.ev-count { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-weight: 700; }

/* Month calendar */
.cal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--inset); }
.cal-head span { padding: .6rem; text-align: center; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
/* Fixed row height so busy days never resize the calendar (resident month view). */
.cal > .cal-grid { grid-auto-rows: 7.6rem; }
.cell { height: 100%; overflow: hidden; border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: .35rem; display: flex; flex-direction: column; gap: .15rem; }
.cell:nth-child(7n + 1) { border-left: none; }
.cell.empty { background: var(--ground); }
.cell.today { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.cellnum { font-weight: 700; color: var(--ink); font-size: .9rem; padding: .1rem .2rem; }
.cell.today .cellnum { color: var(--accent-ink); }
.cal-ev { display: block; font-size: .8rem; color: var(--ink); text-decoration: none; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .05rem .2rem; border-radius: 5px; }
.cal-ev:hover { background: var(--inset); }
.cal-ev .cdot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-right: .25rem; vertical-align: middle; }
.cal-ev .ctime { color: var(--muted); font-weight: 700; }
.cal-ev.past { color: var(--muted); text-decoration: line-through; }
.cal-ev.past .cdot { background: var(--muted); }
.cal-more { display: block; font-size: .78rem; font-weight: 700; color: var(--accent-ink); text-decoration: none; padding: 0 .2rem; }

/* Event detail */
.detail-layout { display: grid; grid-template-columns: 1fr 21rem; gap: 1.6rem; align-items: start; }
.detail-main { min-width: 0; }
.ev-hero { position: relative; aspect-ratio: 16 / 8; border-radius: 18px; background-size: cover; background-position: center; box-shadow: var(--shadow); margin-bottom: 1.1rem; }
.ev-hero .chip.inline { position: absolute; top: 1rem; left: 1rem; }
.detail-title { margin: 0 0 1.1rem; font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.3rem; }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.ic-label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ic-value { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.ic-sub { color: var(--muted); }
.detail-side { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 5.5rem; }
.roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.roster li { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 600; }
.ravatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--badge-bg); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: .82rem; flex: none; }
.ravatar.wl { background: color-mix(in srgb, var(--beacon) 22%, var(--surface)); color: color-mix(in srgb, var(--beacon) 70%, #000); }

/* Messages list */
.msg-list { display: flex; flex-direction: column; gap: .7rem; }
.msg-item { display: flex; align-items: center; gap: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .8rem 1rem; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.msg-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.msg-dot { width: .7rem; height: .7rem; border-radius: 50%; background: transparent; flex: none; }
.msg-item.unread .msg-dot { background: #d64545; }
.msg-thumb { width: 4.2rem; height: 4.2rem; border-radius: 10px; background: var(--badge-bg); background-size: cover; background-position: center; flex: none; }
.msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.msg-title { font-weight: 700; color: var(--ink); font-size: 1.15rem; }
.msg-item.unread .msg-title { font-weight: 800; }
.msg-meta { color: var(--muted); font-size: .92rem; }
.msg-item .chev { color: var(--muted); font-size: 1.5rem; line-height: 1; }

/* Profile */
.prof-photo { width: 5rem; height: 5rem; border-radius: 50%; background: var(--badge-bg); background-size: cover; background-position: center; color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; flex: none; }
.prof-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 0; }
.prof-fields dt { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .1rem; }
.prof-fields dd { margin: 0; color: var(--ink); font-size: 1.1rem; }
.prof-textgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .prof-fields { grid-template-columns: 1fr; } .prof-textgrid { grid-template-columns: 1fr; } }

/* Direct message thread */
.chat { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0 1.2rem; }
.bubble { max-width: 80%; padding: .7rem .95rem; border-radius: 16px; font-size: 1.05rem; line-height: 1.45; }
.bubble .btime { display: block; font-size: .72rem; opacity: .7; margin-top: .25rem; }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.bubble.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-bottom-left-radius: 5px; }
.dm-compose { display: flex; gap: .6rem; align-items: flex-end; }
.dm-compose textarea { flex: 1; font-size: 1.05rem; padding: .7rem .8rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: inherit; resize: vertical; }
.dm-compose textarea:focus { outline: none; border-color: var(--accent); }
.dm-compose .btn { width: auto; margin: 0; }

/* Groups */
/* Card grid: rows of 4 (matches the events tiles), stepping down on smaller screens. */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
@media (max-width: 62rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .card-grid { grid-template-columns: 1fr; } }
.group-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.3rem 1rem; box-shadow: var(--shadow); }
.group-photo { width: 5rem; height: 5rem; border-radius: 50%; background: var(--badge-bg); background-size: cover; background-position: center; }
.group-name { font-weight: 800; color: var(--ink); font-size: 1.15rem; }
.group-count { color: var(--muted); font-size: .92rem; }
.group-card form { width: 100%; margin-top: .3rem; }
.group-card .btn { margin: 0; }
a.group-card { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.group-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: var(--accent); }
/* Group detail page */
.group-hero { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow); margin: .6rem 0 1.2rem; }
.gh-photo { width: 6rem; height: 6rem; border-radius: 16px; background: var(--badge-bg); background-size: cover; background-position: center; flex: none; }
.gh-body { min-width: 0; flex: 1; }
.gh-body h1 { margin: .3rem 0 .2rem; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); }
.gh-desc { margin: .5rem 0 0; color: var(--text); }
.group-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.group-compose { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.group-compose label { display: block; margin-bottom: .2rem; }
.group-compose textarea { width: 100%; }
.group-add { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.group-add select { min-width: 16rem; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 880px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .daybar .days { grid-template-columns: repeat(3, 1fr); }
  .daybar .days a:nth-child(1), .daybar .days a:nth-child(5) { display: none; }
  .cell { min-height: 4.5rem; }
  .cal-ev .ctime { display: none; }
}

/* ---- Transport dispatch (conflicts, legs, driver day sheets) ------------- */
.conflict-panel { background: color-mix(in srgb, var(--beacon) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--beacon) 55%, var(--border)); border-left-width: 5px; border-left-color: var(--beacon); border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.conflict-panel.ackd { background: var(--inset); border-color: var(--border); border-left-color: var(--muted); }
.cf-head { margin: 0 0 .4rem; font-weight: 800; color: var(--ink); font-size: 1.02rem; }
.cf-list { margin: 0; padding-left: 1.2rem; color: var(--ink); }
.cf-list li { margin: .25rem 0; }
.cf-foot { margin: .6rem 0 0; color: var(--muted); font-size: .9rem; }

.pill-clash, .pill-access { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pill-clash { background: color-mix(in srgb, var(--beacon) 30%, var(--surface)); color: var(--ink); }
.pill-access { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand-ink, var(--brand)); }
.atable tr.row-clash > td { background: color-mix(in srgb, var(--beacon) 10%, transparent); }
.leg-tag { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.quickform { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.quickform select { min-width: 7rem; padding: .35rem .5rem; }
.driverfilter { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.rep-row-label.wide { width: 11rem; }

.daysheet { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 1.2rem 1.3rem; margin-bottom: 1.6rem; }
.ds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: .6rem; margin-bottom: .8rem; }
.ds-head h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.ds-date { margin: .15rem 0 0; color: var(--muted); font-weight: 600; }
.ds-brand { text-align: right; color: var(--ink); font-size: .9rem; line-height: 1.4; }
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th, .ds-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.ds-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ds-tick { font-size: 1.4rem; line-height: 1; color: var(--muted); }
.ds-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-sub { color: var(--muted); font-size: .84rem; }

@media print {
  .noprint { display: none !important; }
  .daysheet { break-after: page; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 1rem !important; }
  .daysheet:last-of-type { break-after: auto; }
  .ds-table th, .ds-table td { border-bottom: 1px solid #999 !important; }
  .ds-head { border-bottom-color: #000 !important; }
  .ds-sub, .ds-date, .ds-table th { color: #333 !important; }
  .ds-table tr { break-inside: avoid; }
  .conflict-panel { border-color: #999 !important; background: #fff !important; }
}

/* ---- Notification mode picker (Settings) -------------------------------- */
.notif-area { border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem 1rem; margin: 0 0 .9rem; }
.notif-area legend { font-weight: 800; color: var(--ink); padding: 0 .4rem; }
.notif-area > p.muted { margin: 0 0 .6rem; font-size: .92rem; }
.notif-choice { display: flex; gap: .5rem; flex-wrap: wrap; }
.notif-choice label { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--border); border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer; background: var(--surface); font-weight: 600; min-height: 2.75rem; }
.notif-choice label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--accent-ink); }
.notif-choice input { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; }

/* ---- Resident engagement (outreach list) -------------------------------- */
.eng-person { display: flex; align-items: flex-start; gap: .7rem; }
.eng-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--border); }
.eng-initials { display: flex; align-items: center; justify-content: center; background: var(--inset); color: var(--muted); font-weight: 800; font-size: .85rem; }
.eng-tag { display: inline-block; margin-top: .25rem; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; cursor: help; }
.eng-quiet   { background: color-mix(in srgb, var(--beacon) 30%, var(--surface)); color: var(--ink); }
.eng-never   { background: color-mix(in srgb, var(--beacon) 16%, var(--surface)); color: var(--ink); }
.eng-dormant { background: var(--inset); color: var(--muted); }
.eng-light   { background: var(--inset); color: var(--muted); }
.eng-active  { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--accent-ink); }
.eng-outreach { background: var(--inset); }
.eng-log { list-style: none; margin: 0; padding: 0; }
.eng-log li { padding: .5rem 0; border-top: 1px solid var(--border); font-size: .95rem; }

/* ---- Games ------------------------------------------------------------- */
/* Everything here is sized in rem so the text-size setting scales the boards
   along with the rest of the app. */
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.game-card { display: flex; gap: .9rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); text-decoration: none; color: inherit; }
a.game-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.game-card.is-empty { opacity: .72; }
.game-icon { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; color: var(--brand); }
.game-icon svg { width: 100%; height: 100%; }
.game-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.game-body strong { font-size: 1.2rem; color: var(--ink); }
.game-blurb { color: var(--muted); }
.game-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; font-size: .9rem; align-items: center; }
.game-done, .game-streak { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; }
.game-done { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--accent-ink); }
.game-streak { background: color-mix(in srgb, var(--beacon) 26%, var(--surface)); color: var(--ink); }

/* Daily quiz */
.quiz-q { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; margin: 0 0 1rem; }
.quiz-q legend { font-weight: 700; color: var(--ink); padding: 0 .4rem; line-height: 1.45; }
.qv-n { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; margin-right: .5rem;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: .85rem; font-weight: 800; flex: 0 0 auto; }
.quiz-choice { display: flex; align-items: center; gap: .65rem; padding: .75rem .9rem; margin-top: .5rem; border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; background: var(--surface); min-height: 3rem; }
.quiz-choice:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.quiz-choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); flex: 0 0 auto; }
.qc-letter { font-weight: 800; color: var(--muted); flex: 0 0 auto; }
.quiz-result { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.3rem; text-align: center; margin-bottom: 1.3rem; }
.qr-score { font-size: 2.2rem; font-weight: 800; color: var(--accent-ink); margin: 0; letter-spacing: -.02em; }
.qr-msg { margin: .3rem 0 0; color: var(--ink); font-size: 1.1rem; }
.qr-streak { margin: .4rem 0 0; color: var(--muted); }
.quiz-review { border-left: 4px solid var(--border); padding: .6rem 0 .6rem 1rem; margin-bottom: .9rem; }
.quiz-review.is-right { border-left-color: var(--brand); }
.quiz-review.is-wrong { border-left-color: var(--accent); }
.qv-q { margin: 0 0 .3rem; font-weight: 700; color: var(--ink); }
.qv-a { margin: 0; }
.qv-x { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }

/* Word search */
.ws-status { font-weight: 700; color: var(--ink); margin: 0 0 .6rem; }
.ws-grid { display: grid; grid-template-columns: repeat(var(--ws-size), 1fr); gap: 2px; background: var(--border);
  border: 2px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 1.1rem; }
.ws-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--surface);
  border: 0; font: inherit; font-weight: 700; font-size: clamp(.8rem, 2.6vw, 1.15rem); color: var(--ink);
  cursor: pointer; padding: 0; text-transform: uppercase; user-select: none; }
.ws-cell:hover { background: var(--inset); }
.ws-cell.is-picked { background: var(--beacon); color: #3a2a08; }
.ws-cell.is-found { background: color-mix(in srgb, var(--brand) 24%, var(--surface)); color: var(--accent-ink); cursor: default; }
.ws-cell.is-miss { background: color-mix(in srgb, #b3261e 32%, var(--surface)); color: var(--ink); }
.ws-preview .ws-cell { cursor: default; }
.ws-words ul { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ws-words li { padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-weight: 700; letter-spacing: .03em; }
.ws-words li.is-found { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--accent-ink);
  border-color: transparent; text-decoration: line-through; }
.ws-actions, .ws-picker-list { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.ws-picker { margin-top: 1.6rem; }
.btn.is-current { border-color: var(--brand); color: var(--accent-ink); }
.ws-done, .mm-done, .sd-done { background: var(--surface); border: 1px solid var(--brand); border-radius: 16px;
  padding: 1.3rem; text-align: center; margin-top: 1.2rem; }
.wd-title { font-size: 1.5rem; font-weight: 800; color: var(--accent-ink); margin: 0 0 .3rem; }
.wd-sub { color: var(--muted); margin: 0 0 .9rem; }

/* Memory match */
.mm-controls { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .9rem; }
.mm-status { font-weight: 700; color: var(--ink); margin: 0 0 .8rem; }
.mm-board { display: grid; grid-template-columns: repeat(var(--mm-cols, 4), 1fr); gap: .6rem; }
.mm-card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 12px; }
.mm-back, .mm-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; transition: opacity .18s ease; }
.mm-back { background: var(--brand); border: 2px solid var(--brand); opacity: 1;
  background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%); }
.mm-face { background: var(--surface); border: 2px solid var(--border); font-size: clamp(1.8rem, 8vw, 3rem); opacity: 0; }
.mm-card.is-up .mm-back { opacity: 0; }
.mm-card.is-up .mm-face { opacity: 1; }
.mm-card.is-done .mm-face { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.mm-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Sudoku */
.sd-controls { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .8rem; }
.sd-status { color: var(--muted); margin: 0 0 .8rem; font-weight: 600; }
.sd-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; background: var(--border);
  border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; max-width: 30rem; }
.sd-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--surface);
  border: 0; font: inherit; font-size: clamp(1rem, 4.4vw, 1.5rem); font-weight: 600; color: var(--accent-ink); cursor: pointer; padding: 0; }
.sd-cell.is-given { color: var(--ink); font-weight: 800; background: var(--inset); cursor: default; }
.sd-cell.is-selected { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.sd-cell.is-wrong { color: #b3261e; background: color-mix(in srgb, #b3261e 12%, var(--surface)); }
.sd-cell.has-marks { font-size: .62rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; line-height: 1.1; }
.sd-cell.br { box-shadow: inset -2px 0 0 var(--ink); }
.sd-cell.bb { box-shadow: inset 0 -2px 0 var(--ink); }
.sd-cell.br.bb { box-shadow: inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink); }
.sd-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: 1rem 0; max-width: 30rem; }
.sd-key { min-height: 3.4rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  font: inherit; font-size: 1.35rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.sd-key:hover { background: var(--inset); border-color: var(--brand); }
.sd-erase { font-size: .95rem; grid-column: span 2; }
.sd-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.sd-pencil { margin: 0; }

@media (max-width: 40rem) {
  .game-grid { grid-template-columns: 1fr; }
  .ws-words li { font-size: .9rem; padding: .35rem .65rem; }
}
@media print {
  .ws-cell.is-found, .ws-cell.is-picked { background: #fff !important; color: #000 !important; }
  .ws-grid, .sd-grid { border-color: #000 !important; }
  .ws-cell, .sd-cell { color: #000 !important; background: #fff !important; }
  .mm-board, .sd-pad { display: none !important; }
}

/* ---- Daily word --------------------------------------------------------- */
/* Marking never relies on colour alone: every tile carries a tick or a dot
   and a screen-reader label, so it reads correctly for colour-blind residents
   and for read-aloud. */
.dw-board { display: grid; gap: .45rem; margin: 0 0 1rem; max-width: 22rem; }
.dw-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.dw-tile { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); border-radius: 10px; background: var(--surface);
  font-size: clamp(1.3rem, 7vw, 2rem); font-weight: 800; text-transform: uppercase; color: var(--ink); }
.dw-tile.is-empty { background: var(--inset); border-style: dashed; }
.dw-tile.is-exact { background: var(--brand); border-color: var(--brand); color: #fff; }
.dw-tile.is-elsewhere { background: var(--beacon); border-color: var(--beacon); color: #3a2a08; }
.dw-tile.is-absent { background: var(--inset); border-color: var(--border); color: var(--muted); }
.dw-mark { position: absolute; right: .28rem; top: .18rem; font-size: .7rem; line-height: 1; opacity: .85; }
.dw-key { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem; }
.dw-legend { display: inline-flex; align-items: center; gap: .35rem; }
.dw-form { max-width: 22rem; }
.dw-form input { font-size: 1.6rem; letter-spacing: .4em; text-transform: uppercase; text-align: center; font-weight: 700; }
.dw-done { background: var(--surface); border: 1px solid var(--brand); border-radius: 16px; padding: 1.3rem; text-align: center; }
.dw-doneactions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .4rem; }
.dw-letters { margin-top: 1.6rem; }
.dw-letterrow { display: flex; flex-wrap: wrap; gap: .3rem; }
.dw-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem;
  border-radius: 7px; font-weight: 800; font-size: .85rem; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.dw-chip.is-exact { background: var(--brand); border-color: var(--brand); color: #fff; }
.dw-chip.is-elsewhere { background: var(--beacon); border-color: var(--beacon); color: #3a2a08; }
.dw-chip.is-absent { background: var(--inset); color: var(--muted); opacity: .6; }
.dw-chip.is-untried { color: var(--muted); }

/* ---- Quiz team standings ------------------------------------------------ */
.team-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.1rem 1.2rem; margin: 1.4rem 0 0; }
.team-list { list-style: none; margin: 0; padding: 0; counter-reset: team; }
.team-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem;
  padding: .6rem 0; border-top: 1px solid var(--border); }
.team-list li:first-child { border-top: 0; }
.team-list li.is-mine { font-weight: 700; }
.tl-name { color: var(--ink); min-width: 0; }
.tl-you { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--accent-ink);
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tl-avg { font-size: 1.25rem; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.tl-n { color: var(--muted); font-size: .85rem; white-space: nowrap; }

@media (max-width: 34rem) {
  .team-list li { grid-template-columns: 1fr auto; }
  .tl-n { grid-column: 1 / -1; margin-top: -.35rem; }
}