/* ============================================================================
   base.css — det delte lag for "To Klør i Katten" (dark-only).
   Ekstraheret fra design/prototype/*.html — tokens er byte-identiske med
   prototypernes :root-blok, dog med Google-fontene forrest i font-stakkene.
   Dokumenteret drift mellem prototyperne er samlet til én kanonisk variant:
     - .cta/.cta.secondary dækker både dashboardets .cta og regnskabets .act
     - .nil = var(--cream-dim) (kanonisk; detalje-prototypen brugte --cream)
     - .status open/locked: guld-gradient hhv. segl-rød (detalje-varianten)
     - toast: bundplacering rydder tabbaren på mobil, 26px på desktop
   ========================================================================== */

:root{
  --felt-1:#143024; --felt-2:#0E2018;
  --mah:#2B1F17; --mah-deep:#201710; --mah-edge:#3A2B1F;
  --gold:#C9A45C; --gold-bright:#E8C56B; --gold-dim:#8A7345;
  --cream:#F0E6CF; --cream-dim:#B8AD93; --cream-faint:#7d7461;
  --pos:#A9C9A4; --neg:#E08A8A; --seal:#B03A2E;
  --serif:'Playfair Display',Didot,'Bodoni MT','Palatino Linotype',Georgia,serif;
  --mono:'JetBrains Mono','Cascadia Code','SF Mono',Consolas,monospace;
  --ui:'Source Sans 3','Segoe UI',-apple-system,'Helvetica Neue',sans-serif;
}

/* ---------- reset + flade ---------- */
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; background:var(--felt-2); min-height:100%}
body{
  min-height:100vh; font-family:var(--ui); color:var(--cream);
  background:radial-gradient(120% 90% at 50% 0%, var(--felt-1) 0%, var(--felt-2) 70%), var(--felt-2);
}
/* filt-tekstur (feTurbulence-støj som data-URI) + vignette */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(130% 100% at 50% 30%, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* ---------- shell + topbar ---------- */
.shell{
  position:relative; z-index:1; max-width:520px; margin:0 auto;
  /* bundpolstring rydder den faste tabbar på mobil */
  padding:14px 14px calc(86px + env(safe-area-inset-bottom));
}
.topbar{display:flex; align-items:baseline; justify-content:space-between; padding:6px 2px 12px; position:relative}
.topbar .userbox{margin-left:auto}
.club-after{margin-left:6px; margin-right:0}
.brand{font-size:12px; letter-spacing:.24em; color:var(--gold); text-transform:uppercase; font-weight:600}
.brand .club{font-size:14px; margin-right:6px}
a.brand{text-decoration:none}
.back{background:none; border:none; color:var(--cream-dim); font-size:13px; cursor:pointer; padding:4px; text-decoration:none}
.back:hover{color:var(--gold)}
.userbox{display:flex; align-items:baseline; gap:10px}
.userbadge{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--cream-dim)}
a.userbadge{text-decoration:none}
a.userbadge:hover{color:var(--gold); text-decoration:underline}
.logoutform{display:inline}
.logoutbtn{background:none; border:none; color:var(--cream-faint); font-family:var(--ui); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:4px}
.logoutbtn:hover{color:var(--gold)}

.head h1{font-family:var(--serif); font-size:30px; font-weight:600; color:var(--gold-bright); text-wrap:balance}
.head .sub{font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--cream-dim); margin:2px 0 14px}

/* ---------- paneler ---------- */
.panel{
  background:linear-gradient(178deg, var(--mah) 0%, var(--mah-deep) 90%);
  border:1px solid var(--gold-dim); border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(240,230,207,.06);
  padding:16px; margin-bottom:14px; position:relative;
}
.panel > h2{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--gold); border-bottom:1px solid var(--mah-edge); padding-bottom:9px; margin-bottom:12px; display:flex; align-items:baseline; justify-content:space-between}
.panel > h2 small{font-family:var(--serif); font-style:italic; font-size:12px; color:var(--cream-faint); font-weight:400; letter-spacing:0}
.panel.tappable{cursor:pointer; transition:border-color .15s}
.panel.tappable:hover{border-color:var(--gold)}

/* ---------- CTA (kanonisk: dashboardets .cta; .secondary = regnskabets .act) */
.cta{
  width:100%; height:54px; border:none; border-radius:12px; cursor:pointer;
  font-family:var(--serif); font-size:19px; font-weight:600; color:#241a10;
  background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, #A9853F 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .15s, transform .1s;
}
.cta:active{transform:translateY(1px)}
.cta:disabled{filter:grayscale(.75) brightness(.6); cursor:default; box-shadow:none}
.cta.secondary{background:transparent; border:1px solid var(--gold-dim); color:var(--gold); box-shadow:none; font-size:15px; height:46px}
.cta.secondary:hover{border-color:var(--gold)}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  background:var(--mah); border:1px solid var(--gold-dim); color:var(--cream);
  border-radius:10px; padding:10px 18px; font-size:13px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:50; max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- vokssegl-familien (miniseal/sealbadge/stamp fra prototyperne) */
