:root {
  /* ---------- HG design tokens: retro managerkontor i sort/hvitt ---------- */
  /* Bakgrunn: dyp blåsort med stadiondybde (gradienten ligger på body::before). */
  --hg-bg-main: #06080d;
  --hg-bg-glow: rgba(96, 126, 168, 0.14);

  /* Paneler: mørke, lett transparente kontrollflater. */
  --hg-panel-bg: rgba(15, 19, 27, 0.78);
  --hg-panel-bg-strong: rgba(23, 28, 39, 0.82);
  --hg-surface-deep: rgba(4, 6, 11, 0.88);

  /* Rammer: tynne hvite linjer med lav opacity. */
  --hg-border-soft: rgba(255, 255, 255, 0.12);
  --hg-border-strong: rgba(255, 255, 255, 0.26);

  /* Tekst: hvit/gråhvit primær, dempet grå sekundær. */
  --hg-text-main: #f2f4f7;
  --hg-text-muted: #99a1ad;

  /* Fargeaksenter: små, klare og funksjonelle signaler per managerområde. */
  --hg-accent-tactics: #46d68c;
  --hg-accent-inbox: #4da3ff;
  --hg-accent-training: #5ecbc4;
  --hg-accent-admin: #e3c75e;
  --hg-accent-warning: #ff9d4d;
  --hg-accent-board: #b48cff;
  --hg-accent-history: #4dd8e6;
  --hg-accent-library: #f2f4f7;
  --hg-accent-kamp: #ff6b5e;

  /* Form og rytme. */
  --hg-radius: 14px;
  --hg-radius-sm: 10px;
  --hg-space: 20px;
  --hg-card-padding: 20px;
  --hg-icon-size: 22px;
  --hg-menu-height: 58px;

  /* Legacy-aliaser: hele appen leser fortsatt disse. */
  --bg: var(--hg-bg-main);
  --panel: var(--hg-panel-bg);
  --panel-strong: var(--hg-panel-bg-strong);
  --text: var(--hg-text-main);
  --muted: var(--hg-text-muted);
  --line: var(--hg-border-strong);
  --line-soft: var(--hg-border-soft);
  --danger: #ff6b5e;
  --good: #8ee36a;
  --pitch-dark: #0d3b1c;
  --pitch-light: #14502a;
  --pitch-line: rgba(255, 255, 255, 0.8);
  --radius: var(--hg-radius);
  --gap: var(--hg-space);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
}

/* `hidden`-attributtet skal alltid bety «ikke vist». Uten dette vinner en hvilken
   som helst author-`display:` (f.eks. `.mini-season-panel { display: grid }`) over
   nettleserens svake `[hidden] { display:none }`, og et panel som er gatet bort i
   JS/markup lekker likevel inn på flaten (scenario-prøveperiode i ligamodus,
   ligasesong i treningsrommet, side-/rollekort som aldri skjules). Én
   autoritativ regel her fjerner behovet for per-panel `[hidden]`-vakter og
   hindrer at nye paneler gjeninnfører blindveien. */
[hidden] {
  display: none !important;
}

html {
  font-size: 17px;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--hg-bg-main);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

/* Dyp stadionbakgrunn: fast gradientlag bak alt innhold (fixed-element i
   stedet for background-attachment, som er upålitelig på iOS). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 50% -180px, var(--hg-bg-glow), transparent 70%),
    radial-gradient(900px 600px at 88% 112%, rgba(70, 214, 140, 0.05), transparent 60%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #0a0e16 0%, #070a11 48%, #04060a 100%);
}

button,
select {
  font: inherit;
}

h1,
h2,
h3 {
  letter-spacing: -0.01em;
}

/* ---------- Shared shell widths ---------- */
.site-header,
.site-footer,
.app-shell,
.main-nav-layout {
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
}

/* ---------- Header: kompakt statuslinje ---------- */
.site-header {
  padding: 18px 0 10px;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
  border: 1px solid var(--hg-border-soft);
  border-radius: var(--radius);
  background: var(--hg-panel-bg);
  padding: 12px 18px;
}

.site-header .eyebrow {
  margin: 0;
  font-size: 0.66rem;
}

.site-header h1 {
  margin: 0;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--hg-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lede {
  flex: 1 1 100%;
  max-width: 720px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---------- Navigation: kompakt ikonmeny ---------- */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(7, 10, 16, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hg-border-soft);
  padding: 8px 0;
}

.main-nav-layout {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.main-nav-inner {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}

.nav-group-label {
  flex: 0 0 auto;
  align-self: center;
  color: var(--hg-text-muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: 0.82;
  padding: 4px 5px;
}

.nav-group-label-secondary {
  margin-left: 10px;
  border-left: 1px solid var(--hg-border-soft);
  padding-left: 12px;
}

.main-nav-inner::-webkit-scrollbar {
  display: none;
}

.nav-tab {
  --tab-accent: var(--hg-text-main);
  position: relative;
  flex: 1 0 auto;
  min-width: 76px;
  min-height: var(--hg-menu-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: var(--hg-radius-sm);
  background: transparent;
  color: var(--hg-text-muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 10px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.nav-tab-secondary {
  min-width: 82px;
  color: rgba(153, 161, 173, 0.72);
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(255, 255, 255, 0.05);
}

.nav-tab-secondary .nav-icon {
  opacity: 0.72;
}

/* «Senere»-flater: synlige, men deaktiverte – ikke aktive blindveier. */
.nav-tab.is-disabled,
.nav-tab[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.nav-tab.is-disabled:hover,
.nav-tab[disabled]:hover {
  color: var(--hg-text-muted);
  border-color: rgba(255, 255, 255, 0.05);
}

.nav-future-badge {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--hg-text-muted);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 2px 6px;
}

.nav-icon {
  width: var(--hg-icon-size);
  height: var(--hg-icon-size);
  flex: 0 0 auto;
}

.nav-tab:hover {
  color: var(--hg-text-main);
  border-color: var(--hg-border-soft);
}

.nav-tab.is-active {
  color: var(--hg-text-main);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--hg-border-soft);
}

.nav-tab.is-active .nav-icon {
  color: var(--tab-accent);
}

/* Aktiv markør: liten aksentlinje i seksjonens signalfarge. */
.nav-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--tab-accent);
}

.nav-tab:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ---------- «Kontor»-meny: samler sekundærfanene bak én knapp ---------- */
.nav-office {
  position: relative;
  flex: 0 0 auto;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--hg-border-soft);
  display: flex;
  align-items: stretch;
}

.nav-office-toggle {
  flex: 0 0 auto;
  min-width: 82px;
  min-height: var(--hg-menu-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--hg-radius-sm);
  background: rgba(255, 255, 255, 0.015);
  color: rgba(153, 161, 173, 0.72);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 10px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.nav-office-toggle .nav-icon {
  opacity: 0.72;
}

.nav-office-toggle:hover {
  color: var(--hg-text-main);
  border-color: var(--hg-border-soft);
}

.nav-office-toggle[aria-expanded="true"],
.nav-office-toggle.has-active-tab {
  color: var(--hg-text-main);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--hg-border-soft);
}

.nav-office-toggle-caret {
  font-size: 0.6rem;
  line-height: 1;
  transition: transform 0.12s ease;
}

.nav-office-toggle[aria-expanded="true"] .nav-office-toggle-caret {
  transform: rotate(180deg);
}

.nav-office-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  gap: 6px;
  min-width: 220px;
  padding: 10px;
  border: 1px solid var(--hg-border-soft);
  border-radius: var(--radius);
  background: var(--hg-panel-bg-strong);
  box-shadow: var(--shadow);
}

.nav-office-menu[hidden] {
  display: none;
}

.nav-office-menu .nav-group-label {
  writing-mode: initial;
  transform: none;
  padding: 0 2px 2px;
  border-left: none;
  margin-left: 0;
}

.nav-office-menu .nav-tab {
  flex: 1 1 auto;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  min-height: auto;
  padding: 9px 10px;
}

/* Funksjonelle fargeaksenter per managerområde. */
.nav-tab[data-tab-target="team"],
.nav-tab[data-tab-target="tactics"] { --tab-accent: var(--hg-accent-tactics); }
.nav-tab[data-tab-target="inbox"] { --tab-accent: var(--hg-accent-inbox); }
.nav-tab[data-tab-target="admin"] { --tab-accent: var(--hg-accent-admin); }
.nav-tab[data-tab-target="board"] { --tab-accent: var(--hg-accent-board); }
.nav-tab[data-tab-target="historygo"] { --tab-accent: var(--hg-accent-history); }
.nav-tab[data-tab-target="hgfmLibrary"] { --tab-accent: var(--hg-accent-library); }

/* ---------- App shell + tab sections ---------- */
.app-shell {
  padding-top: 14px;
  padding-bottom: clamp(104px, 14vh, 164px);
}

.tab-section {
  display: grid;
  gap: var(--gap);
}

.tab-section[hidden] {
  display: none;
}

/* ---------- Panels ---------- */
.panel {
  border: 1px solid var(--hg-border-soft);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: var(--hg-card-padding);
}

.section-header-panel {
  display: grid;
  gap: 8px;
}

.section-header-panel h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
}

.section-header-panel .muted-text {
  margin: 0;
}

h2 {
  margin: 0;
  font-size: 1.5rem;
}

/* ---------- Layout grids ---------- */
.controls-layout,
.lineup-layout,
.report-layout {
  display: grid;
  gap: var(--gap);
}

.controls-layout {
  grid-template-columns: minmax(260px, 0.7fr) minmax(320px, 1.3fr);
}

.lineup-layout {
  grid-template-columns: minmax(420px, 1.5fr) minmax(300px, 0.8fr);
  align-items: start;
}

.report-layout {
  grid-template-columns: minmax(340px, 1fr) minmax(280px, 0.72fr);
}

.control-panel,
.slot-editor {
  display: grid;
  align-content: start;
  gap: 12px;
}

label {
  margin-top: 6px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

select {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  padding: 14px 16px;
  font-size: 1.05rem;
}

select:focus-visible {
  outline: none;
  border-color: var(--text);
}

/* ---------- Team summary ---------- */
.result-heading,
.panel-heading-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.score-ring {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 2.4rem;
  font-weight: 900;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric-grid article {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
  padding: 14px;
}

.metric-grid span,
.score-row span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Lange norske etikettord skal brekke pent i smale kort i stedet for å
   tvinge layouten bredere enn skjermen. */
.metric-grid span,
.coach-context-metrics span,
.topbar-metrics span,
.knowledge-progress-grid span {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.metric-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 1.6rem;
}

.team-summary-panel,
.pitch-panel,
.slot-editor-panel,
.report-panel,
.detail-metrics-panel,
.badge-effects-panel {
  display: grid;
  gap: 16px;
}

/* ---------- Trenerstøtte (coachContext) i lagrapporten ---------- */
.coach-context-status {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
}

.coach-context-headline {
  margin: 0;
}

/* To kolonner uansett flate: etikettene her er lange norske fagord. */
.coach-context-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.coach-context-metrics article {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px 12px;
}

.coach-context-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coach-context-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
}

@media (max-width: 720px) {
  .coach-context-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Badge-effekter i laganalysen ---------- */
.badge-effects-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.badge-effect-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.badge-effect-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
}

.badge-effect-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.badge-effect-metrics {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.badge-effect-empty {
  margin: 0;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.45;
  padding: 12px 14px;
}

/* ---------- Kampdag (v1) ---------- */
.matchday-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  align-content: start;
  border-color: var(--hg-border-strong);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
}

/* Kampdagpanelet er hovedhandlingen på fanen; badge-panelet er støtteinfo.
   Samme signaturfarge-mønster som avdelingene (dept-hero), men her markerer
   det også at kampdag veier tyngre enn badge-effektene ved siden av. */
.matchday-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hg-accent-kamp);
  opacity: 0.85;
}

.badge-effects-panel {
  position: relative;
  overflow: hidden;
  background: rgba(15, 19, 27, 0.5);
}

.badge-effects-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hg-accent-kamp);
  opacity: 0.4;
}

.matchday-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.matchday-actions button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 900;
  font-size: 0.95rem;
  padding: 10px 16px;
  cursor: pointer;
}

.matchday-actions button:hover {
  background: var(--text);
  color: #04060b;
}

.matchday-actions button:disabled {
  border-color: var(--line-soft);
  color: var(--muted);
  background: var(--hg-surface-deep);
  cursor: not-allowed;
}

.matchday-actions button:disabled:hover {
  background: var(--hg-surface-deep);
  color: var(--muted);
}

/* "Spill kamp" og "Nullstill kamp" så identiske ut — samme vekt for
   hovedhandlingen og en destruktiv sekundærhandling. Inverter primærknappen
   som next-action-primary, og la reset være en dempet ghost-knapp. */
.matchday-actions button.is-primary {
  border-color: var(--text);
  background: var(--text);
  color: #04060b;
}

.matchday-actions button.is-primary:hover:not(:disabled) {
  background: var(--hg-accent-kamp);
  border-color: var(--hg-accent-kamp);
  color: #04060b;
}

.matchday-actions button.is-reset {
  border-color: var(--line-soft);
  background: transparent;
  color: var(--muted);
}

.matchday-actions button.is-reset:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* Kampklar-status: grønn når laget kan spille, hvit/dempet med forklaring når
   noe mangler. Rendres av renderMatchdayReadiness. */
.matchday-readiness {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 10px 12px;
}

.matchday-readiness[data-ready="true"] {
  border-color: var(--good);
  color: var(--good);
}

.matchday-result-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--hg-surface-deep);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.matchday-score {
  margin: 2px 0;
  color: var(--text);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

.matchday-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.matchday-result-card > .matchday-meta:first-child {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 900;
}

.matchday-subheading {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.matchday-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.matchday-outcome {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  color: var(--text);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.matchday-outcome.is-win {
  border-color: var(--good);
  color: var(--good);
}

.matchday-outcome.is-draw {
  border-color: var(--line);
  color: var(--text);
}

.matchday-outcome.is-loss {
  border-color: var(--danger);
  color: var(--danger);
}

.matchday-empty {
  margin: 0;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* Kamprapport (Playable Manager Flow Polish v1): det dramatiske leder, og den
   fulle analysen ligger i en foldet skuff. Hovedforklaringen får tyngde. */
.matchday-explanation-headline {
  margin: 6px 0 2px;
  color: var(--text);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 900;
  line-height: 1.25;
}

.matchday-detail-drawer {
  border: 1px solid var(--line-soft);
  border-radius: var(--hg-radius-sm);
  background: var(--hg-panel-bg);
  margin-top: 6px;
}

.matchday-detail-drawer > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.matchday-detail-drawer > summary::-webkit-details-marker {
  display: none;
}

.matchday-detail-drawer > summary::after {
  content: "▾";
  float: right;
  transition: transform 0.15s ease;
}

.matchday-detail-drawer[open] > summary::after {
  transform: rotate(180deg);
}

.matchday-detail-drawer > div {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

/* Kampbrief (Playable Manager Flow Polish v1): kompakt scouting-utdrag før
   avspark — motstander/stil/nøkkelduell/fare/mulighet/forberedelse + status. */
.matchday-brief {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--hg-radius-sm);
  background: var(--hg-panel-bg);
  padding: 14px;
}

.matchday-brief-status {
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.matchday-brief-status[data-tone="ready"] {
  border-color: var(--good);
  color: var(--good);
}

.matchday-brief-status[data-tone="risk"] {
  border-color: var(--danger);
  color: var(--danger);
}

.matchday-brief-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 4px 14px;
  align-items: baseline;
}

.matchday-brief-list dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.matchday-brief-list dd {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- Kampdag (v0.2): faser, hendelser og managergrep ---------- */
.matchday-phase {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--text);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

/* Tydelig advarsel når laget starter kampen med svak forutsetning. */
.matchday-weak-warning {
  margin: 0;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--danger);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 10px 12px;
}

.matchday-kickoff-button {
  border: 1px solid var(--good);
  border-radius: var(--radius);
  background: var(--hg-surface-deep);
  color: var(--good);
  font-weight: 900;
  font-size: 0.95rem;
  padding: 10px 16px;
  cursor: pointer;
  width: fit-content;
}

.matchday-kickoff-button:hover {
  background: var(--good);
  color: #04060b;
}

/* Aktuell kamp-hendelse: hvit ramme, rød kant ved høyt trykk. */
.matchday-event-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--hg-surface-deep);
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.matchday-event-card.is-pressure-high {
  border-color: var(--danger);
}

.matchday-event-pressure {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
}

.matchday-event-card.is-pressure-high .matchday-event-pressure {
  border-color: var(--danger);
  color: var(--danger);
}

.matchday-event-title {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 900;
}

.matchday-event-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.matchday-decision-options {
  display: grid;
  gap: 8px;
}

.matchday-decision-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 800;
  font-size: 0.92rem;
  text-align: left;
  padding: 10px 14px;
  cursor: pointer;
}

.matchday-decision-button:hover {
  background: var(--text);
  color: #04060b;
}

/* Tatt managergrep med konsekvens: grønn = positiv, rød = negativ. */
.matchday-decision-entry {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--hg-surface-deep);
  padding: 8px 12px;
  display: grid;
  gap: 4px;
}

.matchday-decision-entry.is-positive {
  border-left-color: var(--good);
}

.matchday-decision-entry.is-negative {
  border-left-color: var(--danger);
}

.matchday-decision-title {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.4;
}

.matchday-decision-feedback {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.matchday-decision-entry.is-positive .matchday-decision-feedback {
  color: var(--good);
}

.matchday-decision-entry.is-negative .matchday-decision-feedback {
  color: var(--danger);
}

.mini-status {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 900;
  font-size: 1.05rem;
  padding: 8px 14px;
  white-space: nowrap;
}

.pitch-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- Football pitch ---------- */
.pitch {
  position: relative;
  /* Banen skal få plass i skjermen sammen med formasjonsvelgeren, ikke fylle
     den. Bredden er derfor også bundet til høyden (46vh × 4/5), slik at
     forholdet 4:5 alltid holder og brikkene aldri forskyves. */
  width: min(100%, 460px, max(320px, calc(46vh * 4 / 5)));
  aspect-ratio: 4 / 5;
  min-height: 0;
  margin-inline: auto;
  /* Brikkene måles mot BANEN, ikke mot skjermen. Med en px-basert minstebredde
     ble de like store uansett hvor stor banen var: på telefon endte fire
     brikker på rad med å overlappe hverandre og henge utenfor sidelinja. */
  container-type: inline-size;
  border: 1px solid var(--hg-border-strong);
  border-radius: 18px;
  overflow: hidden;
  /* Gress-striper: vekslende mørk/lys grønn, med en svak vignett for dybde. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    repeating-linear-gradient(
      to bottom,
      var(--pitch-dark) 0,
      var(--pitch-dark) 8.333%,
      var(--pitch-light) 8.333%,
      var(--pitch-light) 16.666%
    );
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55);
  touch-action: none;
}

/* Midtlinje + midtsirkel + ytre banemarkering (touchlines). */
.pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid var(--pitch-line);
  border-radius: 10px;
  margin: 2.5%;
  background:
    radial-gradient(circle 9% at 50% 50%, transparent calc(9% - 2px), var(--pitch-line) calc(9% - 2px), var(--pitch-line) 9%, transparent 9%),
    radial-gradient(circle 5px at 50% 50%, var(--pitch-line) 5px, transparent 5px),
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--pitch-line) calc(50% - 1px), var(--pitch-line) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Straffefelt + målfelt øverst (angrep) og nederst (eget mål), som linjesegmenter. */
.pitch::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* øvre straffefelt: 2 sidelinjer + bunnlinje */
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    /* øvre målfelt */
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    /* nedre straffefelt */
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    /* nedre målfelt */
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line)),
    linear-gradient(var(--pitch-line), var(--pitch-line));
  background-repeat: no-repeat;
  background-size:
    2px 15%, 2px 15%, 40% 2px,
    2px 7%, 2px 7%, 20% 2px,
    2px 15%, 2px 15%, 40% 2px,
    2px 7%, 2px 7%, 20% 2px;
  background-position:
    30% 2.5%, 70% 2.5%, 50% 17.5%,
    40% 2.5%, 60% 2.5%, 50% 9.5%,
    30% 97.5%, 70% 97.5%, 50% 82.5%,
    40% 97.5%, 60% 97.5%, 50% 90.5%;
}

