/*
 * Bay Area Baseball Directory app styles, scoped under .roster-app.
 *
 * Authored as a standalone page, so its :root/html/body rules and generic
 * class names (.dot, .stat, .wrap, .on ...) collided with the theme, and
 * --accent/--display/--surface/--white collided at the CSS-variable level.
 * Everything here is confined to .roster-app in page-roster.php.
 */

.roster-app{
  --ink:#070d16;
  --surface:rgba(20,32,46,0.34);
  --surface2:rgba(28,44,60,0.42);
  --line:rgba(47,184,189,0.45);
  --line-soft:rgba(47,184,189,0.20);
  --accent:#2fb8bd;
  --accent-bright:#5fe0e6;
  --white:#f2f6f8;
  --gray:#aebdd1;
  --gray-dim:#7b8ca3;
  --amber:#f0cf6a;
  --display:'Sora','Helvetica Neue',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --btn-bg:linear-gradient(135deg,var(--surface2),var(--surface));
  --card-border:1px solid rgba(47,184,189,0.30);
  --card-shadow:inset 0 1px 0 rgba(95,224,230,0.15), 0 10px 30px rgba(0,0,0,.45);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
.roster-app *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.roster-app{background:#040810}
.roster-app{margin:0;background:transparent;
  font-family:var(--body);color:var(--white);-webkit-font-smoothing:antialiased}
.roster-app button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
.roster-app input, .roster-app select{font-family:inherit}
.roster-app .bg-fixed{position:fixed;inset:0;z-index:-1;background:var(--ink)}
.roster-app .app-header{position:sticky;top:0;z-index:40;text-align:center;
  padding:calc(var(--safe-t) + 10px) 16px 10px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(4,10,18,.94) 60%, rgba(4,10,18,.72));
  backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%)}
.roster-app .brand-wordmark{width:100%;max-width:172px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.roster-app .datastate{position:absolute;top:calc(var(--safe-t) + 10px);right:10px;
  display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:20px;
  font-family:var(--body);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray-dim);
  border:1px solid var(--line-soft);background:rgba(7,13,22,.5)}
.roster-app .datastate:active{border-color:var(--accent-bright);color:var(--accent-bright)}
.roster-app .datastate.busy{opacity:.55}
.roster-app .dot{width:6px;height:6px;border-radius:50%;background:var(--gray-dim)}
.roster-app .dot.live{background:var(--accent-bright);box-shadow:0 0 8px rgba(95,224,230,.85)}
.roster-app .dot.cached{background:var(--amber)}
.roster-app .wrap{max-width:620px;margin:0 auto;padding:16px 16px 0}
.roster-app .panel{border-radius:16px;padding:16px;margin-bottom:14px;background:var(--btn-bg);
  border:var(--card-border);border-top-color:rgba(95,224,230,0.55);
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%)}
.roster-app .eyebrow{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-bright);margin:0 0 13px}
.roster-app .searchwrap{position:relative}
.roster-app #search{width:100%;padding:14px 84px 14px 15px;font-size:16px;font-weight:600;color:var(--white);
  background:rgba(7,13,22,.72);border-radius:13px;
  border:1px solid rgba(47,184,189,.5);border-top-color:rgba(95,224,230,.7);
  box-shadow:inset 0 1px 0 rgba(95,224,230,.14)}
.roster-app #search:focus{outline:none;border-color:var(--accent-bright);
  box-shadow:inset 0 1px 0 rgba(95,224,230,.2), 0 0 12px rgba(47,184,189,.35)}
.roster-app #search::placeholder{color:var(--gray-dim);font-weight:500}
.roster-app .searchbtns{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:flex;gap:5px}
.roster-app .sbtn{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--gray-dim)}
.roster-app #clear{display:none;font-size:21px}
.roster-app #clear.on{display:grid}
.roster-app #padtoggle{border:1px solid rgba(47,184,189,.42);color:var(--accent-bright);background:rgba(47,184,189,.12)}
.roster-app #padtoggle.on{background:var(--accent-bright);color:var(--ink);border-color:var(--accent-bright)}
.roster-app .frow2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:13px}
.roster-app .frow2 + .frow2{margin-top:11px}
.roster-app .picker label{display:block;font-family:var(--body);font-weight:700;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gray-dim);margin:0 0 6px 2px}
.roster-app .picker select{width:100%;padding:13px 36px 13px 13px;font-size:15.5px;font-weight:600;
  color:var(--white);background:rgba(7,13,22,.72);border-radius:12px;appearance:none;
  border:1px solid rgba(47,184,189,.5);border-top-color:rgba(95,224,230,.7);
  box-shadow:inset 0 1px 0 rgba(95,224,230,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235fe0e6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;text-overflow:ellipsis}
.roster-app .picker select:focus{outline:none;border-color:var(--accent-bright)}
.roster-app .picker select:disabled{opacity:.5;color:var(--gray-dim)}
.roster-app .active-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.roster-app .active-row:empty{display:none}
.roster-app .fchip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px 7px 13px;border-radius:20px;
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--accent-bright);
  border:1px solid rgba(95,224,230,.6);background:rgba(47,184,189,.16)}
