/* ═══════════════════════════════════════════════════════════════
   THE VILLAGE BOARD
   Sidebar shell + "At a Glance" dashboard. Palette, 22px radius,
   tile language and typography carried from the AgeWishTV system.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'DM Serif Display';src:url('fonts/dm-serif-display-v9-latin-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('fonts/source-sans-3-v15-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('fonts/source-sans-3-v15-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('fonts/source-sans-3-v15-latin-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* Bethany Lutheran Village's own tokens, read off bethanylutheranvillage.org:
     --primary #007550 (green), --blue #008096 (teal), --secondary #424A4F
     (slate), --dark #0C0B0B, --light #FCFCFC. The green and the teal are used
     literally below; the rest of the palette is pulled toward them. Gold is
     kept as the highlight — it is the AgeWishTV signature, and gold on deep
     green is the natural pairing rather than a compromise. */
  --bv-green:#007550; --bv-teal:#008096; --bv-slate:#424A4F;

  --bg-a:#F1F0E7;
  --shape-a:#E9C87E;   /* one warm body so the ground is not monotone green */
  --shape-b:#2E9C74;   /* Bethany green, lifted for the breathing layer */
  --shape-c:#1F8A9B;   /* Bethany teal, lifted */
  --accent:#00674A; --accent-light:#00875E; --chrome-accent:#EFCF88;
  --text-dark:#1F2B27; --text-mid:#46564F; --card-bg:rgba(253,251,244,.88);
  --focus:rgba(0,128,150,.9); --glow:rgba(239,207,136,.32);
  /* two of the seven category hues are Bethany's actual brand colours */
  --tile-a:#007550; --tile-b:#B08234; --tile-c:#008096;
  --tile-d:#6B5C86; --tile-e:#A96E68; --tile-f:#A96A3C; --tile-g:#42565C;
  --radius:22px;
  --t:.7s cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --zoom:1; --rail:19rem;
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  /* the premium edge, named once */
  --edge:inset 0 0 0 1px rgba(233,200,134,.24),inset 0 1px 0 rgba(255,255,255,.07),0 6px 22px rgba(0,0,0,.24);
  --edge-card:inset 0 0 0 1px rgba(233,200,134,.3),inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(0,0,0,.2);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:var(--font-body);
  font-size:calc(1.375rem * var(--zoom));   /* 22px floor */
  line-height:1.6;color:var(--bg-a);
  /* was plum-brown; now a deep green-charcoal derived from Bethany's #007550 */
  background:linear-gradient(115deg,#131E1A 0%,#17251F 35%,#1D2E26 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* ── breathing ground ── */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform,opacity}
.blob-1{width:70vw;height:70vw;left:-18vw;top:-22vw;background:radial-gradient(circle,var(--shape-a) 0%,transparent 68%);animation:breathe1 19s var(--ease) infinite alternate}
.blob-2{width:62vw;height:62vw;right:-16vw;top:12vh;background:radial-gradient(circle,var(--shape-b) 0%,transparent 68%);animation:breathe2 24s var(--ease) infinite alternate}
.blob-3{width:58vw;height:58vw;left:22vw;bottom:-26vw;background:radial-gradient(circle,var(--shape-c) 0%,transparent 66%);animation:breathe3 28s var(--ease) infinite alternate}
@keyframes breathe1{from{transform:scale(1) translate(0,0);opacity:.38}to{transform:scale(1.18) translate(4vw,3vh);opacity:.60}}
@keyframes breathe2{from{transform:scale(1.12) translate(2vw,0);opacity:.32}to{transform:scale(.94) translate(-3vw,5vh);opacity:.52}}
@keyframes breathe3{from{transform:scale(.96) translate(-2vw,2vh);opacity:.26}to{transform:scale(1.16) translate(3vw,-3vh);opacity:.44}}
.wash{position:fixed;inset:0;z-index:1;pointer-events:none;background:rgba(214,181,102,.10)}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(10,18,15,.46) 100%)}
@media(prefers-reduced-motion:reduce){.blob{animation:none!important}}

