/* ── YMCA Forms — the whole app's clothes ──────────────────────────────────────────────
   One stylesheet, loaded by base.html and by the public form pages, which do not extend
   it. It used to be a 190-line <style> in base.html with five more copies of pieces of it
   in the public templates — the same one-fact-in-two-places shape that made the builder
   stop looking like the form.

   PALETTE. The Y-USA Brand Quick Guide's, and only the guide's (0.20.0) — see :root below.
   0.11.0 took purple, plum and cyan from the association's site, which was the right
   family; the guide then ruled out every shade around them that was invented here.

   ★ BRAND carries identity, ACTION carries "do something". Keeping them in separate jobs
     is what stops a Submit button competing with the Y's own colour.

   TYPEFACE. Cachet is the Y's brand face (the guide allows Cachet or Verdana only), already
   self-hosted by /opt/pit, /opt/meet and /opt/screens; the files here are byte-identical copies of pit's. Served from this origin
   because the CSP allows font-src 'self' only.
*/
@font-face{font-family:'Cachet';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Cachet-Book.ttf") format('truetype')}
@font-face{font-family:'Cachet';font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/Cachet-Medium.ttf") format('truetype')}
@font-face{font-family:'Cachet';font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/Cachet-Bold.ttf") format('truetype')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ★★ 0.20.0 — THE Y-USA BRAND QUICK GUIDE'S PALETTE, AND NOTHING ELSE (sflack, 2026-10-09,
   the same rule YIM took on 2026-10-08). Every colour below is one of the guide's, or one of
   them mixed with white, ink or transparent. A literal hex anywhere else in the app is a
   failure in tests/test_brand.py, so a one-off shade cannot creep back in.
   ⛔ The 0.11.0 cyan #00749E was a darkened #00AEEF made up for contrast. The guide already
      has a dark blue that clears AA with white text (#0060AF, 6.4:1), so it carries actions. */
:root{
  --y-purple:#92278F;--y-plum:#5C2E91;--y-magenta:#C6168D;
  --y-cyan:#00AEEF;--y-blue:#0089D0;--y-blue-dark:#0060AF;
  --y-teal:#20BDBE;--y-green:#01A490;--y-green-dark:#006B6B;
  --y-red:#ED1C24;--y-red-dark:#A92B31;
  --y-orange:#F47920;--y-orange-dark:#DD5828;--y-gold:#FCAF17;
  --y-gray:#636466;--y-ink:#231F20;--white:#FFFFFF;

  --brand:var(--y-purple);--brand-deep:var(--y-plum);
  --brand-tint:color-mix(in srgb,var(--y-purple) 8%,var(--white));
  --brand-tint2:color-mix(in srgb,var(--y-purple) 16%,var(--white));
  --brand-line:color-mix(in srgb,var(--y-purple) 35%,var(--white));
  /* ★ BRAND is identity, ACTION is "do something" — a Submit button never competes with the
     Y's own colour. The bright cyan carries no words: it is a focus ring or a rule. */
  --action:var(--y-blue-dark);
  --action-dark:color-mix(in srgb,var(--y-blue-dark) 78%,var(--y-ink));
  --action-bright:var(--y-cyan);
  --action-ring:color-mix(in srgb,var(--y-cyan) 24%,transparent);
  --red:var(--y-red-dark);--redlt:color-mix(in srgb,var(--y-red) 8%,var(--white));
  --red-line:color-mix(in srgb,var(--y-red) 32%,var(--white));
  --green:var(--y-green-dark);--greenlt:color-mix(in srgb,var(--y-green) 10%,var(--white));
  --green-line:color-mix(in srgb,var(--y-green) 40%,var(--white));
  /* The guide's oranges are too light for words on white, so the warning ink is its dark
     orange taken down toward the guide's own ink. */
  --amber:color-mix(in srgb,var(--y-orange-dark) 68%,var(--y-ink));
  --amberlt:color-mix(in srgb,var(--y-orange) 10%,var(--white));
  --amber-line:color-mix(in srgb,var(--y-orange) 42%,var(--white));
  --goldlt:color-mix(in srgb,var(--y-gold) 20%,var(--white));
  /* Neutrals are the guide's gray and ink; the page ground carries a breath of plum. */
  --g50:color-mix(in srgb,var(--y-plum) 4%,var(--white));
  --g100:color-mix(in srgb,var(--y-plum) 7%,var(--white));
  --g200:color-mix(in srgb,var(--y-gray) 20%,var(--white));
  --g300:color-mix(in srgb,var(--y-gray) 32%,var(--white));
  --g400:color-mix(in srgb,var(--y-gray) 62%,var(--white));
  --g500:var(--y-gray);
  --g600:color-mix(in srgb,var(--y-gray) 72%,var(--y-ink));
  --g700:color-mix(in srgb,var(--y-gray) 45%,var(--y-ink));
  --g900:var(--y-ink);
  --shade:color-mix(in srgb,var(--y-ink) 9%,transparent);
  --scrim:color-mix(in srgb,var(--y-ink) 45%,transparent);
  --toast:color-mix(in srgb,var(--y-plum) 22%,var(--y-ink));
  --sb-dark:var(--y-plum);
  /* The guide allows Cachet or Verdana, and nothing else. */
  --ff:'Cachet',Verdana,sans-serif;
  --r:8px;--rl:12px;
  --sb-w:220px;
  --surface:var(--white);
}
[data-theme="dark"]{
  --surface:color-mix(in srgb,var(--y-ink) 90%,var(--y-plum));
  --g50:var(--y-ink);
  --g100:color-mix(in srgb,var(--y-ink) 84%,var(--y-plum));
  --g200:color-mix(in srgb,var(--y-ink) 82%,var(--white));
  --g300:color-mix(in srgb,var(--y-ink) 72%,var(--white));
  --g400:color-mix(in srgb,var(--y-ink) 56%,var(--white));
  --g500:color-mix(in srgb,var(--y-ink) 38%,var(--white));
  --g600:color-mix(in srgb,var(--y-ink) 28%,var(--white));
  --g700:color-mix(in srgb,var(--y-ink) 18%,var(--white));
  --g900:color-mix(in srgb,var(--y-purple) 5%,var(--white));
  /* Purple at full strength is unreadable on a dark ground; lifted toward white, not inverted. */
  --brand:color-mix(in srgb,var(--y-purple) 52%,var(--white));
  --brand-deep:color-mix(in srgb,var(--y-plum) 45%,var(--white));
  --brand-tint:color-mix(in srgb,var(--y-purple) 20%,var(--y-ink));
  --brand-tint2:color-mix(in srgb,var(--y-purple) 13%,var(--y-ink));
  --brand-line:color-mix(in srgb,var(--y-purple) 45%,var(--y-ink));
  /* The action fill keeps the same legible blue; only the accent brightens. */
  --action:var(--y-blue-dark);
  --action-dark:color-mix(in srgb,var(--y-blue-dark) 78%,var(--y-ink));
  --action-bright:color-mix(in srgb,var(--y-cyan) 70%,var(--white));
  --red:color-mix(in srgb,var(--y-red) 50%,var(--white));
  --redlt:color-mix(in srgb,var(--y-red) 18%,var(--y-ink));
  --red-line:color-mix(in srgb,var(--y-red) 40%,var(--y-ink));
  --green:color-mix(in srgb,var(--y-green) 62%,var(--white));
  --greenlt:color-mix(in srgb,var(--y-green) 18%,var(--y-ink));
  --green-line:color-mix(in srgb,var(--y-green) 45%,var(--y-ink));
  --amber:color-mix(in srgb,var(--y-gold) 78%,var(--white));
  --amberlt:color-mix(in srgb,var(--y-orange) 18%,var(--y-ink));
  --amber-line:color-mix(in srgb,var(--y-orange) 45%,var(--y-ink));
  --goldlt:color-mix(in srgb,var(--y-gold) 18%,var(--y-ink));
  --shade:color-mix(in srgb,var(--y-ink) 40%,transparent);
  --toast:color-mix(in srgb,var(--y-plum) 45%,var(--y-ink));
  /* The sidebar keeps a deep plum in both themes — it is the association's chrome. */
  --sb-dark:color-mix(in srgb,var(--y-plum) 60%,var(--y-ink));
}
body{font-family:var(--ff);background:var(--g50);color:var(--g900);min-height:100vh;font-size:14px}

/* SIDEBAR */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sb-w);background:var(--sb-dark);display:flex;flex-direction:column;z-index:100;transition:transform .22s}
.sb-brand{padding:16px 18px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.sb-logo{width:30px;height:30px;margin-bottom:7px}
.sb-logo img{width:30px;height:auto;display:block}
.sb-name{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
.sb-sub{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em}
.sb-nav{padding:8px 0;flex:1;overflow-y:auto}
.sb-lbl{font-size:9px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.3);text-transform:uppercase;padding:10px 18px 3px}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 18px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.65);border:none;background:none;width:100%;text-align:left;font-family:var(--ff);transition:all .12s;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9)}
.nav-item.active{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nav-icon{width:16px;text-align:center;flex-shrink:0;font-style:normal}
.sb-foot{padding:10px 18px;border-top:1px solid rgba(255,255,255,.1)}
.sb-user{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sb-av{width:26px;height:26px;border-radius:50%;background:var(--action);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.sb-av img{width:26px;height:26px;object-fit:cover}
.sb-uname{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-role{font-size:9px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.sb-links{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10px}
.sb-links a{color:rgba(255,255,255,.28);text-decoration:none;transition:color .1s;white-space:nowrap}
.sb-links a:hover{color:rgba(255,255,255,.6)}
/* The notifications toggle is a button among links, and a button does not inherit the
   sidebar's colour the way an anchor does — `color:inherit` gave it the document's
   near-black against navy. It is styled here rather than inline so it stays legible. */
.sb-links button{background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
  font-family:inherit;font-size:10px;line-height:inherit;
  color:rgba(255,255,255,.28);text-decoration:none;transition:color .1s}
.sb-links button:hover{color:rgba(255,255,255,.6)}
.sb-links button.muted{color:rgba(255,255,255,.5)}

/* MAIN */
.main{margin-left:var(--sb-w);min-height:100vh}
.topbar{background:var(--surface);border-bottom:1px solid var(--g200);padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;gap:10px}
.topbar-title{font-size:14px;font-weight:700;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;gap:6px;align-items:center;flex-shrink:0}
.content{padding:16px 18px}

/* HAMBURGER */
.ham{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0}
/* Was inline onmouseenter/onfocus handlers, which this app's CSP blocks (9197). */
.theme-btn{background:none;border:none;cursor:pointer;font-size:17px;padding:4px 6px;line-height:1;border-radius:6px;color:var(--g500)}
.theme-btn:hover{background:var(--g100)}
[data-focus-ring]:focus{outline-color:var(--action)!important}
.ham span{display:block;width:20px;height:2px;background:var(--g700);margin:4px 0;border-radius:2px;transition:all .2s}
.sb-overlay{display:none;position:fixed;inset:0;background:var(--scrim);z-index:99}

/* BUTTONS */
.btn{padding:7px 14px;border-radius:var(--r);font-family:var(--ff);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--g200);background:var(--surface);color:var(--g700);display:inline-flex;align-items:center;gap:5px;transition:background .1s;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--g100)}
.btn-primary{background:var(--action);border-color:var(--action);color:#fff}
.btn-primary:hover{background:var(--action-dark);border-color:var(--action-dark)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:color-mix(in srgb,var(--red) 80%,var(--y-ink))}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-green:hover{background:color-mix(in srgb,var(--green) 80%,var(--y-ink))}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--g100)}

/* FORMS */
.ffield{margin-bottom:12px}
.flbl{display:block;font-size:11px;font-weight:700;color:var(--g700);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.fi,.fs,.ft{width:100%;padding:9px 12px;border:1px solid var(--g200);border-radius:var(--r);font-family:var(--ff);font-size:14px;color:var(--g900);background:var(--surface);outline:none;-webkit-appearance:none;appearance:none}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--action-bright);box-shadow:0 0 0 3px var(--action-ring)}
.fs{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23636466' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.ft{resize:vertical;min-height:90px;line-height:1.5}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}

/* FLASH */
.flash{padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:14px;border:1px solid}
.flash-success{background:var(--greenlt);border-color:var(--green-line);color:var(--green)}
.flash-error{background:var(--redlt);border-color:var(--red-line);color:var(--red)}
.flash-info{background:var(--brand-tint);border-color:var(--brand-tint2);color:var(--brand-deep)}

/* BADGES / TAGS */
.badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.badge-blue{background:var(--brand-tint);color:var(--brand-deep)}
.badge-yellow{background:var(--goldlt);color:var(--amber)}
.badge-orange{background:var(--amberlt);color:var(--amber)}
.badge-green{background:var(--greenlt);color:var(--green)}
.badge-gray{background:var(--g100);color:var(--g500)}
.badge-red{background:var(--redlt);color:var(--red)}
.role-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em}
.role-admin{background:var(--brand-deep);color:#fff}
.role-builder{background:var(--brand-tint);color:var(--brand-deep)}
.role-user{background:var(--g100);color:var(--g700)}

/* TICKET AGE */
.age-ok{color:var(--g500)}
.age-warn{color:var(--amber)}
.age-alert{color:var(--amber)}
.age-crit{color:var(--red);font-weight:600}

/* MODALS */
.overlay{position:fixed;inset:0;background:var(--scrim);z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:0;opacity:0;pointer-events:none;transition:opacity .18s}
@media(min-width:600px){.overlay{align-items:center;padding:20px}}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border-radius:var(--rl) var(--rl) 0 0;width:100%;max-width:100%;max-height:92vh;overflow-y:auto;transform:translateY(30px);transition:transform .22s}
@media(min-width:600px){.modal{border-radius:var(--rl);max-width:520px;transform:translateY(10px)}}
.modal-lg{max-width:100%}
@media(min-width:800px){.modal-lg{max-width:720px}}
.overlay.open .modal{transform:translateY(0)}
.mhdr{padding:16px 20px 12px;border-bottom:1px solid var(--g200);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:sticky;top:0;background:var(--surface);z-index:1}
.mtitle{font-size:15px;font-weight:700;color:var(--g900)}
.msub{font-size:11px;color:var(--g500);margin-top:2px}
.mclose{font-size:22px;color:var(--g500);cursor:pointer;background:none;border:none;line-height:1;padding:2px;flex-shrink:0}
.mclose:hover{color:var(--g900)}
.mbody{padding:16px 20px}
.mbar{padding:12px 20px;border-top:1px solid var(--g200);display:flex;gap:7px;justify-content:flex-end;position:sticky;bottom:0;background:var(--surface)}

/* TABLES — horizontal scroll on mobile */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rl);border:1px solid var(--g200)}
.tbl{width:100%;border-collapse:collapse;background:var(--surface);min-width:480px}
.tbl th{padding:9px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--g500);background:var(--g50);text-align:left;border-bottom:1px solid var(--g200);white-space:nowrap}
.tbl td{padding:10px 14px;font-size:13px;color:var(--g900);border-bottom:1px solid var(--g100);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--g50)}
.tbl a{color:var(--brand);text-decoration:none}
.tbl a:hover{text-decoration:underline}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--g200);border-radius:var(--rl);padding:16px 18px}
.card-title{font-size:12px;font-weight:700;color:var(--g700);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.stat-val{font-size:26px;font-weight:800;color:var(--brand-deep);line-height:1}
.stat-lbl{font-size:11px;color:var(--g500);margin-top:3px}

/* TOAST */
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--toast);color:#fff;padding:9px 18px;border-radius:30px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:all .22s;z-index:999;white-space:nowrap;max-width:90vw;text-overflow:ellipsis;overflow:hidden}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:10px}

