/* ============================================================
   Yoink — scorecard reskin
   Additive layer. Loads after the inline <style> blocks and
   overrides them. Delete the two <link> tags to revert.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:#F5F1E6;      /* the sheet */
  --page:#EFEAD9;       /* the desk it sits on */
  --card:#FFFFFF;
  --card-2:#FAF8F1;
  --ink:#0b1f14;
  --ink-2:#13291b;
  --muted:#5b6f61;
  --sage:#5b6f61;
  --faint:#96a099;
  --green:#14432A;      /* the wordmark's own green */
  --green-d:#0A2E1C;
  --pine:#14432A;
  --lime:#c7f24a;
  --flag:#9ec21f;
  --line:#E1DFD3;       /* hairline */
  --hair-2:#EDEBE1;     /* lighter hairline, between rows */
  --sand:#EEEBE0;
  --field:#FFFFFF;
  --field-line:#0b1f14;
  --field-soft:#FAF8F1;
  --date-head:#F1EEE4;
  --warn:#a23b1a;
  --land:#eaf1e6;
  --land-line:#b7c9b3;
  --map1:#FBFAF4;
  --map2:#F1EFE5;
}
html.dark{
  --paper:#12160F;
  --page:#0C0F0A;
  --card:#1A1F17;
  --card-2:#161B13;
  --ink:#EDEAE0;
  --ink-2:#D3D8CC;
  --muted:#93A08F;
  --sage:#93A08F;
  --faint:#7A8677;
  --green:#C7F24A;
  --green-d:#9ec21f;
  --pine:#C7F24A;
  --line:#2A3327;
  --hair-2:#222A20;
  --sand:#1E2419;
  --field:#161B13;
  --field-line:#3A4536;
  --field-soft:#141812;
  --date-head:#1A2116;
  --warn:#D98B5F;
  --land:#1B2418;
  --land-line:#3D4B39;
  --map1:#0F130D;
  --map2:#141911;
}

/* ---------- ground ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.wrap{padding:0 18px}

/* ---------- masthead ---------- */
header{
  padding:18px 0 12px;
  border-bottom:2px solid var(--ink);
  margin-bottom:2px;
}
.logo-img{height:26px!important}
#who{
  font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* ---------- the sheet ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:none;
  padding:16px 16px 18px;
  margin-bottom:14px;
}
h2{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:19px;letter-spacing:-.012em;color:var(--ink)}
.cav-h{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:19px;letter-spacing:-.012em;line-height:1.2;color:var(--ink);margin:0 0 12px}
.muted{color:var(--muted);font-size:13px;line-height:1.55}
.grouplbl{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}

/* ---------- tab bar: rules, not pills ---------- */
#app > .row:first-child{
  gap:16px;
  background:transparent;
  padding:0 2px;
  border-radius:0;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
  flex-wrap:nowrap;
}
.tabbtn{
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  padding:10px 0 9px;
  font-family:'Archivo',sans-serif;
  font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);
  border-bottom:2.5px solid transparent;
  gap:5px;
}
.tabbtn.ghost{background:transparent!important;color:var(--faint);border:0;border-bottom:2.5px solid transparent}
.tabbtn:not(.ghost){
  background:transparent!important;
  color:var(--green);
  border-bottom-color:var(--green);
  box-shadow:none!important;
}
.tabbtn svg.i{width:13px;height:13px}