/* ── welcome ── */
#welcome{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:2rem 1.25rem;
  background:linear-gradient(to bottom,rgba(11,19,16,.42) 0%,rgba(11,19,16,.66) 58%,rgba(11,19,16,.90) 100%),
             url('assets/welcome.jpg') center/cover no-repeat;
  transition:opacity .9s var(--ease),visibility .9s;
}
#welcome.gone{opacity:0;visibility:hidden}
.welcome-card{max-width:38rem;width:100%;text-align:center}
.welcome-eyebrow{font-size:.7em;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-accent);margin-bottom:1.3rem}
.welcome-card h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.8rem,7vw,4.6rem);line-height:1.05;color:#FFF6E6;margin:0 0 .5rem;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.welcome-sub{color:#EADFC9;margin:0 auto 2.5rem;max-width:26em;font-size:.98em}
.pw-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
#pw{
  font-family:var(--font-body);font-size:1em;padding:.85em 1.1em;width:13em;
  text-align:center;letter-spacing:.14em;border-radius:14px;
  border:1.5px solid rgba(244,214,138,.45);background:rgba(13,22,18,.55);color:#FFF6E6;
  backdrop-filter:blur(8px);
}
#pw:focus{outline:none;border-color:var(--chrome-accent);box-shadow:0 0 0 4px var(--glow)}
#pw::placeholder{color:#b9ad97}
.gate-err{min-height:1.6em;color:#F3B7A4;font-size:.84em;margin-top:1rem}
.welcome-hint{margin-top:2.3rem;font-size:.76em;color:#CBBEA6;border-top:1px solid rgba(244,214,138,.22);padding-top:1.1rem}
.welcome-hint b{color:var(--chrome-accent);letter-spacing:.1em}
.btn-begin{
  font-family:var(--font-body);font-size:1em;font-weight:600;cursor:pointer;border:none;
  padding:.85em 2.2em;border-radius:14px;background:var(--chrome-accent);color:#18261F;
  box-shadow:0 6px 24px rgba(0,0,0,.34);
  animation:beginBreath 4.6s ease-in-out 1.2s infinite;transition:background var(--t);
}
.btn-begin:hover{background:#FFE7A8}
@keyframes beginBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.btn-begin{animation:none}}

/* ── layout ── */
.layout{position:relative;z-index:2;display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

/* ── sidebar ── */
.rail{
  /* short by the demo bar's height so the text-size buttons never sit under it */
  position:sticky;top:0;height:calc(100vh - 3.2rem);overflow-y:auto;
  background:linear-gradient(to bottom,rgba(14,23,19,.86),rgba(18,28,23,.74));
  backdrop-filter:blur(16px);border-right:1px solid rgba(244,214,138,.18);
  padding:1.6rem 0 1.2rem;scrollbar-width:thin;scrollbar-color:rgba(244,214,138,.3) transparent;
}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(244,214,138,.28);border-radius:4px}
.brand{display:flex;align-items:center;gap:.7rem;padding:0 1.4rem 1.5rem;border-bottom:1px solid rgba(244,214,138,.16);margin-bottom:1.1rem}
.brand-glyph{
  width:2.5em;height:2.5em;border-radius:50%;flex:none;background:var(--chrome-accent);color:#18261F;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.8em;
  box-shadow:0 2px 12px rgba(0,0,0,.34);
}
.brand-name{font-family:var(--font-display);font-size:1.1em;line-height:1.12;color:#FFF6E6}
.brand-sub{font-size:.56em;letter-spacing:.11em;text-transform:uppercase;color:#B7AB94;margin-top:.15em}
/* the one action a resident most often wants, so it gets its own button */
.rail-cta{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  width:calc(100% - 2.8rem);margin:0 1.4rem 1.4rem;
  font-family:var(--font-body);font-size:.84em;font-weight:600;cursor:pointer;
  padding:.75em 1em;border-radius:14px;
  background:var(--chrome-accent);color:#18261F;border:1px solid var(--chrome-accent);
  transition:all var(--t);
}
.rail-cta:hover,.rail-cta:focus-visible{outline:none;background:#FFE7A8;transform:translateY(-1px);
  box-shadow:0 5px 18px rgba(0,0,0,.3)}
.rail-cta-plus{font-size:1.25em;line-height:1;font-weight:700}
.rail-group{margin-bottom:1.4rem}
.rail-head{font-size:.6em;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9d8f78;padding:0 1.4rem;margin-bottom:.55rem}
.rail-link{
  display:flex;align-items:center;gap:.8rem;width:100%;padding:.72rem 1.4rem;
  border:none;background:none;cursor:pointer;font-family:var(--font-body);font-size:.84em;
  text-align:left;color:#DCD0B9;border-left:4px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.rail-link:hover{background:rgba(255,246,230,.08);color:#FFF6E6}
.rail-link:focus-visible{outline:none;background:rgba(255,246,230,.1);box-shadow:inset 0 0 0 2px var(--focus)}
.rail-link.on{background:rgba(255,246,230,.12);color:#FFF6E6;border-left-color:var(--dot,var(--chrome-accent))}
.rail-dot{width:.62em;height:.62em;border-radius:50%;background:var(--dot,var(--chrome-accent));flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.rail-text{flex:1;min-width:0}
.rail-count{font-size:.72em;font-weight:700;color:#B7AB94;background:rgba(255,246,230,.09);border-radius:999px;padding:.12em .6em;flex:none}
.rail-link.on .rail-count{background:var(--dot,var(--chrome-accent));color:#16231D}
.rail-foot{padding:1.1rem 1.4rem 0;border-top:1px solid rgba(244,214,138,.16);margin-top:.4rem}
.sizer-label{font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:#9d8f78;margin-bottom:.5rem}
.sizer{display:flex;gap:.35rem}
.sizer button{
  font-family:var(--font-display);cursor:pointer;line-height:1.3;flex:1;
  background:rgba(255,246,230,.08);color:#EADFC9;border:1px solid rgba(244,214,138,.26);
  border-radius:9px;padding:.2em .4em;transition:all var(--t);
}
.sizer button:hover,.sizer button[aria-pressed=true]{background:var(--chrome-accent);color:#18261F;border-color:var(--chrome-accent)}
.sizer button:nth-of-type(1){font-size:.76em}
.sizer button:nth-of-type(2){font-size:.95em}
.sizer button:nth-of-type(3){font-size:1.18em}

/* ── main ── */
/* On a wide monitor the main column ran to ~1700px while the reading blocks cap
   at 52-54rem, which left the forms and panels stranded in the top-left corner
   beside 700px of nothing. Cap the column, then centre the narrow blocks inside
   it so the space reads as margin rather than as a broken layout. */
.main{padding:2.2rem clamp(1.2rem,3vw,3rem) 7rem;min-width:0;max-width:84rem;margin-inline:auto;width:100%}
.page-head,.panel,.admin-grid,.mail,.sheet,.cat-notes,
#submit-panel,#submit-thanks{margin-left:auto;margin-right:auto}
.page{display:none;animation:pageIn .55s var(--ease)}
.page.on{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page{animation:none}}

/* ── the front-page hero ── */
.hero{
  position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:clamp(13rem,26vh,18rem);display:flex;align-items:flex-end;
  margin-bottom:2.4rem;box-shadow:var(--edge);
}
.hero-img{position:absolute;inset:0;background:url('assets/hero.jpg') center 62%/cover no-repeat;opacity:.62}
.hero-wash{position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,21,17,.90) 0%,rgba(12,21,17,.56) 48%,rgba(12,21,17,.20) 100%)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.06) 62%,transparent 100%)}
.hero-in{position:relative;z-index:2;padding:2rem 2.2rem;max-width:46rem}
.hero-in h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,3.9vw,3rem);line-height:1.1;color:#FFF6E6;margin:0 0 .4rem;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
}
.hero-in p{margin:0;color:rgba(255,246,230,.92);font-size:.92em;max-width:40em}

/* ── category strips ── */
.strip{margin-bottom:2.4rem}
.strip-band{
  position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:7.2rem;display:flex;align-items:center;margin-bottom:1.1rem;
  box-shadow:var(--edge);transition:box-shadow var(--t);
}
.strip-band::before{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:var(--radius);
  box-shadow:inset 4px 0 0 var(--dot),inset -4px 0 0 var(--dot);
}
.strip-img{
  position:absolute;inset:0;z-index:2;background-size:cover;background-position:center;
  opacity:.40;transition:opacity 1.4s var(--ease);
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 34%,transparent 86%);
          mask-image:linear-gradient(to left,#000 0%,#000 34%,transparent 86%);
}
.strip-band:hover .strip-img{opacity:.56}
.strip-wash{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--dot) -6%,rgba(12,21,17,.90) 76%)}
/* The wash approaches the pure category colour at the left edge, and the title
   and its blurb sit right there. White on the gold section measured 2.78:1 —
   below even the large-text floor. This left scrim keeps the colour identity
   at the edges while guaranteeing the text band is dark enough to read. */
.strip-scrim{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(to right,rgba(14,10,13,.70) 0%,rgba(14,10,13,.44) 34%,rgba(14,10,13,.12) 62%,transparent 80%),
             linear-gradient(to top,rgba(0,0,0,.40),transparent 72%);
}
.strip-in{position:relative;z-index:5;display:flex;align-items:center;gap:1.1rem;width:100%;padding:1.1rem 1.5rem;flex-wrap:wrap}
.strip-icon{
  width:2.9em;height:2.9em;border-radius:50%;flex:none;
  background:rgba(255,255,255,.94);color:var(--dot);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.24);
}
.strip-icon svg{width:1.5em;height:1.5em;display:block}
.strip-title{min-width:0;flex:1}
.strip-title h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.3vw,1.85rem);
  line-height:1.14;color:#fff;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.42);
}
.strip-title p{margin:.15rem 0 0;font-size:.78em;color:rgba(255,246,230,.86);max-width:46em}
.strip-more{
  flex:none;font-family:var(--font-body);font-size:.78em;font-weight:600;cursor:pointer;
  background:rgba(12,21,17,.55);color:#FFF6E6;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:.55em 1.3em;backdrop-filter:blur(6px);transition:all var(--t);
}
.strip-more:hover,.strip-more:focus-visible{outline:none;background:var(--chrome-accent);color:#18261F;border-color:var(--chrome-accent)}
/* min(23rem,100%) rather than a bare 23rem: on a 375px phone the bare track
   floor exceeds the column and the cards push past the right edge. */
/* align-items:start, because grid items stretch to the tallest in their row by
   default. Once a note carries a picture, the plain note beside it inherited
   that height and sat in a wall of empty card. Each note now sizes to itself. */
.strip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(23rem,100%),1fr));gap:1.1rem;align-items:start}
/* And cap the picture on the dashboard: at full height one photo towered over
   the section and pushed everything below it off the screen. The section page
   still shows the whole image. */
