/* ── FFP CREW SHELL — shared look for FFP Scorer and FFP GFX ──
   Two apps, one door. Palette and composition are the APPROVED + LOCKED mock
   (outputs/ffp-scorer-gfx-mock.html). Icons are inline SVG on purpose: these apps
   must render identically with no network, so there is no icon font to fail. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
 background:var(--deep-2);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
/* THE PALETTE IS SET PER APP, in each index.html, from that app's OWN icon.
   FFP Scorer is orange; FFP GFX runs navy to blue to teal. A shared teal shell made
   the Scorer app open in a colour its icon never uses. These are the slots:
     --deep / --deep-2  the dark ground, darkest at the foot
     --glow             the lit corner, the icon's own hero colour
     --wash             the secondary tint washed across the top right
     --lift             a raised dark card sitting on the ground
   Everything below is structure and is identical in both apps. */
:root{
 --gold:#F2A900; --gold-2:#FFD46B;
 --blue:#2ba8e0;
 --ink:#0f2327; --mut:#5a6b6e; --dim:#869599;
 --air:#ff5f4d; --green:#22c55e;
 --line:#e4ebec; --paper:#f3f6f6;
 --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
}
.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.view{display:none;flex:1;flex-direction:column;min-height:0}
.view.on{display:flex}

/* ── dark hero, the one surface that carries depth ── */
.hero{position:relative;padding:calc(var(--sat) + 16px) 20px 22px;color:#fff;overflow:hidden;flex:none;
 background:radial-gradient(130% 100% at 6% -10%, var(--glow) 0%, transparent 55%),
            linear-gradient(170deg, var(--deep) 0%, var(--deep-2) 100%)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(90% 70% at 92% 8%, var(--wash) 0%, transparent 60%)}
.hero>*{position:relative;z-index:1}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hero h1{margin:4px 0 0;font-size:21px;line-height:1.15;font-weight:900;letter-spacing:-.02em}
.hero .sub{margin-top:5px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
.hrow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
 background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
 font-size:12px;font-weight:900;color:#fff;letter-spacing:.02em}

/* ── body ── */
.body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--sab) + 26px)}
.lbl{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.wrap{padding:16px 20px 0}

/* ── buttons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:0;cursor:pointer;
 font-family:inherit;font-size:15.5px;font-weight:800;border-radius:13px;padding:15px 18px;
 background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2a1d00;
 box-shadow:0 6px 18px rgba(242,169,0,.3)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none}
.btn.dark{background:#11373d;color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.14)}
.lnk{display:block;width:100%;background:none;border:0;font-family:inherit;font-size:13px;font-weight:800;
 color:var(--mut);text-decoration:underline;cursor:pointer;padding:14px 0}

/* ── THE GATE: the first screen of either app ──
   A flat ground with a form on it is not a landing page. This is a full-bleed photo of
   the real thing (a real FFP match for Scorer; the graphic the app puts on air for GFX)
   under a four-stop scrim in the app's own colour, with the FFP mark on the picture and
   the whole composition anchored to the FOOT of the screen, so there is no dead void
   under the button and the thumb lands where the hand already is. */
.gate{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;color:#fff;min-height:0}
.gate-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;z-index:0}
.gate:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,
  rgba(var(--deep-rgb),.58) 0%, rgba(var(--deep-rgb),.14) 24%,
  rgba(var(--deep-rgb),.80) 60%, rgba(var(--deep-rgb),.97) 100%)}
.gate-nav{position:relative;z-index:2;padding:calc(var(--sat) + 16px) 20px 0;flex:none}
.gate-nav img{height:26px;width:auto;display:block}
.gate-in{position:relative;z-index:2;margin-top:auto;padding:0 24px calc(var(--sab) + 24px);
 overflow-y:auto;-webkit-overflow-scrolling:touch}
.gate-in .eyebrow{color:var(--glow-ink,var(--gold))}
.gate h1{margin:7px 0 0;font-size:clamp(29px,8.6vw,38px);line-height:1.04;font-weight:900;letter-spacing:-.034em}
.gate .lede{margin:11px 0 0;color:rgba(255,255,255,.76);font-size:13.5px}
.gate .rule{width:34px;height:3px;border-radius:2px;background:var(--gold);margin:0 0 2px}

/* ── THE INSTALL GATE ──
   Both crew apps are PWA-ONLY. Anyone not running the installed home-screen app is
   stopped here: no sign-in behind it, nothing to dismiss, and no query-string bypass.
   Same test the member app's InstallPrompt uses: display-mode standalone, or
   navigator.standalone on iOS. */
