/* LiveEvent Hub (templates/plattform/hub.html) – på toppen av ep-app.css. Mørk som deltakerappen, med plattformens overgang
   (oransje → bringebær) fra static/plattform/mark.svg. Mobil først (390 px), trykkflater minst 48 px, knapper på rad er like høye. */
:root {
  --bg: #0b0b10; --text: #f5f5f7; --card: #16161d; --primary: #ff7350; --on-primary: #1a0a10;
  --line: rgba(255, 255, 255, .14); --soft: rgba(255, 255, 255, .08); --input: rgba(255, 255, 255, .06);
  --h-grad: linear-gradient(135deg, #ffa25c 0%, #ff6a5c 55%, #ff4f6d 100%);
  --h-h: 48px; --a-h: 48px;
}
.h-body { background: radial-gradient(120% 60% at 100% 0%, rgba(255, 79, 109, .12), transparent 60%) no-repeat, var(--bg); min-height: 100vh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.h-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top)); background: rgba(11, 11, 16, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }
.h-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-size: 17px; letter-spacing: .01em; }
.h-brand img { width: 30px; height: 30px; flex: none; }
.h-brand b { font-weight: 800; }
.h-me { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--soft);
  border: 1px solid var(--line); color: var(--text); font-weight: 750; text-decoration: none; }
.h-wrap { padding-top: 18px; }
/* ep-app.css bruker «font: … inherit», som nettleseren forkaster; knapper og felt får derfor sidens skrift her. */
.h-body button, .h-body input, .h-body .a-btn { font-family: inherit; }
.h-body .a-btn { font-size: 16px; font-weight: 650; line-height: 1.2; }
.h-note { padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(255, 162, 92, .45); background: rgba(255, 162, 92, .08); font-size: 15px; }

.h-hero { margin: 4px 0 18px; }
.h-eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; background: var(--h-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-hero h1 { margin: 0; font-size: clamp(28px, 8vw, 36px); line-height: 1.1; letter-spacing: -.01em; }
.h-lead { margin: 8px 0 0; opacity: .78; font-size: 16px; }
.h-sec { margin: 22px 0 10px; font-size: 13px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

.h-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.h-ev { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 12px; }
.h-ev-top { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--text); text-decoration: none; }
a.h-ev-top:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 10px; }
.h-ev-txt h3 { margin: 2px 0 2px; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.h-ev-txt p { margin: 0 0 8px; font-size: 14px; opacity: .72; overflow-wrap: anywhere; }
.h-date { display: grid; place-items: center; align-content: center; width: 56px; height: 60px; border-radius: 14px; background: var(--soft);
  border: 1px solid transparent; background-image: linear-gradient(var(--card), var(--card)), var(--h-grad); background-origin: border-box;
  background-clip: padding-box, border-box; }
.h-date b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.h-date span { margin-top: 3px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }

/* Knapperader: like brede og like høye kolonner (Christian: alt på linje). */
.h-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.h-act { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-h); padding: 8px 6px; border-radius: 12px;
  border: 1px solid var(--line); background: transparent; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 650;
  line-height: 1.15; text-align: center; text-decoration: none; }
.h-act svg { width: 18px; height: 18px; flex: none; }
.h-act.main, .h-btn { background: var(--h-grad); color: var(--on-primary); border-color: transparent; font-weight: 750; }
.h-act.off { opacity: .38; cursor: not-allowed; }
/* Tre snarveier på rad: ikon over tekst, så «Deltakere» får plass på 390 px. */
.h-acts-3 .h-act { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 4px; font-size: 14px; }
.h-acts-3 .h-act svg { width: 20px; height: 20px; }
.h-act:active, .h-btn:active { transform: translateY(1px); }
.h-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.h-stats span { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 6px 4px; border-radius: 12px; background: var(--soft); font-size: 12px; opacity: .9; }
.h-stats b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }

.h-login h2, .h-empty h2 { margin-bottom: 6px; }
.h-login { scroll-margin-top: 76px; }   /* #logg-inn havner under den faste toppen, ikke bak den */
.h-login form { margin-top: 12px; }
.h-under { margin-top: 10px !important; }
.h-code { font-size: 22px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.h-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; }
.h-links a { display: inline-flex; align-items: center; min-height: 44px; }
.h-pair { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.h-pair .a-btn { min-height: var(--h-h); padding: 10px 8px; text-align: center; font-size: 15px; }

.h-cross { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; min-height: 64px; margin: 16px 0 0; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; }
.h-cross > svg:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--soft); color: var(--primary); }
.h-cross > svg:last-child { width: 20px; height: 20px; opacity: .6; }
.h-cross b { display: block; font-size: 15px; } .h-cross small { display: block; font-size: 13px; opacity: .7; }

.h-linklist { list-style: none; margin: 10px 0 0; padding: 0; }
.h-linklist a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.h-linklist svg { width: 18px; height: 18px; opacity: .6; }

.h-foot { margin: 26px 0 0; text-align: center; }
/* To lenker på rad (Om LiveEvent Hub og NSL-admin, 9.11.2026) står på samme linje. */
.h-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 8px; }
.h-admin { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font-size: 13px; color: var(--text); opacity: .5; text-decoration: none; }
.h-admin svg { width: 14px; height: 14px; }
.h-admin:hover, .h-admin:focus-visible { opacity: .85; }

.h-nav { background: rgba(22, 22, 29, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.h-nav a { min-height: 62px; font-size: 12px; }
.h-nav a.on { color: var(--primary); }
@media (min-width: 720px) { .h-wrap { max-width: 640px; } }