.strip-row .note-photo{max-height:17rem;object-fit:cover}

/* ── note cards ── */
.note{
  background:var(--card-bg);color:var(--text-dark);border-radius:var(--radius);
  padding:1.5rem 1.7rem;backdrop-filter:blur(12px);
  border-left:5px solid var(--dot,var(--accent-light));box-shadow:var(--edge-card);
  transition:transform var(--t),box-shadow var(--t);
}
.note:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(233,200,134,.44),inset 0 1px 0 rgba(255,255,255,.5),0 13px 32px rgba(0,0,0,.3)}
.note h3{font-family:var(--font-display);font-weight:400;font-size:1.32em;line-height:1.2;margin:0 0 .5rem;color:var(--text-dark)}
/* a picture attached to a note */
.note-photo{
  display:block;width:100%;height:auto;border-radius:14px;margin:0 0 .9rem;
  box-shadow:inset 0 0 0 1px rgba(83,71,48,.18),0 3px 12px rgba(0,0,0,.16);
}
/* Shared by the team's page and the resident submit form. */
.admin-grid input[type=file],#submit-form input[type=file]{
  font-family:var(--font-body);font-size:.82em;width:100%;padding:.6em .7em;
  border:1.5px dashed rgba(83,71,48,.32);border-radius:12px;background:#fff;color:var(--text-mid);cursor:pointer;
}
.admin-grid input[type=file]:focus,#submit-form input[type=file]:focus{outline:none;border-color:var(--accent-light);box-shadow:0 0 0 3px var(--glow)}
.photo-preview{margin-top:.7rem}
.photo-preview img{display:block;width:100%;border-radius:12px;margin-bottom:.6rem;
  box-shadow:inset 0 0 0 1px rgba(83,71,48,.18),0 3px 12px rgba(0,0,0,.16)}
