/*
 * Två teman, en uppsättning variabler. Att byta tema är ett attributbyte på
 * <html> — ingen omrendering, inga klassbyten nere i trädet.
 *
 * Neumorfiskt: EN bakgrundsfärg som alla ytor delar. Formen kommer helt ur
 * ljuset (ljus skugga uppe till vänster, mörk nere till höger). Inga ramar,
 * inga färgfält, ingen accentfärg. Upphöjt = tryckbart, intryckt = värde
 * eller aktivt val.
 *
 * Solljus: platt, nära-svart på nära-vitt, noll skuggor, tunga vikter och
 * riktiga kanter. Läsbart i direkt sol, vilket är hela poängen.
 */

:root[data-theme="neumorph"] {
  --bg: #e3e7e2;
  --surface: #e3e7e2;
  --hi: #f6f9f5;
  --lo: #c6cdc5;

  --text: #3c4a42;
  --text-dim: #7f8d84;

  /*
   * Ljuset kommer uppifrån vänster. Blurren är dryg dubbla offseten — kortare
   * än så ger en synlig grå ring istället för en mjuk kant, vilket var precis
   * det som gjorde första försöket smutsigt när listkorten låg tätt.
   */
  --raise: -5px -5px 13px var(--hi), 5px 5px 13px var(--lo);
  --raise-sm: -2px -2px 6px var(--hi), 2px 2px 6px var(--lo);
  /*
   * Intryckt måste vara lika djupt som upphöjt är högt, annars läser man inte
   * av valt/ovalt i ögonvrån. 3 px mot --raise 5 px var för grunt: valt mål på
   * green syntes knappt, och faktarutorna såg nästan platta ut.
   */
  --press: inset -4px -4px 10px var(--hi), inset 4px 4px 10px var(--lo);
  --press-sm: inset -2px -2px 5px var(--hi), inset 2px 2px 5px var(--lo);

  /*
   * Breda ytor behöver mer offset än små. På en 78 px hålknapp räcker
   * --raise-sm för att ge form, men på ett 350 px brett listkort blir samma
   * skugga en hårstrå-tunn linje längs en lång kant och kortet ser platt ut.
   * Därför en egen nivå för listkort: tydligt föremål, men fortfarande lättare
   * än de primära knapparna så hierarkin håller.
   */
  --raise-card: -4px -4px 11px var(--hi), 4px 4px 11px var(--lo);

  /*
   * Brunnen. Listan ligger nedsänkt i bakgrunden och korten ligger i den —
   * det klassiska neumorfiska greppet. Ger listan en egen kant, skiljer
   * innehåll från kontroller, och maskerar att korten klipps mitt i skuggan
   * när man scrollar.
   */
  --well: inset -7px -7px 16px var(--hi), inset 7px 7px 16px var(--lo);
  --well-pad: 19px 14px;
  --well-bleed: -14px;
  --list-gap: 16px;

  --edge-w: 0px;
  --edge-c: transparent;

  --sel-bg: transparent;
  --sel-fg: var(--text);
  --sel-shadow: var(--press);

  --r-lg: 34px;
  --r-md: 24px;
  --r-sm: 18px;

  --w-num: 500;
  --w-strong: 600;
  --w-body: 500;

  --sep: transparent;
}

:root[data-theme="flat"] {
  --bg: #fdfdfd;
  --surface: #ffffff;
  --hi: transparent;
  --lo: transparent;

  --text: #050505;
  --text-dim: #3a3a3a;

  --raise: none;
  --raise-sm: none;
  --raise-card: none;
  --press: none;
  --press-sm: none;

  /* Brunnen är ett rent neumorfiskt grepp. I solljusläget finns den inte. */
  --well: none;
  --well-pad: 0;
  --well-bleed: 0;
  --list-gap: 12px;

  --edge-w: 3px;
  --edge-c: #050505;

  --sel-bg: #050505;
  --sel-fg: #fdfdfd;
  --sel-shadow: none;

  --r-lg: 6px;
  --r-md: 4px;
  --r-sm: 3px;

  --w-num: 900;
  --w-strong: 800;
  --w-body: 600;

  --sep: #050505;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font: var(--w-body) 17px/1.35 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ── Skärmar ───────────────────────────────────────────────────────────── */

.screen { display: none; }

body[data-screen="boot"]    .screen[data-name="boot"],
body[data-screen="courses"] .screen[data-name="courses"],
body[data-screen="play"]    .screen[data-name="play"],
body[data-screen="clubs"]   .screen[data-name="clubs"] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  gap: 10px;
  padding:
    calc(14px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
}

.stage {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.2vh, 10px);
}