/* ---------- Player chips ---------- */
.player-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  /* minmax(0, 1fr): uten dette gulver grid-sporet seg på innholdets
     min-content-bredde, og bunnraden dyttet HELE brikka bredere enn den skulle
     være. Boksene kolliderte ikke, men innholdet rant ut i sidene. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  justify-items: center;
  width: clamp(30px, var(--chip-w, 21cqw), 108px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  background: rgba(3, 6, 10, 0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--text);
  padding: 4px 5px 4px;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  transition: border-color 0.12s ease, transform 0.08s ease;
  /* Ingenting skal kunne renne ut av brikka. Uten dette rant bunnraden ut i
     sidene på smale brikker, og brikkene så ut til å kollidere selv om boksene
     ikke gjorde det — noe en ren boks-måling aldri fanget. */
  overflow: hidden;
}

.player-chip:hover {
  border-color: var(--text);
}

.player-chip.is-selected {
  background: var(--text);
  color: #000000;
  z-index: 6;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
}

.player-chip.is-selected .chip-token {
  background: var(--hg-surface-deep);
  color: var(--text);
  border-color: #000000;
}

.player-chip.is-selected .chip-pos,
.player-chip.is-selected .chip-score {
  background: var(--hg-surface-deep);
  color: var(--text);
  border-color: #000000;
}

.player-chip.is-misused {
  border-color: var(--danger);
}

.player-chip.is-duplicate {
  border-color: var(--danger);
  border-style: dashed;
}

.player-chip.is-dragging {
  cursor: grabbing;
  z-index: 20;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.85);
}

.player-chip:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

/* Rating-token: spillerens overall i en "drakt"-sirkel. */
.chip-token {
  display: grid;
  place-items: center;
  width: clamp(18px, 8.5cqw, 34px);
  height: clamp(18px, 8.5cqw, 34px);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--text);
  color: #000000;
  font-size: clamp(0.62rem, 3.2cqw, 0.95rem);
  font-weight: 900;
  line-height: 1;
}

.chip-token.is-empty {
  background: var(--hg-surface-deep);
  color: var(--muted);
}

.chip-name {
  font-size: clamp(0.55rem, 2.9cqw, 0.86rem);
  font-weight: 800;
  line-height: 1.05;
  /* Ett navn = én linje. Ellers ble brikkene ulikt høye og la seg oppå
     hverandre i linja over. */
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-role {
  font-size: clamp(0.48rem, 2.4cqw, 0.7rem);
  color: var(--muted);
  line-height: 1.1;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-chip.is-selected .chip-role {
  color: #2a2a2a;
}

.chip-foot {
  display: flex;
  gap: clamp(2px, 1.2cqw, 4px);
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
}

.chip-pos {
  border-radius: 999px;
  background: var(--text);
  color: #000000;
  font-size: clamp(0.46rem, 2.2cqw, 0.66rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  /* Bunnraden må kunne krympe med brikka. Med fast padding ble den bredere enn
     brikka selv på en liten bane, og dyttet naboene inn i hverandre. */
  padding: 2px clamp(3px, 1.8cqw, 7px);
}

.chip-score {
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  font-size: clamp(0.46rem, 2.2cqw, 0.66rem);
  font-weight: 900;
  padding: 1px clamp(3px, 1.8cqw, 7px);
}

/* Tette formasjoner (mange rader, eller mange brikker på samme rad) må ha
   lavere brikker, ellers kolliderer radene. Rolleteksten går først, så navnet.
   Token, posisjon og matchScore blir alltid stående — og fullt navn ligger i
   aria-label og i sidepanelet, så ingenting går tapt. */
.pitch[data-density="middels"] .chip-role,
.pitch[data-density="hoy"] .chip-role {
  display: none;
}

/* Navnet er den viktigste opplysningen på brikka etter tallet. Vi strammer
   heller token og luft på «middels» enn å miste navnet ett nivå for tidlig. */
.pitch[data-density="middels"] .player-chip {
  gap: 1px;
  padding: 3px 4px;
}

.pitch[data-density="middels"] .chip-token {
  width: clamp(16px, 7.5cqw, 30px);
  height: clamp(16px, 7.5cqw, 30px);
}

.pitch[data-density="hoy"] .chip-name {
  display: none;
}

.pitch[data-density="hoy"] .player-chip {
  gap: 1px;
  padding: 3px;
}

/* Smal brikke: posisjonsmerket vikes for matchScore. Posisjonen er allerede
   gitt av plassen på banen og står i sidepanelet; tallet er det du leser her. */
.pitch[data-narrow="true"] .chip-role {
  display: none;
}

.pitch[data-narrow="true"] .chip-pos {
  display: none;
}

/* ---------- Slot editor + report boxes ---------- */
.selected-fit-box,
.report-columns section {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 16px;
  background: var(--panel-strong);
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.score-row strong {
  color: var(--text);
  font-size: 2.1rem;
}

.fit-status-text {
  margin: 10px 0 0;
  text-transform: capitalize;
  font-weight: 900;
  font-size: 1.1rem;
}

.muted-text {
  color: var(--muted);
  line-height: 1.55;
  font-size: 1rem;
}

/* Additivt historisk rollefit-hint i sidepanelet. Nøytral som standard, grønn
   ved god match, rød/varsel ved mulig feilbruk. */
.historical-role-hint {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}

.historical-role-hint[data-tone="positive"] {
  border-color: var(--good);
  color: var(--good);
}

.historical-role-hint[data-tone="warning"] {
  border-color: var(--danger);
  color: var(--danger);
}

.role-learning-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.role-learning-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.role-learning-head .eyebrow,
.role-learning-head h4,
.role-learning-type,
.role-learning-hint,
.role-learning-alt {
  margin: 0;
}

.role-learning-head h4 {
  font-size: 1rem;
}

.role-learning-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: capitalize;
}

.role-learning-badge[data-status="perfekt"],
.role-learning-badge[data-status="god"] {
  border-color: var(--good);
  color: var(--good);
}

.role-learning-badge[data-status="feilbrukt"] {
  border-color: var(--danger);
  color: var(--danger);
}

.role-learning-type,
.role-learning-alt {
  color: var(--muted);
  font-size: 0.88rem;
}

.role-learning-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.role-learning-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) 1fr;
  gap: 8px;
  font-size: 0.9rem;
}

.role-learning-row dt {
  color: var(--text);
  font-weight: 900;
}

.role-learning-row dd {
  color: var(--muted);
  margin: 0;
}

.role-learning-hint {
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Rolleerfaring (Role Familiarity Engine v1): liten meter + nivå som viser at
   spilleren forstår rollen bedre ved riktig bruk over kamper. Grønntone først
   når fortroligheten er etablert. */
.role-learning-familiarity {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.role-learning-familiarity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
}

.role-learning-familiarity-head span {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

.role-learning-familiarity-head strong {
  color: var(--text);
}

.role-learning-familiarity-meter {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.role-learning-familiarity-meter > span {
  display: block;
  height: 100%;
  background: var(--muted);
  transition: width 0.2s ease;
}

.role-learning-familiarity[data-level="etablert"] .role-learning-familiarity-meter > span,
.role-learning-familiarity[data-level="mester"] .role-learning-familiarity-meter > span {
  background: var(--good);
}

.role-learning-familiarity-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .role-learning-head,
  .role-learning-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .role-learning-badge {
    justify-self: start;
  }
}

.report-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.report-columns h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

ul {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  padding-left: 20px;
  font-size: 1rem;
}

/* ---------- Relasjoner mellom rollene ---------- */
.relationship-block {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.relationship-block h3 {
  margin: 0;
  font-size: 1.15rem;
}

.relationship-headline {
  margin: 0;
}

.relationship-list {
  display: grid;
  gap: 8px;
}

.relationship-entry {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--hg-surface-deep);
  padding: 8px 12px;
  display: grid;
  gap: 4px;
}

.relationship-entry.is-positive {
  border-left-color: var(--good);
}

.relationship-entry.is-negative {
  border-left-color: var(--danger);
}

.relationship-title {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.4;
}

.relationship-entry.is-positive .relationship-title {
  color: var(--good);
}

.relationship-entry.is-negative .relationship-title {
  color: var(--danger);
}

.relationship-explanation {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

/* ---------- Inbox ---------- */
.message-list {
  display: grid;
  gap: 14px;
}

.message-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 20px 22px;
}

.message-card h3 {
  margin: 10px 0 8px;
  font-size: 1.3rem;
}

.message-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.message-from {
  font-weight: 900;
  letter-spacing: 0.04em;
}

.message-tag {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.message-card.is-empty {
  border-style: dashed;
  border-color: var(--line-soft);
}

.inbox-signal-gate {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  border-color: rgba(117, 214, 156, 0.35);
}

.inbox-signal-gate h3,
.inbox-signal-gate p {
  margin: 0;
}

.inbox-signal-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
}

.inbox-signal-stats div {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

/* De to første er korte tall og leser fint som kompakte metrikk-tiles. De to
   siste er beskrivende tekst ("trening / slitasje / moral / …") som ble
   klemt inn i samme smale format — gi dem full bredde og roligere vekt så
   de leses som forklaring, ikke som et tall som ikke stemmer. */
.inbox-signal-stats div:nth-child(1),
.inbox-signal-stats div:nth-child(2) {
  border-color: var(--hg-accent-inbox);
  background: rgba(77, 163, 255, 0.08);
}

.inbox-signal-stats div:nth-child(3),
.inbox-signal-stats div:nth-child(4) {
  grid-column: 1 / -1;
  background: transparent;
}

.inbox-signal-stats div:nth-child(3) dd,
.inbox-signal-stats div:nth-child(4) dd {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
}

.inbox-signal-stats dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inbox-signal-stats dd {
  margin: 4px 0 0;
  color: var(--text);
  font-weight: 900;
}

.inbox-signal-stats div:nth-child(1) dd,
.inbox-signal-stats div:nth-child(2) dd {
  font-size: 1.5rem;
}

.inbox-signal-status {
  color: var(--green, #75d69c);
  font-weight: 900;
}

.inbox-training-cta {
  justify-self: start;
}

.inbox-thread-layout {
  display: grid;
  gap: 18px;
}

.inbox-thread-panel {
  display: grid;
  gap: 12px;
}

.inbox-thread-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
}

.inbox-thread-card {
  display: grid;
  gap: 10px;
}

/* Inbox UI v2 — kollapserbare, klikkbare tråder. Header er en knapp som toggler
   tråden; innholdet/​svarvalgene vises bare når tråden er åpen. */
.inbox-thread-card.is-collapsible {
  padding: 0;
  overflow: hidden;
}

.inbox-thread-toggle {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inbox-thread-toggle::after {
  content: "Vis tråd ▾";
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.inbox-thread-toggle[aria-expanded="true"]::after {
  content: "Skjul tråd ▴";
}

.inbox-thread-toggle:hover,
.inbox-thread-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.inbox-thread-card.is-open {
  border-color: var(--green, #75d69c);
}

.inbox-thread-body {
  display: none;
  gap: 10px;
  padding: 0 22px 18px;
}

.inbox-thread-card.is-open .inbox-thread-body {
  display: grid;
}

.inbox-thread-latest-title {
  color: var(--text);
  font-weight: 900;
}

.inbox-thread-read-button {
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 900;
  padding: 10px 14px;
  cursor: pointer;
}

.inbox-thread-read-button:hover {
  background: var(--text);
  color: #000000;
}

/* ---------- Inbox thread choices (v1) ---------- */
.inbox-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.inbox-choice-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 8px 12px;
  cursor: pointer;
}

.inbox-choice-button:hover {
  background: var(--text);
  color: #000000;
}

.inbox-choice-response {
  width: 100%;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--line);
  border-radius: 10px;
  background: #050505;
  padding: 12px 14px;
}

.inbox-choice-response-title {
  margin: 0;
  color: var(--text);
  font-weight: 900;
}

.inbox-choice-response-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.inbox-choice-effects {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* ---------- Inbox Event Integration v1 (levende kontekst-tråder) ---------- */
.inbox-event-card {
  border-left: 3px solid var(--line-soft);
}

.inbox-event-card[data-priority="urgent"] {
  border-left-color: #ff6b6b;
}

.inbox-event-card[data-priority="high"] {
  border-left-color: #ffb454;
}

.inbox-event-card[data-status="resolved"],
.inbox-event-card[data-status="archived"] {
  opacity: 0.78;
}

.inbox-event-priority[data-priority="urgent"] {
  border-color: #ff6b6b;
  color: #ff8c8c;
}

.inbox-event-priority[data-priority="high"] {
  border-color: #ffb454;
  color: #ffc77a;
}

.inbox-event-status {
  color: var(--muted);
}

.inbox-event-impact {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.inbox-event-hidden-hint {
  margin: 2px 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 0.88rem;
}

.inbox-event-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.inbox-event-tag {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.inbox-event-linked {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
}

.inbox-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.inbox-event-archive-button {
  background: transparent;
}

.admin-staff-count {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--text);
}

/* ---------- Knowledge cards ---------- */
.knowledge-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.knowledge-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px 20px;
  display: grid;
  gap: 8px;
}

.knowledge-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-card-header strong {
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 900;
}

.knowledge-card-header span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.knowledge-reason,
.knowledge-advice,
.knowledge-session {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  font-size: 1rem;
}

/* Aktivt valgt kunnskapskort: tydeligere hvit ramme, fortsatt sort bakgrunn. */
.knowledge-card.is-active-focus {
  border-width: 2px;
  border-color: var(--text);
  outline: 1px solid var(--line-soft);
  outline-offset: 3px;
}

.knowledge-focus-status {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

/* Sort/hvit knapp som matcher resten av demoens stil. */
.knowledge-card-action,
.clear-knowledge-focus-button,
.advance-training-week-button,
.unlock-card-action {
  justify-self: start;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.knowledge-card-action:hover,
.clear-knowledge-focus-button:hover,
.advance-training-week-button:hover,
.unlock-card-action:hover {
  background: var(--text);
  color: #000000;
}

.knowledge-card-action:focus-visible,
.clear-knowledge-focus-button:focus-visible,
.advance-training-week-button:focus-visible,
.unlock-card-action:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

/* Treningsuke-status: sort/hvitt, hvit ramme, ingen gul bakgrunn. */
.training-week-status {
  margin: 4px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 10px 16px;
}

/* Football Knowledge-progresjon: kompakte sort/hvite tallkort. Ingen gul bakgrunn. */
.knowledge-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}

.knowledge-progress-grid article {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  padding: 12px 14px;
}

.knowledge-progress-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledge-progress-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 900;
}

.knowledge-card.is-active-focus .knowledge-card-action {
  background: var(--text);
  color: #000000;
  border-color: var(--text);
}

.active-knowledge-focus {
  margin: 4px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 800;
  line-height: 1.5;
  padding: 12px 16px;
}

/* ---------- Treningsfokus-liste ---------- */
.training-focus-item {
  margin: 0 0 6px;
}

/* Trenervalgt ukesøkt skiller seg fra engine-genererte punkter:
   hvit ramme, sort bakgrunn og tydeligere font. Ingen gul bakgrunn. */
.training-focus-item.is-knowledge-focus {
  list-style: none;
  margin-left: -20px;
  margin-bottom: 10px;
  border: 1px solid var(--text);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 800;
  line-height: 1.5;
  padding: 12px 16px;
}

.training-focus-item.is-knowledge-focus .training-focus-text {
  margin: 0;
}

/* Fullført ukesøkt: dempet, stiplet ramme som skiller seg fra aktiv. Ingen gul bakgrunn. */
.training-focus-item.is-completed {
  border-style: dashed;
  border-color: var(--line-soft);
}

/* Fullfør-knapp i sort/hvitt, matcher resten av demoens knapper. */
.training-focus-complete-button {
  justify-self: start;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.training-focus-complete-button:hover {
  background: var(--text);
  color: #000000;
}

.training-focus-complete-button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

.training-focus-complete-button:disabled {
  cursor: default;
  border-style: dashed;
  border-color: var(--line-soft);
  color: var(--muted);
}

/* Fullført kunnskapskort: tynn stiplet ramme + liten statuslinje, ingen gul bakgrunn. */
.knowledge-card.is-completed-focus {
  border-style: dashed;
  border-color: var(--line-soft);
}

.knowledge-completed-status {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Treningshistorikk ---------- */
/* Liten, ryddig historikk: sort bakgrunn, myk hvit ramme, ingen gul flate. */
.training-history-panel {
  margin-top: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-strong);
  padding: 16px 18px;
}

.training-history-panel h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--text);
}

.training-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.training-history-week {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  line-height: 1.5;
  font-size: 0.95rem;
  padding: 10px 14px;
}

/* ---------- Knowledge-progresjon ---------- */
/* Små, kompakte tallkort: sort bakgrunn, myk hvit ramme, ingen gul flate. */
.knowledge-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.knowledge-progress-grid article {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
  padding: 12px 14px;
}

.knowledge-progress-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledge-progress-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 1.6rem;
  color: var(--text);
}

/* ---------- Club Week-panel ---------- */
/* Klubbuke: uke, fase og klubbverdier. Sort bakgrunn, hvite rammer, store
   lesbare tall. Ingen gul flate. Matcher resten av den sort/hvite stilen. */
.club-week-panel {
  display: grid;
  gap: 16px;
}

.club-week-panel h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
}

.club-week-phase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.club-week-phase-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 16px;
}

.club-week-feedback {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 800;
  line-height: 1.5;
  padding: 12px 16px;
}

.club-week-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.club-week-metrics article {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
  padding: 14px;
}

.club-week-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.club-week-metrics strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 900;
}

.club-week-event-log-panel {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  padding: 14px 16px;
}

.club-week-event-log-panel h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.05rem;
}

.club-week-event-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.club-week-event-log-item,
.club-week-event-log-empty {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
  color: var(--text);
  line-height: 1.5;
  padding: 10px 12px;
}

.club-week-event-log-empty {
  color: var(--muted);
}

/* ---------- History Go unlocks ---------- */
/* Sted → person → ekspertise → program → badge → lagklasse. Sort/hvit stil,
   myke kort, ingen gul flate. Matcher resten av prototypen. */
.unlock-panel {
  display: grid;
  gap: 30px;
}

/* Elleve like seksjoner leste som én lang vegg. Grupperer dem i de seks
   stegene fra kjerneløkka (Sted → Person → Ekspertise → Trening → Badge →
   Lagklasse), med en tallmerket steg-header som viser hvor i pipelinen du
   er — samme nummererte-chip-språk som club-week-steps bruker for ukerytmen. */
.unlock-stage {
  display: grid;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.unlock-stage:first-child {
  padding-top: 0;
  border-top: none;
}

.unlock-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unlock-stage-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--hg-accent-history);
  color: #04060b;
  font-size: 0.85rem;
  font-weight: 900;
}

.unlock-stage-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hg-accent-history);
}

.unlock-block {
  display: grid;
  gap: 12px;
}

.unlock-block h4 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text);
}

.unlock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.unlock-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.unlock-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
}

.unlock-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.unlock-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.unlock-list li {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 6px 10px;
}

.unlock-status {
  margin: 2px 0;
  justify-self: start;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.unlock-status.is-available {
  border-color: var(--good);
  color: var(--good);
}

.unlock-status.is-locked {
  border-color: var(--line-soft);
  color: var(--muted);
}

.unlock-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.badge-pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
}

.staff-placeholder-note {
  margin: 4px 0 0;
  border: 1px dashed var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  padding: 6px 10px;
}

/* Engasjert stab og opptjent badge markeres med hvit fyllfarge (fullført). */
.unlock-card.is-hired {
  border-color: var(--text);
}

.badge-pill.is-earned {
  background: var(--text);
  color: #000000;
  border-color: var(--text);
}

/* Treningsprogram-kort: tydelig skille mellom tilgjengelig og låst. */
.unlock-card.is-available-program {
  border-color: var(--good, var(--text));
}

.unlock-card.is-locked-program {
  border-color: var(--line-soft);
}

