/* PinHubs designsystem (Pinhub v2): mørkt og flatt som en resultattavle – kursive, kondenserte overskrifter, store
   tall, hårfine kanter og én oransje farge for handlinger. Samme tokens som appen (Theme.swift). */
@font-face { font-family: "Barlow"; src: url(/fonts/Barlow-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/Barlow-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/BarlowCondensed-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/BarlowCondensed-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/BarlowCondensed-ExtraBoldItalic.ttf) format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --canvas: #111214; --card: #1a1b1e; --raised: #24262a; --well: #202125; --sheet: #18191c;
  --foreground: #f3f2ee; --secondary-fg: #c9cace; --muted-fg: #a0a2a8; --label: #8f9299; --dim: #5e6168;
  --primary: #fa6534; --on-primary: #160a04; --border: #26282d; --input: #2c2e33;
  --amber: #f2b544; --official: #6fa8ff; --success: #7fd6a4; --destructive: #ff7a50; --brand-stage: #16233f;
  --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  /* Navnene resten av fila bruker. */
  --bg: var(--canvas); --panel: var(--card); --line: var(--border); --text: var(--foreground); --muted: var(--muted-fg); --accent: var(--primary);
  /* Datafarger: markørene i grafen og stripene ved tallene (som i appen). */
  --green: #30d158; --purple: #bf5af2; --orange: #ff9f0a; --red: #ff453a; --pink: #ff375f; --blue: #0a84ff; --teal: #64d2ff;
  --header: 56px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 var(--font-sans); font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
a { color: var(--accent); }
h1 { font-size: 17px; margin: 0; white-space: nowrap; }
h2 { font: italic 800 28px/0.95 var(--font-display); text-transform: uppercase; margin: 0; }
/* Ordmerket i skrift: «PIN» i oransje. */
.wordmark { font: italic 800 26px/1 var(--font-display); text-transform: uppercase; color: var(--foreground); text-decoration: none; white-space: nowrap; }
.wordmark b { color: var(--primary); font-weight: 800; }
.eyebrow { font: 600 12px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.spacer { flex: 1; }

header { flex: none; height: var(--header); display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 5; }
.pill { font: 600 13px/1.25 var(--font-sans); padding: 4px 11px; border-radius: 99px; background: var(--raised); color: var(--secondary-fg); white-space: nowrap; }
.pill.on { background: rgba(127,214,164,.14); color: var(--success); }
.scanner { display: inline-flex; align-items: center; gap: 7px; }
.scanner i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.scanner.ready { background: rgba(127,214,164,.14); color: var(--success); }
.scanner.ready i { background: var(--success); animation: pulse 1.6s ease-in-out infinite; }
.scanner.busy { background: rgba(111,168,255,.14); color: var(--official); }
.scanner.busy i { background: var(--official); animation: pulse .8s ease-in-out infinite; }
.scanner.setup { background: rgba(242,181,68,.14); color: var(--amber); }
.scanner.setup i { background: var(--amber); }
@keyframes pulse { 50% { opacity: .45; } }
#user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
#avatar { width: 24px; height: 24px; border-radius: 50%; }
.tool { background: var(--card); color: var(--text); border: 1px solid var(--input); border-radius: 10px; padding: 6px 13px; font: 700 14px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, background .15s; }
.tool.icon { padding: 3px 9px; font-size: 16px; line-height: 1; }
.tool:hover { border-color: var(--accent); }
.link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
/* Hoved- og sekundærknapp: 52 px høy, store bokstaver. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; background: var(--accent); color: var(--on-primary); text-decoration: none; border: 1px solid transparent; border-radius: 12px; padding: 0 22px; font: 700 17px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: opacity .15s; }
.button:hover { opacity: .9; }
.button.secondary { background: var(--panel); color: var(--text); border-color: var(--input); }

/* Innlogging */
/* På innloggingssiden står ordmerket stort i midten, ikke i topplinja. */
body:has(#login:not([hidden])) header .wordmark { visibility: hidden; }
#login { margin: 0 auto; max-width: 520px; padding: 10vh 20px 0; text-align: center; overflow: auto; }
#login .wordmark { display: block; font-size: 52px; margin-bottom: 6px; }
#login .tagline { margin-bottom: 36px; }
#login h2 { font-size: 40px; margin-bottom: 12px; }
#login p { color: var(--muted); }
#login .small { font-size: 13px; margin-top: 28px; }

/* Monitor: alt om siste kast på én skjerm, uten rulling. Kastarkivet står som fast kolonne til høyre på brede skjermer. */
.stage { flex: 1; min-height: 0; display: flex; }
#app { flex: 1; min-width: 0; min-height: 0; padding: 12px 16px 14px; position: relative; }
#hero { height: 100%; }
.status { position: fixed; top: calc(var(--header) + 10px); left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 9px 20px; border-radius: 99px; background: rgba(26,27,30,.96); border: 1px solid var(--accent); color: var(--accent); font: 700 15px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.status.pulse { animation: pulse 1.2s ease-in-out infinite; }
.empty { height: 100%; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 20px; font-size: clamp(16px, 2.4vh, 24px); }

.card { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px 16px; }
/* Nytt kast: kanten blinker oransje (flatt, uten glød). */
.card.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { 0% { border-color: var(--primary); } 100% { border-color: var(--line); } }
.card-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.card-head .when { font: italic 800 clamp(18px, 3vh, 32px)/1 var(--font-display); text-transform: uppercase; }
.card-head .meta { color: var(--muted); font-size: clamp(12px, 1.7vh, 15px); }
.card-head .grow { flex: 1; }
.card-head .link.danger { color: var(--destructive); font-size: 13px; }

.panels { min-height: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(10px, 1.6vw, 24px); }
.shot, .chart { min-height: 0; min-width: 0; height: 100%; border-radius: 12px; overflow: hidden; background: var(--well); }
.shot { aspect-ratio: 9 / 16; }
.chart { aspect-ratio: 200 / 540; }
.shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shot.noimg { display: grid; place-items: center; color: var(--muted); font-size: 14px; padding: 16px; text-align: center; }
.chart svg { display: block; width: 100%; height: 100%; }

.stats { container-type: inline-size; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); grid-auto-flow: column; gap: clamp(6px, 1.4vh, 16px) clamp(10px, 2vw, 28px); }
.stat { min-width: 0; display: flex; flex-direction: column; justify-content: center; border-left: 3px solid var(--c, var(--line)); padding-left: clamp(8px, 1.2vw, 18px); }
.stat .t { font: 600 clamp(11px, min(1.8vh, 4cqi), 19px)/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--label); display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.stat .t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Smale kolonner: etiketten får hele bredden (ikonet skjules). */
@container (max-width: 300px) { .stat .t svg { display: none; } .stat .t { letter-spacing: .06em; } }
.stat .t svg { flex: none; width: clamp(16px, 3.2vh, 34px); height: clamp(16px, 3.2vh, 34px); color: var(--c); }
/* Bowlerens egne tall i amber, som i resultattavlene i PinHub. */
.stat .v { font: 700 clamp(22px, min(7vh, 19cqi), 84px)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--amber); white-space: nowrap; }
.stat .d { font-size: clamp(10px, 1.55vh, 16px); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Stående skjerm (telefon, nettbrett): bilde og bane side om side øverst, tallene i tre kolonner under. */
@media (max-aspect-ratio: 1 / 1), (max-width: 760px) {
  #app { padding: 8px 10px 10px; }
  .card { padding: 8px 10px 12px; border-radius: 12px; }
  .panels { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .shot, .chart { height: auto; width: 100%; max-height: 100%; justify-self: center; }
  .stats { grid-column: 1 / -1; grid-template-rows: repeat(4, auto); gap: 8px 10px; }
  .stat { padding-left: 8px; }
  .stat .t { font-size: 11px; }
  .stat .t svg { width: 18px; height: 18px; }
  .stat .v { font-size: clamp(22px, min(7vw, 12cqi), 42px); }
  .stat .d { font-size: 10px; }
  .pill, #email { display: none; }
  .pill.scanner, #live { display: inline-flex; }
  header { gap: 5px; padding: 0 8px; }
  h1, #fs { display: none; }
  .wordmark { font-size: 17px; }
  header .pill { padding: 3px 8px; font-size: 12px; }
  .tool { padding: 5px 8px; font-size: 13px; letter-spacing: .03em; }
  #user { gap: 6px; }
  .shot { align-self: center; }
}

/* Kastarkiv: på stående/smale skjermer et panel som åpnes med knappen; på brede en fast kolonne (se under). */
.archive { position: fixed; z-index: 10; top: var(--header); right: 0; bottom: 0; width: min(560px, 100%); background: var(--bg); border-left: 1px solid var(--line); overflow: auto; padding: 14px 16px 40px; }
@media (min-aspect-ratio: 1 / 1) and (min-width: 761px) {
  .archive { position: static; flex: none; width: clamp(340px, 25vw, 480px); height: 100%; box-shadow: none; padding: 12px 12px 24px; z-index: auto; }
  #closeArchive, #archiveBtn { display: none; }
  .row { grid-template-columns: 44px repeat(6, minmax(0, 1fr)) 40px; gap: 4px; padding: 8px 8px; }
  .row .time { font-size: 13px; }
  .row .c { font-size: 13px; }
  .row .c small { font-size: 10px; }
}
.archive-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.day { font: 600 12px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin: 18px 0 8px; }
.row { display: grid; grid-template-columns: 56px repeat(6, 1fr) 42px; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 6px; cursor: pointer; align-items: center; transition: border-color .15s; }
.row:hover, .row.sel { border-color: var(--accent); }
.row .time { font: 700 15px/1.15 var(--font-display); }
.row .c { font: 700 16px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.row .c small { display: block; font: 600 10px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
footer { display: none; }

/* Kjegler: oppsummering og retting i kortets topp */
.pinsum { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pinsum.unsure { color: var(--amber); }
.tool.primary { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
.tool:disabled { opacity: .5; cursor: default; }
.shot { position: relative; }
.pinedit { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: rgba(17, 18, 20, .94); }
.shot img + .pinedit { backdrop-filter: blur(6px); }
.pinedit-t { font: italic 800 24px/1 var(--font-display); text-transform: uppercase; }
.pinedit svg { width: min(100%, 360px); }
.pinedit-h { font-size: 12px; color: var(--muted); text-align: center; max-width: 320px; }
.pinedit .pin { cursor: pointer; }
.pinedit .pin:hover circle { stroke: var(--accent); stroke-width: 3; }

/* Brille-dialog */
dialog { background: var(--sheet); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px; max-width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin: 0 0 10px; font-size: 32px; }
dialog p { color: var(--secondary-fg); font-size: 15px; line-height: 1.5; }
dialog p.small { font-size: 12px; color: var(--muted); }
dialog input { width: 100%; background: var(--raised); color: var(--text); border: 1px solid var(--input); border-radius: 10px; padding: 9px 11px; font: 16px var(--font-sans); }
dialog input:focus, dialog select:focus { outline: none; border-color: var(--primary); }
#glassesLink { font: 12px ui-monospace, Menlo, monospace; }
.dlg-row { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.dlg-row .grow { flex: 1; }
a.tool { text-decoration: none; display: inline-block; }
.dlg-row .link.danger { color: var(--destructive); font-size: 13px; }
.pill.quick { background: rgba(242, 181, 68, .14); color: var(--amber); }

/* Bowlere */
.archive-head select, .bowler-sel { background: var(--raised); color: var(--text); border: 1px solid var(--input); border-radius: 10px; padding: 5px 9px; font: 600 14px var(--font-sans); }
.archive-head select { margin-left: auto; margin-right: 10px; max-width: 50%; }
.row .time small.who { display: block; color: var(--secondary-fg); font: 600 11px/1.3 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bowler-row input { flex: 1; width: auto; }
#bowlerAdd input { flex: 1; width: auto; }
dialog select { background: var(--raised); color: var(--text); border: 1px solid var(--input); border-radius: 10px; padding: 8px 9px; font: 600 14px var(--font-sans); }
.row .c.pins { color: var(--text); display: flex; align-items: center; justify-content: center; }

/* «Logg inn med appen» */
.login-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Apple: hvit flate med svart tekst, som i PinHub. */
.button.apple { background: #fff; color: #000; }
.login-note { color: var(--destructive) !important; }
.pair { margin-top: 18px; }
.pair-qr svg { width: 200px; height: 200px; border-radius: 12px; margin: 8px auto 0; display: block; }
#login .pair .small { margin-top: 6px; }
.pair-code { font: 700 3rem/1.1 var(--font-display); letter-spacing: 0.14em; color: var(--amber); margin: 6px 0; }

/* Fotarbeid under tallene */
.footwork { color: var(--muted); font-size: 13px; padding: 8px 14px 12px; }

/* Tekstsidene (personvern, støtte): body er låst til skjermhøyden for monitoren, så artikkelen ruller selv. */
body > article { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: none; margin: 0; padding: 24px max(20px, calc((100% - 720px) / 2)) 80px; }