/* Bancroft PTO pages: the dark palette, the language rules, and the light/dark, language and view controls
   (spec Part 12; README section 14). One file for every page on this site, served from /shared/av-prefs.css.
   Every rule here depends on an attribute /shared/av-prefs.js sets on <html> (data-theme, data-lang, data-lead,
   data-view) or on an element it draws, so with scripts off nothing here applies: both languages, English first,
   light, exactly as the page is written (one exception since pass 3: the light form field border, at the end). Pages name their colors with the variables below (light values in each
   page's own :root) and write each label as <span class="en">..</span><span class="es" lang="es">..</span>. */

/* ---------------------------------------------------------------- text size (Oct 16, 2026; Ali: the default
   read too small). The second exception: it applies with scripts off too. 17px on a phone, 18px from 700px wide (a
   reader's own browser text setting still scales both); every page sets its sizes in rem or em from here, nothing
   under .88rem (15px on a phone), and a Spanish line under its English .94em. The printed flier keeps 16px. */
html{font-size:106.25%}
@media (min-width:700px){html{font-size:112.5%}}
@media print{html{font-size:100%}}
html body{font-size:1rem}

/* ---------------------------------------------------------------- dark (spec section F; WCAG AA checked:
   text 14.0, Spanish lines 8.7, links 11.4 on the cards; text 9.2 and Spanish 5.7 on a hovered link row) */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1726;
  --card:#172238;
  --row:#1d2a45;
  --line:#2e3d5e;
  --text:#edf1f7;
  --muted:#b6c0d1;
  --link:#f1d98c;
  --edge:#40578c;
  --gold-soft:#2d2918;
  --hover-bg:#2c3f69;
  --hover-text:#ffffff;
  --hover-es:#dfe6f1;
  --on-gold:#172747;
}

/* ---------------------------------------------------------------- languages
   English only hides the Spanish; Spanish only hides the English and gives the Spanish the primary style; Both
   with Spanish leading puts each Spanish line first (flex order inside each English/Spanish pair). */
html[data-lang="en"] .es{display:none !important}
html[data-lang="es"] .en{display:none !important}
html[data-lead="es"] .es{color:inherit;font-size:1em;font-weight:700;margin-top:0}
html[data-lead="es"] .en{color:var(--muted);font-size:max(.88rem,.94em);font-weight:400;margin-top:1px}
html[data-lang="both"][data-lead="es"] :has(> .en + .es){display:flex;flex-direction:column}
html[data-lang="both"][data-lead="es"] :has(> .en + .es) > .es{order:-1}
html[data-lang="both"][data-lead="es"] .av-pair{display:flex;flex-direction:column}
html[data-lang="both"][data-lead="es"] .av-pair > .es{order:-1}

/* ---------------------------------------------------------------- the controls
   Light/dark switch and the language buttons, on the navy header: a row above the logo on a phone, the top right
   corner on a wide screen (the header needs position:relative there). Every button is at least 44px tall. */
.av-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:-12px 0 14px}
@media (min-width:860px){.av-controls{position:absolute;top:14px;right:16px;margin:0}}
.av-seg{display:inline-flex;align-items:stretch;border:1.5px solid rgba(255,255,255,.5);border-radius:12px;overflow:hidden}
.av-controls .av-seg button,.av-view .av-seg button{-webkit-appearance:none;appearance:none;margin:0;border:0;
  border-left:1.5px solid rgba(255,255,255,.5);border-radius:0;background:transparent;color:#fff;font:inherit;
  font-size:.88rem;font-weight:700;line-height:1.15;min-height:44px;min-width:44px;padding:3px 11px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-transform:none;letter-spacing:0}
