/* mbp_ui.css — the Meatballparm design system (1.1).
   One set of tokens, one type system, one focus style and one motion rule for
   the app and every page of the website. Pages keep their own class names and
   map their own variables onto these tokens (the small "mbp-ds-map" block in
   each page), so this file is the single place a colour or a face changes.

   Type: Plus Jakarta Sans for reading, Bebas Neue for display headings,
   JetBrains Mono for numbers and data, Sacramento for the wordmark only.
   Colour: the neon-dark ground with the lime brand accent; a cool light theme.
   Sections keep a tint of their own (League Assist violet, Waivers sky,
   Start/Sit coral, Week profiles mint, Coach's Corner steel) on the same ground.
   Fonts are self-hosted (SIL Open Font License, see fonts/OFL-*.txt). */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pjs-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pjs-500.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/pjs-600.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pjs-700.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/pjs-800.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 400;font-display:swap;src:url(fonts/jbm-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/jbm-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700 900;font-display:swap;src:url(fonts/jbm-700.woff2) format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bebas-400.woff2) format('woff2')}
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sacramento-400.woff2) format('woff2')}


/* Families the pages used to pull from a font CDN resolve to the same four
   self-hosted faces, so every page renders in one type system — offline in the
   app too — without rewriting each page's font-family rules. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 400;font-display:swap;src:url(fonts/pjs-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pjs-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/pjs-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pjs-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/pjs-800.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 400;font-display:swap;src:url(fonts/pjs-400.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pjs-500.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/pjs-600.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pjs-700.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/pjs-800.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:100 400;font-display:swap;src:url(fonts/pjs-400.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pjs-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/pjs-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pjs-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/pjs-800.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 400;font-display:swap;src:url(fonts/pjs-400.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pjs-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/pjs-600.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pjs-700.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/pjs-800.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 400;font-display:swap;src:url(fonts/pjs-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pjs-500.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/pjs-600.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pjs-700.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/pjs-800.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bebas-400.woff2) format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bebas-400.woff2) format('woff2')}
@font-face{font-family:'Anton';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bebas-400.woff2) format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bebas-400.woff2) format('woff2')}
@font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sacramento-400.woff2) format('woff2')}

:root{
  --mbp-font-text:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mbp-font-display:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --mbp-font-data:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --mbp-font-mark:'Sacramento','Brush Script MT','Segoe Script',cursive;

  /* dark (the default ground) */
  --mbp-bg:#0c0d0b;
  --mbp-surface-1:#131412;
  --mbp-surface-2:#1a1b18;
  --mbp-surface-3:#212320;
  --mbp-line:#272825;
  --mbp-line-2:#31332e;
  --mbp-ink:#e6e4dc;
  --mbp-ink-2:#a8a89e;
  --mbp-ink-3:#8b8e83;          /* 5.3:1 on the ground (was #636660, 3.4:1) */
  --mbp-accent:#c8f55a;         /* the lime: fills, active states */
  --mbp-on-accent:#0c0d0b;      /* text on a lime fill */
  --mbp-accent-text:#c8f55a;    /* lime used as text or a line */
  --mbp-accent-wash:rgba(200,245,90,.12);
  --mbp-good:#34d399; --mbp-warn:#fbbf24; --mbp-bad:#f87171; --mbp-info:#38bdf8;
  --mbp-tint-assist:#a78bfa; --mbp-tint-waivers:#38bdf8; --mbp-tint-startsit:#fb7185;
  --mbp-tint-week:#34d399;   --mbp-tint-coach:#4aa3db;   --mbp-tint-draft:#c8f55a;
  --mbp-radius-s:8px; --mbp-radius:12px; --mbp-radius-l:16px;
  --mbp-shadow:0 10px 30px rgba(0,0,0,.35);
  --mbp-focus:#c8f55a;
  --mbp-hit:44px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --mbp-bg:#f4f5f7;
  --mbp-surface-1:#ffffff;
  --mbp-surface-2:#eef0f4;
  --mbp-surface-3:#e3e7ed;
  --mbp-line:#e2e5ea;
  --mbp-line-2:#d2d7df;
  --mbp-ink:#16181c;
  --mbp-ink-2:#4b5159;
  --mbp-ink-3:#61666f;
  --mbp-accent:#c8f55a;
  --mbp-on-accent:#16181c;
  --mbp-accent-text:#4a7015;
  --mbp-accent-wash:rgba(90,134,28,.10);
  --mbp-good:#09744a; --mbp-warn:#935807; --mbp-bad:#c22a20; --mbp-info:#1c65be;
  --mbp-shadow:0 10px 30px rgba(20,30,50,.12);
  --mbp-focus:#4a7015;
  color-scheme:light;
}