/* masthead controls */
.mktpill{border:1.5px solid var(--ink);color:var(--ink);background:transparent;font-size:9.5px;padding:6px 12px}
.ava{
  background:var(--lime);color:#0b1f14;
  border:1.5px solid #0b1f14;box-shadow:2px 2px 0 #0b1f14;
  width:30px;height:30px;font-size:14px;
}
html.dark .ava{border-color:#08160e;box-shadow:2px 2px 0 rgba(0,0,0,.6)}

/* ---------- controls ---------- */
button{
  background:var(--green);color:#F6F2E7;
  border-radius:10px;padding:12px 18px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.02em;
}
html.dark button:not(.ghost):not(.tabbtn):not(.appopt):not(.muteopt):not(.mktpill):not(.ava):not(.iconbtn):not(.day):not(.chip):not(.mrow):not(.locbar):not(.dmap-back):not(.zbtn):not(.mpill):not(.mpill-head){color:#08160e}
button.ghost{
  background:transparent;border:1.5px solid var(--green);color:var(--green);
}
input,select{
  background:var(--field);color:var(--ink);
  border:1.5px solid var(--field-line);
  border-radius:10px;padding:11px 12px;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px;
}
input::placeholder{font-family:'Archivo',sans-serif;font-weight:500;color:var(--faint)}

/* location bar */
.locbar{
  background:var(--card);
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:9px 14px;
}
.locbar b{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:14px}
.locbar .note{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.locbar .pin{color:var(--green)}

/* ---------- the ticket becomes a scorecard block ---------- */
.tkt{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  padding:0;
  margin-bottom:12px;
  overflow:hidden;
}
html.dark .tkt{border-color:var(--line);background:var(--card)}
.tkt .tk-top{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:11px 14px 9px;
}
.tkt .tk-course{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;color:var(--ink)}
.tkt .tk-when{
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:17px;
  color:var(--green);white-space:nowrap;line-height:1;
}
html.dark .tkt .tk-when{color:var(--lime)}
.tkt .tk-meta{
  margin-top:0;padding:6px 14px;
  border-top:1.5px solid var(--ink);
  border-bottom:1px solid var(--hair-2);
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.tkt .tk-sub{padding:8px 14px 0;font-size:11.5px;color:var(--muted);margin-top:0}
.tkt .grab{margin:10px 14px 13px}

/* the one loud thing on the page */
a.grab,.grab{
  background:var(--lime);color:#0b1f14;
  border:1.5px solid #0b1f14;
  box-shadow:2.5px 2.5px 0 #0b1f14;
  font-size:11px;letter-spacing:.11em;font-weight:800;
  padding:9px 16px;
}
html.dark a.grab,html.dark .grab{
  color:#08160e;border-color:#08160e;box-shadow:2.5px 2.5px 0 rgba(0,0,0,.6);
}
.ministamp{
  font-family:'Caveat',cursive;font-weight:700;font-size:17px;
  letter-spacing:.02em;color:var(--warn);border:0;background:none;
  transform:rotate(-6deg);padding:0;
}
html.dark .ministamp{color:var(--lime)}


/* spots as players, in the meta line */
.tk-meta .dots{display:inline-flex;gap:3.5px;vertical-align:-1px;margin:0 1px}
.tk-meta .dots i{
  width:7px;height:7px;border-radius:50%;
  border:1.3px solid var(--sage);display:inline-block;
}
.tk-meta .dots i.f{background:var(--green);border-color:var(--green)}
html.dark .tk-meta .dots i{border-color:var(--muted)}
html.dark .tk-meta .dots i.f{background:var(--lime);border-color:var(--lime)}

/* ---------- Open tab: date band → course → times ---------- */
.dgh{
  font-family:'Archivo',sans-serif!important;
  font-size:10.5px!important;font-weight:700!important;
  letter-spacing:.15em!important;text-transform:uppercase;
  color:var(--muted)!important;
}
.wcard2{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  padding:0;
  margin-bottom:12px;
  overflow:hidden;
}
.wcard2 .nm{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;color:var(--ink);
  padding:11px 14px 0;
}
.wcard2 .mt{
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin-top:3px;padding:0 14px 9px;
  border-bottom:1.5px solid var(--ink);
}
.wcard2 .r2{
  margin-top:0;padding:9px 14px;
  border-bottom:1px solid var(--hair-2);
}
.wcard2 .r2:last-child{border-bottom:none}
.wtog{
  background:var(--lime);border:1.5px solid #0b1f14;color:#0b1f14;
  box-shadow:2px 2px 0 #0b1f14;
  font-size:10px;font-weight:800;letter-spacing:.11em;padding:5px 12px;
}
html.dark .wtog{color:#08160e;border-color:#08160e;box-shadow:2px 2px 0 rgba(0,0,0,.6)}

/* ---------- watchlist ---------- */
.chip{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:12.5px;
  background:var(--card-2);border:1px solid var(--line);color:var(--green);
  border-radius:999px;padding:6px 12px;
}
.chip.on{background:var(--green);border-color:var(--green);color:#F6F2E7}
html.dark .chip.on{color:#08160e}
.day{
  width:26px;height:26px;border-radius:6px;
  border:1.5px solid var(--ink);color:var(--ink-2);
  background:var(--card);font-size:10px;font-weight:700;
}
.day.on{background:var(--green);border-color:var(--green);color:#F6F2E7}
html.dark .day.on{color:#08160e}

/* course picker rows */
.ccard{
  border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;
  padding:11px 2px;margin:0;
}
.ccard.on{background:transparent;border-color:var(--line)}
.ccard .cph{border-radius:8px;background:var(--card-2)}
.ccard h4 .nm,.wcard .nm{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px}
.ccard .meta{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ccard .tick{border:1.5px solid var(--faint);width:20px;height:20px}
.ccard.on .tick{background:var(--green);border-color:var(--green)}

/* market rows */
.mrow{
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;padding:11px 2px;
}
.mrow:hover{border-color:var(--line);background:var(--card-2)}
.mrow.on{border-color:var(--line);background:transparent}
.mrow .nm{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px}
.mrow .ct{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mrow .ic{border-radius:8px;background:var(--card-2);color:var(--green)}

/* ---------- settings ---------- */
.appctl{background:transparent;padding:0;border:1.5px solid var(--ink);border-radius:9px;overflow:hidden;gap:0}
.appopt{
  border-radius:0;background:var(--card);color:var(--ink-2);
  border-right:1px solid var(--line);box-shadow:none;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.appopt:last-child{border-right:0}
.appopt.on{background:var(--green);color:#F6F2E7;box-shadow:none}
html.dark .appopt.on{color:#08160e}
.muterow{gap:6px}
.muteopt{
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:13px;
  border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-2);
}
.muteopt.on{border-color:var(--warn);color:var(--warn);background:var(--card)}
.mutebanner{
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  color:var(--ink-2);font-size:11.5px;
}
.setgrp h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15.5px}
.setgrp p.hint{font-size:11px;color:var(--muted);line-height:1.5}
.qh-row input[type=time]{
  font-family:'Fraunces',Georgia,serif;font-weight:700;color:var(--green);
  border:1.5px solid var(--ink);
}
html.dark .qh-row input[type=time]{color:var(--lime)}
.qh-tz b{font-family:'Fraunces',Georgia,serif;font-weight:700;color:var(--green)}
.switch .sl{border:1.5px solid var(--ink);background:var(--card)}
.switch .sl:before{background:var(--faint)}
.switch input:checked + .sl{background:var(--green);border-color:var(--green)}
.switch input:checked + .sl:before{background:#F6F2E7}
.settoggle .lab{font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;color:var(--ink-2)}

/* ---------- the map, in the Yoink Book hand ---------- */
.dmap-wrap{
  border:1.5px solid var(--ink);
  border-radius:10px;
  background:var(--map1);
  overflow:hidden;
}
html.dark .dmap-wrap{border-color:var(--line);background:var(--map1)}
.dmap .land{fill:var(--land);stroke:var(--ink);stroke-width:1.5;stroke-opacity:.85}
html.dark .dmap .land{fill:var(--land);stroke:var(--land-line);stroke-opacity:1}
.dmap .rg .blob{fill:var(--green);opacity:.10}
.dmap .rg:hover .blob,.dmap .rg.on .blob{opacity:.20}
.dmap .rg .ring{stroke:var(--green);stroke-width:2;stroke-dasharray:5 4}
.dmap .rg .num{font-family:'Fraunces',Georgia,serif;font-weight:700;fill:var(--green)}
.dmap .rg .rlbl{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;
  fill:var(--green);letter-spacing:.12em;text-transform:uppercase;
}
.dmap .mk .cell{fill:var(--card);stroke:var(--ink);stroke-width:1.4;opacity:1}
.dmap .mk:hover .cell,.dmap .mk.on .cell{fill:var(--lime)}
.dmap .mk .mnum{font-family:'Fraunces',Georgia,serif;font-weight:700;fill:var(--ink)}
.dmap .mk .mlbl{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-2);
}
.dmap .doodle .fillflag{fill:var(--lime);stroke:var(--ink);stroke-width:1.2}
.dmap-bar{background:transparent;border-bottom:1.5px solid var(--ink)}
html.dark .dmap-bar{border-bottom-color:var(--line)}
.dmap-title{font-family:'Fraunces',Georgia,serif;font-size:15.5px;letter-spacing:-.01em;color:var(--ink);font-weight:700}
.dmap-hint{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dmap-back{background:var(--card);border:1.5px solid var(--ink);border-radius:8px;color:var(--ink)}
html.dark .dmap-back{border-color:var(--line);color:var(--ink)}
.zmap-wrap{border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
html.dark .zmap-wrap{border-color:var(--line)}

/* ---------- dark: match the app's own dark specificity ---------- */
html.dark .muteopt{background:var(--card);color:var(--ink-2);border-color:var(--line)}
html.dark .muteopt.on{border-color:var(--warn);color:var(--warn);background:var(--card)}
html.dark .appopt{background:var(--card);color:var(--ink-2)}
html.dark .appopt.on{background:var(--green);color:#08160e}
html.dark .day{background:var(--card);border-color:var(--line);color:var(--ink-2)}
html.dark .day.on{background:var(--green);border-color:var(--green);color:#08160e}
html.dark .chip{background:var(--card-2);border-color:var(--line);color:var(--ink)}
html.dark .chip.on{background:var(--green);border-color:var(--green);color:#08160e}
html.dark .card{background:var(--card);border-color:var(--line);box-shadow:none}
html.dark .ccard{background:transparent;border-color:var(--line)}
html.dark .ccard.on{background:transparent;border-color:var(--line)}
html.dark .ccard .tick{border-color:var(--faint)}
html.dark .ccard.on .tick{background:var(--green);border-color:var(--green)}
html.dark .mrow{background:transparent;border-color:var(--line)}
html.dark .mrow:hover,html.dark .mrow.on{background:var(--card-2);border-color:var(--line)}
html.dark .locbar{background:var(--card);border-color:var(--line)}
html.dark .switch .sl{background:var(--card);border-color:var(--line)}
html.dark .mutebanner{background:var(--card-2);border-color:var(--line);color:var(--ink-2)}
html.dark .wcard2{background:var(--card);border-color:var(--line)}
html.dark .cav-h{color:var(--ink)!important}
html.dark .dgh{color:var(--muted)!important}
html.dark .tabbtn.ghost{color:var(--faint)}
html.dark .tabbtn:not(.ghost){color:var(--lime);border-bottom-color:var(--lime)}
html.dark #app > .row:first-child{background:transparent;border-bottom-color:var(--line)}
html.dark #who{color:var(--muted)}
html.dark .mktpill{border-color:var(--line);color:var(--ink)}
html.dark input,html.dark select{background:var(--field);color:var(--ink);border-color:var(--field-line)}

/* ---------- sheets ---------- */
.sheet-in{background:var(--paper);border-radius:18px 18px 0 0}
.sheet-hd{border-bottom:2px solid var(--ink)}
.sheet-hd h3{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:17px}
.iconbtn{background:var(--card-2);border:1px solid var(--line);border-radius:9px;color:var(--ink-2)}

/* ---------- misc ---------- */
.ok{background:rgba(199,242,74,.22);border:1.5px solid var(--ink);border-radius:10px;font-size:12.5px}
.watch{border-bottom:1px solid var(--line)}
.watch b{font-family:'Fraunces',Georgia,serif;font-weight:600}
.usmap .land{fill:var(--land);stroke:var(--land-line)}
.usmap .lbl{fill:var(--ink-2)}
.usmap .cl .core{fill:var(--green)}
.usmap .cl .hit{fill:var(--green)}


/* ============================================================
   Welcome view (#introCard)
   ============================================================ */
#introCard .hero{
  background:transparent;color:var(--ink);
  border:0;border-radius:0;box-shadow:none;
  padding:6px 0 4px;margin-bottom:20px;
}
#introCard .badge{
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;margin-bottom:18px;
}
#introCard .badge b{color:var(--green);display:flex}
html.dark #introCard .badge{border-color:var(--line);color:var(--ink)}
html.dark #introCard .badge b{color:var(--lime)}
#introCard h1{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:clamp(30px,7.2vw,44px);line-height:1.03;letter-spacing:-.025em;
  color:var(--ink);text-wrap:balance;
}
#introCard h1 .hl{color:var(--green);display:block}
html.dark #introCard h1 .hl{color:var(--lime)}
#introCard .sub{
  color:var(--muted);font-size:15px;line-height:1.6;margin-top:14px;max-width:60ch;
}
#introCard .trust{display:grid;gap:0;margin-top:20px;color:var(--ink-2);font-size:13.5px}
#introCard .trust div{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-top:1px solid var(--line);
}
#introCard .trust div:last-child{border-bottom:1px solid var(--line)}
#introCard .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);border:1px solid var(--ink);flex:none}
html.dark #introCard .dot{border-color:var(--lime)}
#introCard .statstrip{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
}
#introCard .statstrip > div{text-align:center;padding:12px 4px;border-right:1px solid var(--line)}
#introCard .statstrip > div:last-child{border-right:0}
#introCard .statstrip b{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:24px;color:var(--green);font-variant-numeric:tabular-nums;
}
html.dark #introCard .statstrip b{color:var(--lime)}
#introCard .statstrip small{
  display:block;margin-top:3px;font-size:8.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* section headings */
#introCard .kicker{
  font-family:'Archivo',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
#introCard h2{
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:22px;
  letter-spacing:-.018em;margin:6px 0 0;color:var(--ink);text-wrap:balance;
}
#introCard .lead{color:var(--muted);font-size:14px;line-height:1.6;margin-top:11px}

/* feature rows — read like a card */
#introCard .feats{margin-top:14px;border-top:1.5px solid var(--ink)}
#introCard .feat{padding:12px 0;border-bottom:1px solid var(--line)}
#introCard .feat:last-child{border-bottom:0}
#introCard .ft{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;color:var(--ink)}
#introCard .fd{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:4px}

/* how it works */
#introCard .steps{margin-top:14px;gap:0;border-top:1.5px solid var(--ink)}
#introCard .step{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:13px 0;
}
#introCard .step:last-child{border-bottom:0}
#introCard .num{
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:7px;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:14px;
  width:28px;height:28px;
}
#introCard .step h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15.5px;margin-bottom:2px}
#introCard .step p{color:var(--muted);font-size:13.5px;line-height:1.55}

/* the one dark panel */
#introCard .edge{
  background:var(--ink);color:#EFEAD9;border-radius:14px;padding:24px 22px;margin-bottom:14px;
}
html.dark #introCard .edge{background:#080C07;border:1px solid var(--line)}
#introCard .edge .kicker{color:var(--lime)}
#introCard .edge h2{color:#FFFFFF;font-size:23px}
#introCard .edge .lead{color:#BFCFC2}
#introCard .edge ul{list-style:none;margin-top:16px;display:grid;gap:0}
#introCard .edge li{
  display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;
  padding:10px 0;border-bottom:1px solid rgba(239,234,217,.14);color:#E6EDE4;
}
#introCard .edge li:last-child{border-bottom:0}
#introCard .edge li .chk{color:var(--lime);flex:none}

/* what's coming */
#introCard .soon{border:1.5px solid var(--ink);position:relative}
html.dark #introCard .soon{border-color:var(--line)}
#introCard .soon .kicker{color:var(--green)}
html.dark #introCard .soon .kicker{color:var(--lime)}
#introCard .soon-grid{display:grid;gap:18px;margin-top:14px}
@media(min-width:640px){#introCard .soon-grid{grid-template-columns:1fr 200px;align-items:start;gap:22px}}
#introCard .soon-l{list-style:none;margin-top:13px;border-top:1.5px solid var(--ink)}
html.dark #introCard .soon-l{border-top-color:var(--line)}
#introCard .soon-l li{
  padding:9px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);
}
#introCard .soon-l li:last-child{border-bottom:0}
#introCard .soon-note{
  margin-top:13px;font-family:'Caveat',cursive;font-size:17px;color:var(--green);
}
html.dark #introCard .soon-note{color:var(--lime)}
#introCard .soon-art{
  margin:0;border:1.5px solid var(--ink);border-radius:10px;
  overflow:hidden;background:var(--card-2);
}
html.dark #introCard .soon-art{border-color:var(--line);background:var(--card-2)}
#introCard .soon-art svg{display:block;width:100%;height:auto;max-height:330px;margin:0 auto}
@media(max-width:639px){#introCard .soon-art svg{width:auto;max-width:100%}}
#introCard .soon-art figcaption{
  padding:8px 10px;border-top:1px solid var(--line);
  font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-align:center;
}

/* ---------- hole art (Caddie render, own palette) ---------- */
.holeart{
  --forest:#14432A;--forest-d:#0A2E1C;--accent:#c7f24a;--ink:#0b1f14;
  --muted:#5b6f61;--faint:#8fa396;--card-2:#FAF8F1;
  --turf-1:#EDF1E7;--turf-2:#DFE8D6;--turf-3:#CBD9BE;
  --green-s:#B9CFA8;--green-dd:#8FAF7E;
  --sand:#EDE7D4;--sand-d:#DCD2B4;
  --water:#D8E5E6;--water-d:#B9D2D4;
  --wood:#C6D2BC;--wood-d:#AEBEA3;
}

.holeart{display:block;width:100%;background:var(--card-2)}

.holeart .ink{stroke:var(--ink);fill:none;stroke-width:1.2;stroke-linecap:round}

.holeart .tree{stroke:var(--turf-1);fill:none;stroke-linecap:butt}

.holeart .rgh{stroke:var(--turf-2);fill:none;stroke-linecap:butt}

.holeart .fat{stroke:var(--turf-3);fill:none;stroke-linecap:butt}

.holeart .tree-o{stroke:var(--ink);fill:none;opacity:.07;stroke-linecap:butt}

.holeart .rgh-o{stroke:var(--ink);fill:none;opacity:.15;stroke-linecap:butt}

.holeart .fat-o{stroke:var(--ink);fill:none;opacity:.42;stroke-linecap:butt}

.holeart .grn{fill:var(--green-s);stroke:var(--ink);stroke-width:1.3}

.holeart .fringe{fill:var(--green-s);opacity:.4;stroke:var(--ink);stroke-width:.8;stroke-opacity:.3}

.holeart .crown{fill:none;stroke:var(--green-dd)}

.holeart .grn-o{fill:none;stroke:var(--ink);stroke-width:1.3}

.holeart .cup{fill:var(--ink);opacity:.8}

.holeart .bunk{fill:var(--sand);stroke:var(--ink);stroke-width:1.1}

.holeart .face{fill:var(--sand-d);stroke:none}

.holeart .bunk-o{fill:none;stroke:var(--ink);stroke-width:1.1}

.holeart .wat{fill:var(--water-d);stroke:none}

.holeart .surf{fill:none;stroke:#FFFFFF;stroke-width:3.2;opacity:.90;stroke-linecap:round}

.holeart .cliff-e{fill:none;stroke:var(--ink);stroke-width:1.6;opacity:.62}

.holeart .mhw{fill:none;stroke:#5F7C88;stroke-width:1.2;opacity:.55;stroke-dasharray:7 6}

.holeart .wat-big{fill:var(--water-d);fill-opacity:.30;stroke:none}

.holeart .wat-o{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}

.holeart .shallow{fill:var(--water);stroke:none}

.holeart .shot{stroke:var(--forest);stroke-width:1.2;stroke-dasharray:2 4;fill:none;opacity:.7}

.holeart .disp{fill:var(--forest);opacity:.07}

.holeart .carry{stroke:var(--ink);stroke-width:.9;opacity:.5;stroke-dasharray:3 3}

.holeart .carrylab{font-family:'Archivo',sans-serif;font-weight:700;font-size:8.5px;fill:var(--ink);opacity:.85;letter-spacing:.04em;paint-order:stroke;stroke:var(--card-2);stroke-width:2.8;stroke-linejoin:round}

.holeart .wash{fill:var(--green-s);opacity:.16;stroke:none}

.holeart .sbar{stroke:var(--ink);stroke-width:1;opacity:.40;fill:none}

.holeart .sbarlab{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:7.5px;fill:var(--ink);opacity:.5}

.holeart .arc{stroke:var(--muted);fill:none;stroke-width:.8;opacity:.2;stroke-dasharray:3 4}

.holeart .arclab{font-family:'Archivo',sans-serif;font-weight:700;font-size:7.5px;fill:var(--faint);letter-spacing:.08em}

.holeart .flagp{fill:var(--accent);stroke:var(--forest-d);stroke-width:.9}

.holeart .frond{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}

.holeart .cone{fill:var(--wood);stroke:var(--ink);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}

.holeart .cone-d{fill:var(--wood-d);stroke:var(--ink);stroke-width:1;stroke-linejoin:round;stroke-opacity:.75;vector-effect:non-scaling-stroke}

.holeart .bldg{fill:#DEDACD;stroke:var(--ink);stroke-opacity:.28;stroke-width:1}

.holeart .strm-o{stroke:var(--ink);fill:none;stroke-width:6;stroke-opacity:.18;stroke-linecap:round}

.holeart .strm{stroke:#9FBBC9;fill:none;stroke-width:4;stroke-linecap:round}

.holeart .rock{fill:#C7C3B8;stroke:var(--ink);stroke-width:1;stroke-linejoin:round;stroke-opacity:.55;vector-effect:non-scaling-stroke}

.holeart .rock-l{stroke:var(--ink);stroke-opacity:.35;fill:none;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}

.holeart .scree{fill:#D8D4C8;stroke:var(--ink);stroke-opacity:.3;stroke-width:1;stroke-dasharray:2.5 3}

.holeart .ridge{stroke:var(--ink);stroke-opacity:.28;stroke-width:1}

.holeart .chev{stroke:var(--forest);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.holeart .hedge{stroke:var(--wood-d);fill:none;stroke-width:3;stroke-dasharray:2.5 4.5;stroke-linecap:round}

.holeart .rail{stroke:#8A7B5E;fill:none;stroke-width:1.1;stroke-opacity:.85;stroke-linecap:round}

.holeart .post{stroke:#8A7B5E;stroke-width:1.15;stroke-opacity:.9;stroke-linecap:round}

.holeart .shed-b{fill:#E2DAC8;stroke:var(--ink);stroke-opacity:.65;stroke-width:.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}

.holeart .shed-r{fill:#CFC5B0;stroke:var(--ink);stroke-opacity:.65;stroke-width:.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}

.holeart .shed-d{fill:#C9BFA8;stroke:var(--ink);stroke-opacity:.55;stroke-width:.5;vector-effect:non-scaling-stroke}

.holeart .shed-l{stroke:var(--ink);stroke-opacity:.35;stroke-width:.4;vector-effect:non-scaling-stroke}

.holeart .tuft{stroke:#A2925A;fill:none;stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}

.holeart .tuft-d{stroke:#877947;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-opacity:.9;vector-effect:non-scaling-stroke}

.holeart .tuft-seed{fill:#A2925A}

.holeart .tuft-d-seed{fill:#877947}

.holeart .trunk{stroke:var(--ink);stroke-width:1.1;fill:none;stroke-linecap:round;stroke-opacity:.8;vector-effect:non-scaling-stroke}

.holeart .teebox{stroke:var(--ink);stroke-width:.7}

.holeart .teemk{stroke:var(--ink);stroke-width:.8}

.holeart .teelab{font-family:Archivo,system-ui,sans-serif;font-size:7.5px;font-weight:700;letter-spacing:.1em;fill:var(--muted)}

.holeart text{user-select:none}


/* Open tab: tee times as a scorecard table */
.ttbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:0 0 12px}
.ttbl th{
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:6px 8px 6px 0;
  border-top:1.5px solid var(--ink);border-bottom:1px solid var(--hair);
}
html.dark .ttbl th{border-top-color:var(--line)}
.ttbl td{padding:10px 8px 10px 0;border-bottom:1px solid var(--hair-2);font-size:13px;vertical-align:middle}
.ttbl tr:last-child td{border-bottom:none}
.ttbl th:last-child,.ttbl td:last-child{text-align:right;padding-right:0;width:1%;white-space:nowrap}
.ttbl .tm{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:15.5px;color:var(--green);white-space:nowrap}
html.dark .ttbl .tm{color:var(--lime)}
.ttbl .ap{font-family:'Archivo',sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-left:3px}
.ttbl .pr{display:block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:2px}
.ttbl .ho{color:var(--ink-2);font-weight:600}
.ttbl .nsp{color:var(--faint)}
.ttbl .grab{
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  text-transform:uppercase;border-radius:999px;white-space:nowrap;
  background:var(--lime);color:#0b1f14;border:1.5px solid #0b1f14;
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:10px;letter-spacing:.1em;padding:7px 13px;
  box-shadow:2px 2px 0 #0b1f14;margin:0;width:auto;
}
.ttbl .grab svg{width:11px;height:11px}
html.dark .ttbl .grab{box-shadow:2px 2px 0 rgba(0,0,0,.6)}
.ttbl .dots{display:inline-flex;gap:3.5px;vertical-align:middle}
.ttbl .dots i{width:7px;height:7px;border-radius:50%;border:1.3px solid var(--sage);display:inline-block}
.ttbl .dots i.f{background:var(--green);border-color:var(--green)}
html.dark .ttbl .dots i{border-color:var(--muted)}
html.dark .ttbl .dots i.f{background:var(--lime);border-color:var(--lime)}

/* the courses you've picked — chips you can take off */
.selchips{display:flex;flex-wrap:wrap;gap:7px;margin:-2px 0 12px}
.selchip{
  display:inline-flex;align-items:center;gap:8px;width:auto;
  background:var(--card-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 10px 6px 13px;cursor:pointer;box-shadow:none;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:13px;
  color:var(--green);transition:border-color .12s,background .12s;
}
.selchip b{font-weight:600}
.selchip em{
  font-style:normal;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;
  line-height:1;color:var(--faint);
  width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
}
.selchip:hover{border-color:var(--green)}
.selchip:hover em{background:var(--green);color:#F6F2E7}
.selchip:active{transform:scale(.97)}
html.dark .selchip{background:var(--card-2);border-color:var(--line);color:var(--ink)}
html.dark .selchip:hover{border-color:var(--lime)}
html.dark .selchip:hover em{background:var(--lime);color:#08160e}

/* the alert row uses the same table as Open */
.tkt .tkwrap{padding:0 14px}
.tkt .tkwrap .ttbl{margin:0}
.tkt .tk-sub{padding:9px 14px 12px}
.tkt .tk-when{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html.dark .tkt .tk-when{color:var(--muted)}

/* the watching line — concise, and it opens the course list */
.sumline{
  display:flex;align-items:center;gap:10px;width:100%;
  margin-top:12px;padding:11px 13px;
  background:var(--card);border:1px solid var(--hair);border-radius:10px;
  text-align:left;cursor:pointer;box-shadow:none;
  font-family:'Archivo',sans-serif;font-weight:500;font-size:12.5px;
  color:var(--muted);line-height:1.5;
}
.sumline:hover{border-color:var(--green)}
.sumline.flat{cursor:default;background:transparent;border-color:transparent;padding:11px 0}
.sumline.flat:hover{border-color:transparent}
.sumline #summary{flex:1;min-width:0}
.sumline #summary b{
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:13.5px;color:var(--green);
}
html.dark .sumline #summary b{color:var(--lime)}
.sumcar{
  flex:none;display:inline-flex;align-items:center;width:13px;
  color:var(--green);transition:transform .16s ease;
}
html.dark .sumcar{color:var(--lime)}
.selchips{margin:10px 0 4px}

/* ============================================================
   Sign in — two states in one card
   ============================================================ */
#authCard{display:flex;flex-direction:column;padding:22px 20px 20px}
#authCard > *{flex:0 0 auto;min-height:0;width:100%}
#authStep1{order:1}
#sendBtn{order:2}
#sentMsg{order:3}
#resendHint{order:4;display:none}
#authFoot1{order:5}
#authFoot2{order:6;display:none}
#backToIntro{order:7}

.au-kick{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.au-h{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:clamp(27px,7vw,34px);line-height:1.06;letter-spacing:-.022em;
  color:var(--ink);margin:9px 0 0;text-wrap:balance;
}
.au-sub{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:11px}
.au-sub b{font-family:'Fraunces',Georgia,serif;font-weight:700;color:var(--ink)}
.au-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--hair)}
.au-list li{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--hair);
  font-size:13px;line-height:1.45;color:var(--ink-2);
}
.au-list li svg.i{width:15px;height:15px;color:var(--green);flex:none;margin-top:1px}
html.dark .au-list li svg.i{color:var(--lime)}

.au-field{position:relative;margin-top:18px}
.au-field input{margin:0;padding-right:64px}
.au-flabel{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);pointer-events:none;
}
#authCard #sendBtn{margin-top:12px}

/* the six boxes */
.otpwrap{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:18px}
.otpbox{
  width:100%;margin:0;padding:0;height:56px;text-align:center;
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:24px;
  color:var(--ink);background:var(--card);
  border:1.5px solid var(--ink);border-radius:10px;
  font-variant-numeric:tabular-nums;
}
.otpbox:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(20,67,42,.13)}
html.dark .otpbox{border-color:var(--line)}
html.dark .otpbox:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(199,242,74,.16)}
.otphidden{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0;border:0}
#authCard #verifyBtn{margin-top:14px}

.au-resend{text-align:center;font-size:12px;color:var(--muted);margin:16px 0 -4px}
.au-foot{
  text-align:center;font-family:'Caveat',cursive;font-size:17px;
  color:var(--muted);margin-top:14px;
}

/* step two: the card becomes the code screen */
#authCard:has(#sentMsg:not(.hide)) #authStep1{display:none}
#authCard:has(#sentMsg:not(.hide)) #authFoot1{display:none}
#authCard:has(#sentMsg:not(.hide)) #authFoot2{display:block}
#authCard:has(#sentMsg:not(.hide)) #resendHint{display:block}
#authCard:has(#sentMsg:not(.hide)) #sendBtn{
  order:5;background:transparent;color:var(--green);
  border:0;box-shadow:none;font-size:12.5px;font-weight:700;
  padding:4px 0;margin-top:2px;text-decoration:underline;text-underline-offset:3px;
}
html.dark #authCard:has(#sentMsg:not(.hide)) #sendBtn{color:var(--lime)}
#authCard:has(#sentMsg:not(.hide)) #sendBtn:disabled{color:var(--faint);text-decoration:none}


/* ============================================================
   Install / notifications sheet (#yk-push, built by push.js)
   push.js appends its own <style> to <head> AFTER this file's
   <link>, so equal-specificity rules would lose. Every selector
   below is prefixed with `body` to outrank it. push.js itself
   is not modified — the subscribe logic is untouched.
   ============================================================ */

body #yk-push{
  background:var(--paper);
  color:var(--ink);
  border-top:1.5px solid var(--ink);
  border-radius:16px 16px 0 0;
  box-shadow:0 -10px 40px rgba(11,31,20,.18);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html.dark body #yk-push{
  border-top-color:var(--line);
  box-shadow:0 -10px 40px rgba(0,0,0,.55);
}

/* header: icon + title */
body #yk-push .yk-hd{gap:10px;padding-right:32px}
body #yk-push .yk-ic{
  width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line);
}
body #yk-push .yk-ttl{
  font-family:'Fraunces',Georgia,serif;
  font-weight:700;font-size:17px;letter-spacing:-.012em;
  line-height:1.2;color:var(--ink);
}
body #yk-push .yk-sub{
  font-family:'Archivo',sans-serif;
  font-size:12.5px;line-height:1.5;font-weight:500;
  color:var(--muted);margin:8px 0 0;
}

/* dismiss */
body #yk-push .yk-x{
  top:-6px;right:-6px;
  color:var(--faint);font-size:20px;
  padding:5px 8px;border-radius:8px;
}
body #yk-push .yk-x:hover{color:var(--ink);background:var(--sand)}

/* the one loud thing in the sheet — same pill as YOINK IT */
body #yk-push .yk-btn{
  margin-top:15px;
  background:var(--lime);color:#0b1f14;
  border:1.5px solid #0b1f14;
  border-radius:10px;
  box-shadow:2.5px 2.5px 0 #0b1f14;
  font-family:'Archivo',sans-serif;
  font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  padding:13px 16px;
}
body #yk-push .yk-btn:active{
  transform:translate(2.5px,2.5px);
  box-shadow:0 0 0 #0b1f14;
}
body #yk-push .yk-btn:disabled{opacity:1;background:var(--sand);color:var(--faint);
  border-color:var(--line);box-shadow:2.5px 2.5px 0 var(--line)}
html.dark body #yk-push .yk-btn{
  color:#08160e;border-color:#08160e;box-shadow:2.5px 2.5px 0 rgba(0,0,0,.6);
}
html.dark body #yk-push .yk-btn:active{box-shadow:0 0 0 rgba(0,0,0,.6)}

/* the three Add-to-Home-Screen steps */
body #yk-push .yk-steps{gap:9px;margin-top:16px}
body #yk-push .yk-step{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 8px 12px;
}
body #yk-push .yk-step .n{
  width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green);color:var(--paper);
  font-family:'Fraunces',Georgia,serif;
  font-size:11px;font-weight:700;letter-spacing:0;
  opacity:1;margin-bottom:8px;
}
html.dark body #yk-push .yk-step .n{color:#08160e}
body #yk-push .yk-step .g{color:var(--green);height:26px;margin-bottom:8px}
body #yk-push .yk-step .g svg{width:24px;height:24px}
body #yk-push .yk-step .g img{width:24px;height:24px;border-radius:6px;
  border:1px solid var(--line)}
