/* ============================================================
   Scoreboard Night — the shared dark layer.

   /css/app.css is the light product styling, and it is shared with the outing
   and club apps, so it is never edited. This file redefines its TOKENS on
   <body class="night"> and then corrects the handful of components whose
   light-theme decisions do not survive the flip: a <dialog> with no background
   of its own, a token doing two jobs, twenty-odd italics.

   Page-specific work stays in the page. Anything here is true of every screen
   that opts in.
   ============================================================ */
body.night{
  --green:#7fc79a; --green-dk:#6fb98b; --green-deep:#eef1f6; --green-pale:#1c3527;
  --paper:#14291f; --page:#0b2019; --page-2:#1c3527;
  --card:#14291f; --line:rgba(203,232,214,.24); --line-2:rgba(203,232,214,.14);
  --ink:#eef1f6; --muted:#a3bdaf; --muted-2:#88a494; --cream:#17301f;
  --gold:#e8c877; --butter:#e8c877;
  --green-grad:linear-gradient(180deg,rgba(232,200,119,.22),rgba(232,200,119,.12));
  --gold-grad:linear-gradient(180deg,#f0d489 0%,#e8c877 55%,#d9b65e 100%);
  --board-strip:#0d2118; --board-strip-ink:#eef1f6;
  --mark-red:#ff9c8f;
  --win:#7fc79a; --bad:#ff9c8f; --bad-bg:rgba(255,156,143,.12);
  /* this design is Inter and Roboto Mono. There is no serif in it. */
  --disp:'Inter',system-ui,-apple-system,sans-serif;
  --label:'Inter',system-ui,-apple-system,sans-serif;
  --shadow:0 16px 32px rgba(3,20,13,.45);
  --gut:16px;
}
body.night{background:linear-gradient(175deg,#0f2a20 0%,#0b2019 42%,#081712 100%);
  background-color:#0b2019;background-attachment:fixed;min-height:100dvh}
body.night h1,body.night h2,body.night h3{font-weight:900;letter-spacing:-.02em;color:#fff}
body.night .card{background:var(--card);border:1px solid var(--line-2);border-radius:16px}
body.night .lbl{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
body.night .sub,body.night .hint{font-family:var(--body);color:var(--muted)}
body.night .muted{color:var(--muted-2)}

/* app.css sets font-style:italic on twenty-odd label-ish selectors. Undone in
   one place rather than chased one screen at a time. */
body.night .mast .for, body.night .mast .meta, body.night .mast .gear,
body.night .navbar button, body.night .sec, body.night .lbl, body.night .eyebrow,
body.night .tag, body.night .fld span, body.night .lnk, body.night .b-head,
body.night .brow .nm span, body.night .b-foot, body.night .hole-n i,
body.night .cardgrid div.hn, body.night .saving, body.night #saving,
body.night .gate-in .sub, body.night .or, body.night .foot span,
body.night .sub, body.night .hint{font-style:normal;font-family:var(--body)}

/* Fields. `.fld` is the LABEL wrapping a caption and an input, not the input. */
body.night .fld{background:transparent;border:0;padding:0;display:block}
body.night .fld > span{display:block;margin-bottom:6px;font-family:var(--body);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
body.night input,body.night select,body.night textarea{
  background:#0b1c15;border:1px solid rgba(203,232,214,.18);border-radius:11px;
  color:var(--ink);font-family:var(--body);font-size:16px;padding:12px 13px;width:100%}
body.night input::placeholder,body.night textarea::placeholder{color:#6b8676}
body.night input:focus,body.night select:focus,body.night textarea:focus{
  outline:0;border-color:rgba(232,200,119,.5)}
body.night input[type=number],body.night input[inputmode=decimal],
body.night input[inputmode=numeric],body.night input[inputmode=tel]{
  font-family:var(--mono);font-weight:700}

/* Buttons: the primary path is gold, everything else is quiet. */
body.night .btn{font-family:var(--body);font-weight:800;border-radius:12px}
body.night .btn.solid{background:var(--gold-grad);color:#17301f;border:0}
body.night .btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
body.night .btn.ghost:hover{border-color:rgba(232,200,119,.45);color:var(--gold)}
body.night .btn.wide{width:100%}
body.night a{color:var(--gold)}
body.night .amt,body.night .gv,body.night .led{font-family:var(--mono);font-weight:700}
body.night .amt.bad{color:var(--bad)} body.night .amt.win{color:var(--green)}

/* A <dialog> has NO background in app.css, so it falls back to the UA's white. */
body.night dialog{background:var(--paper);color:var(--ink);
  border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.55)}
body.night dialog::backdrop{background:rgba(3,20,13,.66)}
body.night .dlg h3{font-family:var(--body);font-weight:900;letter-spacing:-.02em;color:#fff}
/* `--green-deep` is heading INK in most places but the toast's BACKGROUND in
   one — one token, two jobs, so both of these are set outright. */
body.night .toast{background:#1c3527;color:var(--ink);
  border:1px solid var(--line-2);box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.night .saving,body.night #saving{background:#1c3527;color:var(--muted);
  border:1px solid var(--line-2)}

/* the way in, on the apps that gate behind one */
body.night .gate{background:none;padding:calc(env(safe-area-inset-top) + 40px) 18px 48px;
  place-items:start center}
body.night .gate-in{background:transparent;box-shadow:none;padding:0;max-width:430px}
body.night .gate-in h1{font-size:32px;font-weight:900;letter-spacing:-.03em;
  text-align:left;color:#fff;line-height:1.05}
body.night .gate-in .sub{font-size:15px;font-weight:500;line-height:1.5;
  color:var(--muted);text-align:left;margin-top:10px}
body.night .gate-in img.lock{margin:0 0 22px;width:auto;height:22px}

/* the tab strip, in the design's own language */
body.night .navbar button{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}
body.night .navbar button.on{color:var(--gold)}

/* `.tag.grey` is a light beige chip in app.css, which on this theme carries
   pale green text on near-white and reads as a smudge. Every app that opts in
   uses it, so it is corrected here rather than in one of them. */
body.night .tag{background:rgba(203,232,214,.10);border:1px solid var(--line-2);
  color:var(--muted);font-family:var(--body);font-style:normal}
body.night .tag.grey{background:rgba(203,232,214,.08);color:var(--muted-2)}

/* The leader's mark. A red number is golf's own way of saying "under par", and
   on the light theme --mark-red is a deep red that carries white text. On this
   one it flips to a PALE pink so it reads against the dark page — and app.css
   still paints white on it, which is the single most important number on a
   leaderboard at 2:1. The mark keeps its colour; the ink goes dark. */
body.night .brow .sc.lead{color:#2b1210}