.roster-app .fchip b{font-weight:700;font-size:15px;line-height:1;opacity:.75}
.roster-app .fchip.reset{color:var(--gray-dim);border-color:var(--line-soft);background:rgba(7,13,22,.45)}
.roster-app .tally{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:12.5px;font-weight:600;color:var(--gray-dim);letter-spacing:.02em}
.roster-app .tally b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--accent-bright);
  margin-right:2px}
.roster-app .tally i{color:var(--line);font-style:normal}
.roster-app .tally:empty{display:none}
.roster-app .hint{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--gray);text-align:center}
.roster-app .card{border-radius:16px;margin-bottom:14px;overflow:hidden;background:var(--btn-bg);
  border:var(--card-border);border-top-color:rgba(95,224,230,0.55);
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%)}
.roster-app .cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:17px 18px 12px}
.roster-app .cardhead b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent-bright)}
.roster-app .cardhead em{font-style:normal;font-family:var(--body);font-size:13px;font-weight:600;color:var(--gray-dim)}
.roster-app .row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:13px 18px;border-top:1px solid var(--line-soft);text-decoration:none;color:inherit}
.roster-app .row:active{background:rgba(47,184,189,.10)}
.roster-app .plate{flex:0 0 50px;height:50px;border-radius:11px;display:grid;place-items:center;
  border:1.5px solid rgba(95,224,230,.75);background:rgba(0,0,0,.42);
  box-shadow:inset 0 1px 0 rgba(95,224,230,.18), 0 0 10px rgba(47,184,189,.20)}
.roster-app .plate span{font-family:var(--display);font-weight:700;font-size:25px;line-height:1;color:var(--accent-bright)}
.roster-app .plate.blank{border-color:rgba(140,152,165,.42)}
.roster-app .plate.blank span{color:var(--gray-dim);font-size:20px}
.roster-app .plate.date{flex-direction:column;display:flex;align-items:center;justify-content:center}
.roster-app .plate.date small{font-family:var(--body);font-weight:700;font-size:9px;letter-spacing:.1em;
  color:var(--accent);line-height:1;margin-bottom:2px}
.roster-app .plate.date span{font-size:21px}
.roster-app .who{min-width:0;flex:1}
.roster-app .who b{display:block;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25;
  color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-app .who small{display:block;font-size:13.5px;font-weight:500;color:var(--gray-dim);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-app .who small u{text-decoration:none;color:var(--accent);font-weight:600}
.roster-app .who small i{font-style:normal;color:var(--amber);font-weight:600}
.roster-app mark{background:rgba(95,224,230,.24);color:var(--white);border-radius:3px}
.roster-app .month-head{display:flex;align-items:center;gap:12px;padding:6px 2px 12px;margin-top:4px}
.roster-app .month-head b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.roster-app .month-head i{flex:1;height:1px;background:var(--line-soft)}
.roster-app .month-head em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-dim);white-space:nowrap}
.roster-app .month-card{padding:0}
.roster-app .trow{padding:15px 18px;border-top:1px solid var(--line-soft)}
.roster-app .trow:first-child{border-top:none}
.roster-app .tmain{display:flex;align-items:center;gap:14px}
/* Free text from the sheet's Info column. pre-line keeps the sheet's own
   line breaks (the ballpark night lists four separate lines) without having
   to inject markup into user-entered text. */
.roster-app .tinfo{margin:11px 0 0 64px;font-size:13.5px;line-height:1.55;
  color:var(--gray);white-space:pre-line}