/*
 * Spelvyn får aldrig scrolla och får aldrig lägga sig över kontrollerna. På en
 * 667 px hög telefon sköt varningsrutan tidigare rakt in i front/center/back.
 * safe center = centrera när det får plats, annars börja uppifrån — då kapas
 * det minst viktiga (varning, uppdelning) istället för att siffran flyttas upp
 * ur bild eller tryckytorna täcks.
 */
.stage:not(.stack) {
  justify-content: safe center;
  overflow: hidden;
}

.stage.center { align-items: center; }

/* Listskärmarna: kontrollerna står stilla, bara brunnen scrollar. */
.stage.stack { justify-content: flex-start; }

/*
 * Brunnen blöder ut mot skärmkanten och tar tillbaka lika mycket i padding.
 * Korten hamnar därmed i linje med topprad och footer, samtidigt som korten
 * får plats för sin skugga innan brunnen klipper. Utan det här blev korten
 * kapade av scrollcontainern och såg ut som platta remsor.
 */
.well {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: var(--well-bleed);
  padding: var(--well-pad);
  border-radius: var(--r-lg);
  box-shadow: var(--well);
}

/* ── Topprad ───────────────────────────────────────────────────────────── */

/* min-width: 0 för att .screen är ett rutnät, och rutnätsbarn vägrar krympa
   under sitt min-content — utan den trycker chipet ut temaknappen ur skärmen. */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  min-width: 0;
}

/* Hålstegning. Smalare än temaknappen — de ska nås med tummen utan att äta
   bredd från chipet, som bär hålnumret. */
.nav-btn {
  width: 40px;
  height: 52px;
  flex: none;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise-sm);
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1;
}

.nav-btn:active { box-shadow: var(--press-sm); }

.nav-btn[disabled] {
  opacity: 0.35;
  box-shadow: none;
}

.title {
  flex: 1;
  font-size: 22px;
  font-weight: var(--w-strong);
  letter-spacing: -0.01em;
}

/*
 * Kolumn, inte baseline-rad: "par 4 · 377 m · idx 11" fick aldrig plats bredvid
 * "Hål 1" och bröt sig över två rader mitt i chipet. Stapla istället och kapa
 * med ellips — hålnumret är det som måste synas, scorekortsraden är stöd.
 */
.chip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 52px;
  padding: 0 14px;
  text-align: left;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise-card);
  color: var(--text);
  font: inherit;
}

.chip:active { box-shadow: var(--press-sm); }

.chip-main,
.chip-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.chip-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: var(--w-strong);
  line-height: 1.15;
}
.chip-sub { font-size: 13px; color: var(--text-dim); line-height: 1.15; }

/*
 * Låsmarkeringen sitter i hålrutan, inte bredvid den: låset gäller hålvalet,
 * och som fristående bricka åt den bredden som scorekortsraden behöver.
 * Fylld i båda temana — den syns bara när något avviker och ska då synas.
 */
.badge {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--sel-bg);
  color: var(--sel-fg);
  box-shadow: var(--sel-shadow);
  font-size: 10px;
  font-weight: var(--w-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:root[data-theme="neumorph"] .badge { color: var(--text); }

/* Temaknappen ska vara nåbar men aldrig konkurrera med siffran. */
.icon-btn {
  width: 52px;
  height: 52px;
  flex: none;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--raise-sm);
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
}

.icon-btn:active { box-shadow: var(--press-sm); }
:root[data-theme="flat"] .icon-btn { border-radius: var(--r-sm); }

/* ── Huvudsiffran ──────────────────────────────────────────────────────── */

.hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

/*
 * Höjdrelativ hela vägen. Tidigare låg maxvärdet i praktiken alltid på taket,
 * så siffran var lika stor på en liten telefon som på en stor och trängde ut
 * resten av vyn.
 */