.photo-preview[hidden]{display:none}
.note p{margin:0 0 .7rem;color:#3a4844;font-size:.92em}
.note-meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;align-items:center;
  font-size:.84em;color:#41504A;   /* measured 5.7:1 on the translucent card */
  border-top:1px solid rgba(83,71,48,.16);padding-top:.75rem;margin:0;
}
.note-meta b{color:var(--text-dark);font-weight:600}
.chip-new{font-size:.6em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.28em .8em;
  border-radius:999px;background:var(--tile-a);color:#fff;vertical-align:.22em;margin-left:.6em}

/* ── category page hero ── */
.cat-hero{
  position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:14rem;display:flex;align-items:flex-end;margin-bottom:1.9rem;box-shadow:var(--edge);
}
.cat-hero::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:var(--radius);
  box-shadow:inset 4px 0 0 var(--dot),inset -4px 0 0 var(--dot)}
.cat-hero-img{position:absolute;inset:0;z-index:2;background-size:cover;background-position:center;opacity:.5;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 40%,transparent 92%);
          mask-image:linear-gradient(to left,#000 0%,#000 40%,transparent 92%)}
.cat-hero-wash{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--dot) -8%,rgba(12,21,17,.90) 74%)}
.cat-hero-scrim{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(to right,rgba(14,10,13,.58) 0%,rgba(14,10,13,.3) 40%,transparent 72%),
             linear-gradient(to top,rgba(0,0,0,.58),transparent 74%);
}
.cat-hero-in{position:relative;z-index:5;padding:1.8rem 2rem;display:flex;align-items:flex-end;gap:1.1rem;flex-wrap:wrap}
.cat-hero-icon{
  width:3.2em;height:3.2em;border-radius:50%;flex:none;background:rgba(255,255,255,.94);color:var(--dot);
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(0,0,0,.3);
}
.cat-hero-icon svg{width:1.7em;height:1.7em}
.cat-hero-in h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);
  line-height:1.1;color:#fff;margin:0 0 .25rem;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.cat-hero-in p{margin:0;color:rgba(255,246,230,.9);font-size:.86em;max-width:44em}