/* Treningsuke-handlinger: knapperad. */
.unlock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.history-go-sync-status {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 700;
}

/* Din fotballsamling: oppsummering av availability-snapshotet i History
   Go-fanen. Sort grunnflate, hvite rammer, grønt kun for kampklar-status. */
.collection-summary {
  display: grid;
  gap: 14px;
  margin-bottom: var(--gap);
}

.collection-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.collection-summary-head h3 {
  margin: 4px 0 6px;
  font-size: 1.3rem;
  color: var(--text);
}

.collection-summary-head .muted-text {
  margin: 0;
  max-width: 60ch;
}

.collection-matchday-badge {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 16px;
  white-space: nowrap;
}

.collection-matchday-badge[data-ready="true"] {
  border-color: var(--good);
  color: var(--good);
}

.collection-source-note {
  margin: 0;
  font-size: 0.9rem;
}

.collection-next-step {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
  padding: 10px 14px;
}

.unlock-players-status {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 700;
}

.unlock-block h4.unlock-subhead {
  margin: 8px 0 0;
  font-size: 1rem;
  color: var(--text);
}

/* Stedsrapporter (v1): forklaringskort per sportsted. Mørkt og ryddig, i samme
   stil som unlock-kortene. */
.place-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.place-report-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  padding: 18px 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.place-report-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.3;
}

.place-report-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.place-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0;
}

.place-report-section {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.place-report-section strong {
  color: var(--text);
}

.place-report-pill {
  display: inline-block;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 12px;
}

.place-report-list {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

.place-report-list li {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.place-report-warning {
  margin: 4px 0 0;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: var(--hg-surface-deep);
  color: var(--danger);
  font-size: 0.86rem;
  line-height: 1.45;
  padding: 8px 12px;
}

/* Aktiv treningsprogresjon: kort med tydelig uke-teller. */
.unlock-progress-card {
  border-color: var(--text);
}

.unlock-progress-line {
  margin: 4px 0 0;
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 4px 12px;
}

.unlock-empty {
  margin: 0;
}

/* Lagidentitet (v1): forklarings-/planleggingspanel for lagklasser. Mørk stil
   med tydelige hvite rammer, ingen gul bakgrunn. */
.team-identity-panel {
  display: grid;
  gap: 14px;
}

.team-identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.team-identity-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  padding: 18px 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.team-identity-card.is-unlocked {
  border-color: var(--good);
}

.team-identity-card.is-near {
  border-color: var(--line-soft);
}

.team-identity-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.3;
}

.team-identity-status {
  margin: 0;
  justify-self: start;
  border: 1px solid var(--good);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--good);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
}

.team-identity-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.team-identity-progress {
  margin: 0;
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 4px 12px;
}

.team-identity-requirements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.team-identity-requirements li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.team-identity-requirements li::before {
  position: absolute;
  left: 0;
  font-weight: 900;
}

.team-identity-requirements li.is-met {
  color: var(--text);
}

.team-identity-requirements li.is-met::before {
  content: "✓";
  color: var(--good);
}

.team-identity-requirements li.is-missing::before {
  content: "•";
  color: var(--line-soft);
}

.team-identity-recommendations {
  display: grid;
  gap: 4px;
}

.team-identity-rec-label {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.team-identity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-identity-pill {
  display: inline-block;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 12px;
}

.team-identity-empty {
  margin: 0;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 18px 20px;
}

/* ============================================================================
   FASE 2 — Managerkontor-layout
   Toppstripe, stor bane, dynamisk sidepanel, statuskort og avdelinger.
   Sort/hvitt beholdes; grønt kun på banen; hvite rammer gir struktur.
   ============================================================================ */

.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;
}

.office {
  gap: 16px;
}

/* ---------- Toppstripe: klubbstatus ---------- */
.club-topbar {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(280px, 1.4fr);
  align-items: center;
  gap: 22px;
  border: 1px solid var(--hg-border-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  box-shadow: var(--shadow);
  padding: 16px 22px;
}

/* Oversikten signeres med taktikk-grønn, som i menyen. */
.club-topbar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hg-accent-tactics);
  opacity: 0.85;
}

.topbar-identity h2 {
  margin: 2px 0 10px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase;
}

.topbar-phase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.topbar-phase {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 7px 14px;
}

/* Club Week Orchestrator v1: fase-stripa gjør ukerytmen synlig. */
.club-week-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.club-week-step {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  opacity: 0.78;
}

.club-week-step.is-done {
  color: var(--text);
  opacity: 0.55;
}

.club-week-step.is-active {
  background: var(--text);
  color: #000000;
  border-color: var(--text);
  opacity: 1;
}

.club-week-guidance {
  margin: 8px 0 0;
  max-width: 56ch;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.topbar-score {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  border-inline: 1px solid var(--line-soft);
  padding-inline: 22px;
}

/* Lagfit-tallet er sidens viktigste ett tall: det får et mykt lysglimt bak
   seg slik at blikket lander der først, i stedet for å konkurrere jevnt
   med de sju metrikk-boksene ved siden av. */
.topbar-score::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  background: radial-gradient(60px 60px at 50% 42%, rgba(70, 214, 140, 0.16), transparent 72%);
}

.topbar-score .score-ring {
  width: 96px;
  height: 96px;
  font-size: 2rem;
  border-width: 2px;
  border-color: var(--hg-accent-tactics);
  box-shadow: 0 0 0 4px rgba(70, 214, 140, 0.08);
}

.score-ring-label {
  margin: 4px 0 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.topbar-status {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
}

/* 4×2-rutenett: sju nøkkeltall får plass uten å presse toppstripen bredere. */
.topbar-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.topbar-metrics article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  padding: 10px 8px;
  text-align: center;
}

/* Hvert nøkkeltall får en egen aksentfarge i stedet for sju identiske grå
   bokser: fargen sier hva slags tilstand tallet beskriver, ikke bare hva
   det heter. */
.topbar-metrics article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--tile-accent, var(--hg-border-strong));
  opacity: 0.85;
}

.topbar-metrics article:has(#clubBoardTrust) { --tile-accent: var(--hg-accent-board); }
.topbar-metrics article:has(#clubPlayerMorale) { --tile-accent: var(--good); }
.topbar-metrics article:has(#clubTacticalClarity) { --tile-accent: var(--hg-accent-tactics); }
.topbar-metrics article:has(#clubTrainingCulture) { --tile-accent: var(--hg-accent-training); }
.topbar-metrics article:has(#clubMediaPressure) { --tile-accent: var(--hg-accent-warning); }

.topbar-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar-metrics strong {
  display: block;
  margin-top: 5px;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.topbar-metric-squad,
.topbar-metric-roster {
  border-color: var(--line);
}

/* ---------- Hovedflate: bane + sidepanel ---------- */
.office-main {
  display: grid;
  grid-template-columns: minmax(420px, 1.6fr) minmax(300px, 0.9fr);
  gap: var(--gap);
  align-items: start;
}

.pitch-stage {
  display: grid;
  gap: 14px;
}

.pitch-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.pitch-stage-head h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
}

.pitch-controls {
  display: flex;
  gap: 10px;
  flex: 1 1 240px;
  max-width: 360px;
}

/* Hvert valg får en synlig etikett, ellers står to nedtrekk side om side uten
   at noe sier hva de styrer. */
.pitch-control-field {
  display: grid;
  gap: 3px;
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}

.pitch-control-field label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pitch-control-hint {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

.pitch-controls select {
  padding: 10px 12px;
  font-size: 0.95rem;
  width: 100%;
  min-width: 0;
}

/* ---------- Taktisk systempanel (valgt historisk formasjon) ---------- */
.tactic-system {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
}

.tactic-system-empty {
  margin: 0;
  color: var(--muted);
}

.tactic-system-head {
  display: grid;
  gap: 6px;
}

.tactic-system-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}

.tactic-system-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tactic-system-title h3 {
  margin: 0;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.tactic-system-shape {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.tactic-system-diff {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.tactic-system-diff-high,
.tactic-system-diff-very_high {
  border-color: var(--danger);
  color: var(--danger);
}

.tactic-system-diff-low {
  border-color: var(--good);
  color: var(--good);
}

.tactic-system-phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.tactic-system-phase {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg);
}

.tactic-system-phase-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.tactic-system-phase-value {
  font-weight: 900;
  font-size: 1rem;
}

.tactic-system-block {
  display: grid;
  gap: 6px;
}

.tactic-system-block-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}

.tactic-system-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tactic-system-chip {
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.tactic-system-chips-role .tactic-system-chip {
  border-color: var(--line);
}

.tactic-system-chip.is-empty {
  color: var(--muted);
}

.formation-knowledge-mini {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 12px;
}

.formation-knowledge-mini-eyebrow,
.formation-knowledge-mini-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.formation-knowledge-mini h4 {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
}

.formation-knowledge-mini-subtitle,
.formation-knowledge-mini-core,
.formation-knowledge-mini-hint {
  margin: 0;
  line-height: 1.45;
}

.formation-knowledge-mini-subtitle,
.formation-knowledge-mini-hint {
  color: var(--muted);
  font-size: 0.88rem;
}

.formation-knowledge-mini-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
  font-size: 0.9rem;
}

.tactic-system-unlock {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Kort formasjonstilgjengelighet: hvor mange systemer er ulåst og hvordan
   låste systemer åpnes via History Go-samling. */
.tactic-system-availability {
  margin: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Nærmeste låste systemer: kort forklaring på hvorfor de er låst og hvilken
   History Go-kilde (sted/spiller/stab) som åpner dem. */
.tactic-system-locked-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.tactic-system-locked-item {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--hg-surface-deep);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 6px 10px;
}

/* ---------- Dynamisk sidepanel ---------- */
.side-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.side-panel-head h2 {
  margin-top: 4px;
  font-size: 1.5rem;
}

.side-profile {
  display: grid;
  gap: 14px;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 14px 16px;
}

.profile-rating {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--text);
  color: #000000;
  font-size: 1.7rem;
  font-weight: 900;
}

.profile-identity-text h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.05;
}

.profile-positions {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-match {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-strong);
  padding: 14px 16px;
}

.profile-source {
  margin: 0;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 10px 12px;
}

/* Ferdighetsprofil: en PROFIL, ikke en rang. Radene står i posisjonens egen
   kravrekkefølge, og `data-source` skiller det kilden faktisk sier om en ekte
   spiller fra det spillet har utledet. */
.profile-attributes {
  flex: 0 0 auto;
  margin-top: 0.9rem;
}

.profile-attributes h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profile-attributes-scale {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

.attribute-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.attribute-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 1.7rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.attribute-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.22);
  overflow: hidden;
}

.attribute-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.55;
}

/* Belagt i kilden vises tydeligere enn utledet. Forskjellen mellom hva vi vet
   om en ekte spiller og hva vi antar skal være synlig, ikke skjult. */
.attribute-row[data-source="belagt"] .attribute-bar-fill { opacity: 1; }
.attribute-row[data-source="posisjon"] .attribute-bar-fill { opacity: 0.7; }
.attribute-row[data-source="utledet"] { opacity: 0.72; }

.attribute-subhead {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(127, 127, 127, 0.22);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

/* Ferdigheter plassen krever og han mangler. De står som FAKTA om ferdigheter,
   ikke som en samlet dom — derfor dempet, ikke rødmerket. */
.attribute-row[data-demand="mangler"] .attribute-bar-fill { opacity: 0.4; }

.profile-signature {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.68;
}

.attribute-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.profile-attributes-note {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
}

.profile-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.profile-tags h4 {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-tags ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.profile-tags li {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 5px 9px;
}

/* ---------- Sidepanel: neste beslutninger ---------- */
.side-decisions .eyebrow {
  margin-bottom: 10px;
}

.decision-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.decision-list li {
  margin: 0;
}

.decision-item {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  color: var(--text);
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.decision-item:hover {
  background: var(--text);
  color: #000000;
}

.decision-item:hover .decision-detail {
  color: #2a2a2a;
}

.decision-item:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

.decision-item.is-static {
  cursor: default;
  border-style: dashed;
  border-color: var(--line-soft);
}

.decision-item.is-static:hover {
  background: var(--panel-strong);
  color: var(--text);
}

.decision-item.is-static:hover .decision-detail {
  color: var(--muted);
}

.decision-title {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.decision-detail {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.decision-tag {
  justify-self: start;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
}

.side-actions-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Slot-editoren ligger nå øverst i sidepanelet som det primære grepet: velg
   spiller og rolle for valgt plass. Fremhevet som et lite kort så det er
   åpenbart HVORDAN man setter laget. */
.side-panel > .slot-editor {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--hg-surface-deep);
}

.side-panel > .slot-editor .side-actions-label {
  color: var(--text);
  font-size: 0.78rem;
}

.slot-editor-hint {
  margin: 2px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ---------- Tropp og benk (roster readiness) ---------- */
/* 15-spillerkravet: 11 i startelleveren + minst 4 på benken. Statisk panel i
   index.html som rendres av app.js fra availability-snapshotet. */
.roster-readiness-panel {
  display: grid;
  gap: 16px;
}

.roster-readiness-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.roster-readiness-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roster-readiness-head h2,
.roster-readiness-panel h3 {
  margin: 0;
}

.roster-readiness-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
}

.roster-readiness-badge[data-ready="true"] {
  border-color: var(--good);
  color: var(--good);
}

.bench-player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.bench-player-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
  padding: 12px 14px;
}

.bench-player-card.is-registered {
  border-color: var(--line);
}

.bench-player-card strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.bench-player-card span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.3;
}

.bench-empty,
.roster-readiness-note {
  margin: 0;
}

/* ---------- Statuskort: neste beslutninger (strip) ---------- */
/* ---------- Neste handling-footerkort (Playable Manager Flow Polish v1) ----------
   Kompakt managerbeskjed nederst til høyre. Kortet beholder eksisterende
   rendering/id-er fra Neste handling, men er ikke lenger en hero i hovedkolonnen. */
.next-action-strip {
  display: grid;
  gap: 10px;
  width: min(100%, 390px);
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), var(--panel-strong));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  padding: 14px;
}

.next-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.next-action-head .eyebrow {
  margin: 0;
  font-size: 0.66rem;
}

.next-action-phase {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 9px;
}

.next-action-primary {
  display: grid;
  gap: 5px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--hg-radius-sm);
  background: rgba(4, 6, 11, 0.72);
  color: var(--text);
  padding: 12px;
  cursor: pointer;
  font: inherit;
  transition: transform 0.1s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.next-action-primary:hover:not(:disabled) {
  border-color: var(--text);
  transform: translateY(-1px);
}

.next-action-primary:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

.next-action-primary:disabled {
  cursor: default;
  opacity: 0.7;
}

.next-action-tag {
  justify-self: start;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
}

.next-action-title {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  font-weight: 900;
  line-height: 1.12;
}

.next-action-hint {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

.next-action-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.next-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  transition: border-color 0.12s ease, transform 0.1s ease;
}

.next-action-chip:hover:not(:disabled) {
  border-color: var(--text);
  transform: translateY(-1px);
}

.next-action-chip:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.next-action-chip:disabled {
  cursor: default;
  opacity: 0.6;
}

.next-action-chip-tag {
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.next-action-chip-title {
  font-weight: 800;
}

.decision-strip {
  display: grid;
  gap: 14px;
}

.decision-strip-head h2 {
  margin-top: 2px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
}

.decision-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.decision-card {
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 18px 20px;
  cursor: pointer;
  font: inherit;
  transition: transform 0.1s ease, border-color 0.12s ease;
}

.decision-card:hover {
  transform: translateY(-2px);
  border-color: var(--text);
}

.decision-card:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

/* Førstekortet er den viktigste beslutningen: gjøres større og invertert. */
.decision-card.is-primary {
  grid-column: span 2;
  background: var(--text);
  color: #000000;
}

.decision-card.is-primary .decision-card-detail {
  color: #2a2a2a;
}

.decision-card.is-static {
  cursor: default;
  border-style: dashed;
  border-color: var(--line-soft);
}

.decision-card.is-static:hover {
  transform: none;
  border-color: var(--line-soft);
}

.decision-card-tag {
  justify-self: start;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
}

.decision-card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
}

.decision-card.is-primary .decision-card-title {
  font-size: 1.5rem;
}

.decision-card-detail {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- Innsiktsskuff (sekundær detalj) ---------- */
.insight-drawer {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0 18px;
}

.insight-drawer > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 4px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.insight-drawer > summary::-webkit-details-marker {
  display: none;
}

.insight-drawer > summary::after {
  content: "▾";
  float: right;
  transition: transform 0.15s ease;
}

.insight-drawer[open] > summary::after {
  transform: rotate(180deg);
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: 4px 0 22px;
}

.insight-grid .manager-detail-panel,
.insight-grid .manager-knowledge-panel,
.insight-grid .suggested-setups-panel {
  grid-column: 1 / -1;
}

/* Kamp-fanen: kampdagpanelet (med rapport) er høyt, badge-panelet kort. Uten
   dette strekkes badge-panelet til samme høyde og etterlater en stor tom boks.
   Topp-juster så høyre kolonne følger sitt eget innhold. */
.kamp-view .insight-grid {
  align-items: start;
}

/* Lag & taktikk-fanens dybdepaneler deler én signaturfarge (samme grønn som
   fanen selv) i stedet for å være fire identiske grå bokser. Oversikt bruker
   flere farger fordi den viser flere avdelinger samtidig; her er alt tema
   tydelig taktikk, så én farge er riktigere enn et regnbueoppsett. */
.office .insight-grid .panel {
  position: relative;
  overflow: hidden;
}

.office .insight-grid .panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hg-accent-tactics);
  opacity: 0.7;
}

/* Dashboard (oversikt): kompakt kortrutenett i stedet for en lang feed. */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: 4px 0 22px;
}

/* Kontekst og hendelseslogg får full bredde: de er lesestoff, ikke
   like store beslutningskort som snarveiene/beslutningene ved siden av.
   Dette bryter 2×2-rutenettet som gjorde alle kortene identiske. */
.dashboard-grid .off-pitch-signal-card,
.dashboard-grid .club-week-event-log-panel {
  grid-column: 1 / -1;
}

.dashboard-view .dashboard-grid .panel {
  position: relative;
  overflow: hidden;
  background: rgba(15, 19, 27, 0.58);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

/* Samme visuelle språk som club-topbar sin venstrestripe: hvert
   dashboard-kort signerer seg med en egen aksentfarge i stedet for å
   flyte sammen som samme grå boks fem ganger på rad. */
.dashboard-view .dashboard-grid .panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--card-accent, var(--hg-border-strong));
  opacity: 0.85;
}

.dashboard-grid .off-pitch-signal-card { --card-accent: var(--hg-accent-inbox); }
.dashboard-grid .decision-strip { --card-accent: var(--hg-accent-board); }
.dashboard-grid .mini-season-panel,
.dashboard-grid .league-season-panel { --card-accent: var(--hg-accent-tactics); }
.dashboard-grid .dashboard-shortcuts { --card-accent: var(--hg-accent-training); }
.dashboard-grid .club-week-event-log-panel { --card-accent: var(--hg-accent-history); }

.dashboard-view .dashboard-grid .manager-actions-panel {
  border-color: var(--line-soft);
}

.dashboard-view .decision-card.is-primary {
  background: var(--panel-strong);
  color: var(--text);
}

.dashboard-view .decision-card.is-primary .decision-card-detail {
  color: var(--muted);
}

.dashboard-grid .manager-actions-panel {
  grid-column: 1 / -1;
}

.priority-actions-block {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft, rgba(255, 255, 255, 0.18));
}

.priority-actions-block h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.priority-actions-block ul {
  margin: 0;
}

.dashboard-shortcuts .shortcut-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.dashboard-shortcuts .shortcut-button {
  flex: 1 1 auto;
  min-width: 140px;
}

/* ============================================================================
   AVDELINGER — egne visuelle uttrykk
   ============================================================================ */

.dept {
  gap: 18px;
}

.dept-hero {
  --dept-accent: var(--hg-text-main);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--hg-border-soft);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}

.future-label {
  display: inline-flex;
  width: fit-content;
  margin: 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--hg-text-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  padding: 6px 12px;
}