/* RESPONSIVE */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .ham{display:block}
  .sb-overlay.open{display:block}
  .content{padding:12px 14px}
  .topbar{padding:0 14px}
}


[data-theme="dark"] .tbl tr:hover td{background:var(--g100)}
[data-theme="dark"] .overdue-box{border-color:var(--amber-line)}
[data-theme="dark"] .overdue-item{color:var(--g700)}
[data-theme="dark"] .overdue-item a{color:var(--g700)}
[data-theme="dark"] .accept-btn{color:var(--action-bright);border-color:var(--action-bright);background:var(--brand-tint)}
[data-theme="dark"] .accept-btn:hover{background:var(--action);color:#fff}
[data-theme="dark"] .badge-blue{color:var(--action-bright)}
[data-theme="dark"] .badge-green{color:var(--green)}
[data-theme="dark"] .badge-red{color:var(--red)}
[data-theme="dark"] .badge-yellow{background:var(--goldlt);color:var(--amber)}
[data-theme="dark"] .badge-orange{background:var(--amberlt);color:color-mix(in srgb,var(--y-orange) 62%,var(--white))}
[data-theme="dark"] .badge-gray{color:var(--g500)}
[data-theme="dark"] .role-builder{background:var(--brand-tint);color:var(--brand)}
[data-theme="dark"] .stat-val,[data-theme="dark"] .q-stat .val{color:var(--brand-deep)}
[data-theme="dark"] .q-tbl thead th.sort-active,[data-theme="dark"] .sort-icon.active{color:var(--action-bright)}
/* Text size (0.15.0): the whole page scales as the browser's zoom does, so every px size on
   every page grows together. */
html[data-text-size="large"] body{zoom:1.15}
html[data-text-size="larger"] body{zoom:1.3}
/* ⛔ 1.13.0 (the Help Desk's 3.8.3): `zoom` on body zooms 100vh too, so a box capped at the
   screen's height came out taller than the screen. --tz is the same factor; a cap divides by it:
   calc(100vh / var(--tz) - 32px) is the screen less 32px at every size. */
html{--tz:1}
html[data-text-size="large"]{--tz:1.15}
html[data-text-size="larger"]{--tz:1.3}
.sb-size{display:flex;align-items:center;gap:4px;margin:2px 0 8px}
.sb-size span{font-size:10px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.sb-size button{font:inherit;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25)}
.sb-size button[aria-pressed="true"]{background:#fff;color:var(--brand-deep);border-color:#fff}