/* ── back ── */
.backbar{margin-bottom:1.2rem}
.btn-back{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-body);font-size:.8em;font-weight:600;cursor:pointer;
  padding:.6em 1.4em;border-radius:999px;
  background:rgba(255,246,230,.09);color:#EADFC9;
  border:1px solid rgba(244,214,138,.28);transition:all var(--t);
}
.btn-back:hover,.btn-back:focus-visible{
  outline:none;background:var(--chrome-accent);color:#18261F;border-color:var(--chrome-accent);
}
/* Keyboard navigation stays available but is never announced on screen — the
   focus ring is the only thing that tells you it is there. */
.rail-link:focus-visible,.strip-more:focus-visible,.inbox-item:focus-visible,
.btn:focus-visible,.btn-back:focus-visible{box-shadow:0 0 0 3px var(--focus)}

/* ── page heads / panels ── */
.page-head{margin-bottom:1.9rem;max-width:52rem}
.page-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,4vw,3.1rem);
  line-height:1.1;color:#FFF6E6;margin:0 0 .35rem}
.page-head p{margin:0;color:#CFC3AC;font-size:.94em}
.panel{
  background:var(--card-bg);color:var(--text-dark);border-radius:var(--radius);
  padding:1.6rem 1.8rem;margin-bottom:1.1rem;backdrop-filter:blur(12px);max-width:54rem;
  box-shadow:var(--edge-card);
}
.panel h3{font-family:var(--font-display);font-weight:400;font-size:1.35em;margin:0 0 .55rem;color:var(--text-dark)}
.panel p{margin:0 0 .85em;color:#3a4844;font-size:.94em}
.panel p:last-child{margin-bottom:0}
.panel ul{margin:0;padding-left:1.3em;color:#3a4844;font-size:.94em}
.panel li{margin-bottom:.55em}
.panel.tinted{background:rgba(255,244,220,.9)}
.panel.quiet{background:rgba(238,242,240,.87)}

/* ── team's page ── */
.admin-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:1.2rem;align-items:start;max-width:66rem}
@media(max-width:70rem){.admin-grid{grid-template-columns:1fr}}
/* These rules were scoped to .admin-grid only, so every label and input on the
   resident submit form fell back to browser defaults: labels rendered inline,
   the textarea collapsed to two rows, and fields lost their full width.
   The :not() guards keep the radio cards and the checkbox row out of it, since
   .admin-grid label would otherwise outrank .check on specificity. */
.admin-grid label:not(.check),
#submit-form label:not(.choice){
  display:block;font-weight:600;font-size:.74em;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-mid);margin:1rem 0 .3em;
}
.admin-grid input[type=text],.admin-grid textarea,.admin-grid select,
#submit-form input[type=text],#submit-form textarea,#submit-form select{
  font-family:var(--font-body);font-size:.9em;width:100%;padding:.65em .8em;border-radius:12px;
  border:1.5px solid rgba(83,71,48,.24);background:#fff;color:var(--text-dark)}