/* Funksjonell fargesignatur: tynn aksentkant + farget eyebrow per avdeling. */
.dept-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--dept-accent);
  opacity: 0.85;
}

.dept-hero .eyebrow {
  color: var(--dept-accent);
}

.dept-hero-inbox { --dept-accent: var(--hg-accent-inbox); }
.dept-hero-admin { --dept-accent: var(--hg-accent-admin); }
.dept-hero-historygo { --dept-accent: var(--hg-accent-history); }
.dept-hero-hgfm { --dept-accent: var(--hg-accent-library); }

.dept-hero h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  text-transform: uppercase;
}

.dept-hero-lede {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.dept-hero-stat {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--hg-surface-deep);
  padding: 16px 24px;
  min-width: 130px;
}

.dept-hero-stat strong {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
}

.dept-hero-stat span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.dept-hero-stat-live strong {
  color: var(--text);
}

.dept-hero-actions {
  display: flex;
  gap: 10px;
}

/* Diagonal hvit aksent per hero – gir hver avdeling et eget uttrykk uten farge. */
.dept-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 220px;
  height: 220px;
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  transform: rotate(25deg);
  pointer-events: none;
  opacity: 0.35;
}

.dept-hero-admin::after { transform: rotate(45deg); }
.dept-hero-inbox::after { border-radius: 50% 50% 50% 0; }

/* ---------- Innboks: pulslayout ---------- */
.dept-hero-stat-live#inboxPulseCount,
.dept-hero-inbox .dept-hero-stat strong {
  color: var(--text);
}

/* Arkivet er "kan leses senere" — 0.92 opacity skilte det knapt fra
   "Viktig nå" over. Dempet bakgrunn og tynnere ramme gjør at blikket
   lander på det aktive panelet først. */
.inbox-archive {
  border-color: var(--line-soft);
  background: rgba(15, 19, 27, 0.4);
  opacity: 0.85;
}

.inbox-archive h3 {
  color: var(--muted);
}

/* ---------- Administrasjon: ledger-tavle ---------- */
.admin-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-feature {
  grid-column: span 2;
  display: grid;
  gap: 12px;
  align-content: start;
}

.admin-feature h3 {
  font-size: 1.5rem;
}

.admin-side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-metrics {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.admin-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--hg-radius-sm);
  background: rgba(0, 0, 0, 0.14);
}

