/* =============================================================================
   Score Safari — tokens, reset and the parts every screen shares.

   Self-hosted fonts: the CSP is 'self' for styles, fonts and scripts, so there
   is no Google Fonts link and no inline style attribute anywhere in the views.
   Everything the mockup expressed as style="" is a class in here.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/space-grotesk-var-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --brand:      #0AABA6;
  --brand-s:    rgba(10,171,166,0.09);
  --brand-m:    rgba(10,171,166,0.18);
  --brand-hi:   #078F8A;
  --dark:       #04303B;
  --dark-2:     #0C3E44;
  --ink:        #1C1C20;
  --ink-2:      #54545C;
  --ink-3:      #A0A0AA;
  --ink-4:      #D0D0D8;
  --bg:         #F6F6F9;
  --sf:         #FFFFFF;
  --line:       rgba(0,0,0,0.06);
  --line-2:     rgba(0,0,0,0.09);
  --line-3:     rgba(0,0,0,0.15);
  --green:      #16A34A;
  --green-bg:   rgba(22,163,74,0.08);
  --green-txt:  #15803D;
  --amber:      #B45309;
  --amber-bg:   rgba(180,83,9,0.08);
  --red:        #DC2626;
  --red-bg:     rgba(239,68,68,0.08);
  --r-2:        4px;
  --r-s:        8px;
  --r:          13px;
  --r-l:        18px;
  --r-xl:       24px;
  --r-f:        9999px;
  --sh-xs:      0 1px 2px rgba(0,0,0,0.04);
  --sh-s:       0 1px 2px rgba(0,0,0,0.04),0 4px 12px -4px rgba(0,0,0,0.07);
  --sh:         0 1px 3px rgba(0,0,0,0.04),0 10px 28px -8px rgba(0,0,0,0.09);
  --sh-l:       0 4px 8px rgba(0,0,0,0.05),0 24px 64px -12px rgba(0,0,0,0.14);
  --sh-brand:   0 4px 18px -4px rgba(10,171,166,0.38);
  --sh-green:   0 4px 18px -4px rgba(22,163,74,0.38);
  --nb:         68px;
  --fd: 'Space Grotesk', system-ui, sans-serif;
  --fb: 'Inter', system-ui, sans-serif;
  --fm: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ─── RESET ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fb); font-size: 16px; line-height: 1.5;
  background: #DDDDE3; color: var(--ink);
  -webkit-font-smoothing: antialiased; min-height: 100dvh; overscroll-behavior: none;
}
input, textarea, select, button { font-family: inherit; font-size: 16px; }
button { cursor: pointer; }
* { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--brand); color: #fff; }
img, svg { display: block; }
a { color: var(--brand); }

/* ─── APP SHELL ──────────────────────────── */
#app {
  max-width: 430px; margin: 0 auto;
  background: var(--bg); min-height: 100dvh;
  position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), var(--sh-l);
}
.has-nav #main { padding-bottom: calc(var(--nb) + env(safe-area-inset-bottom)); }

/* ─── ANIMATIONS ─────────────────────────── */
@keyframes page-in { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
@keyframes card-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .55 } 70%, 100% { transform: scale(1.07); opacity: 0 } }
@keyframes check-pop { 0% { transform: scale(.3); opacity: 0 } 70% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes sweep { 0% { top: 0 } 50% { top: calc(100% - 2px) } 100% { top: 0 } }
@keyframes stamp-in {
  0%   { transform: rotate(-8deg) scale(1.7); opacity: 0 }
  55%  { transform: rotate(-8deg) scale(.9) }
  100% { transform: rotate(-8deg) scale(1); opacity: 1 }
}
@keyframes shake { 0%, 100% { transform: none } 25% { transform: translateX(7px) } 75% { transform: translateX(-7px) } }

#main > * { animation: page-in .18s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ─── PAGE HEADER ────────────────────────── */
.ph {
  background: var(--sf); border-bottom: 1px solid var(--line);
  padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 40;
}
.ph h1 { font-family: var(--fd); font-size: 17px; font-weight: 700; letter-spacing: -.015em; flex: 1; color: var(--ink); }
.ph h1.is-long { font-size: 15px; }
.ph-back {
  width: 32px; height: 32px; background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-s); display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); flex: none; transition: background .1s;
}
.ph-back:hover { background: var(--line); }
.ph-back svg { width: 16px; height: 16px; }
.ph-cta { font-size: 13px; font-weight: 600; color: var(--brand); background: none; border: none; padding: 5px 0; flex: none; }
.ph-tools { display: flex; align-items: center; gap: 10px; }
.ph-avatar {
  width: 32px; height: 32px; background: var(--brand); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-brand); color: #fff; border: none; flex: none;
}
.ph-avatar svg { width: 15px; height: 15px; }