.seal{
  border-radius:50%; flex:0 0 auto; transform:rotate(-6deg);
  background:radial-gradient(circle at 35% 30%, #C4483A, var(--seal) 65%, #7E2A21);
  color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700;
  box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.25);
}
.seal--sm{width:38px; height:38px; font-size:10px}          /* arkivets .miniseal */
.seal--md{width:46px; height:46px; font-size:10.5px}        /* dashboardets .miniseal */
.seal--stamp{width:40px; height:40px; font-size:17px}       /* detaljens .stamp */
.seal--badge{                                                /* detaljens .sealbadge */
  width:56px; height:56px; font-size:12.5px;
  position:absolute; top:-11px; right:14px; transform:rotate(7deg);
  box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.25);
}
.seal.new{animation:stamp .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:scale(2.2) rotate(14deg); opacity:0}60%{transform:scale(.94) rotate(-8deg); opacity:1}100%{transform:scale(1) rotate(-6deg)}}

/* ---------- initial-mønter (medlemsfarve via --c) ---------- */
.coin{
  display:inline-flex; width:30px; height:30px; border-radius:50%;
  align-items:center; justify-content:center;
  font-family:var(--serif); font-size:13px; font-weight:700; color:var(--felt-2);
  border:1.5px solid var(--gold-dim); background:var(--c,#888); flex:0 0 auto;
}
.coin--sm{width:20px; height:20px; font-size:10.5px}
.coin--lg{width:40px; height:40px; font-size:18px; border-width:2px; box-shadow:inset 0 -6px 10px rgba(0,0,0,.25)}

/* ---------- kanonisk resultat-strip: 4 medlems/point-fliser ---------- */
.standings{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px}
.standing-tile{
  background:linear-gradient(180deg, var(--mah) 0%, var(--mah-deep) 100%);
  border:1px solid var(--mah-edge); border-radius:10px; padding:8px 6px 7px;
  text-align:center; position:relative;
}
.standing-tile.leader{border-color:var(--gold-dim)}
.standing-tile.leader::after{content:"♛"; position:absolute; top:-9px; right:6px; font-size:11px; color:var(--gold-bright)}
.standing-tile .dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; vertical-align:1px}
.standing-tile .nm{font-size:11px; color:var(--cream-dim); letter-spacing:.04em}
.standing-tile .pt{font-family:var(--mono); font-size:17px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums}

/* fortegnsfarver — .nil = var(--cream-dim) er kanonisk */
.pos{color:var(--pos)} .neg{color:var(--neg)} .nil{color:var(--cream-dim)}

/* ---------- graf ---------- */
.chartwrap{position:relative}
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.legend span{font-size:11px; color:var(--cream-dim); display:inline-flex; align-items:center; gap:5px}
.legend i{width:14px; height:3px; border-radius:2px; display:inline-block}
svg.chart{width:100%; height:auto; display:block; touch-action:pan-y}
svg.chart text{font-family:var(--mono)}
.tip{
  position:absolute; pointer-events:none; background:var(--mah-deep); border:1px solid var(--gold-dim);
  border-radius:9px; padding:7px 10px; font-family:var(--mono); font-size:11px; line-height:1.65;
  color:var(--cream); opacity:0; transition:opacity .12s; white-space:nowrap; z-index:5;
  font-variant-numeric:tabular-nums; box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.tip .t{font-family:var(--ui); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim)}
.tip .dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px}

/* ---------- citater ---------- */
.quote{border-left:2px solid var(--gold-dim); padding:2px 0 2px 13px}
.quote .ql{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600}
.quote p{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--cream-dim); margin:3px 0; text-wrap:balance}
.quote .who{font-size:11px; color:var(--cream-faint); margin-top:3px}

/* ---------- form-primitiver ---------- */
.formpanel{overflow:hidden; max-height:0; transition:max-height .3s ease; margin-bottom:0}
.formpanel.open{max-height:520px; margin-bottom:14px}
.formpanel .inner{
  background:linear-gradient(178deg, var(--mah) 0%, var(--mah-deep) 90%);
  border:1px solid var(--gold-dim); border-radius:14px; padding:16px;
}
.formpanel h3{font-family:var(--serif); font-size:16px; color:var(--gold); margin-bottom:12px}
.frow{margin-bottom:12px}
.flabel{display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-faint); margin-bottom:6px}
.fseats{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.fseat{background:var(--mah-deep); border:1px solid var(--mah-edge); border-radius:9px; padding:7px 3px; text-align:center; cursor:pointer; color:var(--cream-dim); font-size:11px; font-family:var(--ui)}
.fseat[aria-pressed="true"]{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); color:var(--cream)}
.fseat:disabled{opacity:.3; cursor:default}
.fseat .rot{display:block; font-size:8.5px; color:var(--gold); letter-spacing:.08em}
.fhint{font-family:var(--serif); font-style:italic; font-size:11.5px; color:var(--cream-faint); margin-top:6px}
input[type=text], input[type=password], input[type=date], input[type=number]{
  width:100%; background:var(--mah-deep); border:1px solid var(--mah-edge); border-radius:9px;
  color:var(--cream); font-family:var(--ui); font-size:14px; padding:11px 12px; outline:none;
  color-scheme:dark;
}
input:focus{border-color:var(--gold-dim)}
.fbtns{display:flex; gap:10px}
.fbtns .cta{flex:1; height:44px; font-size:14.5px; margin:0}