/* keyboard focus: one visible ring everywhere, never on a mouse or touch press */
:focus{outline:none}
:focus-visible{outline:2px solid var(--mbp-focus)!important;outline-offset:2px!important;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0!important}

/* motion: honour the system setting everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* small controls get a 44px touch area without changing their size */
.mbp-hit{position:relative}
.mbp-hit::before{content:'';position:absolute;left:50%;top:50%;width:max(100%,var(--mbp-hit));height:max(100%,var(--mbp-hit));transform:translate(-50%,-50%)}

/* the shared site footer (website pages; the app shows these under Settings) */
.mbp-foot{box-sizing:border-box;width:100%;max-width:1240px;margin:28px auto 0;padding:18px 20px calc(22px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--mbp-line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font:500 13px/1.5 var(--mbp-font-text);color:var(--mbp-ink-3);background:transparent}
.mbp-foot a{color:var(--mbp-ink-2);text-decoration:none;padding:6px 0}
.mbp-foot a:hover{color:var(--mbp-ink)}
.mbp-foot .mbp-foot-mark{font-family:var(--mbp-font-mark);font-size:20px;color:var(--mbp-accent-text);margin-right:4px;line-height:1}
.mbp-foot .mbp-foot-sp{flex:1}
@media (max-width:520px){.mbp-foot .mbp-foot-sp{flex-basis:100%;height:0}}

/* freshness stamp: "Updated 6:00 AM today" (filled by mbp_ui.js from data-fresh) */
.mbp-fresh{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;
  font:600 11px/1.3 var(--mbp-font-text)!important;font-style:normal!important;letter-spacing:.01em!important;text-transform:none!important;
  color:var(--mbp-ink-3);white-space:nowrap;text-decoration:none}
.mbp-fresh[hidden]{display:none!important}
.mbp-fresh::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mbp-ink-3);flex:none}
.mbp-fresh[data-age="new"]::before{background:var(--mbp-good)}
.mbp-fresh[data-age="recent"]::before{background:var(--mbp-warn)}
.mbp-fresh.block{display:flex;margin-top:6px}

/* share button + the little confirmation toast (C5) */
.mbp-share{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--mbp-line-2);background:transparent;color:var(--mbp-ink-2);font:700 12.5px/1 var(--mbp-font-text);cursor:pointer;
  letter-spacing:normal;text-transform:none;white-space:nowrap}
.mbp-share:hover{color:var(--mbp-ink);border-color:var(--mbp-ink-3)}
.mbp-share svg{width:14px;height:14px;flex:none}
.mbp-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translate(-50%,10px);z-index:2147483600;
  opacity:0;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);padding:10px 16px;border-radius:12px;
  background:var(--mbp-surface-3);color:var(--mbp-ink);border:1px solid var(--mbp-line-2);box-shadow:var(--mbp-shadow);
  font:700 13.5px/1.35 var(--mbp-font-text);overflow-wrap:anywhere;pointer-events:none}
.mbp-toast.on{opacity:1;transform:translate(-50%,0)}

/* screen-reader-only text */
.mbp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