/* ─── BUTTONS ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 18px; border-radius: var(--r-s); font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--line-3); background: var(--sf); color: var(--ink);
  transition: all .14s; min-height: 46px; cursor: pointer; letter-spacing: -.005em;
  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-p { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-p:hover { background: var(--brand-hi); border-color: var(--brand-hi); }
.btn-d { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn-g { background: none; border-color: transparent; color: var(--ink-2); }
.btn-g:hover { background: var(--bg); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-s { padding: 7px 13px; font-size: 12.5px; min-height: 34px; border-radius: var(--r-2); }
.btn-w { width: 100%; }
.btn[disabled], .btn.is-off { opacity: .45; pointer-events: none; }

.ghost {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: none;
  border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 5px 11px;
  transition: all .13s; cursor: pointer; text-decoration: none; display: inline-block;
}
.ghost:hover { color: var(--ink); border-color: var(--line-3); background: var(--sf); }

/* ─── FORMS ──────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .005em; }
.field input, .field select {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: 11px 13px; font-size: 16px; color: var(--ink); background: var(--sf);
  outline: none; transition: border-color .14s, box-shadow .14s;
  -webkit-appearance: none; appearance: none;
}
.field input:focus, .field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-s); }
.field input::placeholder { color: var(--ink-4); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-stack { display: flex; flex-direction: column; gap: 15px; }
.is-shaking { animation: shake .16s ease 2; }

.field-error, .error-text {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 500; color: var(--red); margin-top: 1px;
}
.field-error svg, .error-text svg { width: 13px; height: 13px; flex: none; }

.field-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.slugline { display: flex; align-items: center; gap: 0; }
.slugline span {
  font-family: var(--fm); font-size: 12.5px; color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line-2); border-right: none;
  border-radius: var(--r-s) 0 0 var(--r-s); padding: 12px 9px; white-space: nowrap;
}
.slugline input { border-radius: 0 var(--r-s) var(--r-s) 0; }

/* ─── SECTION LABEL ──────────────────────── */
.sec-lbl {
  font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .07em; padding: 14px 18px 8px;
}
.sec-gap { height: 8px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-gap.is-spaced { margin-top: 8px; }
.surface { background: var(--sf); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pad-h { padding: 0 14px 4px; }
.empty-line { padding: 20px 18px; color: var(--ink-3); font-size: 14px; }
.empty-line.is-centered { text-align: center; font-style: italic; }

/* ─── STATUS BADGE ───────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-f);
  white-space: nowrap;
}
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge-active { background: var(--green-bg); color: var(--green-txt); }
.badge-active .badge-dot { animation: blink 2.2s ease-in-out infinite; }
.badge-upcoming { background: var(--amber-bg); color: var(--amber); }
.badge-ended, .badge-draft, .badge-archived { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line-2); }

/* ─── ACTION LIST ────────────────────────── */
.action-list { background: var(--sf); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-xs); }
.action-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 16px; width: 100%;
  border: none; border-bottom: 1px solid var(--line); background: var(--sf);
  cursor: pointer; transition: background .1s; text-align: left; text-decoration: none;
  color: inherit; font-size: 16px; border-radius: var(--r-s);
}
.action-row:last-child { border-bottom: none; }
.action-row:hover { background: var(--bg); }
.action-row:active { background: rgba(0,0,0,0.04); }
.action-row.danger .action-title { color: var(--brand); }
.action-row.is-armed { background: rgba(220,38,38,0.07); }
.action-list form { display: contents; }
.action-ico { width: 34px; height: 34px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; flex: none; }
.ico-brand { background: var(--brand-s); }
.ico-green { background: var(--green-bg); }
.ico-neutral { background: var(--bg); border: 1px solid var(--line-2); }
.ico-red { background: var(--red-bg); }
.action-ico svg { width: 17px; height: 17px; color: var(--ink-2); }
.ico-brand svg { color: var(--brand); }
.ico-green svg { color: var(--green-txt); }
.ico-red svg { color: var(--red); }
.action-body { flex: 1; min-width: 0; }
.action-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.action-sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-chev { color: var(--ink-4); flex: none; display: flex; }
.action-chev svg { width: 14px; height: 14px; }

/* ─── ALERTS ─────────────────────────────── */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--r-s); padding: 12px 14px; font-size: 13.5px; line-height: 1.55;
}
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.alert strong { font-weight: 700; }
.alert-info { background: var(--bg); border: 1px solid var(--line-2); color: var(--ink-2); }
.alert-info svg { color: var(--ink-3); }
.alert-brand { background: var(--brand-s); border: 1px solid var(--brand-m); color: var(--ink); }
.alert-brand svg { color: var(--brand); }
.alert-success { background: var(--green-bg); border: 1px solid rgba(22,163,74,.2); color: var(--green-txt); }
.alert-success svg { color: var(--green-txt); }
.alert-warn { background: var(--amber-bg); border: 1px solid rgba(180,83,9,.2); color: var(--amber); }
.alert-warn svg { color: var(--amber); }
.alert-danger { background: var(--red-bg); border: 1px solid rgba(220,38,38,.2); color: var(--red); }
.alert-danger svg { color: var(--red); }
.alert-sub { margin-top: 3px; opacity: .85; }

/* ─── TOAST ──────────────────────────────── */
#toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: var(--dark-2); color: #fff; padding: 10px 18px;
  border-radius: var(--r-f); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 100; white-space: nowrap;
  display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,0.08);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.has-nav #toast { bottom: calc(var(--nb) + 10px); }

/* ─── UTILITY ────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
[x-cloak] { display: none !important; }
.mt-2 { margin-top: 10px; }
.mt-4 { margin-top: 18px; }
.fine-print { font-size: 12px; color: var(--ink-4); text-align: center; line-height: 1.6; }

/* ─── WIDTH UTILITIES ────────────────────── */
/* Percentages have to be classes: the CSP has no style-src unsafe-inline, so a
   style="width:37%" attribute would be dropped by the browser. */
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}
.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}
.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}
.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}
.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}
.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}
.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}
.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}
.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}
.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}
.w100{width:100%}