.bignum {
  font-size: clamp(66px, 20vh, 164px);
  font-weight: var(--w-num);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

/* Utan fix är siffran ett bindestreck, och ett bindestreck i den här graden är
   en solid stapel mitt på skärmen. Dämpa det till en platshållare. */
.bignum[data-empty] {
  font-size: clamp(40px, 9vh, 76px);
  color: var(--text-dim);
  opacity: 0.4;
}

.unit {
  font-size: clamp(18px, 4vh, 30px);
  font-weight: var(--w-body);
  color: var(--text-dim);
}

.hero-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: -2px;
}

/* ── Klubba ────────────────────────────────────────────────────────────── */

.clubrow {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(2px, 0.7vh, 6px);
}

.club-main {
  font-size: clamp(26px, 5.2vh, 42px);
  font-weight: var(--w-strong);
  letter-spacing: -0.02em;
}

.club-side {
  font-size: 14px;
  color: var(--text-dim);
  min-width: 62px;
  text-align: center;
}

.club-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

/* ── Faktarad ──────────────────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: clamp(2px, 0.7vh, 6px);
}

/*
 * justify-content: center — vindrutans not går ofta i två rader och sträcker
 * hela raden. Utan centrering hänger GPS och Sikta kvar i överkant och raden
 * ser skev ut trots att boxarna är exakt lika höga.
 */
.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: clamp(8px, 1.5vh, 13px) 6px;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  /* Fakta är värden, inte knappar — därför intryckta. */
  box-shadow: var(--press);
}

.fact-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fact-value { font-size: 21px; font-weight: var(--w-strong); }
.fact-note { font-size: 12px; color: var(--text-dim); text-align: center; }

.breakdown {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  min-height: 19px;
}

.warn {
  text-align: center;
  font-size: 13px;
  font-weight: var(--w-strong);
  padding: 9px 14px;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--press-sm);
}

/* ── Kontroller i nedre tredjedelen ────────────────────────────────────── */

/* Upphöjda knappar behöver andrum mot brunnens kant ovanför, annars ser det ut
   som att knappen ligger ovanpå listan istället för under den. */
.controls { display: grid; gap: 10px; padding-top: 8px; }
.controls .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.segmented button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 62px;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise);
  color: var(--text);
  font: inherit;
}

/* Ovalt val dämpas helt — den valda punkten på green ska gå att se i ögonvrån. */
.segmented button { color: var(--text-dim); }
.segmented button b { font-size: 13px; font-weight: var(--w-strong); }
.segmented button i { font-style: normal; font-size: 19px; }

.segmented button[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  box-shadow: var(--sel-shadow);
}

:root[data-theme="neumorph"] .segmented button[aria-pressed="true"] { color: var(--text); }

/* Valt avstånd ska gå att läsa av utan att stanna upp. */
.segmented button[aria-pressed="true"] i { font-weight: var(--w-strong); }

.btn {
  min-height: 56px;
  padding: 0 18px;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--w-strong);
}

.btn:active { box-shadow: var(--press); }
.btn.wide { width: 100%; }

.btn[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  box-shadow: var(--sel-shadow);
}

:root[data-theme="neumorph"] .btn[aria-pressed="true"] { color: var(--text); }

.btn.primary { font-size: 19px; min-height: 62px; }
:root[data-theme="flat"] .btn.primary { background: var(--sel-bg); color: var(--sel-fg); }

.btn.ghost { min-height: 48px; box-shadow: none; border-color: transparent; color: var(--text-dim); font-size: 15px; }
:root[data-theme="flat"] .btn.ghost { border: 0; text-decoration: underline; }

/*
 * 0.45 gjorde den flatade primärknappen till ljusgrå med vit text — under 3:1,
 * alltså oläsbar i just det ljus temat finns för. 0.6 ger ~5:1 och håller AA.
 * I det mjuka temat tas skuggan bort helt: upphöjt betyder tryckbart, så en
 * avstängd knapp ska ligga platt i bakgrunden istället för att se halvfärdig ut.
 */
.btn[disabled] { opacity: 0.6; }
:root[data-theme="neumorph"] .btn[disabled] { box-shadow: none; }

/* ── Listor (bana, klubba) ─────────────────────────────────────────────── */