body #yk-push .yk-step .t{
  font-family:'Archivo',sans-serif;
  font-size:11.5px;font-weight:600;line-height:1.3;color:var(--ink);
}
body #yk-push .yk-step .t small{
  font-size:10px;font-weight:500;color:var(--muted);
  opacity:1;margin-top:3px;
}
body #yk-push .yk-note{
  font-family:'Archivo',sans-serif;
  font-size:11px;color:var(--faint);margin:12px 0 0;
}


/* ============================================================
   Handwriting discipline
   ------------------------------------------------------------
   The rule: on a scorecard, the PRINTING is the pre-printed
   furniture — headings, column labels, numbers. The PENCIL is
   what a person writes in the margin during the round.
   So Caveat is reserved for asides and voice only; every title,
   label and data value below moves to the printed faces
   (Fraunces for titles, Archivo for labels and numbers).

   Still handwritten, deliberately — these are the margin:
     .dmap-hint      "tap a market", "tap a region to zoom in"
     .mutebanner .zzz "z z Z"
     .ministamp      "YOINKED!"
     .au-foot        the sign-in footer note
     .znote          pencil annotations on the map
   ============================================================ */

/* the Watchlist heading (app.html sets Caveat via #tabMine #welcome+.card h2) */
#tabMine #welcome+.card h2,.pencil{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:19px;letter-spacing:-.012em;color:var(--ink);
}