.admin-grid textarea,#submit-form textarea{min-height:6em;resize:vertical;line-height:1.5}
.admin-grid input:focus,.admin-grid textarea:focus,.admin-grid select:focus,
#submit-form input:focus,#submit-form textarea:focus,#submit-form select:focus{
  outline:none;border-color:var(--accent-light);box-shadow:0 0 0 3px var(--glow);
}
.btn{font-family:var(--font-body);font-size:.86em;font-weight:600;cursor:pointer;padding:.75em 1.6em;
  border-radius:12px;border:none;background:var(--accent);color:#FFF6E6;transition:all var(--t)}
.btn:hover{background:var(--accent-light)}
.btn-quiet{background:transparent;color:var(--accent);border:1.5px solid rgba(83,71,48,.28)}
.btn-quiet:hover{background:rgba(83,71,48,.08);color:var(--text-dark)}
.saved{color:#3f7a48;font-weight:600;font-size:.82em;min-height:1.5em;margin-top:.7rem}
.inbox-item{border:1px solid rgba(83,71,48,.2);border-radius:14px;padding:.85rem 1rem;margin-bottom:.65rem;
  cursor:pointer;background:rgba(255,255,255,.55);text-align:left;width:100%;font-family:var(--font-body);transition:all var(--t)}
.inbox-item:hover,.inbox-item:focus-visible{outline:none;border-color:var(--accent-light);background:#fff;transform:translateX(3px)}
.inbox-item .from{font-size:.72em;color:var(--text-mid)}
.inbox-item .subj{font-weight:600;color:var(--text-dark);font-size:.9em}


/* ── submission form, queue and the moderator's checks ── */
.field-note{font-size:.76em;color:var(--text-mid);margin:.4rem 0 0;line-height:1.45}
.choices{display:grid;gap:.5rem;margin-top:.4rem}
.choice{
  display:flex;align-items:flex-start;gap:.7em;cursor:pointer;
  padding:.7rem .9rem;border-radius:12px;border:1.5px solid rgba(83,71,48,.22);
  background:rgba(255,255,255,.5);transition:all var(--t);
  font-size:.86em;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dark);margin:0;
}
.choice:hover{border-color:var(--accent-light);background:#fff}
.choice input{width:1.15em;height:1.15em;margin:.15em 0 0;flex:none;accent-color:var(--accent);cursor:pointer}
.choice b{color:var(--text-dark);font-weight:600}
.choice:has(input:checked){border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--glow)}
.check{display:flex;align-items:flex-start;gap:.6em;margin-top:1.1rem;cursor:pointer;
  font-size:.84em;font-weight:400;color:var(--text-dark);text-transform:none;letter-spacing:0}
.check input{width:1.15em;height:1.15em;margin:.2em 0 0;flex:none;accent-color:var(--accent);cursor:pointer}
.private-note{
  margin-top:.9rem;padding:.8rem 1rem;border-radius:12px;font-size:.82em;
  background:rgba(0,117,80,.09);border:1px solid rgba(0,117,80,.3);color:var(--text-dark);
}
.private-note[hidden]{display:none}
.private-note b{font-weight:600;color:var(--accent)}
.q-count{
  font-family:var(--font-body);font-size:.6em;font-weight:700;vertical-align:.35em;
  background:var(--accent);color:#FFF6E6;border-radius:999px;padding:.25em .75em;margin-left:.4em;
}
.q-item{
  display:block;width:100%;text-align:left;cursor:pointer;font-family:var(--font-body);
  border:1px solid rgba(83,71,48,.2);border-radius:14px;padding:.85rem 1rem;margin-bottom:.65rem;
  background:rgba(255,255,255,.55);transition:all var(--t);
}
.q-item:hover,.q-item:focus-visible{outline:none;border-color:var(--accent-light);background:#fff;transform:translateX(3px)}
.q-item.on{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--glow)}
.q-head{display:flex;align-items:center;gap:.5em;margin-bottom:.2rem;flex-wrap:wrap}
.q-src{font-size:.62em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.22em .7em;border-radius:999px;color:#fff;flex:none}
.q-src.board{background:var(--tile-a)}
.q-src.email{background:var(--tile-c)}
.q-src.paper{background:var(--tile-f)}
.q-when{font-size:.7em;color:var(--text-mid);margin-left:auto}
.q-title{font-weight:600;color:var(--text-dark);font-size:.9em;line-height:1.3}
.q-from{font-size:.74em;color:var(--text-mid)}
.q-empty{font-size:.86em;color:var(--text-mid);padding:.6rem 0}

/* contact details stay hidden until a reader deliberately asks for them */
.reveal{
  font-family:var(--font-body);font-size:.82em;font-weight:600;cursor:pointer;
  padding:.32em 1em;border-radius:999px;border:1.5px solid rgba(0,103,74,.4);
  background:rgba(0,117,80,.08);color:var(--accent);transition:all var(--t);
}
.reveal:hover,.reveal:focus-visible{outline:none;background:var(--accent);color:#FFF6E6;border-color:var(--accent)}
.contact-shown{font-weight:600;color:var(--text-dark)}
.contact-via{color:var(--text-mid)}
/* the team's controls that sit on a live note, only rendered for the team */
.note-admin{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem;padding-top:.7rem;
  border-top:1px dashed rgba(83,71,48,.28)}
.mini{
  font-family:var(--font-body);font-size:.74em;font-weight:600;cursor:pointer;
  padding:.35em 1em;border-radius:999px;border:1.5px solid rgba(83,71,48,.3);
  background:rgba(255,255,255,.6);color:var(--text-mid);transition:all var(--t);
}
.mini:hover,.mini:focus-visible{outline:none;background:var(--accent);color:#FFF6E6;border-color:var(--accent)}
.mini.warn:hover{background:#8C3B2E;border-color:#8C3B2E}
.arch-item{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  border:1px solid rgba(83,71,48,.2);border-radius:14px;padding:.7rem .9rem;margin-bottom:.6rem;
  background:rgba(255,255,255,.5);
}
.arch-item .t{font-weight:600;color:var(--text-dark);font-size:.88em;flex:1;min-width:8rem}
.arch-item .w{font-size:.72em;color:var(--text-mid)}
.inbox-item.used{opacity:.38}
.inbox-item.used .subj::after{content:' (posted)';font-weight:400}

/* ── the printed sheet ── */
.sheet{background:#fff;color:#1e2a26;border-radius:10px;padding:2.4rem;max-width:52rem;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.sheet-head{text-align:center;border-bottom:3px double #24312F;padding-bottom:.9rem;margin-bottom:1.3rem}
.sheet-head h3{font-family:var(--font-display);font-weight:400;font-size:1.9em;margin:0}
.sheet-head .when{font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:#56665F}
.sheet-cols{column-count:2;column-gap:2.2rem}
@media(max-width:46rem){.sheet-cols{column-count:1}}
.sheet-cols .grp{break-inside:avoid;margin-bottom:1.2rem}
.sheet-cols h4{font-family:var(--font-display);font-weight:400;font-size:1em;margin:0 0 .35em;border-bottom:1px solid #d8cfb9;padding-bottom:.15em;color:#24312F}
.sheet-cols p{font-size:.72em;margin:0 0 .55em;line-height:1.5}
.sheet-foot{font-size:.68em;text-align:center;color:#56665F;border-top:1px solid #d8cfb9;padding-top:.9rem;margin-top:.6rem}

/* ── the Thursday email ── */
.mail{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 3px 16px rgba(0,0,0,.24);color:var(--text-dark);max-width:46rem}
.mail-head{border-bottom:1px solid #e6e2d8;padding:1.2rem 1.5rem}
.mail-head .subject{font-family:var(--font-display);font-size:1.35em;color:var(--text-dark)}
.mail-head .fromline{color:var(--text-mid);font-size:.76em;margin-top:.3em}
.mail-body{padding:1.4rem 1.5rem}
.mail-body h4{font-family:var(--font-display);font-weight:400;font-size:1.05em;color:var(--accent);
  margin:1.4em 0 .45em;border-bottom:1px solid rgba(83,71,48,.16);padding-bottom:.25em}
.mail-body h4:first-child{margin-top:0}
.mail-body p{font-size:.84em;margin:0 0 .7em;color:#3a4844}
.mail-foot{background:#f7f4ec;padding:1.1rem 1.5rem;font-size:.72em;color:var(--text-mid)}

/* ── the demonstration bar ──
   Was a footer inside the layout grid, which put its text at x=0 running under
   the sidebar column and hard against the text-size buttons — worse the larger
   the type got. Fixed to the bottom of the viewport instead: out of flow, so it
   cannot collide with anything, and it reads as chrome rather than content.
   Deliberately sized off a small base so the largest text setting cannot let it
   eat the screen — this is a demo disclaimer, not something a resident reads. */
.demobar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;justify-content:center;gap:.7em;flex-wrap:wrap;
  padding:.6rem clamp(1rem,3vw,2rem);
  background:rgba(12,20,17,.93);backdrop-filter:blur(14px);
  border-top:1px solid rgba(244,214,138,.3);
  font-size:.6em;line-height:1.45;color:#B7AB94;text-align:center;
}
.demobar-chip{
  flex:none;font-size:.92em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--chrome-accent);color:#18261F;border-radius:999px;padding:.25em .9em;
}
.demobar b{color:#DCD0B9;font-weight:600}

/* ── mobile ── */
@media(max-width:56rem){
  .layout{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:none;border-bottom:1px solid rgba(244,214,138,.18)}
  .rail-link{padding:.6rem 1.2rem}
  /* the bar wraps to two or three lines on a phone, so reserve more */
  .main{padding:1.6rem 1.1rem 9rem}
  /* and hold it down to a sliver of the screen — at the largest text setting it
     was taking 16% of a phone, which is far too much for a disclaimer. */
  .demobar{font-size:.52em;padding:.45rem .9rem;gap:.5em;line-height:1.4}
  .strip-in{gap:.8rem}
  .strip-more{width:100%}
}

@media print{
  .rail,.demobar,.ground,.wash,.vignette,.no-print,#welcome{display:none!important}
  .layout{display:block}
  body{background:#fff;color:#000;font-size:11pt}
  .page{display:none!important}
  .page.on{display:block!important}
  .sheet{box-shadow:none;padding:0;max-width:none}
  .main{padding:0}
}