/* PTO Calendar page (README-calendar.md): the list view, the month view, one date's details, subscribe and suggest.
   PTO navy and gold, mobile first, the same look as the meetings pages. Two languages on every label: English bold
   first, Spanish gray and smaller beneath (<span class="en">..</span><span class="es" lang="es">..</span>);
   /shared/av-prefs.css hides one language or puts Spanish first when the visitor chooses, and supplies the dark values
   of the shared color variables below. Every color is a variable: the shared ones take their dark values from
   /shared/av-prefs.css; this page's own ones have their dark values here, under html[data-theme="dark"].
   With scripts off: light, both languages, English first. */
:root{
  --navy:#172747;
  --gold:#d8b44a;
  --gold-soft:#f5ecd2;
  --bg:#f6f3ec;
  --card:#ffffff;
  --row:#faf8f3;
  --line:#e4dccb;
  --text:#172747;
  --muted:#4f5b70;
  --link:#172747;
  --edge:#172747;
  --hover-bg:#172747;
  --hover-text:#fff;
  --hover-es:#e8ecf4;
  --on-gold:#172747;
  /* this page's own */
  --demo-bg:#fff3cd;
  --demo-line:#f0d58a;
  --demo-text:#6b5310;
  --btn-bg:#172747;
  --btn-text:#ffffff;
  --btn-es:#dfe5f0;
  --ghost-line:#172747;
  --input-bg:#ffffff;
  --input-line:#948f80;
  --ok:#1e7a46;
  --ok-bg:#e3f3e8;
  --bad:#a3261b;
  --bad-bg:#fbe9e6;
  --chip-bg:#eef1f7;
  --chip-text:#172747;
  --today-bg:#fdf3d4;
  --sel-line:#172747;
  --cell-out:#f1ede4;
  --warn-bg:#fff3cd;
  --warn-text:#6b5310;
  --board-bg:#efe3f6;
  --board-text:#4a1d6e;
  --board-line:#c9a7dc;
}
html[data-theme="dark"]{
  --board-bg:#33203f;
  --board-text:#e6cff5;
  --board-line:#6a4a82;
  --demo-bg:#2d2918;
  --demo-line:#5c4f22;
  --demo-text:#f1d98c;
  --btn-bg:#d8b44a;
  --btn-text:#172747;
  --btn-es:#2b3550;
  --ghost-line:#f1d98c;
  --input-bg:#0f1726;
  --input-line:#7383a6;
  --ok:#8fdcab;
  --ok-bg:#16301f;
  --bad:#ffa397;
  --bad-bg:#3a1c19;
  --chip-bg:#24365c;
  --chip-text:#edf1f7;
  --today-bg:#3a3420;
  --sel-line:#f1d98c;
  --cell-out:#131d30;
  --warn-bg:#2d2918;
  --warn-text:#f1d98c;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-wrap:break-word}
a{color:var(--link)}
[hidden]{display:none !important}

/* Two languages: English bold first, Spanish gray and smaller beneath. */
.en{display:block;font-weight:700}
.es{display:block;color:var(--muted);font-size:max(.88rem,.94em);font-weight:400;margin-top:1px}
.prose .en{font-weight:400}
.t{display:block}

/* Header: navy with the gold rule, like the Control Panel; the language and dark-mode controls are drawn into it by
   /shared/av-prefs.js (a row above the logo on a phone, the top right corner from 860px). */
.top{position:relative;background:var(--navy);color:#fff;text-align:center;padding:24px 16px 18px;border-bottom:5px solid var(--gold)}
.top .brand{display:inline-block;border-radius:50%}
.top img{width:64px;height:64px;display:block;margin:0 auto 8px;border-radius:50%}
.top .org{margin:0;font-size:.95rem}
.top .org .en{font-weight:600}
.top .piece{margin:4px 0 0;font-size:clamp(1.15rem,5vw,1.55rem);line-height:1.2}
.top .piece .en{color:#fff}
.top .es{color:#d3d9e4}
.top .piece .es{font-size:max(.88rem,.72em);margin-top:2px}
html[data-lead="es"] .top .es{color:#fff}
html[data-lead="es"] .top .en{color:#d3d9e4}
html[data-lead="es"] .top .org .es{font-weight:600}
html[data-lead="es"] .top .piece .es{font-size:1em}
html[data-lead="es"] .top .piece .en{font-size:max(.88rem,.72em)}

main{max-width:980px;margin:0 auto;padding:18px 16px 8px}
footer{max-width:980px;margin:0 auto;padding:10px 16px 28px;font-size:.88rem;color:var(--muted);text-align:center}
footer .en{font-weight:400}

.demo{background:var(--demo-bg);border:1px solid var(--demo-line);color:var(--demo-text);border-radius:10px;padding:8px 12px;margin:0 0 16px;font-size:.88rem}
.demo .es{color:var(--demo-text);opacity:.9}
html[data-lead="es"] .demo .en{color:var(--demo-text)}
.demo .en{font-weight:600}

h1{font-size:1.7rem;line-height:1.2;margin:4px 0 6px}
h1 .es{font-size:max(.88rem,.68em);margin-top:3px}
h2{font-size:1.12rem;line-height:1.25;margin:0 0 8px}
h2 .es{font-size:max(.88rem,.84em)}
h3{font-size:1rem;margin:16px 0 6px}
.kicker{margin:0;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kicker .en{font-weight:700}
.when{font-size:1.05rem;margin:0 0 14px}

.card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:14px;padding:14px 16px;margin:0 0 14px;min-width:0}
.card p{margin:0 0 10px}
.card p:last-child{margin-bottom:0}
.note{font-size:.92rem}
.muted{color:var(--muted)}

/* Buttons: the two language lines sit in an inner span.t. */
.btn{-webkit-appearance:none;appearance:none;display:inline-block;border:2px solid var(--btn-bg);border-radius:12px;background:var(--btn-bg);color:var(--btn-text);font:inherit;font-weight:700;text-align:left;text-decoration:none;padding:9px 16px;min-height:48px;cursor:pointer;margin:4px 8px 4px 0;max-width:100%}
.btn .en{color:inherit}
.btn .es{color:var(--btn-es);font-weight:500}
html[data-lead="es"] .btn .es{color:inherit}
html[data-lead="es"] .btn .en{color:var(--btn-es);font-weight:500}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--ghost-line)}
.btn.ghost .es,html[data-lead="es"] .btn.ghost .en{color:var(--muted)}
html[data-lead="es"] .btn.ghost .es{color:var(--text)}
.btn:disabled{opacity:.55;cursor:default}
.btn.small{min-height:44px;padding:6px 12px;font-size:.9rem}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* The bar: view switch, subscribe, suggest */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px}
.bar .btn{margin:0}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.seg button{-webkit-appearance:none;appearance:none;border:0;border-left:1.5px solid var(--line);background:transparent;color:var(--text);font:inherit;font-weight:700;min-height:48px;min-width:64px;padding:4px 14px;cursor:pointer;text-align:left}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-text)}
.seg button[aria-pressed="true"] .es{color:var(--btn-es)}
html[data-lead="es"] .seg button[aria-pressed="true"] .es{color:inherit}
html[data-lead="es"] .seg button[aria-pressed="true"] .en{color:var(--btn-es)}
.seg button .es{font-weight:500}

/* Filters */
.filters{margin:0 0 14px}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 8px}
.flabel{flex:0 0 auto;min-width:3.6em;font-size:.88rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.flabel .es{text-transform:none;letter-spacing:0;font-size:max(.88rem,.95em)}
.fchip{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font:inherit;font-size:.88rem;font-weight:600;min-height:44px;padding:3px 13px;cursor:pointer;text-align:left}
.fchip .es{font-weight:400;font-size:max(.88rem,.86em)}
.fchip[aria-pressed="true"]{border-color:var(--sel-line);background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--sel-line)}
.dot{flex:none;display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--c,#8e24aa)}

/* List view: weeks, then one row per date */
.week{margin:0 0 18px}
.week h2{font-size:1rem;letter-spacing:.02em;margin:0 0 8px;padding:0 0 4px;border-bottom:2px solid var(--line)}
.evs{list-style:none;margin:0;padding:0}
.ev{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c,var(--gold));border-radius:14px;padding:12px 14px;margin:0 0 10px;min-width:0}
a.ev:hover{border-color:var(--edge);border-left-color:var(--c,var(--gold))}
.ev.cancelled .title .en,.ev.cancelled .title .es{text-decoration:line-through;text-decoration-color:var(--muted)}
.dbadge{flex:none;width:3.4em;text-align:center;border-radius:10px;background:var(--row);border:1px solid var(--line);padding:4px 2px;line-height:1.1}
.dbadge .dow{display:block;font-size:.88rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dbadge .dow .en{font-weight:700}
.dbadge .dow .es{font-size:1em;margin:0}
.dbadge .dnum{display:block;font-size:1.35rem;font-weight:800}
.ev .body{flex:1;min-width:0}
.ev .title{font-size:1.04rem}
.ev .meta{font-size:.9rem;margin-top:3px}
.ev .meta .en{font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:.88rem;font-weight:700;background:var(--chip-bg);color:var(--chip-text);line-height:1.25}
/* the label is an inline pair ("English / Spanish", the shared av-inl rules): one language hides the separator,
   Spanish leading puts the Spanish first in the same style */
.chip .en,.chip .es,.chip .av-sep{display:inline;margin:0;font-size:1em;color:inherit}
.chip .es{font-weight:500}
.chip.warn{background:var(--warn-bg);color:var(--warn-text)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
/* the board and admin view (Oct 11): internal dates carry a Board and admin chip; the Board filter chip; the note */
.chip.board{background:var(--board-bg);color:var(--board-text)}
.fchip.board{border-color:var(--board-line);background:var(--board-bg);color:var(--board-text)}
.fchip.board .es{color:var(--board-text)}
.fchip.board[aria-pressed="true"]{border-color:var(--board-text);box-shadow:inset 0 0 0 1px var(--board-text)}
.boardnote{background:var(--board-bg);border:1px solid var(--board-line);color:var(--board-text);border-radius:10px;padding:10px 12px;margin:0 0 16px;font-size:.9rem}
.boardnote p{margin:0 0 8px}
.boardnote .en{font-weight:600}
.boardnote .es,html[data-lead="es"] .boardnote .en{color:var(--board-text);opacity:.9}
.boardnote .btn{margin:0}
.subboard{margin-top:16px;padding-top:12px;border-top:2px solid var(--board-line)}
.go{display:block;margin-top:7px;font-size:.88rem;color:var(--link)}
.go .es{color:var(--link);opacity:.85}
.empty{padding:14px 4px}

/* Month view */
.mnav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.mnav h2{margin:0;text-align:center;flex:1}
.mnav button{-webkit-appearance:none;appearance:none;min-width:48px;min-height:48px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer}
.mnav button:disabled{opacity:.4;cursor:default}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:0 0 12px}
.wd{text-align:center;font-size:.88rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:2px 0}
.wd .es{font-size:1em;margin:0}
/* Where space is short (weekday names, the day badge, the month grid's titles) only the leading language shows; the
   day's list beneath the grid has both. */
.grid .wd .es,.dbadge .dow .es{display:none}
html[data-lead="es"] .grid .wd .es,html[data-lead="es"] .dbadge .dow .es{display:block}
html[data-lead="es"] .grid .wd .en,html[data-lead="es"] .dbadge .dow .en{display:none}
html[data-lang="es"] .grid .wd .es,html[data-lang="es"] .dbadge .dow .es{display:block !important}
.cell .pill .es{display:none}
html[data-lead="es"] .cell .pill .es{display:-webkit-box}
html[data-lead="es"] .cell .pill .en{display:none}
html[data-lang="es"] .cell .pill .es{display:-webkit-box !important}
.cell{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;min-height:58px;padding:4px 3px 5px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.cell.out{background:var(--cell-out);color:var(--muted)}
.cell.today{background:var(--today-bg)}
.cell[aria-pressed="true"]{border-color:var(--sel-line);box-shadow:inset 0 0 0 2px var(--sel-line)}
.cell .num{font-size:.88rem;font-weight:800;line-height:1}
.cell .dots{display:flex;flex-wrap:wrap;gap:3px}
.cell .pills{display:none}
.pill{display:block;font-size:.88rem;line-height:1.2;font-weight:600;border-left:3px solid var(--c,#8e24aa);background:var(--row);border-radius:4px;padding:1px 4px;overflow:hidden}
.pill .en,.pill .es{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:1em;margin:0;color:inherit;font-weight:600}
.pill.cancelled{text-decoration:line-through}
.more{font-size:.88rem;color:var(--muted)}
@media (min-width:700px){
  .cell{min-height:96px;padding:5px}
  .cell .dots{display:none}
  .cell .pills{display:flex;flex-direction:column;gap:2px}
}
.dayhead{margin:4px 0 8px}

/* Details of one date */
.facts{margin:0}
.facts dt{margin:10px 0 0;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dt .es{text-transform:none;letter-spacing:0}
.facts dd{margin:2px 0 0}

/* Forms */
label.f{display:block;margin:12px 0 4px}
label.f .en{font-weight:700}
.hint{font-size:.88rem;color:var(--muted);margin:2px 0 6px}
.hint .en{font-weight:400}
textarea,input[type=text],input[type=email],input[type=date],input[type=url]{width:100%;font:inherit;color:var(--text);background:var(--input-bg);border:1.5px solid var(--input-line);border-radius:10px;padding:10px 12px;min-height:46px}
input[type=date]{max-width:16em}
textarea{min-height:110px;resize:vertical}
.copyrow{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.copyrow input{flex:1 1 14em;min-width:0;font-size:.9rem}
.copyrow .btn{margin:0}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.err{color:var(--bad);background:var(--bad-bg);border-radius:8px;padding:8px 10px;margin:10px 0 0}
.err .es{color:var(--bad);opacity:.9}
html[data-lead="es"] .err .en{color:var(--bad)}
.okbox{color:var(--ok);background:var(--ok-bg);border-radius:10px;padding:10px 12px;margin:6px 0 0}
.okbox .es{color:var(--ok);opacity:.92}
html[data-lead="es"] .okbox .en{color:var(--ok)}
.links{display:flex;flex-wrap:wrap;gap:0 8px}

/* Loading */
.loading{display:flex;align-items:center;gap:12px;padding:18px 4px;color:var(--muted)}
.loading .en{font-weight:600;color:var(--text)}
.spin{flex:none;width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* the month view keeps the upcoming list under the grid and the day's details (Oct 10) */
#listview.below-month{margin-top:26px;padding-top:14px;border-top:2px solid var(--line)}
#listview.below-month>h2.dayhead{margin-top:0}

/* Events v2 (Oct 17, 2026; schools/EVENTS-V2-BUILD.md), only when calendar.json says "v2": the volunteer lines under a
   date ("Volunteers Needed (5 more)" and Sign up; the board view's "PTO Board Volunteers Needed" in the board colors),
   joined to the date's box; the hand and number on the month grid's days; the Volunteers Needed filter chips. */
:root{
  --need-bg:#fff1e0;
  --need-text:#7f3700;
  --need-line:#efb27a;
}
html[data-theme="dark"]{
  --need-bg:#3a2410;
  --need-text:#ffc995;
  --need-line:#7a4a1f;
}
li.v2{margin:0 0 10px}
li.v2 > .ev.has-vneed{margin:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-style:dashed}
.vneed-box{border:1px solid var(--line);border-top:0;border-left:5px solid var(--c,var(--gold));border-radius:0 0 14px 14px;background:var(--card);padding:8px 10px 10px 12px;min-width:0}
.vneed{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;background:var(--need-bg);color:var(--need-text);border:1px solid var(--need-line);border-radius:10px;padding:6px 8px 6px 10px}
.vneed + .vneed{margin-top:8px}
.vneed .vt{display:flex;align-items:center;gap:8px;flex:1 1 13em;min-width:0}
.vneed .vt .es{color:inherit;opacity:.92}
.vneed.full .vt{font-style:italic}
.vneed.board{background:var(--board-bg);color:var(--board-text);border-color:var(--board-line)}
.vneed .btn{margin:0}
.hand{flex:none;width:22px;height:22px;fill:currentColor}
.cell .vbs{display:flex;flex-wrap:wrap;gap:2px}
.cell .vb{display:inline-flex;align-items:center;gap:1px;font-size:.88rem;font-weight:800;line-height:1.2;color:var(--need-text);background:var(--need-bg);border-radius:999px;padding:0 5px 0 2px}
.cell .vb .hand{width:14px;height:14px}
.cell .vb.board{color:var(--board-text);background:var(--board-bg)}
.fchip.vol{border-color:var(--need-line);background:var(--need-bg);color:var(--need-text)}
.fchip.vol .es{color:var(--need-text)}
.fchip.vol[aria-pressed="true"]{border-color:var(--need-text);box-shadow:inset 0 0 0 1px var(--need-text)}
.fchip.vol.bvol{border-color:var(--board-line);background:var(--board-bg);color:var(--board-text)}
.fchip.vol.bvol .es{color:var(--board-text)}
.fchip.vol.bvol[aria-pressed="true"]{border-color:var(--board-text);box-shadow:inset 0 0 0 1px var(--board-text)}
.fchip .hand{width:18px;height:18px}