.zmk .zct{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;
}
.zrl .zrgl{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:21px;letter-spacing:-.01em;
}

/* --- "Markets" toggle + counts: printed label, printed number --- */
.mpill-head{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
}
.mpill .mpill-n{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
  font-variant-numeric:tabular-nums;letter-spacing:0;
}

/* --- the date tag on each Alerts row (dLabel) — printed, matching .dgh --- */
.tkt .tk-when{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.4;
}
html.dark .tkt .tk-when{color:var(--muted)}


/* ============================================================
   Share, beside the YOINK IT pill
   Two controls, not one: the acid pill books; a hairline ghost
   circle to its LEFT shares. Secondary sits before primary so
   the row ends on the action, and every pill stays flush right.
   ============================================================ */
.grabwrap{
  display:inline-flex;align-items:center;gap:8px;
  vertical-align:middle;
}
button.ghost.grab-share{
  order:-1;                       /* markup keeps the link first; ghost renders first */
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;margin:0;padding:0;
  border-radius:50%;
  border:1.5px solid var(--ink);
  background:var(--card);color:var(--ink);
  cursor:pointer;box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s,transform .08s;
}
button.ghost.grab-share svg{width:13px;height:13px}
button.ghost.grab-share:hover{background:var(--sand)}
button.ghost.grab-share:active{transform:translate(1px,1px)}
button.ghost.grab-share:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html.dark button.ghost.grab-share{border-color:var(--ink);color:var(--ink);background:var(--card)}
html.dark button.ghost.grab-share:hover{background:var(--sand)}

/* the "Copied" note */
.yktoast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,8px);
  background:var(--ink);color:var(--paper);
  font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:10px 16px;border-radius:999px;
  box-shadow:0 8px 24px rgba(11,31,20,.25);
  opacity:0;transition:opacity .18s,transform .18s;
  z-index:99998;pointer-events:none;white-space:nowrap;
}
.yktoast.on{opacity:1;transform:translate(-50%,0)}
html.dark .yktoast{background:var(--lime);color:#08160e}


/* ============================================================
   SHARE — PARKED until /api/t is live on Vercel.
   The buttons, the share logic and the card stay in place; this
   one rule just hides the control. Delete it to bring share back.
   ============================================================ */
button.ghost.grab-share{display:none!important}