.steps{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.step{display:flex;gap:12px;align-items:flex-start}
.step i{width:23px;height:23px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
 background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
 font-size:11px;font-weight:900;font-style:normal;margin-top:1px}
.step p{margin:0;font-size:13.5px;font-weight:700;line-height:1.5;color:rgba(255,255,255,.9)}
.step p b{font-weight:900;color:#fff}
.step p svg{vertical-align:-3px;margin:0 2px}
.qr{margin-top:16px;display:flex;gap:15px;align-items:center}
.qr img{width:118px;height:118px;border-radius:12px;background:#fff;padding:7px;flex:none}
.qr .u{min-width:0;font-size:13px;font-weight:800;line-height:1.45;word-break:break-all;color:#fff}
.qr .u span{display:block;margin-top:5px;font-size:12px;font-weight:700;color:rgba(255,255,255,.6)}

/* ── sign in / empty states ── */
.pad{padding:28px 24px calc(var(--sab) + 28px);display:flex;flex-direction:column;flex:1}
.mark{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
 background:rgba(242,169,0,.14);color:var(--gold);margin-bottom:18px}
.h2{font-size:30px;line-height:1.05;font-weight:900;letter-spacing:-.03em;margin:0}
.lede{margin:10px 0 0;font-size:13.5px;line-height:1.55;font-weight:600;color:var(--mut)}
.field{margin-top:22px}
.field label{display:block;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.inp{width:100%;min-width:0;height:52px;border-radius:13px;border:1px solid var(--line);background:#fff;
 padding:0 15px;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink)}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,168,224,.14)}
.inp.code{letter-spacing:.42em;text-align:center;font-size:22px;font-weight:900;padding:0}
.err{margin-top:12px;font-size:13px;font-weight:700;color:#d93b2b;line-height:1.45}
.note{margin-top:16px;font-size:12.5px;font-weight:700;line-height:1.55;color:var(--mut);text-align:center}
.note a{color:var(--gold);font-weight:800}
.hint{display:flex;gap:9px;margin-top:18px;font-size:12px;font-weight:600;line-height:1.5;color:var(--dim)}
.hint svg{flex:none;margin-top:1px}
.grow{flex:1}

/* the dark variant of the two full-screen states */
.view.dark{background:var(--deep-2)}
.view.dark .pad{color:#fff;padding-top:calc(var(--sat) + 28px);
 background:radial-gradient(120% 70% at 10% 0%, var(--glow) 0%, transparent 60%), var(--deep-2)}
.view.dark .lede,.view.dark .note,.gate .note{color:rgba(255,255,255,.66)}
.view.dark .inp,.gate .inp{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.view.dark .inp::placeholder,.gate .inp::placeholder{color:rgba(255,255,255,.38)}
.view.dark .hint,.gate .hint{color:rgba(255,255,255,.5)}
.view.dark .lnk,.gate .lnk{color:rgba(255,255,255,.7)}

/* ── the signed-in-as block on the no-access screen ── */
.who{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);text-align:center}
.who .lbl{display:block;margin-bottom:6px}
.who b{font-size:15px;font-weight:800}

/* ── list rows (a day of matches) ── */
.list{margin-top:10px}
.it{display:flex;gap:13px;padding:13px 20px;align-items:flex-start;border-top:1px solid var(--line);background:#fff}
.it:first-child{border-top:0}
.it .t{font-size:13px;font-weight:800;color:var(--ink);width:46px;flex:none;font-variant-numeric:tabular-nums}
.it .mk{width:11px;height:11px;border-radius:50%;flex:none;margin-top:3px;border:2px solid var(--blue);background:#fff}
.it .g{flex:1;min-width:0}
.it .g b{display:block;font-size:14px;font-weight:800;line-height:1.3}
.it .g span{display:block;font-size:11.5px;font-weight:600;color:var(--mut);margin-top:2px}
.it .sc{font-size:13.5px;font-weight:900;color:var(--mut);flex:none;font-variant-numeric:tabular-nums}
.it.done{background:var(--paper)}
.it.done .t,.it.done .g b{color:#9fadb0}
.it.done .mk{border-color:#cfd9da}
.it.live .mk{border-color:var(--air);background:var(--air);box-shadow:0 0 0 4px rgba(255,95,77,.18)}
.empty{padding:40px 24px;text-align:center;color:var(--dim);font-size:13.5px;font-weight:700;line-height:1.6}