.av-controls .av-seg button:first-child,.av-view .av-seg button:first-child{border-left:0}
.av-controls .av-seg button[aria-pressed="true"],.av-view .av-seg button[aria-pressed="true"]{background:#d8b44a;color:#172747}
.av-controls .av-seg button .en,.av-controls .av-seg button .es,
.av-view .av-seg button .en,.av-view .av-seg button .es{display:block;margin:0;color:inherit;font-size:.88rem;font-weight:700;opacity:1}
.av-controls .av-seg button .es,.av-view .av-seg button .es{font-size:.88rem;font-weight:500;opacity:.9}
html[data-lead="es"] .av-controls .av-seg button .es,html[data-lead="es"] .av-view .av-seg button .es{font-size:.88rem;font-weight:700;opacity:1}
html[data-lead="es"] .av-controls .av-seg button .en,html[data-lead="es"] .av-view .av-seg button .en{font-size:.88rem;font-weight:500;opacity:.9}
html[data-lang="both"] .av-controls .av-seg button.av-both{padding-top:2px;padding-bottom:2px}

.av-theme{-webkit-appearance:none;appearance:none;position:relative;display:inline-flex;align-items:center;gap:4px;
  margin:0;padding:0 5px;min-height:44px;min-width:44px;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;
  background:transparent;color:#fff;cursor:pointer;font:inherit}
.av-theme .av-sun,.av-theme .av-moon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;color:#fff}
.av-theme svg{width:18px;height:18px;display:block}
.av-theme .av-knob{position:absolute;top:50%;left:5px;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:#d8b44a;transition:left .15s ease}
.av-theme[aria-checked="true"] .av-knob{left:39px}
.av-theme[aria-checked="false"] .av-sun,.av-theme[aria-checked="true"] .av-moon{color:#172747}
@media (prefers-reduced-motion:reduce){.av-theme .av-knob{transition:none}}
.av-controls button:focus-visible,.av-view button:focus-visible{outline:3px solid #d8b44a;outline-offset:2px;position:relative;z-index:2}
.av-controls .av-seg button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.12)}
.av-theme:hover{background:rgba(255,255,255,.08)}

/* The Control Panel's view switch, on the page itself (Active | All) */
.av-view{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 14px}
.av-view .av-view-label{font-size:.88rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text)}
.av-view .av-view-label .en,.av-view .av-view-label .es{display:block;margin:0}
.av-view .av-view-label .es{text-transform:none;letter-spacing:0;font-size:max(.88rem,.92em)}
html[data-lead="es"] .av-view .av-view-label .es{text-transform:uppercase;letter-spacing:.07em;font-size:1em}
html[data-lead="es"] .av-view .av-view-label .en{text-transform:none;letter-spacing:0;font-size:max(.88rem,.92em)}
.av-view .av-seg{border-color:var(--line);background:var(--card)}
.av-view .av-seg button{color:var(--text);border-left-color:var(--line)}
.av-view .av-seg button:hover:not([aria-pressed="true"]){background:var(--row)}

/* ---------------------------------------------------------------- pass 2 (Oct 10): the family and board pages
   The rest of the dark palette, for what the Control Panel does not have: form fields, buttons, the yellow demo
   notices, error and success text, and charts (the gold left-edge boxes use --gold-soft above). Each page gives
   these its light values in its own :root, as the Control Panel does for the ones above. WCAG AA checked on the
   dark values: field text 14.0 and field borders 4.2 (3 is the bar for borders) on a card; error text 8.0 and
   success text 9.6 on a card; notice text 10.4; button text 7.4 and its second line 5.7 on gold; chart bars 8.0
   on a card and 6.0 on a meter track; the gray bar 5.5. */
html[data-theme="dark"]{
  --accent:#d8b44a;
  --field-bg:#0f1726;
  --field-text:#edf1f7;
  --field-line:#7383a6;
  --bad:#ff9e94;
  --ok:#8fd9a8;
  --ok-bg:#173325;
  --ok-line:#2f6b47;
  --note-bg:#2d2918;
  --note-line:#6b5a22;
  --note-text:#f1d98c;
  --note-text2:#d9cc9e;
  --btn-bg:#d8b44a;
  --btn-text:#172747;
  --btn-text2:#2b3a5c;
  --chart-track:#2a3754;
  --chart-bar:#d8b44a;
  --chart-bar2:#8e99ae;
}

/* An English and Spanish pair on one line ("English / Spanish": footers, the link pages' section titles), written
   <span class="av-inl"><span class="en">..</span><span class="av-sep"> / </span><span class="es" lang="es">..</span></span>
   (the av-inl class can sit on the link or heading itself). One language hides the separator; Spanish leading puts
   the Spanish first, in the same style as the English had. */
html[data-lang="en"] .av-sep,html[data-lang="es"] .av-sep{display:none}
html[data-lead="es"] .av-inl > .en,html[data-lead="es"] .av-inl > .es{color:inherit;font-size:inherit;font-weight:inherit;margin:0}
html[data-lang="both"][data-lead="es"] .av-inl{display:inline-flex;flex-wrap:wrap}
html[data-lang="both"][data-lead="es"] .av-inl > .es{order:-2}
html[data-lang="both"][data-lead="es"] .av-inl > .av-sep{order:-1;white-space:pre}

/* ---------------------------------------------------------------- pass 3 (Oct 10): the light form field border
   The one value in this file that applies with scripts off too: the edge of every form field in light, site-wide,
   #918c7d since the Oct 10 merge pass (3.36:1 on white, 3.03:1 on the beige page background; WCAG asks 3:1 for a field's
   edge; #948f80 before it was 3.2:1 on white but under 3:1 on tinted boxes; the old #bdb8aa was 1.98:1). Pages repeat it in their own
   :root (and the Google-hosted fallback pages, which cannot load this file, in theirs); in dark the value above,
   #7383a6 (4.2:1 on a card), still wins (html[data-theme="dark"] outranks :root). */
:root{--field-line:#918c7d}

/* ---------------------------------------------------------------- pass 3 fixes (Oct 10, from Ali's look on his phone)
   1. The slim controls: every page but the Control Panel (av-prefs.js adds av-slim there) shows, on a screen under
   860px, one 30px row above the page title: a compact segmented control with the short labels EN | ES | EN+ES (the
   full names stay the accessible name and the tooltip) on one line with a slimmer sun and moon switch, both 30px
   tall. Each button keeps a 44px touch target: an invisible area above and below it (a pseudo-element, which takes
   taps for the button). From 860px nothing here applies and the controls are the full size. */
@media (max-width:859.98px){
  .av-controls.av-slim{flex-wrap:nowrap;gap:8px;margin:-10px 0 10px}
  .av-slim .av-seg{overflow:visible;border-radius:8px;border-width:1.5px}
  .av-controls.av-slim .av-seg button{position:relative;min-height:27px;height:27px;min-width:44px;padding:0 9px;font-size:0;
    line-height:1;display:flex;flex-direction:row;align-items:center;justify-content:center}
  .av-controls.av-slim .av-seg button > *{display:none !important}
  .av-controls.av-slim .av-seg button::after{content:attr(data-short);font-size:.88rem;font-weight:700;letter-spacing:.03em;line-height:1}
  .av-controls.av-slim .av-seg button::before{content:"";position:absolute;left:0;right:0;top:-8.5px;bottom:-8.5px}
  .av-controls.av-slim .av-theme::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
  .av-controls.av-slim .av-seg button:first-child{border-radius:6.5px 0 0 6.5px}
  .av-controls.av-slim .av-seg button:last-child{border-radius:0 6.5px 6.5px 0}
  html[data-lang="both"] .av-controls.av-slim .av-seg button.av-both{padding-top:0;padding-bottom:0}
  .av-controls.av-slim .av-theme{min-height:30px;height:30px;min-width:44px;padding:0 3px;gap:4px}
  .av-controls.av-slim .av-theme .av-sun,.av-controls.av-slim .av-theme .av-moon{width:22px;height:22px}
  .av-controls.av-slim .av-theme svg{width:14px;height:14px}
  .av-controls.av-slim .av-theme .av-knob{left:3px;width:22px;height:22px;margin-top:-11px}
  .av-controls.av-slim .av-theme[aria-checked="true"] .av-knob{left:29px}
}
/* the labels inside the language buttons take the button's own color whatever the page's header rules say (a page
   rule for its header's English or Spanish lines must never reach the controls) */
html[data-lang] .av-controls .av-seg button .en,html[data-lang] .av-controls .av-seg button .es{color:inherit}

/* 2. Choice options in dark, on every form: the text of every radio button and checkbox label and every legend is the
   page text color; the button or box itself takes the accent; the option boxes (the bordered choices of the contact,
   volunteer, sponsors, directory and forms pages) have the field background, and the chosen one an accent edge. */
html[data-theme="dark"] legend,
html[data-theme="dark"] label:has(> input[type="radio"]),
html[data-theme="dark"] label:has(> input[type="checkbox"]){color:var(--text)}
html[data-theme="dark"] input[type="radio"],html[data-theme="dark"] input[type="checkbox"]{accent-color:var(--accent);color-scheme:dark}
html[data-theme="dark"] :is(.radios,.opts,.checks) label:has(> input:is([type="radio"],[type="checkbox"])),
html[data-theme="dark"] label.choice:has(> input),html[data-theme="dark"] fieldset.q label.opt{background-color:var(--field-bg);color:var(--text)}
html[data-theme="dark"] :is(.radios,.opts,.checks) label:has(> input:checked),
html[data-theme="dark"] label.choice:has(> input:checked),html[data-theme="dark"] fieldset.q label.opt:has(> input:checked){border-color:var(--accent);background-color:var(--field-bg)}

/* 3. The highlighted notice boxes in dark (the demo notices and the like, --note-* and --demo-*): a deep amber-brown
   box, near-white first line, light sand second line. WCAG AA on #3b2a10: first line 13.0, second line 9.9, the Spanish
   or English second line in the page's gray (#b6c0d1) 7.5. */
html[data-theme="dark"]{
  --note-bg:#3b2a10;
  --note-line:#8a6420;
  --note-text:#fff8e6;
  --note-text2:#ecd9ad;
  --demo-bg:#3b2a10;
  --demo-line:#8a6420;
  --demo-text:#fff8e6;
}
html[data-theme="dark"] .demo :is(.es,.l2){color:var(--note-text2);opacity:1}
html[data-theme="dark"][data-lead="es"] .demo .en{color:var(--note-text2);opacity:1}
html[data-theme="dark"][data-lead="es"] .demo :is(.es,.l2){color:var(--note-text)}

/* A button's English line when Spanish leads: the button's own text color, not the page gray (gray on a gold or navy
   button was unreadable, 1.1:1 on the wish-list and volunteer pages). :where() keeps this below any page's own button
   rule, so a page that styles its buttons' second line keeps its choice. */
html[data-lead="es"] :where(button,.btn) .en{color:inherit}

/* ---------------------------------------------------------------- the feedback link (Oct 16, 2026; av-prefs.js): the
   very bottom of every page, small, and its short form opened in place. The page's own colors where it has them. */
.av-fb{max-width:760px;margin:6px auto 0;padding:0 16px 24px;text-align:center;font-size:.88rem;line-height:1.4}
.av-fb .es{display:block}
.av-fb-open{-webkit-appearance:none;appearance:none;background:none;border:0;margin:0;padding:6px 8px;min-height:44px;min-width:44px;font:inherit;font-size:.88rem;color:var(--muted,#4f5b70);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.av-fb-open .es{color:inherit;font-size:.88rem}
.av-fb-form{text-align:left;margin:8px auto 0;max-width:520px;border:1px solid var(--line,#d6d2c6);border-radius:12px;padding:12px 14px;background:var(--card,transparent);color:var(--text,inherit);font-size:.94rem}
.av-fb-form[hidden]{display:none}
.av-fb-form fieldset{border:0;margin:0 0 6px;padding:0;min-width:0}
.av-fb-form legend,.av-fb-label{display:block;font-weight:700;margin:8px 0 4px;padding:0}
.av-fb-kind{display:flex;gap:8px;align-items:center;min-height:44px;cursor:pointer}
.av-fb-kind input{width:20px;height:20px;margin:0;flex:none}
.av-fb-form textarea,.av-fb-form input[type=email]{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:8px 10px;border:1px solid var(--field-line,#918c7d);border-radius:8px;background:var(--bg,#fff);color:inherit;min-height:44px}
.av-fb-form textarea{min-height:110px;resize:vertical}
.av-fb-send{-webkit-appearance:none;appearance:none;display:inline-block;margin:10px 0 4px;border:2px solid currentColor;border-radius:10px;background:transparent;color:inherit;font:inherit;font-weight:700;padding:8px 18px;min-height:44px;cursor:pointer}
.av-fb-send:disabled{opacity:.55;cursor:default}
.av-fb-note,.av-fb-thanks{margin:6px 0 0;color:var(--muted,#4f5b70);font-size:.88rem}
.av-fb-thanks{font-size:1rem;color:inherit;font-weight:700}
.av-fb-err{margin:8px 0 0;color:#b3261e;font-weight:700}
html[data-theme="dark"] .av-fb-err{color:#ffb4ab}
.av-fb-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media print{.av-fb{display:none}}

/* The green PRIVATE BOARD PAGE box, the first thing under the header's gold line on every board page (Ali, Oct 22, 2026:
   "For all board pages, I want that little green box "PRIVATE BOARD PAGE" below the horizontal gold line above all page
   content"); the same look as a board meeting's page (meetings/static-site/kit.css .boardbox) */
.av-boardbox{margin:0 0 10px}
.av-boardbox .av-bb{display:inline-block;background:#2f7d4a;color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:8px;font-size:.88rem;line-height:1.3}
.av-boardbox .av-bb .en,.av-boardbox .av-bb .es{display:block;color:#fff;font-size:inherit;font-weight:700;margin:0;opacity:1}