/*
 * minmax(0, 1fr), inte auto: banenamnen är nowrap, och ett auto-spår växer till
 * radens min-content. Korten blev 607 px breda i en 354 px container, sköts ut
 * ur skärmen och tappade både högerkant och mörk skugga — det var den enskilt
 * största anledningen till att listan såg platt ut.
 *
 * Gapet måste rymma skuggan. Under ~14 px lägger sig grannkortets mörka sida
 * ovanpå det egna kortets ljusa och listan ser smutsig ut.
 */
.list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--list-gap);
}

.list button, .list .item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 18px;
  text-align: left;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise-card);
  color: var(--text);
  font: inherit;
}

.list > li { min-width: 0; }
.list button:active { box-shadow: var(--press-sm); }

.list button[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  box-shadow: var(--sel-shadow);
}

:root[data-theme="neumorph"] .list button[aria-pressed="true"] { color: var(--text); }

.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-name { font-weight: var(--w-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: 13px; color: var(--text-dim); }
.list button[aria-pressed="true"] .item-sub { color: inherit; opacity: 0.75; }

.item-side { font-size: 14px; color: var(--text-dim); white-space: nowrap; }

/* Måste övertrumfa .list button, som annars gör krysset till en radbred knapp.
   Nedtonat med flit: att ta bort en klubba ska aldrig se ut som huvudhandlingen. */
.list .item-remove {
  width: 40px;
  min-height: 40px;
  flex: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--raise-sm);
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
}

.list .item-remove[disabled] { opacity: 0.35; box-shadow: none; }
:root[data-theme="flat"] .list .item-remove { border-radius: var(--r-sm); }

/* ── Fält ──────────────────────────────────────────────────────────────── */

/* Avståndet ner till brunnen kommer från .stage gap, inte härifrån. */
.intro { padding: 0 2px 2px; }

input[type="search"], input[type="text"] {
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--press);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--w-body);
  -webkit-appearance: none;
}

input:focus { outline: none; }
:root[data-theme="flat"] input:focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--text) inset; }

.club-input {
  width: 92px;
  min-height: 52px;
  padding: 0 14px;
  text-align: center;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--press-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 20px;
  font-weight: var(--w-strong);
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
}

.club-input::-webkit-outer-spin-button,
.club-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Ligger utanför brunnen: att lägga till är en ny handling, inte en rad i listan. */
.addrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.addrow .add-name { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; font-size: 16px; }
.addrow .club-input { width: 76px; }
.addrow .btn { flex: none; min-height: 52px; font-size: 15px; }

/* ── Hålväljare ────────────────────────────────────────────────────────── */

.sheet {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: end;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  z-index: 10;
}

.sheet[hidden] { display: none; }

.sheet-panel {
  display: grid;
  gap: 10px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
  box-shadow: var(--raise);
  max-height: 90svh;
  overflow-y: auto;
}

.sheet-title {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.holegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}

.holegrid button {
  min-height: 60px;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 21px;
  font-weight: var(--w-strong);
}

.holegrid button[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  box-shadow: var(--sel-shadow);
}

:root[data-theme="neumorph"] .holegrid button[aria-pressed="true"] { color: var(--text); }

/*
 * Teevalet. Egen rad under hålrutnätet, och avgränsad från det — de två valen
 * hör ihop med samma chip men betyder helt olika saker.
 */
.tee-row {
  display: grid;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--edge-c);
}

.tee-row[hidden] { display: none; }

.teegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
}

.teegrid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: 0 8px;
  border: var(--edge-w) solid var(--edge-c);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise-sm);
  color: var(--text);
  font-family: inherit;
}

.tee-name {
  font-size: 15px;
  font-weight: var(--w-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.tee-len { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.teegrid button[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  box-shadow: var(--sel-shadow);
}

.teegrid button[aria-pressed="true"] .tee-len { color: inherit; opacity: 0.75; }
:root[data-theme="neumorph"] .teegrid button[aria-pressed="true"] { color: var(--text); }

/* ── Smått ─────────────────────────────────────────────────────────────── */

.muted { color: var(--text-dim); font-size: 14px; }
.center-text { text-align: center; padding: 8px 0; }

button { cursor: pointer; -webkit-appearance: none; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .chip, .icon-btn, .segmented button, .list button { transition: box-shadow 90ms ease-out; }
}