/* ---------- badges/status (guld-gradient er kanonisk for "open") ---------- */
.badge{font-family:var(--mono); font-size:12px; font-weight:700; color:#0E2018; background:linear-gradient(180deg,#E8C56B,#C9A45C); border-radius:99px; padding:5px 11px; flex:0 0 auto}
.status{font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; border-radius:99px; padding:4px 11px; flex:0 0 auto}
.status.open{color:#0E2018; background:linear-gradient(180deg,#E8C56B,#C9A45C)}
.status.locked{color:var(--cream); background:var(--seal)}

/* ---------- tom tilstand (fx Statistik-pladsholderen) ---------- */
.empty{text-align:center; padding:26px 10px}
.empty .glyph{display:block; font-size:40px; color:var(--gold-dim); margin-bottom:10px}
.empty p{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--cream-dim); max-width:36ch; margin:0 auto}

/* ---------- konfetti ---------- */
.conf{position:fixed; top:-30px; z-index:40; pointer-events:none; font-size:18px; animation:fall linear forwards}
@keyframes fall{100%{transform:translateY(110vh) rotate(540deg); opacity:.6}}

/* ---------- navigation: mobil bund-tabbar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:linear-gradient(180deg, rgba(32,23,16,.96), rgba(24,17,12,.99));
  border-top:1px solid var(--mah-edge); backdrop-filter:blur(6px);
  display:flex; justify-content:space-around; padding:8px 6px calc(10px + env(safe-area-inset-bottom));
}
.tab{
  background:none; border:none; color:var(--cream-faint); font-family:var(--ui);
  font-size:10px; letter-spacing:.06em; cursor:pointer; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 10px;
}
.tab .tg{font-size:17px; line-height:1}
.tab[aria-current="page"]{color:var(--gold-bright)}
.tab[aria-current="page"]::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--gold-bright); margin-top:1px}

/* ---------- navigation: desktop-sidebar (vises ≥1024px) ---------- */
.sidebar{
  display:none; position:fixed; top:0; bottom:0; left:0; width:200px; z-index:20;
  flex-direction:column; gap:4px; padding:20px 12px 16px;
  background:linear-gradient(178deg, var(--mah) 0%, var(--mah-deep) 90%);
  border-right:1px solid var(--mah-edge);
  box-shadow:14px 0 34px rgba(0,0,0,.35);
}
.sidebar .brand{display:block; padding:6px 10px 6px}
.sidebar .tagline{
  display:block; padding:0 10px 14px; border-bottom:1px solid var(--mah-edge); margin-bottom:14px;
  font-family:var(--serif); font-style:italic; font-size:11px; line-height:1.45; color:var(--cream-faint);
}
.snav{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px;
  color:var(--cream-dim); text-decoration:none; font-size:13.5px; letter-spacing:.05em; position:relative;
}
.snav .tg{font-size:16px; width:20px; text-align:center; color:var(--gold-dim); line-height:1}
.snav:hover{color:var(--cream); background:rgba(240,230,207,.04)}
.snav[aria-current="page"]{color:var(--gold-bright); background:rgba(201,164,92,.08)}
.snav[aria-current="page"] .tg{color:var(--gold)}
.snav[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
}
.sidebar .sfoot{margin-top:auto; text-align:center; color:var(--gold-dim); letter-spacing:.5em; font-size:12px; padding-bottom:4px}

/* ---------- footer ---------- */
footer{margin-top:16px; text-align:center; font-size:10.5px; color:var(--cream-faint); letter-spacing:.05em; line-height:1.7}
footer .suits{color:var(--gold-dim); letter-spacing:.5em; font-size:12px}
footer .slogan{font-family:var(--serif); font-style:italic; letter-spacing:.02em}

/* ---------- tilgængelighed + breakpoints ---------- */
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }
@media (min-width:700px){ .shell{padding-top:34px} }
@media (min-width:1024px){
  .tabbar{display:none}
  .sidebar{display:flex}
  body{padding-left:200px}
  .shell{padding-bottom:28px}
  .toast{bottom:26px}
}