.admin-metric-label {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-metric-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.admin-metric-value[data-tone="good"] { color: var(--hg-accent-admin, #6ee7b7); }
.admin-metric-value[data-tone="warn"] { color: #f6a96b; }
.admin-metric-value[data-tone="neutral"] { color: var(--text); }

/* ---------- Footer ---------- */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: 16px;
  padding: 8px 0 max(40px, calc(24px + env(safe-area-inset-bottom)));
  color: var(--muted);
}

.site-footer > p {
  margin: 0 0 4px;
}


@media (max-width: 720px) {
  .app-shell {
    padding-bottom: clamp(132px, 20vh, 220px);
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding-bottom: max(28px, calc(18px + env(safe-area-inset-bottom)));
  }

  .next-action-strip {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .club-topbar {
    grid-template-columns: 1fr auto;
  }

  .topbar-metrics {
    grid-column: 1 / -1;
  }

  .office-main {
    grid-template-columns: 1fr;
  }

  .side-panel {
    position: static;
    top: auto;
  }

  .insight-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .controls-layout,
  .lineup-layout,
  .report-layout,
  .report-columns {
    grid-template-columns: 1fr;
  }

  .admin-board {
    grid-template-columns: 1fr 1fr;
  }

  .admin-feature {
    grid-column: 1 / -1;
  }

  .decision-card.is-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  html {
    font-size: 16px;
  }

  :root {
    --hg-space: 14px;
    --hg-card-padding: 16px;
  }

  /* Mobil: menyen flyttes ned i tommelsonen som fast handlingsfelt. */
  body {
    padding-bottom: calc(var(--hg-menu-height) + 22px + env(safe-area-inset-bottom));
  }

  .main-nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: none;
    border-top: 1px solid var(--hg-border-soft);
    background: rgba(6, 9, 15, 0.92);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  }

  .main-nav-inner {
    width: 100%;
    padding-inline: 8px;
  }

  .nav-tab {
    min-width: 64px;
    font-size: 0.58rem;
    padding: 6px 6px 10px;
  }

  .nav-office-toggle {
    min-width: 64px;
    font-size: 0.58rem;
    padding: 6px 6px 10px;
  }

  /* Nav er festet nederst på mobil, så menyen må åpne oppover for å ikke havne utenfor viewport. */
  .nav-office-menu {
    top: auto;
    bottom: calc(100% + 8px);
    right: 8px;
  }

  .site-header {
    padding-top: 12px;
  }

  .site-header .lede {
    display: none;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .club-topbar {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .topbar-score {
    border-inline: none;
    border-block: 1px solid var(--line-soft);
    padding-block: 12px;
    padding-inline: 0;
  }

  .topbar-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-metrics article {
    min-width: 0;
    padding: 9px 8px;
  }

  .roster-readiness-head {
    display: grid;
  }

  .roster-readiness-badge {
    width: fit-content;
  }

  .pitch {
    /* Litt smalere format på telefon, men fortsatt høydebundet: uten det
       vokste banen (3:4 er høyere enn 4:5) og dyttet resten ut av skjermen. */
    aspect-ratio: 3 / 4;
    width: min(100%, max(300px, calc(46vh * 3 / 4)));
    min-height: 0;
  }

  .player-chip {
    width: clamp(30px, var(--chip-w, 21cqw), 96px);
  }

  .admin-board {
    grid-template-columns: 1fr;
  }

  .dept-hero {
    padding: 18px;
  }
}

/* ============================================================
   HG Football Manager — Formasjonsbibliotek (v1)
   Sort grunnflate, tydelige hvite rammer, større skrift.
   ============================================================ */

.dept-hero-hgfm {
  border-color: var(--line);
}

.hgfm-library {
  margin-top: var(--gap);
}

.hgfm-loading,
.hgfm-error {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 20px;
  border-radius: var(--radius);
  font-size: 1.1rem;
}

.hgfm-error {
  border-color: var(--danger);
}

.hgfm-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.3fr) minmax(320px, 2fr);
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 1100px) {
  .hgfm-layout {
    grid-template-columns: 1fr 1fr;
  }
  .hgfm-col-detail {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .hgfm-layout {
    grid-template-columns: 1fr;
  }
}

.hgfm-col {
  min-width: 0;
}

/* ---------- Epoke-kolonne ---------- */
.hgfm-eras {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hgfm-era-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hgfm-era-btn:hover {
  border-color: var(--line);
  background: var(--panel-strong);
}

.hgfm-era-btn.is-active {
  border-color: var(--line);
  border-width: 2px;
  background: var(--panel-strong);
}

.hgfm-era-period {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hgfm-era-name {
  font-size: 1.15rem;
  font-weight: 700;
}

.hgfm-era-count {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Formasjon-kolonne ---------- */
.hgfm-era-head {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px;
  margin-bottom: 14px;
}

.hgfm-era-head-period {
  margin: 0 0 4px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.hgfm-era-head-name {
  margin: 0 0 10px;
  font-size: 1.5rem;
}

.hgfm-era-summary {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.5;
}

.hgfm-era-shift {
  margin: 0;
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.5;
}

.hgfm-formation-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hgfm-formation-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "shape name diff"
    "shape school diff";
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hgfm-formation-card:hover {
  border-color: var(--line);
  background: var(--panel-strong);
}

.hgfm-formation-card.is-active {
  border-color: var(--line);
  border-width: 2px;
  background: var(--panel-strong);
}

.hgfm-formation-shape {
  grid-area: shape;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  white-space: nowrap;
}

.hgfm-formation-name {
  grid-area: name;
  font-size: 1.1rem;
  font-weight: 700;
}

.hgfm-formation-school {
  grid-area: school;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- Vanskelighetsgrad ---------- */
.hgfm-diff {
  grid-area: diff;
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.hgfm-diff-low {
  border-color: var(--good);
  color: var(--good);
}
.hgfm-diff-medium {
  border-color: var(--line);
  color: var(--text);
}
.hgfm-diff-high {
  border-color: #ffb347;
  color: #ffb347;
}
.hgfm-diff-very_high {
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------- Detalj-panel ---------- */
.hgfm-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hgfm-detail-head {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 14px;
}

.hgfm-detail-kicker {
  margin: 0 0 6px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.hgfm-detail-title {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.7rem;
  flex-wrap: wrap;
}

.hgfm-detail-shape {
  font-size: 1.2rem;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
}

.hgfm-detail-school {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--muted);
}

.hgfm-detail-aka {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.hgfm-detail-badges {
  margin-top: 10px;
}

.hgfm-detail-notes {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

.hgfm-knowledge {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel-strong);
}

.hgfm-knowledge-core {
  margin: 0;
  line-height: 1.55;
}

.hgfm-knowledge-details {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.hgfm-knowledge-details summary {
  cursor: pointer;
  font-weight: 800;
}

.hgfm-chips-signal .hgfm-chip,
.hgfm-chips-learning .hgfm-chip {
  border-color: var(--line);
}

.hgfm-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hgfm-block-title {
  margin: 0;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hgfm-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 540px) {
  .hgfm-two-col {
    grid-template-columns: 1fr;
  }
}

/* ---------- Faseformasjoner ---------- */
.hgfm-phase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 540px) {
  .hgfm-phase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hgfm-phase-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel-strong);
}

.hgfm-phase-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.hgfm-phase-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---------- Chips ---------- */
.hgfm-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hgfm-chip {
  font-size: 0.98rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--panel-strong);
}

.hgfm-chips-strength .hgfm-chip {
  border-color: var(--good);
}

.hgfm-chips-weakness .hgfm-chip {
  border-color: var(--danger);
}

.hgfm-chips-role .hgfm-chip,
.hgfm-chips-principle .hgfm-chip {
  border-color: var(--line);
}

.hgfm-chip-empty {
  color: var(--muted);
  border-style: dashed;
}

/* ---------- Unlock ---------- */
.hgfm-unlock {
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

.hgfm-unlock-tier {
  margin: 0;
}

.hgfm-tier {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

.hgfm-tier-start {
  border-color: var(--good);
  color: var(--good);
}
.hgfm-tier-advanced {
  border-color: #ffb347;
  color: #ffb347;
}

.hgfm-unlock-label {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.hgfm-unlock-note {
  margin: 6px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

.hgfm-empty {
  font-size: 1.05rem;
  color: var(--muted);
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  padding: 18px;
}

/* ---------- Mini Season v0.1: 5-kampers prøveperiode ----------
   League Loop v0.2: ligasesong-panelet gjenbruker samme visning (samme motor),
   så det arver mini-season-stilene via delte klasser. */
.mini-season-panel,
.league-season-panel {
  display: grid;
  gap: 14px;
}

.mini-season-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mini-season-head h2 {
  margin: 4px 0 6px;
}

.mini-season-head .muted-text {
  margin: 0;
}

.mini-season-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mini-season-actions button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.mini-season-actions button:hover {
  background: var(--text);
  color: #000000;
}

.mini-season-actions button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

.mini-season-actions button.is-reset {
  border-color: var(--line-soft);
  color: var(--muted);
}

.mini-season-overview {
  display: grid;
  gap: 10px;
}

.mini-season-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.mini-season-next-opponent {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
}

.mini-season-objectives,
.mini-season-results {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.mini-season-objectives li.is-achieved::marker,
.mini-season-results li.is-win::marker {
  color: var(--good);
}

.mini-season-objectives li.is-open::marker {
  color: var(--muted);
}

.mini-season-results li.is-loss::marker {
  color: var(--danger);
}

.mini-season-verdict {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--hg-surface-deep);
  padding: 12px 16px;
  display: grid;
  gap: 6px;
}

.mini-season-verdict.is-trusted {
  border-color: var(--good);
}

.mini-season-verdict.is-failed {
  border-color: var(--danger);
}

.mini-season-verdict-label {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--text);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

.mini-season-verdict.is-trusted .mini-season-verdict-label {
  border-color: var(--good);
  color: var(--good);
}

.mini-season-verdict.is-failed .mini-season-verdict-label {
  border-color: var(--danger);
  color: var(--danger);
}

.mini-season-verdict-headline {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  line-height: 1.45;
}

/* Mini Season v1 / League Loop v1: kompakt sort/hvit managerkontor-stil med
   tynne hvite rammer. Ikke gul hovedstil, ikke skjemaaktig. */
.mini-season-goal {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 12px;
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.mini-season-standing {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mini-season-stat {
  display: grid;
  gap: 2px;
  min-width: 64px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 12px;
}

.mini-season-stat-value {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.1;
}

.mini-season-stat-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mini-season-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-season-form-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

.mini-season-form-pin.is-win {
  border-color: var(--good);
  color: var(--good);
}

.mini-season-form-pin.is-loss {
  border-color: var(--danger);
  color: var(--danger);
}

.mini-season-table-wrap {
  overflow-x: auto;
}

.mini-season-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.mini-season-table th,
.mini-season-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 8px;
  text-align: right;
  color: var(--text);
  font-weight: 700;
}

.mini-season-table th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mini-season-table th:nth-child(2),
.mini-season-table td.mini-season-table-team {
  text-align: left;
}

.mini-season-table tr.is-hg td {
  border-bottom-color: var(--line);
  color: var(--text);
  font-weight: 900;
}

.mini-season-table tr.is-hg td.mini-season-table-team {
  border-left: 2px solid var(--text);
  padding-left: 8px;
}

/* Kompakt startvalg som bruker eksisterende availability- og lokal-start-flow. */
.local-start-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--hg-surface-deep);
}

.local-start-panel[hidden],
.active-local-start[hidden],
#startModeChoices[hidden] {
  display: none;
}

.local-start-heading {
  margin-bottom: 10px;
}

.local-start-panel h4,
.local-start-panel h5 {
  margin: 0;
  color: var(--text);
}

.local-start-panel h4 {
  font-size: 1.05rem;
}

.local-start-panel h5 {
  font-size: 0.95rem;
}

.local-start-panel .muted-text,
.local-start-status,
.public-start-place-help {
  margin: 0;
}

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

.start-mode-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.start-mode-choice > div {
  display: grid;
  gap: 5px;
}

.start-mode-choice .unlock-card-action {
  margin-top: auto;
}

.public-start-place-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.public-start-place-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--hg-panel-bg);
}

.public-start-place-help {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.active-local-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.active-local-start > div {
  display: grid;
  gap: 5px;
}

.local-start-panel .is-secondary {
  border-color: var(--line-soft);
  color: var(--muted);
}

.local-start-panel button:disabled,
.local-start-panel select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.local-start-status {
  color: var(--text);
  font-weight: 800;
}

@media (max-width: 900px) {
  .start-mode-grid {
    grid-template-columns: 1fr;
  }

  .active-local-start {
    align-items: stretch;
    flex-direction: column;
  }
}


/* ---------- Treningsuke v0.2 ---------- */
/* Trening-fanen delte fem identiske fulbredde grå bokser på rad. Ukefokus og
   treningsprogram er nå sidestilte valg (parret i insight-grid over) og deler
   én signaturfarge, samme mønster som Lag & taktikk og Kamp bruker. */
/* Ukefokus og treningsprogram er ofte ulikt høye (ett har 8 korte valg, det
   andre 3 fyldige programkort) — topp-juster som Kamp-fanen gjør, i stedet
   for å strekke det korteste panelet til å etterlate et tomt felt nederst. */
.trening-view .insight-grid {
  align-items: start;
}

.trening-view .weekly-training-panel,
.trening-view .training-programs-panel,
.trening-view .manager-training-panel,
.trening-view .manager-knowledge-panel {
  position: relative;
  overflow: hidden;
}

.trening-view .weekly-training-panel::before,
.trening-view .training-programs-panel::before,
.trening-view .manager-training-panel::before,
.trening-view .manager-knowledge-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hg-accent-training);
  opacity: 0.7;
}

/* Managerinnsikt er et sammendrag av valg tatt over — dempes så det leses
   som bakgrunnsstøtte, ikke som en femte likestilt handling. */
.trening-view .manager-training-panel {
  background: rgba(15, 19, 27, 0.5);
}

.trening-view .manager-training-panel::before {
  opacity: 0.4;
}

.weekly-training-panel {
  border: 1px solid var(--line-strong, #fff);
}

.weekly-training-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.weekly-training-head h2 {
  margin: 0.2rem 0 0;
}

.weekly-training-status,
.weekly-training-recommendation {
  margin: 0.45rem 0 0;
}

.weekly-training-status[data-selected="true"],
.weekly-training-recommendation {
  color: var(--green, #75d69c);
}

.weekly-training-recommendation {
  max-width: 34rem;
  padding-left: 1rem;
  border-left: 2px solid var(--green, #75d69c);
}

.weekly-training-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.weekly-training-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.2);
}

.weekly-training-card.is-selected,
.weekly-training-card.is-recommended {
  border-color: var(--green, #75d69c);
}

.weekly-training-card.is-selected {
  box-shadow: inset 0 0 0 1px var(--green, #75d69c);
}

.weekly-training-card h3,
.weekly-training-card p {
  margin-top: 0;
}

.weekly-training-card h3 {
  margin-bottom: 0.45rem;
}

.weekly-training-card p {
  font-size: 0.88rem;
}

.weekly-training-effect {
  color: rgba(255, 255, 255, 0.78);
}

.weekly-training-support {
  margin-top: auto;
  font-weight: 700;
}

.weekly-training-card[data-support="strong"] .weekly-training-support,
.weekly-training-card[data-support="medium"] .weekly-training-support {
  color: var(--green, #75d69c);
}

.weekly-training-card[data-support="weak"] .weekly-training-support {
  color: #ff9b73;
}

.weekly-training-card button {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.weekly-training-card button:hover:not(:disabled),
.weekly-training-card button:focus-visible {
  border-color: var(--green, #75d69c);
  color: var(--green, #75d69c);
}

.weekly-training-card button:disabled {
  cursor: default;
  opacity: 0.58;
}

@media (max-width: 720px) {
  .weekly-training-head {
    display: block;
  }

  .weekly-training-recommendation {
    margin-top: 0.85rem;
  }
}

.public-start-anchor-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.public-start-anchor-status-row .local-start-status {
  margin: 0;
}

/* Suggested Setups v1 — forklarende, additive oppsettforslag på dashbordet. */
.suggested-setups-intro {
  margin-top: 0;
}

.suggested-setups-groups {
  display: grid;
  gap: 18px;
}

.suggested-setups-group-label {
  margin: 0 0 8px;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}

.suggested-setups-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.suggested-setup-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.72));
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.2);
}

.suggested-setup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.suggested-setup-card h4 {
  margin: 0;
  font-size: 1rem;
}

.suggested-setup-confidence {
  flex: none;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
}

.suggested-setup-confidence[data-level="høy"] {
  color: var(--green, #75d69c);
}

.suggested-setup-confidence[data-level="lav"] {
  color: #ff9b73;
}

.suggested-setup-summary {
  margin: 0;
  font-size: 0.9rem;
}

.suggested-setup-learning-hint {
  margin: 0;
  border-left: 1px solid var(--line);
  padding-left: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.suggested-setup-list-label {
  margin: 4px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
}

.suggested-setup-card ul {
  margin: 2px 0 0;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.35;
}

.suggested-setup-card .suggested-setup-risks {
  color: #ffb59a;
}

/* Training Program Composition v1 — ferdige ukeprogram (flere økter) som
   valgspill. Samme svart/hvite managerkontor-stil med tynne hvite rammer. */
.training-programs-intro {
  margin-top: 0;
}

.training-programs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.training-program-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.72));
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.2);
}

.training-program-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.training-program-card h3 {
  margin: 0;
  font-size: 1rem;
}

.training-program-confidence {
  flex: none;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
}

.training-program-confidence[data-level="høy"] {
  color: var(--green, #75d69c);
}

.training-program-confidence[data-level="lav"] {
  color: #ff9b73;
}

.training-program-summary {
  margin: 0;
  font-size: 0.9rem;
}

.training-program-why {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.78);
}

/* "Forbereder mot" + foldet økt-liste (Playable Manager Flow Polish v1): kort,
   lesbar matchup-etikett og en kompakt details-skuff for øktene. */
.training-program-prepares {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hg-accent-tactics);
}

.training-program-sessions-details > summary {
  cursor: pointer;
  list-style: none;
  margin: 4px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
}

.training-program-sessions-details > summary::-webkit-details-marker {
  display: none;
}

.training-program-sessions-details > summary::after {
  content: "▾";
  margin-left: 6px;
  transition: transform 0.15s ease;
}

.training-program-sessions-details[open] > summary::after {
  transform: rotate(180deg);
}

.training-program-list-label {
  margin: 4px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
}

.training-program-card ul {
  margin: 2px 0 0;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.35;
}

.training-program-card .training-program-risks {
  color: #ffb59a;
}

/* Manager UI Completion Pass v1 — felles valgkort-semantikk.
   Valgkort (treningsprogram, foreslåtte oppsett) skal være tydelig klikkbare
   med markert valgt-tilstand: grønn ramme, «✓ Valgt»-flagg og en valgknapp i
   samme svart/hvite managerkontor-stil som treningsfokus-kortene. */
.training-program-card,
.suggested-setup-card {
  position: relative;
}

.training-program-card.is-selected,
.suggested-setup-card.is-selected {
  border-color: var(--green, #75d69c);
  box-shadow: inset 0 0 0 1px var(--green, #75d69c);
}

.card-selected-flag {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--green, #75d69c);
}

.training-program-select,
.suggested-setup-apply {
  width: 100%;
  margin-top: auto;
  padding: 0.6rem 0.8rem;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.training-program-select:hover:not(:disabled),
.training-program-select:focus-visible,
.suggested-setup-apply:hover:not(:disabled),
.suggested-setup-apply:focus-visible {
  border-color: var(--green, #75d69c);
  color: var(--green, #75d69c);
}

.training-program-card.is-selected .training-program-select,
.suggested-setup-card.is-selected .suggested-setup-apply {
  border-color: var(--green, #75d69c);
  color: var(--green, #75d69c);
}

.training-program-select:disabled,
.suggested-setup-apply:disabled {
  cursor: default;
  opacity: 0.58;
}

/* Off-pitch Parameters v1 — kompakt «Kontekst»-seksjon i managerkontor-stil.
   Lesbare manager-signaler, tynne hvite rammer, ingen gul hovedstil. Fargene
   er dempede statusprikker, ikke en rating-skala. */
.context-headline {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.off-pitch-signal-card {
  grid-column: 1 / -1;
}

.off-pitch-signal-card .panel-heading-row {
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.off-pitch-signal-card .shortcut-button {
  flex: 0 0 auto;
  text-decoration: none;
}

.context-signals,
.off-pitch-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.42));
  border-radius: var(--radius, 12px);
  overflow: hidden;
}

.context-signal {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 0.62rem 0.85rem;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid rgba(255, 255, 255, 0.32);
}

.context-signal-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

.context-signal-text {
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}

/* Dempede statusfarger — alert/watch/good/info. Ikke en tallskala. */
.context-signal[data-severity="alert"] {
  border-left-color: #ff9b73;
}

.context-signal[data-severity="watch"] {
  border-left-color: #e9d27a;
}

.context-signal[data-severity="good"] {
  border-left-color: #75d69c;
}

.context-hidden-hint {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 760px) {
  .context-signals,
  .off-pitch-signal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .off-pitch-signal-card .panel-heading-row {
    display: grid;
  }

  .context-signal {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* UI cleanup: foldbare detaljer der innholdet er langt. Native <details> gir
   kollapserbar visning med tastaturstøtte uten egen JS. Brukes til sekundær
   prosa/logger så hovedpanelene ikke føles overlesset — aldri til primær
   beslutningsinfo eller motorstyrt status. */
.panel-details {
  margin-top: 0.7rem;
  border-top: 1px solid var(--line-soft, rgba(255, 255, 255, 0.18));
  padding-top: 0.6rem;
}

.panel-details > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, rgba(255, 255, 255, 0.66));
}

.panel-details > summary::-webkit-details-marker {
  display: none;
}

.panel-details > summary::before {
  content: "▸";
  font-size: 0.8em;
  transition: transform 0.12s ease;
}

.panel-details[open] > summary::before {
  transform: rotate(90deg);
}

.panel-details > summary:hover,
.panel-details[open] > summary {
  color: var(--text, #fff);
}

.panel-details > summary:focus-visible {
  outline: 2px solid var(--text, #fff);
  outline-offset: 2px;
}

.panel-details > :not(summary) {
  margin-top: 0.6rem;
}

/* Når foldbar-detaljen er hele panelkroppen (summary erstatter overskriften)
   skal den ikke ha skillelinje på toppen. */
.panel-details.is-flush {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.panel-details.is-flush > summary {
  font-size: 0.95rem;
}

/* UI cleanup: tydeligere valgt status. Statuslinja for valgt treningsfokus/
   -program er allerede grønn ved data-selected="true"; en ✓-markør gjør det
   utvetydig at noe ER valgt. Rent presentasjonelt. */
.weekly-training-status[data-selected="true"] {
  font-weight: 700;
}

.weekly-training-status[data-selected="true"]::before {
  content: "✓ ";
}

/* First-Time Playthrough v1 — kompakt førsteuke uten ny hovedfane. */
.first-time-playthrough-card {
  display: grid;
  gap: 1rem;
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.first-time-playthrough-card[hidden] {
  display: none;
}

.first-time-playthrough-card h2 {
  margin: 0.15rem 0 0.35rem;
}

.first-time-brief-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.first-time-brief-grid article,
.mode-choice-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.8rem;
  padding: 0.8rem;
  background: rgba(0, 0, 0, 0.22);
}

.mode-choice-card {
  display: block;
  width: 100%;
  min-height: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.mode-choice-card:hover,
.mode-choice-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.mode-choice-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.mode-choice-card:active,
.mode-choice-card.is-primary-mode {
  border-color: rgba(255, 255, 255, 0.72);
}

.mode-choice-card:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.1);
}

.first-time-brief-grid span,
.first-time-brief-grid small {
  display: block;
  color: var(--muted-text, rgba(255, 255, 255, 0.68));
}

.first-time-brief-grid strong {
  display: block;
  margin: 0.25rem 0;
  font-size: 0.98rem;
}

.assistant-note {
  margin: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.62);
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
}

.first-time-more p {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .first-time-brief-grid {
    grid-template-columns: 1fr;
  }
}

.nearby-recommendations {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--hg-surface-deep);
  padding: 14px;
}

.nearby-recommendations h4 {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: 1.1rem;
}

.nearby-recommendations-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.nearby-recommendation-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
}

.nearby-recommendation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.nearby-recommendation-head h4 {
  margin: 0;
  font-size: 1rem;
}

.nearby-recommendation-distance,
.nearby-recommendation-status {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.nearby-recommendation-status {
  justify-self: start;
  margin: 0;
}

.nearby-recommendation-status[data-unlocked="true"] {
  border-color: var(--good);
  color: var(--good);
}

.nearby-recommendation-summary,
.nearby-recommendation-reason,
.nearby-recommendation-people {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.nearby-recommendation-summary {
  color: var(--text);
  font-weight: 800;
}

@media (max-width: 720px) {
  .nearby-recommendations-list {
    grid-template-columns: 1fr;
  }

  .nearby-recommendation-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Dashboard Declutter Pass v1 — Oversikt skal leses som én spillskjerm:
   1) neste handling, 2) forklaring, 3) kritisk status, 4) klubbuke,
   5) dypere analyser. Ingen nye motorer; kun prioritet og visuell vekt. */
.dashboard-view {
  gap: 14px;
}

.dashboard-view .next-action-strip {
  position: relative;
  border-width: 3px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), var(--panel-strong));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
  padding: clamp(24px, 4vw, 38px);
  margin-bottom: 0;
}

.dashboard-view .next-action-head h2 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.dashboard-view .next-action-primary {
  min-height: 148px;
  padding: clamp(22px, 3.5vw, 34px);
  border-width: 2px;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.08);
}

.dashboard-view .next-action-title {
  font-size: clamp(2rem, 6vw, 3.8rem);
  letter-spacing: -0.045em;
}

.dashboard-view .next-action-hint {
  max-width: 68ch;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
}

.dashboard-view .next-action-secondary {
  padding-top: 2px;
}

.dashboard-view .next-action-chip {
  padding: 6px 11px;
  font-size: 0.78rem;
  opacity: 0.82;
}

.dashboard-view .first-time-playthrough-card,
.dashboard-view .club-topbar,
.dashboard-view .dashboard-support-panel,
.dashboard-view .dashboard-deep-panel {
  box-shadow: none;
}

.dashboard-view .first-time-playthrough-card {
  margin-top: 0;
  border-style: dashed;
  background: rgba(15, 19, 27, 0.48);
}

.dashboard-view .first-time-playthrough-card h2,
.dashboard-view .dashboard-support-panel h2,
.dashboard-view .dashboard-deep-panel h2 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.dashboard-view .first-time-brief-grid article,
.dashboard-view .mode-choice-card {
  background: rgba(0, 0, 0, 0.14);
}

.dashboard-view .mode-choice-card:hover,
.dashboard-view .mode-choice-card:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

.dashboard-view .club-topbar {
  border-color: var(--line-soft);
  background: rgba(15, 19, 27, 0.54);
}

.dashboard-view .dashboard-grid .panel.dashboard-support-panel {
  background: rgba(15, 19, 27, 0.48);
}

.dashboard-view .dashboard-grid .panel.dashboard-deep-panel {
  background: rgba(15, 19, 27, 0.34);
  opacity: 0.92;
}

.dashboard-view .dashboard-deep-panel > .panel-details,
.dashboard-view .dashboard-support-panel > .panel-details {
  margin-top: 0;
}

.dashboard-view .mini-season-actions button,
.dashboard-view .dashboard-shortcuts .shortcut-button,
.dashboard-view .suggested-setup-apply {
  background: transparent;
  border-color: var(--line-soft);
  color: var(--muted);
}

.dashboard-view .mini-season-actions button:hover,
.dashboard-view .dashboard-shortcuts .shortcut-button:hover,
.dashboard-view .suggested-setup-apply:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* ---------- Lag & taktikk: Kampklar 11 + 4-gate ---------- */
.squad-setup-gate {
  display: grid;
  gap: 14px;
  border: 2px solid var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), var(--panel-strong));
}

.squad-setup-gate[data-ready="true"] {
  border-color: var(--good);
}

.squad-setup-gate-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.squad-setup-gate-head h2 {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.squad-setup-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.squad-setup-checklist article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding: 12px 14px;
}

.squad-setup-checklist span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.squad-setup-checklist strong {
  font-size: 1.15rem;
  text-transform: uppercase;
}

/* Feilbruk/duplikater/roller er ikke nøytrale tellere som Startellever/Benk —
   de er signaler om at manageren må rette opp noe. Fargen sier det tydelig i
   stedet for å gjemme det i identiske grå bokser. */
.squad-setup-checklist strong[data-tone="warn"] {
  color: var(--danger);
}

.squad-setup-checklist article:has(strong[data-tone="warn"]) {
  border-color: var(--danger);
  background: rgba(255, 107, 94, 0.08);
}

.squad-setup-checklist strong[data-tone="ok"] {
  color: var(--good);
}

/* Er laget klart, er sjekklista en KVITTERING – ikke dagens hovedsak. I full
   størrelse spiste den hele førsteskjermen på telefon, så formasjonsvelgeren
   og banen havnet under skjermkanten: det så ut som formasjonene var borte.
   Trenger laget fortsatt grep, beholder kortet full størrelse — da ER det
   hovedsaken. */
.squad-setup-gate[data-ready="true"] {
  gap: 10px;
}

.squad-setup-gate[data-ready="true"] .squad-setup-gate-head h2 {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.squad-setup-gate[data-ready="true"] #squadSetupGateHint {
  display: none;
}

.squad-setup-gate[data-ready="true"] .squad-setup-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.squad-setup-gate[data-ready="true"] .squad-setup-checklist article {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
}

.squad-setup-gate[data-ready="true"] .squad-setup-checklist span {
  font-size: 0.68rem;
}

.squad-setup-gate[data-ready="true"] .squad-setup-checklist strong {
  font-size: 0.9rem;
}

.tactic-system-details {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-strong);
}

.tactic-system-details summary {
  cursor: pointer;
  padding: 12px 16px;
  color: var(--text);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tactic-system-details .tactic-system {
  border-width: 1px 0 0;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 760px) {
  .squad-setup-gate-head {
    display: grid;
  }
}

/* Training Choice Polish v1 — tydelig valgport mellom Innboks og Kamp. */
.training-choice-gate {
  border: 1px solid var(--green, #75d69c);
}

.training-choice-gate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.training-choice-gate-head h2 {
  margin: 0.2rem 0 0;
}

.training-choice-status {
  flex: none;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.72));
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffb59a;
}

.training-choice-status[data-selected="true"] {
  border-color: var(--green, #75d69c);
  color: var(--green, #75d69c);
}

.training-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.training-choice-grid article {
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.8rem;
}

.training-choice-grid span,
.training-choice-card-label,
.training-program-section-label {
  display: block;
  margin: 0 0 0.35rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.training-choice-grid strong {
  display: block;
  line-height: 1.35;
}

.training-choice-selected-summary {
  margin: 1rem 0 0;
  color: var(--text, #fff);
  font-weight: 700;
}

.training-go-match {
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--green, #75d69c);
  background: transparent;
  color: var(--green, #75d69c);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.training-program-section-label {
  margin-top: 0.4rem;
}

@media (max-width: 720px) {
  .training-choice-gate-head {
    display: block;
  }

  .training-choice-status {
    display: inline-block;
    margin-top: 0.8rem;
  }
}

.mode-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-color: var(--line-soft);
  background: rgba(15, 19, 27, 0.52);
}

.mode-status-card[hidden] {
  display: none;
}

.mode-status-card h2 {
  margin: 0.15rem 0 0.25rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.mode-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.mode-status-meta span {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  color: var(--muted-text, rgba(255, 255, 255, 0.72));
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .mode-status-card {
    align-items: stretch;
    flex-direction: column;
  }

  .mode-status-meta {
    justify-content: flex-start;
  }
}


.league-club-card {
  margin-bottom: 16px;
  border-color: rgba(70, 214, 140, 0.38);
  background: linear-gradient(135deg, rgba(27, 36, 50, 0.92), rgba(13, 18, 27, 0.78));
}

.league-club-card[hidden] {
  display: none;
}

.league-club-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.league-club-card-head h2 {
  margin: 0.15rem 0 0.25rem;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.league-club-status {
  border: 1px solid rgba(70, 214, 140, 0.42);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  color: #d9ffe8;
  background: rgba(70, 214, 140, 0.12);
  font-size: 0.88rem;
  white-space: nowrap;
}

.league-club-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.league-club-card-grid article {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  padding: 0.8rem;
  background: rgba(0, 0, 0, 0.18);
}

.league-club-card-grid span,
.league-club-card-grid strong {
  display: block;
}

.league-club-card-grid span {
  color: var(--muted-text, rgba(255, 255, 255, 0.7));
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}

.league-club-card-grid strong {
  color: var(--text, #fff);
  font-size: 0.95rem;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .league-club-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .league-club-card-head {
    flex-direction: column;
  }

  .league-club-card-grid {
    grid-template-columns: 1fr;
  }
}

/* League onboarding: gjør ligaspill til en tydelig pre-season flyt før dashboardet. */
.league-onboarding-panel[hidden] {
  display: none;
}

.league-onboarding-panel {
  margin-bottom: 16px;
  border-color: rgba(70, 214, 140, 0.32);
}

.league-onboarding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.league-onboarding-head h2 {
  margin: 0.15rem 0 0.35rem;
}

.league-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.league-onboarding-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 94px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.league-onboarding-steps li > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
}

.league-onboarding-steps strong,
.league-onboarding-steps small {
  display: block;
}

.league-onboarding-steps strong {
  margin-bottom: 4px;
  font-size: 0.82rem;
  line-height: 1.2;
}

.league-onboarding-steps small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.league-onboarding-steps li.is-done {
  border-color: rgba(70, 214, 140, 0.42);
  background: rgba(70, 214, 140, 0.08);
}

.league-onboarding-steps li.is-done > span {
  border-color: rgba(70, 214, 140, 0.72);
  color: var(--hg-accent-tactics);
}

@media (max-width: 980px) {
  .league-onboarding-head {
    display: grid;
  }

  .league-onboarding-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .league-onboarding-steps {
    grid-template-columns: 1fr;
  }
}

/* Manager Game Feel Pass v1 — portal, squad wall og avdelingsfølelse uten ny motor. */
.manager-portal {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) repeat(2, minmax(180px, 1fr));
  gap: var(--gap);
  margin: 0 0 var(--gap);
}

.portal-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  min-height: 150px;
  border: 1px solid var(--hg-border-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(23, 28, 39, 0.9), rgba(10, 14, 22, 0.88));
  color: var(--text);
  padding: 18px;
  text-align: left;
  box-shadow: var(--shadow);
}

button.portal-card {
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

button.portal-card:hover {
  transform: translateY(-2px);
  border-color: var(--hg-border-strong);
  background: linear-gradient(180deg, rgba(30, 37, 51, 0.95), rgba(12, 17, 27, 0.92));
}

.portal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--portal-accent, var(--hg-border-strong));
}

.portal-club-card { --portal-accent: var(--hg-accent-tactics); }
.portal-match-card { --portal-accent: var(--hg-accent-kamp); }
.portal-inbox-card { --portal-accent: var(--hg-accent-board); }

.portal-card h2,
.portal-card strong {
  display: block;
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.portal-card small,
.portal-card .muted-text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.pitch-stage {
  background:
    linear-gradient(180deg, rgba(8, 28, 17, 0.5), rgba(15, 19, 27, 0.82)),
    var(--panel);
}

.pitch {
  border-width: 2px;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55), 0 20px 50px rgba(0, 0, 0, 0.42);
}

.roster-readiness-panel {
  background: linear-gradient(180deg, rgba(15, 19, 27, 0.88), rgba(7, 10, 16, 0.92));
}

.bench-player-list {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.bench-player-card {
  min-height: 96px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 48%),
    rgba(4, 6, 11, 0.72);
}

.bench-player-card::before {
  content: "Spillerkort";
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dept-hero,
.inbox-signal-gate,
.inbox-thread-panel {
  border-color: var(--hg-border-soft);
  background: linear-gradient(180deg, rgba(18, 23, 34, 0.88), rgba(8, 11, 18, 0.9));
}

.message-card {
  position: relative;
  border-color: var(--hg-border-soft);
  background: linear-gradient(180deg, rgba(23, 28, 39, 0.9), rgba(8, 11, 18, 0.92));
}

.message-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hg-accent-inbox);
  opacity: 0.86;
}

@media (max-width: 980px) {
  .manager-portal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .manager-portal {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .portal-card {
    min-height: 118px;
    padding: 15px;
  }
}

/* Manager Feel QA Pass v1: gjør første skjerm mer managerkontor enn dashboard. */
.manager-portal {
  grid-template-columns: minmax(280px, 1.55fr) repeat(2, minmax(190px, 1fr));
  align-items: stretch;
}

.portal-card {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(255, 255, 255, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(10, 13, 20, 0.98), rgba(3, 5, 9, 0.96));
}

.portal-club-card {
  min-height: 190px;
  padding: 22px;
}

.portal-match-card {
  border-color: rgba(255, 255, 255, 0.42);
}

.portal-match-card strong {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.portal-inbox-card {
  opacity: 0.92;
}

.dashboard-view .dashboard-grid {
  margin-top: 4px;
  opacity: 0.94;
}

.dashboard-view .dashboard-grid .panel {
  border-color: rgba(255, 255, 255, 0.18);
}

.detail-metrics-panel,
.manager-detail-panel,
.suggested-setups-panel {
  opacity: 0.92;
}

.detail-metrics-panel .metric-grid article {
  background: rgba(3, 5, 9, 0.68);
}

@media (max-width: 980px) {
  .manager-portal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .manager-portal {
    grid-template-columns: 1fr;
  }
}

/* Information Hierarchy Pass v1: toppflater skal være korte, visuelle og handlingsrettede. */
.panel > p.muted-text,
.portal-card small,
.dept-hero-lede,
.admin-side .muted-text,
.inbox-signal-gate p,
.pitch-hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.panel-details-wrap {
  margin-top: var(--gap);
}

.panel-details-wrap > summary,
.panel-details > summary {
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.dashboard-deep-panel,
.club-week-event-log-panel,
.manager-training-panel,
.manager-knowledge-panel {
  margin-top: 0;
}

.manager-portal,
.squad-setup-checklist,
.training-choice-grid,
  .admin-board {
  align-items: stretch;
}

.matchday-actions .is-primary,
.primary-action-button,
.primary-button {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.25);
}

.inbox-archive .message-list,
.panel-details-wrap .insight-grid {
  margin-top: 14px;
}

/* ==================================================================
   APP SHELL v2 — telefon-app: fast ramme, én skjerm per seksjon
   ------------------------------------------------------------------
   Valgt retning (bruker): phone-style, topp-faner, streng «én skjerm».
   Selve siden ruller aldri (fast header + nav + footer). Hver seksjon
   er én full skjerm; skjermer får kontrollert intern scroll KUN som
   sikring mot avkutting (aldri web-scroll på hele siden). Lagt sist i
   fila så app-rammen vinner over den eldre web-layouten.
   ================================================================== */

/* Bredere app-ramme: fyll skjermen opp til en komfortabel maksbredde i stedet
   for en smal telefonkolonne. Detaljer flyttes til popup-er, så flatene kan
   puste. */
:root { --app-max: 1080px; }

html { height: 100%; }

body {
  height: 100dvh;
  min-height: 0;
  max-width: var(--app-max);
  margin-inline: auto;
  overflow: hidden;
  display: grid;
  /* header · nav · modus-linje · skjermområde · fotnote.
     Radene tildeles EKSPLISITT under. Uten det blir de fordelt på rekkefølgen
     av synlige barn — og da flyttet en skjult modus-linje (eller de seksten
     popupene som bor på body-nivå) hele oppsettet: footeren fikk den
     fleksible raden, og skjermområdet kollapset til 0 piksler. */
  /* header · hovedmeny · modus-linje · kontorets underfaner · skjermområde · fotnote */
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  border-inline: 1px solid var(--hg-border-soft);
  background: transparent;
}

/* Full bredde innenfor rammen (overstyrer web-bredden på 1240px). */
.site-header,
.site-footer,
.app-shell,
.main-nav-layout {
  width: 100% !important;
  margin-inline: 0 !important;
}

/* Header: kompakt app-topplinje. */
.site-header { padding: 8px 10px 2px; }
.site-header .header-inner { padding: 8px 12px; row-gap: 0; }
.site-header .eyebrow { font-size: 0.62rem; }
.site-header h1 { font-size: 1.05rem; }
.site-header .lede { display: none; }

/* Nav: faste, kompakte topp-faner som fyller bredden. */
.main-nav { padding: 4px 6px; }
.main-nav-inner { gap: 2px; }
.main-nav .nav-group-label { display: none; }
.main-nav .nav-tab { padding: 6px 4px; min-width: 0; flex: 1 1 0; }
.main-nav .nav-tab .nav-label { font-size: 0.58rem; }
.main-nav .nav-icon { width: 20px; height: 20px; }

/* Skjermområdet: fast; ingen egen scroll på app-shell. */
.app-shell {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

/* Hver seksjon = én full skjerm i skjermområdet. */
.app-shell > .tab-section {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.app-shell > .tab-section[hidden] { display: none !important; }

/* Paneler tettere i app-rammen. */
.app-shell .panel { padding: 12px; border-radius: 12px; }
.app-shell .panel h2 { font-size: 1.05rem; }

/* Footer: fast bunnstripe (Neste handling). */
.site-footer { padding: 6px 10px 9px; }
.site-footer > p { display: none; }
.site-footer .next-action-strip { margin: 0; }

/* Onboarding: egen fullskjerm over hele rammen. */
.onboarding-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow-y: auto;
  background:
    radial-gradient(900px 480px at 50% -140px, var(--hg-bg-glow), transparent 70%),
    linear-gradient(180deg, #0a0e16 0%, #05070c 100%);
}
.onboarding-screen[hidden] { display: none !important; }
.onboarding-card {
  width: min(100%, var(--app-max));
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 16px;
  background: var(--hg-panel-bg);
  padding: 20px 18px;
}
.onboarding-brand h1 { font-size: clamp(1.5rem, 7vw, 2rem); margin: 4px 0 2px; }
.onboarding-screen .mode-choice-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onboarding-screen .mode-choice-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
}
.onboarding-screen .mode-choice-card.is-primary-mode {
  border-color: var(--hg-accent-tactics);
  background: rgba(70,214,140,.08);
}
.onboarding-screen .mode-choice-card strong { font-size: 1.1rem; }
.onboarding-screen .mode-choice-card span { font-size: 0.6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hg-text-muted); }
.onboarding-screen .assistant-note { font-size: 0.8rem; margin: 0; color: var(--hg-text-muted); }

/* App-rammen bruker topp-faner (brukervalg): nøytraliser den gamle mobile
   «fast bunn-nav»-regelen så navet blir værende i topp-rekka i grid-rammen. */
body { padding-bottom: 0 !important; }
.main-nav {
  position: static !important;
  inset: auto !important;
  border-top: none;
  border-bottom: 1px solid var(--hg-border-soft);
  background: transparent;
}
.nav-office-menu {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  right: 8px !important;
}
.nav-tab { min-width: 0 !important; padding: 6px 3px !important; }

/* Grid-/flex-barn må kunne krympe under egen min-content, ellers sprenger et
   bredt panel hele app-rammen (horisontal overflow → avkuttet innhold). */
body { grid-template-columns: minmax(0, 1fr); }
.app-shell { min-width: 0; }
.app-shell > .tab-section { min-width: 0; }

/* Topp-faner i 400px: la etikettene krympe/klippe i stedet for å overlappe. */
.main-nav-inner { gap: 0; }
.main-nav .nav-tab {
  min-width: 0 !important;
  overflow: hidden;
  padding: 6px 2px !important;
  gap: 2px;
}
.main-nav .nav-tab .nav-label {
  font-size: 0.48rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.main-nav .nav-icon { width: 19px; height: 19px; }
/* Kontor-/senere-menyen: kompakt ikon-knapp, ikke bred tekstknapp. */
.nav-office { flex: 0 0 auto; }
.nav-office-toggle { padding: 6px 6px !important; }
.nav-office-toggle .nav-label { display: none; }
.nav-office-toggle-caret { font-size: 0.7rem; }

/* Gi tab-rekka mest mulig plass: minimer «senere»-menyknappen. */
.nav-office-toggle { min-width: 0 !important; }
.main-nav .nav-tab { padding-inline: 1px !important; }

/* ==================================================================
   POPUP / MODAL-SYSTEM
   Detaljer flyttes ut av flatene og inn i popup-er, så hver skjerm
   viser lite og er lett å lese. Åpnes med [data-modal-open="id"],
   lukkes med [data-modal-close], backdrop-klikk eller Esc.
   ================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 10, 0.72);
}
.modal-overlay[hidden] { display: none !important; }
.modal {
  width: min(94vw, 680px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--hg-panel-bg-strong);
  border: 1px solid var(--hg-border-strong);
  border-radius: 16px;
  padding: 16px 18px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.modal-head {
  position: sticky;
  top: -16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -18px 12px;
  padding: 14px 18px 10px;
  background: var(--hg-panel-bg-strong);
  border-bottom: 1px solid var(--hg-border-soft);
}
.modal-head h3 { margin: 0; font-size: 1.15rem; }
.modal-head .eyebrow { margin: 0 0 2px; }
.modal-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hg-border-soft);
  background: transparent;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.08); }

/* Knapperad som åpner popup-er. */
.popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.popup-actions button {
  flex: 1 1 auto;
  padding: 11px 14px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.popup-actions button:hover { background: rgba(255, 255, 255, 0.07); }

/* ---------- Kompakt footer + bredere flatebruk (fortsettelse) ---------- */
/* «Neste handling» var en 200px-blokk nederst på hver skjerm. Gjør den til en
   tynn, horisontal stripe så skjermene får tilbake høyde. */
.site-footer {
  display: block !important;
  padding: 6px 10px calc(7px + env(safe-area-inset-bottom));
}
.next-action-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.next-action-strip .next-action-primary .next-action-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.next-action-strip .next-action-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.next-action-strip .next-action-primary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 7px 12px;
  text-align: left;
  min-width: 0;
}
.next-action-strip .next-action-primary .next-action-tag { flex: 0 0 auto; }
.next-action-strip .next-action-primary .next-action-title { font-size: 0.98rem; margin: 0; }
.next-action-strip .next-action-primary .next-action-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--hg-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Sekundære «neste steg» hører hjemme inne i flatene, ikke i footeren. */
.next-action-strip .next-action-secondary { display: none; }

/* Kontor: la de to statuskortene stå side om side i den brede rammen. */
.dashboard-view .league-club-card,
.dashboard-view .mode-status-card {
  display: inline-block;
}

/* Popup-innhold puster: stables i én kolonne så tette rutenett (metrics) får
   full bredde i stedet for å brekke etikettene tegn for tegn. */
.modal .insight-grid { grid-template-columns: 1fr; gap: 12px; }
.modal .report-columns { grid-template-columns: 1fr 1fr; }
.modal .metric-grid,
.modal .detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal .panel { padding: 12px; }

/* ---------- Innstillinger (tannhjul i header + popup-liste) ---------- */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.header-title { min-width: 0; }
.settings-button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.settings-button:hover { background: rgba(255, 255, 255, 0.08); }
.settings-list { display: flex; flex-direction: column; gap: 8px; }
.settings-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}
.settings-item:hover { background: rgba(255, 255, 255, 0.07); }
.settings-item strong { font-size: 1rem; }
.settings-item small { color: var(--hg-text-muted); }
.settings-item.is-danger { border-color: rgba(255, 107, 94, 0.4); }
.settings-item.is-danger strong { color: var(--hg-accent-kamp, #ff6b5e); }
.settings-status { margin: 12px 0 0; color: var(--hg-accent-tactics); font-weight: 700; }
.settings-reset-confirm {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 107, 94, 0.4);
  border-radius: 12px;
}
.settings-reset-actions { display: flex; gap: 8px; margin-top: 10px; }

/* «Bruk denne formasjonen» i formasjonsbiblioteket. */
.hgfm-apply-formation {
  display: block;
  width: 100%;
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid var(--hg-accent-tactics);
  border-radius: 12px;
  background: rgba(70, 214, 140, 0.12);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.hgfm-apply-formation:hover { background: rgba(70, 214, 140, 0.2); }

/* ---------- Kontorets avdelinger (kontorfunksjonene tilbake på Kontor) ---------- */
.kontor-departments { margin: 0; }
.kontor-departments-label { margin: 0 0 8px; }
.kontor-departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.dept-link-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}
.dept-link-card:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--hg-border-strong); }
.dept-link-card .eyebrow { margin: 0; }
.dept-link-card strong { font-size: 1.05rem; }
.dept-link-card small { color: var(--hg-text-muted); }

/* «Bruk formasjon»-status (låst-tilbakemelding). */
.hgfm-apply-status { margin: 4px 0 0; font-size: 0.85rem; color: var(--hg-text-muted); min-height: 1em; }
.hgfm-apply-status[data-tone="warn"] { color: var(--hg-accent-warning, #ff9d4d); }

/* Auto-fyll tropp (never-stuck-uten-History-Go). */
.autofill-squad { width: 100%; margin: 4px 0 4px; }
.autofill-squad-note { margin: 0 0 8px; font-size: 0.8rem; }

/* ---------- Onboarding steg 2: opprett klubb ---------- */
.onboarding-club-step[hidden] { display: none !important; }
.club-form { display: flex; flex-direction: column; gap: 6px; }
.club-form-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hg-text-muted);
  margin-top: 6px;
}
.club-form-optional { text-transform: none; letter-spacing: 0; }
.club-form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.club-form-input:focus {
  outline: none;
  border-color: var(--hg-accent-tactics);
  background: rgba(70, 214, 140, 0.06);
}
.club-form-error { margin: 2px 0 0; color: var(--hg-accent-kamp, #ff6b5e); font-size: 0.85rem; }
.club-form-error[hidden] { display: none !important; }
.club-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.club-form-actions .primary-action-button { flex: 1 1 auto; }

/* ---------- Draft: velg troppen din ---------- */
.draft-status-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.draft-count { margin: 0; font-weight: 800; font-size: 1.05rem; }
.draft-positions { margin: 0; font-size: 0.85rem; }
.draft-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.draft-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "pos name" "pos meta";
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}
.draft-card:hover { background: rgba(255, 255, 255, 0.07); }
.draft-card.is-selected { border-color: var(--hg-accent-tactics); background: rgba(70, 214, 140, 0.12); }
.draft-card-pos {
  grid-area: pos;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 7px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 8px;
  color: var(--hg-text-muted);
}
.draft-card.is-selected .draft-card-pos { color: var(--hg-accent-tactics); border-color: var(--hg-accent-tactics); }
.draft-card strong { grid-area: name; font-size: 0.95rem; }
.draft-card small { grid-area: meta; color: var(--hg-text-muted); font-size: 0.75rem; }
.draft-actions { display: flex; gap: 8px; }
.draft-actions .primary-action-button { flex: 1 1 auto; }
.draft-actions .primary-action-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Landslagsmodus: nasjonsvalg ---------- */
.national-team-panel[hidden] { display: none !important; }
.national-nation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.nation-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}
.nation-card:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.nation-card.is-selected { border-color: var(--hg-accent-tactics); background: rgba(70, 214, 140, 0.12); }
.nation-card.is-locked { opacity: 0.55; cursor: not-allowed; }
.nation-card strong { font-size: 1.05rem; }
.nation-card small { color: var(--hg-text-muted); }

/* ---------- Mesterskap: EM og VM ---------- */
.tournament-panel[hidden] { display: none !important; }
.tournament-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.tournament-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  min-width: 0;
}
.tournament-choice:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--hg-accent-tactics); }
.tournament-choice strong { font-size: 1.05rem; }
.tournament-choice small { color: var(--hg-text-muted); font-size: 0.78rem; }
.tournament-choice-frame { color: var(--hg-text-muted); font-size: 0.8rem; line-height: 1.35; }

.tournament-active { display: grid; gap: 12px; margin-top: 10px; min-width: 0; }
.tournament-group { min-width: 0; overflow-x: auto; }
.tournament-group h3 { margin: 0 0 6px; font-size: 0.95rem; }
.tournament-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tournament-table th,
.tournament-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hg-border-soft);
  white-space: nowrap;
}
.tournament-table th { color: var(--hg-text-muted); font-weight: 500; font-size: 0.75rem; }
.tournament-table tr.is-manager td { background: rgba(70, 214, 140, 0.12); font-weight: 600; }

.tournament-bracket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  min-width: 0;
}
.tournament-bracket-stage { min-width: 0; }
.tournament-bracket-stage h4 { margin: 0 0 4px; font-size: 0.8rem; color: var(--hg-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tournament-bracket-match { margin: 0 0 3px; font-size: 0.82rem; color: var(--hg-text-muted); }
.tournament-bracket-match.is-manager { color: var(--text); font-weight: 600; }

.tournament-actions { display: flex; gap: 8px; }
.tournament-history { margin-top: 12px; }
.tournament-history h3 { margin: 0 0 6px; font-size: 0.95rem; }
.tournament-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tournament-history li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.tournament-history li span { color: var(--hg-text-muted); }

/* ---------- Kampplan: bytte underveis i kampen ---------- */
/* Planbyttet står UNDER managergrepene: det er det større taktiske valget, ikke
   et alternativ til hendelsen foran deg. Sammenslått som standard, slik at
   kampen fortsatt har én tydelig vei videre. */
.match-plan-switcher {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-strong);
  margin-top: 10px;
  min-width: 0;
}

.match-plan-switcher > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 0.88rem;
}

.match-plan-lead {
  margin: 0;
  padding: 0 14px 8px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.match-plan-log {
  list-style: none;
  margin: 0;
  padding: 0 14px 8px;
  display: grid;
  gap: 6px;
}

.match-plan-log li {
  display: grid;
  gap: 2px;
  border-left: 3px solid var(--line);
  padding-left: 8px;
  font-size: 0.78rem;
}

.match-plan-log li.is-positive { border-left-color: var(--good); }
.match-plan-log li.is-negative { border-left-color: var(--danger); }
.match-plan-log li span { color: var(--muted); }

.match-plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.match-plan-option {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  min-width: 0;
}

.match-plan-option:hover:not(:disabled) { border-color: var(--text); }
.match-plan-option.is-fitting { border-color: var(--good); }
.match-plan-option.is-current {
  background: rgba(70, 214, 140, 0.12);
  border-color: var(--good);
  cursor: default;
}

.match-plan-option strong { font-size: 0.9rem; }
.match-plan-option small { color: var(--muted); font-size: 0.75rem; line-height: 1.3; }

.match-plan-meta {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Motstanderens justering: den viktigste nye opplysningen i kampen, så den
   står øverst i hendelsen og ikke gjemt i en logg. */
.matchday-opponent-shift {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--hg-accent-tactics);
  border-radius: 8px;
  background: rgba(70, 214, 140, 0.08);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* ---------- Resultattavle i kampen ---------- */
.matchday-scoreboard {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
}

.matchday-score {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.matchday-score[data-state="leading"] { color: var(--good); }
.matchday-score[data-state="behind"] { color: var(--danger); }

.matchday-clock {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.matchday-goal-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.matchday-goal-list li {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
}

/* ---------- Kampen minutt for minutt ---------- */
.matchday-minutes {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-strong);
  margin: 0 0 10px;
  min-width: 0;
}

.matchday-minutes > summary {
  cursor: pointer;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 0.84rem;
}

.matchday-minute-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
  display: grid;
  gap: 3px;
  /* Lange kamper skal ikke skyve resten av skjermen ned. */
  max-height: 320px;
  overflow-y: auto;
}

.matchday-minute {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.matchday-minute-clock {
  color: var(--muted);
  font-weight: 900;
  font-size: 0.72rem;
  text-align: right;
}

.matchday-minute-text { min-width: 0; }

.matchday-minute.is-goal {
  background: rgba(70, 214, 140, 0.12);
  font-weight: 800;
}

.matchday-minute.is-goal.is-against {
  background: rgba(255, 107, 94, 0.12);
}

.matchday-minute.is-chance { color: var(--muted); }

.matchday-minute.is-decision,
.matchday-minute.is-plan {
  border-left: 3px solid var(--hg-accent-tactics);
  background: rgba(255, 255, 255, 0.03);
}

.matchday-minute.is-opponent {
  border-left: 3px solid var(--danger);
  background: rgba(255, 255, 255, 0.03);
}

/* Eksplisitt radplassering i app-rammen. Popupene er `position: fixed` og
   deltar ikke i gridet; alt annet har sin faste rad, uansett hva som er skjult.
   Merk `nav.main-nav` og `nav.app-subnav` hver for seg: en generisk
   `body > nav` ga underfanestripa samme rad som hovedmenyen, og stripa ble
   tegnet OPPÅ den. Skjermområdet forsvant i samme slengen. */
body > .site-header { grid-row: 1; }
body > nav.main-nav { grid-row: 2; }
body > .secondary-mode-bar { grid-row: 3; }
body > nav.app-subnav { grid-row: 4; }
body > .app-shell { grid-row: 5; }
body > .site-footer { grid-row: 6; }

/* ---------- Live-avspilling av kampen ---------- */
.matchday-live-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}

.matchday-live-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text);
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.matchday-live-button:hover { border-color: var(--text); }
.matchday-live-button.is-secondary { color: var(--muted); }

.matchday-live-speeds {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.matchday-live-speed {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 4px 9px;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.matchday-live-speed.is-active {
  border-color: var(--hg-accent-tactics);
  color: var(--text);
}

/* Klokka pulserer mens kampen går, så det er tydelig at den lever. */
.matchday-clock[data-running="true"] {
  color: var(--good);
  animation: matchday-clock-tick 1s ease-in-out infinite;
}

@keyframes matchday-clock-tick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .matchday-clock[data-running="true"] { animation: none; }
}

/* ============================================================
   Faneflater skal RULLE, ikke krympe.

   `.app-shell > .tab-section` er `height: 100%` + `display: flex;
   flex-direction: column` + `overflow-y: auto`. I en kolonne-flexboks med fast
   høyde har hvert barn `flex-shrink: 1` som standard — så når innholdet var
   høyere enn skjermen, ble panelene klemt sammen i stedet for at flata rullet.
   Verst på avdelingene: `.dept-hero` har `overflow: hidden`, så den falt til
   38px (bare padding) og spiste både overskrift, ingress og knappene sine. Det
   så ut som en tynn stripe med bare en eyebrow — ingen feilmelding, ingenting
   i DOM-en som manglet.

   Barna skal beholde sin naturlige høyde; det er seksjonen som ruller.
   ============================================================ */
.app-shell > .tab-section > * {
  flex: 0 0 auto;
}

/* ============================================================
   Statistikk-flata og klikkbar ukerytme.
   ============================================================ */
.stats-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.stats-highlight-grid article {
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.stats-highlight-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stats-highlight-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 1.15rem;
}

.stats-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stats-sort-button {
  border: 1px solid var(--hg-border-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 4px 11px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.stats-sort-button.is-active {
  border-color: var(--hg-accent-tactics);
  color: var(--text);
}

/* Brede tabeller ruller i sin egen boks — flata skal aldri rulle sidelengs. */
.player-stats-table {
  margin-top: 12px;
  overflow-x: auto;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.stats-table th,
.stats-table td {
  border-bottom: 1px solid var(--hg-border-soft);
  padding: 7px 5px;
  text-align: right;
  white-space: nowrap;
}

/* Navnekolonnen får plassen som blir til overs, og kutter heller enn å skyve
   mål/målgivende ut av skjermen på en telefon. */
.stats-table th:nth-child(2),
.stats-table td:nth-child(2) {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-board-goal {
  margin-top: 10px;
  font-size: 0.82rem;
}

.stats-table thead th {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stats-table th:nth-child(2),
.stats-table td:nth-child(2),
.stats-table th:nth-child(3),
.stats-table td:nth-child(3) {
  text-align: left;
}

/* Ukerytmen er navigasjon, ikke pynt: stegene ser ut som det de er. */
.club-week-step-label {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.club-week-step-label:hover,
.club-week-step-label:focus-visible {
  text-decoration: underline;
}

/* ============================================================
   Innbytte underveis. Samme visuelle språk som kampplan-velgeren:
   et grep, ikke en innstilling.
   ============================================================ */
.match-subs {
  margin-top: 10px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.match-subs > summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.86rem;
}

.match-subs-log {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.match-subs-log li {
  border-left: 3px solid var(--hg-border-soft);
  padding-left: 9px;
  font-size: 0.8rem;
  display: grid;
  gap: 2px;
}

.match-subs-log li.is-positive { border-left-color: var(--good); }
.match-subs-log li.is-negative { border-left-color: var(--bad); }
.match-subs-log li span { color: var(--muted); }

.match-subs-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  margin: 8px 0 4px;
}

.match-subs-player {
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--hg-border-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
}

.match-subs-player small { color: var(--muted); font-size: 0.7rem; }
.match-subs-player.is-current { border-color: var(--hg-accent-tactics); }
.match-subs-player.is-fitting { border-color: var(--good); }

/* ============================================================
   Troppens tilstand: slitasje og skader. Aldri rødt for «dårlig
   spiller» — bare for «du har brukt ham hardt».
   ============================================================ */
.squad-condition-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.squad-condition-list li {
  display: grid;
  gap: 2px;
  border-left: 3px solid var(--hg-border-soft);
  padding-left: 10px;
  font-size: 0.84rem;
}

.squad-condition-list li span { color: var(--muted); font-size: 0.78rem; }
.squad-condition-list li.is-tired { border-left-color: var(--warn, #d8a13a); }
.squad-condition-list li.is-injured { border-left-color: var(--bad); }

.player-condition {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.player-condition.is-tired { color: var(--warn, #d8a13a); }
.player-condition.is-injured { color: var(--bad); }

/* ============================================================
   Scenariokort: hvert kort forklarer seg selv — epoke, utfordring
   og hva du skal lære — ikke bare et navn og en knapp.
   ============================================================ */
.scenario-card {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid var(--hg-border-soft);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px 16px;
}

.scenario-card.is-active { border-color: var(--good); }
.scenario-card > span:first-child {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scenario-card strong { font-size: 1.15rem; }
.scenario-card > small { color: var(--muted); font-size: 0.78rem; }
.scenario-card p { margin: 0; font-size: 0.84rem; }

.scenario-challenge {
  border-left: 3px solid var(--hg-accent-tactics);
  padding-left: 9px;
}

.scenario-learning,
.scenario-opponents { font-size: 0.76rem; }
.scenario-card button { margin-top: 6px; }

/* ============================================================
   Sesongdom og merittliste. Fargen sier hva styret mener — aldri
   hva spillerne er verdt.
   ============================================================ */
.season-review-panel { border-left: 3px solid var(--hg-border-soft); }
.season-review-panel[data-verdict="triumph"],
.season-review-panel[data-verdict="exceeded"] { border-left-color: var(--good); }
.season-review-panel[data-verdict="below"] { border-left-color: var(--warn, #d8a13a); }
.season-review-panel[data-verdict="failed"] { border-left-color: var(--bad); }

.season-review-board {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 0.88rem;
}

.season-review-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.season-review-list li {
  border-left: 2px solid var(--hg-border-soft);
  padding-left: 9px;
  font-size: 0.83rem;
}

.season-review-list.is-highlights li {
  border-left-color: var(--hg-accent-tactics);
  color: var(--muted);
}

.season-archive-table { margin-top: 12px; overflow-x: auto; }
.season-archive-table .is-warning th,
.season-archive-table .is-warning td { color: var(--warn, #d8a13a); }
.season-archive-table .is-sacked th,
.season-archive-table .is-sacked td { color: var(--bad); }

/* ============================================================
   Før-sesong-stegene: navigasjon, ikke en oppsummeringsboks.
   Panelet skjuler seg selv når alle stegene er klare.
   ============================================================ */
.league-onboarding-steps {
  list-style: none;
  counter-reset: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.league-onboarding-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  text-align: left;
  border: 1px solid var(--hg-border-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 9px 11px;
  cursor: pointer;
}

.league-onboarding-step > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--hg-border-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.league-onboarding-step small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.league-onboarding-steps .is-done .league-onboarding-step { opacity: 0.62; }
.league-onboarding-steps .is-done .league-onboarding-step > span {
  border-color: var(--good);
  color: var(--good);
}

/* Forbundets dom: samme språk som styrets sesongdom. */
.federation-verdict {
  margin-top: 12px;
  border-left: 3px solid var(--hg-border-soft);
  padding-left: 11px;
}
.federation-verdict[data-verdict="triumph"],
.federation-verdict[data-verdict="exceeded"] { border-left-color: var(--good); }
.federation-verdict[data-verdict="below"] { border-left-color: var(--warn, #d8a13a); }
.federation-verdict[data-verdict="failed"] { border-left-color: var(--bad); }
.federation-verdict-message { margin: 6px 0 0; font-weight: 700; font-size: 0.85rem; }

/* ============================================================================
   UKENS PLAN — treningsuka som fire steg, ikke tre parallelle lister
   ========================================================================== */
.training-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.training-plan-head h2 {
  margin: 0.2rem 0 0;
}

.training-plan-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.training-plan-load {
  flex: none;
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

.training-plan-load[data-level="lett"] { border-color: var(--green, #75d69c); color: var(--green, #75d69c); }
.training-plan-load[data-level="hard"] { border-color: var(--warn, #d8a13a); color: var(--warn, #d8a13a); }
.training-plan-load[data-level="svært_hard"] { border-color: var(--bad, #e2765f); color: var(--bad, #e2765f); }

/* Samsvaret mellom ramme og tema er den viktigste setningen på flata. */
.training-plan-coherence {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  background: rgba(0, 0, 0, 0.18);
  line-height: 1.45;
}

.training-plan-coherence[data-level="samsvar"] { border-left-color: var(--green, #75d69c); }
.training-plan-coherence[data-level="sprik"] { border-left-color: var(--warn, #d8a13a); }

.training-plan-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.training-plan-step {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.85rem;
}

.training-plan-step[data-done="true"] { border-color: rgba(117, 214, 156, 0.5); }
.training-plan-step.is-next { border-color: var(--accent, #ffb59a); box-shadow: 0 0 0 1px rgba(255, 181, 154, 0.25); }

.training-plan-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.training-plan-step-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.training-plan-step-status {
  font-size: 0.75rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.72);
  text-align: right;
}

.training-plan-step[data-done="true"] .training-plan-step-status { color: var(--green, #75d69c); }

.training-plan-step-role,
.training-plan-step-detail {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted, rgba(255, 255, 255, 0.68));
}

.training-plan-step-detail { color: rgba(255, 255, 255, 0.85); }

.training-plan-step-action {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.5));
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}

.training-plan-step-action:hover { background: rgba(255, 255, 255, 0.07); }

.training-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.training-plan-next {
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--accent, #ffb59a);
  background: transparent;
  color: var(--accent, #ffb59a);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.modal-wide { width: min(96vw, 860px); }

/* ============================================================================
   INDIVIDUELL TRENING — én spiller av gangen
   ========================================================================== */
.individual-training-assignments,
.individual-training-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0.6rem 0 1rem;
}

.individual-training-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.8rem;
}

.individual-training-card.is-selected { border-color: var(--green, #75d69c); }

.individual-training-card h5 {
  margin: 0;
  font-size: 0.92rem;
}

.individual-training-card p { margin: 0; font-size: 0.8rem; line-height: 1.45; }

.individual-training-risk { color: var(--warn, #d8a13a); }

.individual-training-role {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
}

.individual-training-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

.individual-training-track,
.individual-training-remove {
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.5));
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: 0.76rem;
  border-radius: 8px;
  cursor: pointer;
}

.individual-training-track:hover:not(:disabled),
.individual-training-remove:hover { background: rgba(255, 255, 255, 0.07); }

.individual-training-track:disabled { opacity: 0.35; cursor: not-allowed; }

.individual-training-remove {
  align-self: flex-start;
  border-color: var(--bad, #e2765f);
  color: var(--bad, #e2765f);
}

/* ============================================================================
   SVAKE SIDER — ikke en dom over spilleren, men hvor det koster å bruke ham
   ========================================================================== */
.individual-training-weaknesses {
  color: var(--warn, #d8a13a);
  font-size: 0.78rem;
  line-height: 1.4;
}

.weakness-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 0.8rem;
}

.weakness-card {
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.8rem;
}

.weakness-card h5 { margin: 0 0 0.5rem; font-size: 0.92rem; }

.weakness-rows {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.weakness-rows li {
  display: grid;
  gap: 0.2rem;
  border-left: 3px solid var(--line-soft, rgba(255, 255, 255, 0.24));
  padding-left: 0.6rem;
}

.weakness-rows li[data-level="påbegynt"] { border-left-color: var(--warn, #d8a13a); }
.weakness-rows li[data-level="bedret"] { border-left-color: #8fc7ff; }
.weakness-rows li[data-level="løst"] { border-left-color: var(--green, #75d69c); }

.weakness-rows strong { font-size: 0.85rem; }
.weakness-rows span { color: var(--muted, rgba(255, 255, 255, 0.66)); font-size: 0.74rem; }
.weakness-bites { color: rgba(255, 255, 255, 0.5) !important; font-style: italic; }

.weakness-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.weakness-bar i {
  display: block;
  height: 100%;
  background: var(--green, #75d69c);
}

/* ============================================================================
   UNDERFANER — én stripe for alle hovedfaner med underinndeling
   ========================================================================== */
.app-subnav {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line-soft, rgba(255, 255, 255, 0.18));
  scrollbar-width: none;
  flex: 0 0 auto;
}

.app-subnav::-webkit-scrollbar { display: none; }

.app-subtab {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, rgba(255, 255, 255, 0.62));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.app-subtab:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.06); }

.app-subtab.is-active {
  color: #fff;
  border-color: var(--line, rgba(255, 255, 255, 0.5));
  background: rgba(255, 255, 255, 0.08);
}

.app-subtab:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================================
   KLUBBUTVIKLING — kjeden fra sted til lagklasse
   ========================================================================== */
.progression-chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.progression-chain li {
  display: grid;
  gap: 0.25rem;
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.2));
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.7rem;
}

.progression-chain span {
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 900;
}

.progression-chain strong { font-size: 0.88rem; }
.progression-chain small { color: var(--muted, rgba(255, 255, 255, 0.62)); line-height: 1.4; }

.progression-step { flex: 0 0 auto; }
.progression-step .eyebrow { margin-bottom: 0.15rem; }
.progression-step h3 { margin: 0 0 0.3rem; }

/* --- Klubbvalg i onboardingen ------------------------------------------- */
/* To veier inn i ligaspillet: lag din egen klubb, eller ta over en som finnes.
   Lista er data — den fylles av app.js fra data/football_clubs.json. */
.club-choice-switch {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.club-choice-tab {
  flex: 1 1 0;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.club-choice-tab.is-active {
  background: var(--accent-soft, rgba(120, 180, 255, 0.16));
  border-color: var(--accent, #6aa9ff);
}
.club-takeover { display: flex; flex-direction: column; gap: 0.6rem; }
.club-takeover-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
}
.club-takeover-tier {
  padding: 0.4rem 0.5rem 0.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.club-takeover-option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.club-takeover-option:hover { background: rgba(127, 127, 127, 0.12); }
.club-takeover-option.is-selected {
  background: var(--accent-soft, rgba(120, 180, 255, 0.16));
  border-color: var(--accent, #6aa9ff);
}
.club-takeover-option strong { font-size: 0.95rem; }
.club-takeover-option small { opacity: 0.75; font-size: 0.78rem; }
.club-takeover-summary {
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  font-size: 0.85rem;
}
.club-takeover-summary ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.club-takeover-summary li { margin: 0.15rem 0; }
.club-takeover-warning { margin-top: 0.5rem; opacity: 0.85; }


/* ========================================================================== 
   Manager grunnflyt v1 — lesbar handling og ett mørkt knappesystem
   ========================================================================== */

/* Felles sikkerhetsnett for statiske og dynamisk opprettede handlingsknapper. */
button {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--hg-border-strong);
  border-radius: var(--hg-radius-sm);
  background: var(--hg-surface-deep);
  color: var(--hg-text-main);
  min-height: 44px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease, transform 0.1s ease;
}

button:hover:not(:disabled) {
  border-color: var(--hg-text-main);
  background: var(--hg-panel-bg-strong);
}

button:focus-visible {
  outline: 3px solid var(--hg-text-main);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

/* Primær, sekundær, ghost og fare deler samme mørke grunnsystem. */
.next-action-primary,
.matchday-actions button.is-primary,
#playMatchdayButton,
.button-primary,
.btn-primary {
  border-color: var(--hg-text-main) !important;
  background: #05070b !important;
  color: var(--hg-text-main) !important;
}

.button-secondary,
.btn-secondary,
.matchday-nav-button,
.squad-setup-gate-action {
  background: var(--hg-panel-bg-strong);
  color: var(--hg-text-main);
}

.button-ghost,
.btn-ghost,
.matchday-actions button:not(.is-primary),
.next-action-chip {
  background: transparent;
  color: var(--hg-text-main);
}

.button-danger,
.btn-danger,
[data-action="reset"],
.reset-button {
  border-color: rgba(255, 107, 94, 0.72);
  background: rgba(255, 107, 94, 0.08);
  color: var(--hg-text-main);
}

/* Den autoritative handlingen får bruke høyden teksten trenger. */
.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 25;
  width: 100%;
  max-width: none;
  background: rgba(4, 6, 10, 0.96);
  border-top: 1px solid var(--hg-border-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-footer .next-action-strip {
  width: min(1240px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  padding: 8px 0;
}

.next-action-strip .next-action-head {
  min-width: max-content;
  justify-content: center;
}

.next-action-strip .next-action-primary {
  min-width: 0;
  min-height: 58px;
  display: grid !important;
  grid-template-columns: auto minmax(10rem, auto) minmax(14rem, 1fr);
  align-items: center;
  gap: 8px 14px;
  padding: 10px 14px;
  text-align: left;
}

.next-action-strip .next-action-primary .next-action-tag,
.next-action-strip .next-action-primary .next-action-title,
.next-action-strip .next-action-primary .next-action-hint {
  min-width: 0;
  max-width: none;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.next-action-strip .next-action-primary .next-action-title {
  line-height: 1.2;
}

.next-action-strip .next-action-primary .next-action-hint {
  line-height: 1.35;
}

.next-action-strip .next-action-secondary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 6px;
}

.next-action-strip .next-action-chip,
.next-action-strip .next-action-chip-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .site-footer {
    bottom: calc(var(--hg-menu-height) + env(safe-area-inset-bottom));
    padding-inline: 12px;
  }

  .site-footer .next-action-strip {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 7px 0;
  }

  .next-action-strip .next-action-head {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .next-action-strip .next-action-primary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    min-height: 0;
    padding: 10px 12px;
  }

  .next-action-strip .next-action-primary .next-action-tag {
    font-size: 0.66rem;
  }

  .next-action-strip .next-action-primary .next-action-title {
    font-size: 1rem;
  }

  .next-action-strip .next-action-primary .next-action-hint {
    font-size: 0.78rem;
  }

  .next-action-strip .next-action-secondary {
    justify-content: stretch;
  }

  .next-action-strip .next-action-chip {
    flex: 1 1 9rem;
  }
}

/* ========================================================================== 
   Kampdag + laguttak hovedscener v1
   ========================================================================== */

/* Laguttaket skal være et arbeidsrom, ikke et lite diagram i et skjema. */
.office-main {
  grid-template-columns: minmax(520px, 1.72fr) minmax(310px, 0.78fr);
  gap: clamp(18px, 2vw, 30px);
}

.pitch-stage {
  padding: clamp(18px, 2.4vw, 30px);
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(67, 214, 117, 0.1), transparent 66%),
    linear-gradient(180deg, rgba(5, 20, 12, 0.78), rgba(7, 10, 16, 0.96));
}

.pitch-stage-head {
  align-items: start;
}

.pitch-stage-head h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.045em;
}

.pitch-controls {
  min-width: min(100%, 390px);
  padding: 10px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 14px;
  background: rgba(3, 6, 10, 0.7);
}

.pitch-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--hg-border-soft);
  padding-top: 12px;
}

.pitch {
  width: min(100%, 560px);
  max-height: none;
  border-radius: 22px;
  box-shadow:
    inset 0 0 100px rgba(0, 0, 0, 0.48),
    0 28px 70px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(80, 230, 132, 0.16);
}

.player-chip {
  width: clamp(42px, var(--chip-w, 21cqw), 124px);
  min-height: 48px;
  gap: 3px;
  border-radius: 13px;
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(2, 6, 8, 0.93);
  padding: 6px 7px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.72);
}

.player-chip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hg-border-soft);
  opacity: 0.7;
}

.player-chip[data-line="keeper"]::before { background: #f5d76e; }
.player-chip[data-line="defense"]::before { background: #6cbcff; }
.player-chip[data-line="midfield"]::before { background: #58dd8c; }
.player-chip[data-line="attack"]::before { background: #ff8a78; }

.player-chip.is-selected {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #ffffff;
  background: #f5f7f6;
  color: #05070a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 16px 36px rgba(0, 0, 0, 0.76);
}

.chip-name {
  font-size: clamp(0.62rem, 3.15cqw, 0.92rem);
  letter-spacing: -0.015em;
}

.chip-role {
  font-size: clamp(0.5rem, 2.45cqw, 0.72rem);
}

.chip-fit {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: clamp(0.42rem, 1.95cqw, 0.62rem);
  font-weight: 900;
  line-height: 1;
  padding: 3px clamp(4px, 1.5cqw, 7px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-fit[data-tone="excellent"],
.chip-fit[data-tone="good"] {
  border-color: var(--good);
  color: var(--good);
}

.chip-fit[data-tone="workable"] { color: var(--text); }
.chip-fit[data-tone="risk"] { border-color: var(--warn, #d8a13a); color: var(--warn, #d8a13a); }
.chip-fit[data-tone="misused"] { border-color: var(--danger); color: var(--danger); }

.player-chip.is-selected .chip-fit,
.player-chip.is-selected .chip-pos {
  border-color: rgba(0, 0, 0, 0.45);
  background: #05070a;
  color: #ffffff;
}

.pitch[data-density="hoy"] .chip-fit,
.pitch[data-narrow="true"] .chip-fit {
  display: none;
}

.lineup-direct-editor,
.pitch-bench {
  border-top: 1px solid var(--hg-border-soft);
  padding-top: 18px;
}

.lineup-player-card,
.bench-player-card {
  min-height: 82px;
}

.side-panel {
  top: 82px;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(18, 23, 33, 0.96), rgba(7, 10, 16, 0.98));
}

.side-panel-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hg-border-soft);
}

.profile-match {
  display: grid;
  gap: 10px;
  border-color: var(--hg-border-strong);
  background: rgba(3, 6, 10, 0.68);
}

.profile-match .score-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.profile-match .score-row span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#selectedMatchScore {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 7px 11px;
}

#selectedMatchScore[data-tone="excellent"],
#selectedMatchScore[data-tone="good"] {
  border-color: var(--good);
  color: var(--good);
}

#selectedMatchScore[data-tone="risk"] { border-color: var(--warn, #d8a13a); color: var(--warn, #d8a13a); }
#selectedMatchScore[data-tone="misused"] { border-color: var(--danger); color: var(--danger); }

.fit-status-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-transform: none;
}

.role-learning-badge[data-status="excellent"],
.role-learning-badge[data-status="good"] {
  border-color: var(--good);
  color: var(--good);
}

.role-learning-badge[data-status="risk"] { border-color: var(--warn, #d8a13a); color: var(--warn, #d8a13a); }
.role-learning-badge[data-status="misused"] { border-color: var(--danger); color: var(--danger); }

/* Kampdagens rekkefølge: kampbildet før knappene, og én tydelig scene. */
.kamp-view .insight-grid {
  grid-template-columns: minmax(0, 1fr);
}

.matchday-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: min(680px, calc(100vh - 240px));
  padding: clamp(18px, 2.8vw, 34px);
  background:
    radial-gradient(90% 58% at 50% 0%, rgba(255, 107, 94, 0.11), transparent 68%),
    linear-gradient(180deg, rgba(15, 19, 27, 0.98), rgba(4, 6, 10, 0.99));
}

.matchday-panel > .eyebrow { order: 1; }
.matchday-panel > h2 { order: 2; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.05em; }
.matchday-panel > .panel-details { order: 7; }
.matchday-panel > .matchday-readiness { order: 3; }
.matchday-panel > #matchdayResult { order: 4; }
.matchday-panel > .matchday-actions { order: 5; }

.matchday-readiness {
  align-self: flex-start;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.8rem;
}

.matchday-actions {
  align-items: center;
  padding-top: 4px;
}

.matchday-actions #playMatchdayButton {
  min-width: min(100%, 240px);
  min-height: 52px;
  font-size: 1rem;
}

.matchday-command {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  border: 1px solid var(--hg-border-strong);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 42%),
    rgba(3, 6, 10, 0.8);
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

.matchday-command[data-status="ready"] { border-color: rgba(88, 221, 140, 0.72); }
.matchday-command[data-status="blocked"] { border-color: rgba(255, 138, 120, 0.5); }
.matchday-command[data-status="live"] { border-color: var(--hg-accent-kamp); }

.matchday-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.matchday-command-head h3 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
}

.matchday-command-status {
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 11px;
}

.matchday-command-status[data-tone="ready"] { border-color: var(--good); color: var(--good); }
.matchday-command-status[data-tone="blocked"] { border-color: var(--danger); color: var(--danger); }
.matchday-command-status[data-tone="live"] { border-color: var(--hg-accent-kamp); color: var(--hg-accent-kamp); }

.matchday-versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(10px, 2vw, 24px);
}

.matchday-team {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 150px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 16px;
  background: rgba(12, 16, 24, 0.82);
  padding: clamp(14px, 2vw, 24px);
}

.matchday-team.is-away { text-align: right; }

.matchday-team-side {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.matchday-team strong {
  min-width: 0;
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.matchday-team small {
  color: var(--muted);
  line-height: 1.35;
}

.matchday-kickoff {
  align-self: center;
  display: grid;
  place-items: center;
  gap: 4px;
  width: clamp(78px, 9vw, 112px);
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: #05070a;
  text-align: center;
}

.matchday-kickoff span,
.matchday-kickoff small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.matchday-kickoff strong {
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
}

.matchday-kickoff[data-tone="ready"] { border-color: var(--good); box-shadow: 0 0 0 4px rgba(88, 221, 140, 0.08); }
.matchday-kickoff[data-tone="blocked"] { border-color: rgba(255, 138, 120, 0.58); }
.matchday-kickoff[data-tone="live"] { border-color: var(--hg-accent-kamp); }

.matchday-command-plan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--hg-border-soft);
}

.matchday-command-plan article {
  min-width: 0;
  padding: 14px 16px;
}

.matchday-command-plan article + article {
  border-left: 1px solid var(--hg-border-soft);
}

.matchday-command-plan span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.matchday-command-plan strong {
  display: block;
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.matchday-command-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.matchday-command-blockers {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--hg-border-soft);
  padding-top: 16px;
}

.matchday-command-blockers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.matchday-command-blockers-head strong {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  color: var(--danger);
}

.matchday-command-blockers ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.matchday-command-blockers li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.matchday-command-blockers li > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--hg-border-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.matchday-command-blockers p {
  margin: 2px 0 0;
  line-height: 1.45;
}

.matchday-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.matchday-result-card,
.matchday-scoreboard {
  border-radius: 18px;
}

.matchday-scoreboard {
  padding: clamp(16px, 2.5vw, 28px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 65%),
    #05070a;
}

.matchday-scoreboard .matchday-score {
  font-size: clamp(1.45rem, 4vw, 3rem);
  letter-spacing: -0.045em;
}

@media (max-width: 980px) {
  .office-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-panel {
    position: static;
  }

  .pitch {
    width: min(100%, 520px);
  }
}

@media (max-width: 700px) {
  .pitch-stage,
  .matchday-panel {
    padding: 14px;
  }

  .pitch-stage-head h2 {
    font-size: clamp(1.75rem, 10vw, 2.55rem);
  }

  .pitch-controls {
    width: 100%;
    min-width: 0;
  }

  .pitch {
    width: min(100%, 430px);
    border-radius: 16px;
  }

  .player-chip {
    min-height: 40px;
    padding: 4px 5px;
  }

  .matchday-panel {
    min-height: 0;
  }

  .matchday-panel > h2 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .matchday-command {
    border-radius: 16px;
    padding: 14px;
  }

  .matchday-command-head {
    display: grid;
  }

  .matchday-command-status {
    justify-self: start;
  }

  .matchday-versus {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 7px;
  }

  .matchday-team {
    min-height: 128px;
    padding: 12px 10px;
  }

  .matchday-team strong {
    font-size: clamp(0.92rem, 5vw, 1.25rem);
  }

  .matchday-team small {
    font-size: 0.7rem;
  }

  .matchday-kickoff {
    width: 64px;
  }

  .matchday-kickoff span,
  .matchday-kickoff small {
    font-size: 0.5rem;
  }

  .matchday-command-plan {
    grid-template-columns: minmax(0, 1fr);
  }

  .matchday-command-plan article + article {
    border-left: 0;
    border-top: 1px solid var(--hg-border-soft);
  }

  .matchday-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .matchday-actions #playMatchdayButton {
    width: 100%;
  }
}

/* ============================================================
   Sesongkontroll v1

   Sesongflaten er en manager-scene, ikke en tabellside. Den viser først hva
   manageren trenger nå (runde, plass, form og neste kamp), deretter tabellbildet
   rundt egen klubb og kamprytmen. Full tabell og terminliste ligger ett nivå
   dypere. Motor, konkurransedata og lagring er uendret.
   ============================================================ */
.statistikk-view {
  gap: 14px;
}

.season-command-panel {
  display: grid;
  gap: 14px;
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 52%),
    var(--panel);
}

.season-command {
  display: grid;
  gap: 14px;
}

.season-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.season-command-head h2 {
  margin: 3px 0 4px;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
}

.season-command-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.season-command-actions button,
.season-command-support button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hg-surface-deep);
  color: var(--text);
  padding: 9px 14px;
  font-weight: 900;
  cursor: pointer;
}

.season-command-actions button.is-primary {
  background: var(--text);
  color: #000000;
}

.season-command-actions button:hover:not(:disabled),
.season-command-actions button:focus-visible,
.season-command-support button:hover:not(:disabled),
.season-command-support button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

.season-command-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.season-command-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.season-next-match {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--hg-surface-deep);
  padding: 16px 18px;
}

.season-next-match > span,
.season-command-metrics span,
.season-card-heading span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.season-next-match > strong {
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1.1;
}

.season-next-match > small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.season-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.season-command-metrics article {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 128px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.season-command-metrics strong {
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.season-command[data-position-tone="positive"] .season-command-metrics article:first-child {
  border-color: var(--good);
}

.season-command[data-position-tone="negative"] .season-command-metrics article:first-child {
  border-color: var(--bad);
}

.season-command-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.season-command-support .muted-text {
  margin: 0;
  max-width: 76ch;
  font-size: 0.8rem;
}

.season-league-overview {
  gap: 12px;
}

.season-workspace-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.season-standings-card,
.season-fixtures-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  padding: 13px;
}

.season-card-heading {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.season-card-heading strong {
  font-size: 1rem;
}

.season-compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.season-compact-table th,
.season-compact-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 6px;
  text-align: right;
  white-space: nowrap;
}

.season-compact-table thead th {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season-compact-table th:nth-child(2),
.season-compact-table td:nth-child(2) {
  text-align: left;
}

.season-compact-table tr.is-manager-club th,
.season-compact-table tr.is-manager-club td {
  border-bottom-color: var(--text);
  font-weight: 900;
}

.season-compact-table tr.is-manager-club th {
  border-left: 3px solid var(--text);
  padding-left: 9px;
}

.season-table-gap td {
  border: 0;
  color: var(--muted);
  text-align: center;
  padding: 2px;
}

.season-fixture-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.season-fixture-columns h4 {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season-fixture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.season-fixture {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 8px;
  border-left: 3px solid var(--line-soft);
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.025);
}

.season-fixture > span {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.season-fixture > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.season-fixture > small {
  color: var(--muted);
  font-size: 0.7rem;
}

.season-fixture.is-win { border-left-color: var(--good); }
.season-fixture.is-loss { border-left-color: var(--bad); }
.season-fixture.is-draw { border-left-color: var(--line); }
.season-fixture.is-upcoming:first-child { border-left-color: var(--text); }

.season-fixture-empty {
  color: var(--muted);
  border: 1px dashed var(--line-soft);
  border-radius: 9px;
  padding: 10px;
  font-size: 0.78rem;
}

.season-depth {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.season-depth > summary,
.season-all-fixtures > summary {
  cursor: pointer;
  font-weight: 900;
  font-size: 0.84rem;
}

.season-depth-content {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.season-full-table .mini-season-table tr.is-manager-club th,
.season-full-table .mini-season-table tr.is-manager-club td {
  color: var(--text);
  font-weight: 900;
  border-bottom-color: var(--line);
}

.season-all-fixtures {
  display: grid;
  gap: 8px;
}

.season-all-fixtures section {
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.season-all-fixtures h4 {
  margin: 0 0 5px;
}

.season-all-fixtures p {
  margin: 0;
  padding: 3px 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.season-all-fixtures p.is-manager-fixture {
  color: var(--text);
  font-weight: 900;
}

@media (max-width: 900px) {
  .season-command-grid,
  .season-workspace-grid {
    grid-template-columns: 1fr;
  }

  .season-command-metrics article {
    min-height: 96px;
  }
}

@media (max-width: 620px) {
  .season-command-head,
  .season-command-support {
    align-items: stretch;
    flex-direction: column;
  }

  .season-command-actions {
    justify-content: stretch;
  }

  .season-command-actions button {
    flex: 1 1 130px;
  }

  .season-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-command-metrics article {
    min-height: 82px;
  }

  .season-fixture-columns {
    grid-template-columns: 1fr;
  }

  .season-compact-table th:nth-child(3),
  .season-compact-table td:nth-child(3) {
    display: none;
  }
}

/* ============================================================================
   Managerkontor og Assistentråd v1
   Ett informasjonsnivå for ukas hovedsak, ett for beslutningsstøtte og ett
   eksplisitt dybdenivå. Ingen ny motor; kun presentasjon og navigasjon.
   ============================================================================ */
.office-command-panel {
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(117, 214, 156, 0.11), transparent 56%),
    linear-gradient(180deg, rgba(12, 16, 23, 0.99), rgba(3, 5, 9, 0.98));
}
.office-command { display: grid; gap: 18px; padding: clamp(18px, 3vw, 30px); }
.office-command-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.office-command-head h2 { margin: 2px 0 6px; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.95; letter-spacing: -0.055em; }
.office-command-phase { margin: 0; color: var(--hg-accent-tactics); font-size: 0.84rem; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; }
.office-command-pulse { display: grid; gap: 5px; max-width: 390px; text-align: right; }
.office-command-pulse span,
.office-priority-card > span,
.office-next-match-card > span,
.office-status-card > span,
.office-assistant-brief > span,
.office-season-brief > span { color: var(--muted); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.11em; text-transform: uppercase; }
.office-command-pulse strong { font-size: 0.95rem; line-height: 1.35; }
.office-command-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr); gap: 14px; }
.office-priority-card,
.office-next-match-card,
.office-assistant-brief,
.office-season-brief { position: relative; display: grid; align-content: start; gap: 9px; min-width: 0; border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(0, 0, 0, 0.34); color: var(--text); padding: 18px; text-align: left; }
.office-priority-card { border-color: rgba(117, 214, 156, 0.48); background: linear-gradient(135deg, rgba(117, 214, 156, 0.12), transparent 62%), rgba(0, 0, 0, 0.38); }
.office-priority-card strong,
.office-next-match-card strong { font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.08; letter-spacing: -0.025em; }
.office-priority-card p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.5; }
.office-priority-card small,
.office-next-match-card small,
.office-season-brief small { color: var(--muted); line-height: 1.45; }
.office-next-match-card,
.office-season-brief,
.office-status-card { cursor: pointer; }
.office-next-match-card:hover:not(:disabled),
.office-season-brief:hover,
.office-status-card:hover { border-color: rgba(255, 255, 255, 0.68); background: rgba(255, 255, 255, 0.07); }
.office-next-match-card:disabled { cursor: default; opacity: 0.68; }
.office-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.office-status-card { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 112px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.025); color: var(--text); padding: 14px; text-align: left; }
.office-status-card::before { content: ""; width: 34px; height: 3px; border-radius: 999px; background: var(--line-soft); }
.office-status-card[data-tone="positive"]::before { background: var(--hg-accent-tactics); }
.office-status-card[data-tone="attention"]::before { background: var(--hg-accent-inbox); }
.office-status-card[data-tone="negative"]::before { background: var(--hg-accent-kamp); }
.office-status-card strong { font-size: 1.15rem; line-height: 1.15; }
.office-status-card small { color: var(--muted); line-height: 1.35; }
.office-briefing-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.75fr); gap: 12px; }
.office-assistant-brief strong,
.office-season-brief strong { font-size: 1.12rem; line-height: 1.3; }
.office-assistant-brief p { margin: 0; color: var(--muted); line-height: 1.5; }
.office-depth { margin-top: 12px; border-top: 1px solid var(--line-soft); }
.office-depth > summary { cursor: pointer; list-style: none; color: var(--muted); font-size: 0.84rem; font-weight: 900; letter-spacing: 0.05em; padding: 14px 4px; text-transform: uppercase; }
.office-depth > summary::-webkit-details-marker { display: none; }
.office-depth > summary::after { content: " +"; color: var(--text); }
.office-depth[open] > summary::after { content: " −"; }
.office-depth-content { display: grid; gap: var(--gap); padding-top: 4px; }
.inbox-command-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.65fr); gap: var(--gap); align-items: start; }
.manager-surface.inbox-focus-panel,
.manager-surface.inbox-briefing-panel,
.manager-surface.inbox-queue-panel {
  display: grid;
  gap: 16px;
  border-color: var(--hg-border-soft);
  background: #0f131b;
}
.inbox-focus-panel { border-color: rgba(77, 163, 255, 0.48); }
.inbox-focus-heading,
.inbox-queue-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.inbox-focus-heading h3,
.inbox-queue-heading h3,
.inbox-briefing-panel h3 { margin: 2px 0 0; }
.inbox-focus-status,
.inbox-queue-heading > span { border: 1px solid var(--line-soft); border-radius: 999px; color: var(--muted); font-size: 0.76rem; font-weight: 900; padding: 7px 11px; text-align: center; }
.inbox-focus-status[data-tone="attention"] { border-color: rgba(255, 180, 84, 0.55); color: #ffd09a; }
.inbox-focus-status[data-tone="positive"] { border-color: rgba(117, 214, 156, 0.45); color: var(--hg-accent-tactics); }
.inbox-focus-list .inbox-thread-card,
.inbox-focus-list .message-card { border-color: rgba(255, 255, 255, 0.24); background: rgba(0, 0, 0, 0.34); }
.inbox-focus-list .inbox-thread-toggle::after { display: none; }
.inbox-focus-list .inbox-thread-body { padding-bottom: 22px; }
.inbox-inline-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.inbox-inline-stats div { border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.035); padding: 12px; }
.inbox-inline-stats dt { color: var(--muted); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.inbox-inline-stats dd { margin: 5px 0 0; font-size: 1rem; font-weight: 950; }
.inbox-briefing-panel .inbox-signal-status { margin: 0; border-left: 3px solid var(--hg-accent-inbox); color: var(--text); line-height: 1.5; padding-left: 12px; }
.inbox-briefing-actions { display: grid; gap: 9px; }
.inbox-briefing-actions button { width: 100%; min-height: 44px; }
.inbox-queue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inbox-queue-list .inbox-thread-card,
.inbox-queue-list .message-card { min-width: 0; }
.inbox-queue-list .inbox-thread-toggle { min-height: 150px; }
@media (max-width: 980px) {
  .office-command-main,
  .office-briefing-grid,
  .inbox-command-layout { grid-template-columns: 1fr; }
  .office-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .office-command-pulse { max-width: 300px; }
}
@media (max-width: 640px) {
  .office-command { gap: 14px; padding: 16px; }
  .office-command-head { display: grid; align-items: start; }
  .office-command-pulse { max-width: none; text-align: left; }
  .office-command-main,
  .office-status-grid,
  .office-briefing-grid,
  .inbox-command-layout,
  .inbox-queue-list { grid-template-columns: 1fr; }
  .office-status-card { min-height: 94px; }
  .inbox-focus-heading,
  .inbox-queue-heading { display: grid; }
  .inbox-focus-status { justify-self: start; }
}

.matchday-training-observation {
  display: grid;
  gap: 7px;
  margin: 14px 0 4px;
  padding: 13px;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, #f5d142 7%, transparent);
}

.matchday-training-observation > span {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

.matchday-training-observation strong,
.matchday-training-observation p,
.matchday-training-observation small { margin: 0; }

.matchday-training-observation-result {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.matchday-training-observation-result p { margin: 0; line-height: 1.4; }

.football-learning-post-match .football-learning-training-thread-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .football-learning-post-match .football-learning-training-thread-grid {
    grid-template-columns: 1fr;
  }
}