.roster-app .tteams{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0 64px}
.roster-app .tchip{padding:7px 13px;border-radius:20px;font-family:var(--display);font-weight:700;
  font-size:13px;color:var(--accent-bright);
  border:1px solid rgba(95,224,230,.45);background:rgba(47,184,189,.13)}
.roster-app .tchip:active{background:var(--accent-bright);color:var(--ink)}
/* Sanctioning body / event type. Deliberately muted rather than teal or
   amber: teal already means "tappable" on the team chips beside it, and
   amber means "attention" elsewhere in this app. This is a static fact. */
.roster-app .tkind{padding:7px 11px;border-radius:20px;font-family:var(--body);font-weight:700;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-dim);
  border:1px solid var(--line-soft);background:rgba(7,13,22,.45);align-self:center}
.roster-app .notice{padding:13px 15px;margin-bottom:14px;border-radius:12px;font-size:13.5px;line-height:1.55;
  color:var(--gray);background:rgba(240,207,106,.10);border:1px solid rgba(240,207,106,.32)}
.roster-app .notice code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--amber);
  background:rgba(240,207,106,.14);padding:2px 6px;border-radius:5px}
.roster-app .empty{padding:44px 26px;text-align:center}
.roster-app .empty b{display:block;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-bright);margin-bottom:10px}
.roster-app .empty p{margin:0;font-size:14px;line-height:1.6;color:var(--gray)}
.roster-app .empty code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--white);
  background:rgba(47,184,189,.14);padding:2px 6px;border-radius:5px}
.roster-app #pad{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px;
  padding-bottom:calc(12px + var(--safe-b));
  transform:translateY(130%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.roster-app #pad.on{transform:translateY(0)}
.roster-app .padinner{max-width:420px;margin:0 auto;border-radius:18px;padding:12px;
  background:linear-gradient(135deg, rgba(28,44,60,.9), rgba(12,22,34,.94));
  border:1px solid rgba(47,184,189,.42);border-top-color:rgba(95,224,230,.7);
  box-shadow:inset 0 1px 0 rgba(95,224,230,.18), 0 14px 40px rgba(0,0,0,.6);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
.roster-app .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.roster-app .key{height:50px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:24px;color:var(--white);
  background:var(--btn-bg);border:1px solid rgba(47,184,189,0.5);
  border-top-color:rgba(95,224,230,0.8);
  box-shadow:inset 0 1px 0 rgba(95,224,230,0.2), 0 0 10px rgba(47,184,189,0.28)}
.roster-app .key:active{background:rgba(95,224,230,.22);color:var(--accent-bright)}
.roster-app .key.util{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray)}
.roster-app #scrim{position:fixed;inset:0;z-index:60;background:rgba(2,6,12,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s}
.roster-app #scrim.on{opacity:1;pointer-events:auto}
.roster-app #sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:620px;margin:0 auto;
  padding:10px 20px calc(26px + var(--safe-b));border-radius:22px 22px 0 0;
  background:linear-gradient(180deg, rgba(20,34,48,.97), rgba(6,12,20,.99));
  border-top:1px solid rgba(95,224,230,.55);box-shadow:0 -14px 44px rgba(0,0,0,.7);
  transform:translateY(101%);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.roster-app #sheet.on{transform:translateY(0)}
.roster-app .grab{width:38px;height:4px;border-radius:2px;background:rgba(95,224,230,.35);margin:0 auto 18px}
.roster-app .dhead{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.roster-app .dplate{flex:0 0 80px;height:80px;border-radius:14px;display:grid;place-items:center;
  border:2px solid var(--accent-bright);background:rgba(0,0,0,.5);
  box-shadow:0 0 18px rgba(95,224,230,.45), inset 0 1px 0 rgba(95,224,230,.25)}
.roster-app .dplate span{font-family:var(--display);font-weight:700;font-size:42px;line-height:1;color:var(--accent-bright)}
.roster-app .dhead h2{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.15}
.roster-app .dhead p{margin:0;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent)}
.roster-app .facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin:0}
.roster-app .fact dt{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-dim);margin:0 0 3px}
.roster-app .fact dd{margin:0;font-family:var(--display);font-weight:600;font-size:18px;color:var(--white)}
.roster-app .fact dd.na{color:var(--gray-dim);font-weight:400;font-size:16px}
@media (prefers-reduced-motion:reduce){
.roster-app *{transition:none ;animation:none }
}