:root {
  --color-navy: #151E3E;
  --color-blue: #1F45AA;
  --color-amber: #FFAD57;
  --color-cream: #FFF0B8;
  --color-lavender: #C6CDFF;
  --color-deep-blue: #1A3174;
  --color-peach: #FFC478;
  --color-muted: #A0A8C8;
  /* Modenhets-/status-farger. Grønn/rød er semantiske statusfarger utenfor
     Rocket-merkepaletten — samlet her som tokens i stedet for spredte hex.
     --status-down er lysnet fra #ef4444 til ~5.6:1 kontrast mot navy (#ef4444
     ga 4.33:1 og feilet WCAG AA for normal tekst). */
  --level-1: #ef4444;
  --level-2: #f59e0b;
  --level-3: var(--color-amber);
  --level-4: #22c55e;
  --status-up: #22c55e;
  --status-down: #ff6b6b;
  --gradient-button: linear-gradient(270deg, #FFAD57, #FFF0B8);
  --gradient-icon: linear-gradient(135deg, rgba(31, 69, 170, 0.4), rgba(255, 173, 87, 0.15));
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-card: 1rem;
  --surface-strong: rgba(10, 17, 43, 0.94);
  --surface-panel: rgba(13, 22, 56, 0.86);
  --surface-panel-hover: rgba(18, 31, 76, 0.92);
  --surface-input: rgba(8, 14, 36, 0.88);
  --text-primary: #FFFFFF;
  --text-secondary: #E8ECF8;
  --text-muted-readable: #C8D0EC;
  --glass-bg: var(--surface-panel);
  --glass-border: rgba(198, 205, 255, 0.28);
  --glass-hover-bg: var(--surface-panel-hover);
  --glass-hover-border: rgba(255, 242, 186, 0.45);
  --glow-amber: 0 0 20px rgba(255, 173, 87, 0.15);
  --glow-blue: 0 0 20px rgba(31, 69, 170, 0.3);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--color-navy);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Skip-link (WCAG 2.4.1 Bypass Blocks): skjult til den får tastaturfokus, da
   sklir den ned fra toppen. Ingen inline-style — CSP-vennlig. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--color-amber);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.5rem;
}

/* «viser X av Y» i admin-tabelloverskriften — dempet, mindre enn tittelen. */
.admin-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted-readable);
}

.admin-count-hint {
  margin-top: -0.35rem;
  margin-bottom: 0.75rem;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 17, 43, 0.84) 0%,
      rgba(10, 17, 43, 0.76) 42%,
      rgba(10, 17, 43, 0.90) 100%
    ),
    url('/images/header-background.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Navbar */
.navbar {
  background: var(--surface-strong);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  padding: 0 1.5rem;
  position: relative;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.navbar-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar-logo {
  height: 22px;
  width: auto;
}

.navbar-client-logo {
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

.navbar-client-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.38rem 0.65rem;
  border-radius: 0.45rem;
  background: rgba(255, 173, 87, 0.12);
  border: 1px solid rgba(255, 173, 87, 0.24);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 173, 87, 0.2);
  border-color: rgba(255, 242, 186, 0.5);
}

.nav-user {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(198, 205, 255, 0.08);
  border: 1px solid rgba(198, 205, 255, 0.16);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  flex: 1;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Welcome hero */
.welcome-hero {
  text-align: center;
  margin-bottom: 2.5rem;
  animation: fadeIn 0.6s ease-out;
}

.welcome-hero h1 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 0.35rem;
}

.welcome-hero h1 span { color: var(--color-amber); }

.welcome-hero p {
  color: var(--text-muted-readable);
  font-size: 0.95rem;
}

/* Tom-tilstand for en nyopprettet klient uten innhold — hindrer at portalen ser
   ut som en feil (tom nav-pille + blank side). Speiler .looker-placeholder. */
.portal-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-card);
  background: var(--surface-panel);
  color: var(--text-muted-readable);
}

.portal-empty i, .portal-empty svg {
  width: 40px;
  height: 40px;
  color: var(--color-amber);
  margin-bottom: 0.75rem;
}

.portal-empty h2 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.portal-empty p {
  max-width: 44ch;
  margin: 0 auto;
  font-size: 0.95rem;
}

/* Sections */
.section {
  margin-bottom: 3rem;
  animation: fadeInUp 0.5s ease-out both;
}

/* Stagger seksjonene ved innlasting. nth-of-type teller kun <section>-elementer
   — nth-child talte welcome-hero (<div>) og portal-nav (<nav>) som barn 1–2, så
   ingen delay traff riktig seksjon og innlastingen ble ujevn. */
.section:nth-of-type(2) { animation-delay: 0.08s; }
.section:nth-of-type(3) { animation-delay: 0.16s; }
.section:nth-of-type(4) { animation-delay: 0.24s; }
.section:nth-of-type(5) { animation-delay: 0.32s; }
.section:nth-of-type(6) { animation-delay: 0.40s; }

.section-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--color-amber);
  text-shadow: 0 0 30px rgba(255, 173, 87, 0.15);
}

.section-separator {
  height: 2px;
  background: linear-gradient(90deg, var(--color-amber), var(--color-blue), transparent);
  margin-bottom: 1.5rem;
  border-radius: 1px;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.card {
  backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  text-decoration: none;
  color: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(255, 173, 87, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-blue);
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
}

.card:hover::before { opacity: 1; }

.card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gradient-icon);
  border: 1px solid rgba(198, 205, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover .card-icon-box {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(255, 173, 87, 0.15);
}

.card-icon-box i, .card-icon-box svg {
  width: 22px;
  height: 22px;
  color: var(--color-amber);
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.25s ease;
}

.card:hover .card-title { color: #fff; }

.card-desc {
  font-size: 0.85rem;
  color: var(--text-muted-readable);
  line-height: 1.45;
}

.empty-text {
  color: var(--text-muted-readable);
  font-size: 0.9rem;
}

/* Chips (links) */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

.chip:hover {
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chip:hover .chip-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.chip-icon { font-size: 1rem; }
.chip-label { font-weight: 600; }

.chip-arrow {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ── Rocket-verktøy cards (portal) ── */
.tool-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--text-secondary);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), var(--glow-blue);
}

.tool-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 0.65rem;
  background: var(--gradient-icon);
  border: 1px solid rgba(198, 205, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tool-card:hover .tool-card__icon {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(255, 173, 87, 0.15);
}

.tool-card__icon i,
.tool-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-amber);
}

.tool-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-lavender);
  transition: color 0.25s ease;
}

.tool-card:hover .tool-card__title {
  color: #fff;
}

.tool-card__desc {
  font-size: 0.85rem;
  color: var(--text-muted-readable);
  line-height: 1.45;
}

.tool-card__arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 14px;
  height: 14px;
  opacity: 0.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tool-card:hover .tool-card__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ── Portal Sub-nav ── */
.portal-nav {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 2rem;
  padding: 0.35rem;
  border: 1px solid var(--glass-border);
  border-radius: 0.65rem;
  background: var(--surface-panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  overflow-x: auto;
  animation: fadeIn 0.4s ease-out;
  position: sticky;
  top: 0.5rem;
  z-index: 20;
}

.v2-portal .section { scroll-margin-top: 5rem; }

.portal-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.portal-nav-item:hover {
  color: #fff;
  background: rgba(198, 205, 255, 0.1);
  border-color: rgba(198, 205, 255, 0.18);
}

.portal-nav-item.active {
  color: #fff;
  background: rgba(255, 173, 87, 0.22);
  border-color: rgba(255, 242, 186, 0.75);
  box-shadow: 0 5px 18px rgba(255, 173, 87, 0.2);
}

.portal-nav-item i, .portal-nav-item svg {
  width: 16px;
  height: 16px;
}

/* ── Looker Embed ── */
.looker-section {
  position: relative;
}

.looker-link-wrap {
  display: block;
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.looker-link-wrap:hover {
  border-color: var(--glass-hover-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), var(--glow-blue);
}

.looker-preview-img {
  width: 100%;
  height: auto;
  display: block;
  object-position: var(--ox, 50%) var(--oy, 0%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--ox, 50%) var(--oy, 0%);
}

/* Per-client display variants — admin picks one in /admin/clients/:id/links.
   "Medium" and "small" clip the image height with object-fit: cover so wide
   dashboard screenshots stay readable instead of dominating the page.
   Use fixed height (not max-height) — with height: auto on the base rule,
   max-height alone just scales the image proportionally and object-fit has
   nothing to crop against. "Hidden" omits the image entirely. */
.looker-link-wrap--medium .looker-preview-img {
  height: 400px;
  object-fit: cover;
}
.looker-link-wrap--small .looker-preview-img {
  height: 250px;
  object-fit: cover;
}

.looker-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--text-muted-readable);
  gap: 0.75rem;
}

.looker-preview-placeholder i, .looker-preview-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

.looker-preview-placeholder span {
  font-size: 1rem;
  font-weight: 600;
}

/* Vedvarende «Åpne rapport»-badge i nedre-høyre hjørne. Tidligere var dette en
   full-flate-overlay som kun vistes på :hover — usynlig på touch (ingen hover),
   så mobilbrukere fikk ingen signal om at bildet er en lenke. Nå alltid synlig;
   hover forsterker bare. Dekker heller ikke lenger dataene i bildet. */
.looker-link-overlay {
  position: absolute;
  inset: auto 0.75rem 0.75rem auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(10, 17, 43, 0.9);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}

.looker-link-wrap:hover .looker-link-overlay {
  background: var(--color-blue);
  transform: translateY(-1px);
}

.looker-link-overlay i, .looker-link-overlay svg {
  width: 16px;
  height: 16px;
}

.looker-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  border-radius: var(--radius-card);
  border: 1px dashed var(--glass-border);
  background: rgba(8, 14, 36, 0.55);
  color: var(--text-muted-readable);
  text-align: center;
  padding: 1.5rem;
}

.looker-placeholder i, .looker-placeholder svg {
  width: 32px;
  height: 32px;
  margin-bottom: 0.6rem;
  opacity: 0.45;
}

.looker-placeholder p {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.looker-placeholder .looker-placeholder-sub {
  font-size: 0.8rem;
  color: var(--text-muted-readable);
}

.looker-fallback {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  color: var(--text-muted-readable);
  font-size: 0.85rem;
  text-decoration: none;
}

.looker-fallback:hover {
  color: #fff;
}

.looker-fallback i, .looker-fallback svg {
  width: 14px;
  height: 14px;
}

.dashboards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0;
  color: var(--text-secondary);
}

/* ── Quarterly Cards ── */
.quarterly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.quarterly-card {
  backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.quarterly-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.quarterly-card .quarter-label {
  font-size: 0.8rem;
  color: var(--text-muted-readable);
  margin-bottom: 0.75rem;
}

.quarterly-content {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.quarterly-content p { margin-bottom: 0.5rem; }
.quarterly-content p:last-child { margin-bottom: 0; }
.quarterly-content ul, .quarterly-content ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.quarterly-content li { margin-bottom: 0.25rem; }
.quarterly-content a { color: var(--color-amber); }
.quarterly-content h3, .quarterly-content h4 {
  font-family: var(--font-heading);
  color: var(--text-secondary);
  margin: 0.75rem 0 0.5rem;
}
.quarterly-content h3 { font-size: 1.05rem; }
.quarterly-content h4 { font-size: 0.95rem; }
.quarterly-content > *:first-child { margin-top: 0; }

/* "Nytt fra Rocket" structured announcement — distinct from the regular
   glass cards so the message reads as a curated message, not generic content. */
.rocket-update {
  scroll-margin-top: 5rem;
}
.rocket-update__card {
  position: relative;
  backdrop-filter: blur(12px);
  background:
    linear-gradient(135deg, rgba(255, 173, 87, 0.12) 0%, rgba(255, 173, 87, 0) 55%),
    var(--glass-bg);
  border: 1px solid rgba(255, 173, 87, 0.45);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 173, 87, 0.08) inset;
}
.rocket-update__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
}
.rocket-update__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--gradient-button);
  color: var(--color-navy);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.rocket-update__badge i, .rocket-update__badge svg {
  width: 13px;
  height: 13px;
}
.rocket-update__chip {
  background: rgba(198, 205, 255, 0.16);
  color: var(--text-secondary);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.rocket-update__date {
  color: var(--text-muted-readable);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.rocket-update__dismiss {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-muted-readable);
  border-radius: 999px;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.rocket-update__dismiss:hover {
  color: #fff;
  border-color: rgba(255, 173, 87, 0.6);
  background: rgba(255, 173, 87, 0.12);
}
.rocket-update__dismiss i, .rocket-update__dismiss svg {
  width: 14px;
  height: 14px;
}
.rocket-update__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  color: #fff;
  line-height: 1.25;
}
.rocket-update__content {
  color: var(--text-secondary);
}
.rocket-update__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.rocket-update__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.rocket-update__cta i, .rocket-update__cta svg {
  width: 16px;
  height: 16px;
}

/* Inline images placed via [BILDE N] placeholders. */
.updates-figure {
  margin: 1rem 0;
  text-align: center;
}
.updates-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
  display: inline-block;
}
.updates-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted-readable);
  font-style: italic;
}

/* Collapsed state: clamp the body and fade out, surface a "Vis mer" button.
   portal.js measures rendered height and toggles the .is-collapsed class
   only when content is genuinely tall enough to warrant clipping. */
[data-collapsible].is-collapsed .updates-content {
  max-height: 16rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Admin: side-by-side preview + alt-text editor for each uploaded image. */
.updates-image-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  margin-bottom: 0.9rem;
  border: 1px solid rgba(198, 205, 255, 0.26);
  border-radius: 0.65rem;
  background: rgba(8, 14, 36, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.updates-image-row__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.updates-image-thumb {
  width: 7rem;
  height: 7rem;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0.35rem;
}
.updates-image-row__token {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-navy);
  background: var(--gradient-button);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-weight: 700;
}
.updates-image-row__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.form-subheading {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--text-secondary);
}

/* Quill editor — make snow theme blend with our glass admin forms.
   Toolbar bar gets a slightly translucent dark surface; editor body
   fills available width and uses our text/border tokens. */
.quill-editor-host {
  background: rgba(8, 14, 36, 0.9);
  border-radius: 0 0 0.55rem 0.55rem;
  border: 1px solid rgba(198, 205, 255, 0.38);
  border-top: 0;
  overflow: hidden;
}
.ql-toolbar.ql-snow {
  border: 1px solid rgba(21, 30, 62, 0.18);
  border-bottom: 1px solid rgba(21, 30, 62, 0.14);
  border-radius: 0.55rem 0.55rem 0 0;
  background: #fff;
  padding: 0.55rem;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 0.55rem;
}
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 0.4rem;
  background: #f5f6fb;
  border: 1px solid rgba(21, 30, 62, 0.12);
}
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button:focus,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
  background: #fff4dd;
  border-color: #e4a04a;
}
.ql-container.ql-snow {
  border: 0;
  font-family: inherit;
  min-height: 14rem;
}
.ql-editor {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1rem;
}
.ql-editor.ql-blank::before {
  color: rgba(232, 236, 248, 0.62);
  font-style: normal;
}
.ql-snow .ql-stroke { stroke: #33405f; }
.ql-snow .ql-fill { fill: #33405f; }

/* Toolbar buttons (icons) — hover/active states the snow theme normally
   draws in blue against white. Keep them in our amber/gradient palette. */
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke { stroke: var(--color-amber); }
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill { fill: var(--color-amber); }

/* Header picker (H3 / H4 / Normal). Quill 2 renders these via CSS-generated
   ::before content from the snow theme stylesheet, which is ink-on-paper.
   Override so the items are visible against the dark dropdown panel. */
.ql-snow .ql-picker { color: #33405f; }
.ql-snow .ql-picker-label {
  color: #33405f;
  border-color: transparent;
  display: inline-flex;
  align-items: center;
}
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active {
  color: var(--color-amber);
}
.ql-snow .ql-picker-options {
  background: var(--surface-strong);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  padding: 0.25rem 0;
}
.ql-snow .ql-picker-options .ql-picker-item {
  color: rgba(255, 255, 255, 0.85);
  padding: 0.4rem 0.75rem;
}
.ql-snow .ql-picker-options .ql-picker-item:hover {
  color: var(--color-amber);
  background: rgba(159, 122, 234, 0.12);
}
.ql-snow .ql-picker-options .ql-picker-item.ql-selected {
  color: var(--color-amber);
  background: rgba(159, 122, 234, 0.18);
}
/* The ::before content the snow theme emits ("Heading 3" etc.) is set in
   quill.snow.css with `color: #444` baked in — re-declare so it inherits
   the parent's white instead. */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  color: inherit;
}

.ql-snow .ql-tooltip {
  background: #1a2347;
  border-color: var(--glass-border);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.ql-snow .ql-tooltip input[type="text"] {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--glass-border);
  color: inherit;
}
.ql-snow a { color: var(--color-amber); }

/* ── Maturity ── */

/* Expandable discipline wrapper */
.maturity-discipline {
  margin-bottom: 0.5rem;
}

.maturity-discipline summary {
  list-style: none;
}

.maturity-discipline summary::-webkit-details-marker {
  display: none;
}

.maturity-discipline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.maturity-discipline-header:hover {
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
}

.maturity-discipline[open] .maturity-discipline-header {
  border-radius: 0.75rem 0.75rem 0 0;
  border-bottom-color: transparent;
}

.maturity-discipline-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-amber);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.maturity-discipline-title i,
.maturity-discipline-title svg {
  width: 20px;
  height: 20px;
}

.maturity-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-muted-readable);
  transition: transform 0.25s ease;
}

.maturity-discipline[open] .maturity-chevron {
  transform: rotate(180deg);
}

.maturity-discipline-body {
  backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 1.25rem;
}

/* 2-column grid matching the reference image */
.maturity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Individual maturity card */
.maturity-card {
  border: 1px solid rgba(198, 205, 255, 0.18);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem 0.85rem;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  background: rgba(8, 14, 36, 0.42);
}

/* Top row: label left, scores right */
.maturity-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Category label — top left */
.maturity-card-label {
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 600;
  padding-top: 0.35rem;
  line-height: 1.3;
}

/* Score cluster — top right */
.maturity-card-scores {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.15rem;
}

.maturity-prev,
.maturity-curr {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}

.maturity-prev {
  color: var(--color-amber);
}

.maturity-curr {
  color: var(--status-up);
}

.maturity-arrow {
  font-size: 1rem;
  color: var(--text-muted-readable);
}

/* Diff — right-aligned below scores */
.maturity-diff {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
  margin-top: 0.15rem;
}

.maturity-diff-up { color: var(--status-up); }
.maturity-diff-down { color: var(--status-down); }
.maturity-diff-zero { color: var(--text-muted-readable); }

/* Progress bar — pushed to bottom */
.maturity-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  position: relative;
  overflow: visible;
  margin-top: auto;
  padding-top: 0;
}

.maturity-bar-fill {
  /* width + background settes via custom properties som portal.js leser fra
     data-pct + data-color. Default-fallback holder bar-en usynlig hvis JS-en
     ikke rekker å kjøre — bedre enn å se feil bredde først. */
  width: var(--maturity-pct, 0);
  background: var(--maturity-color, transparent);
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.maturity-bar-marker {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1px;
  /* left settes via portal.js fra data-pct (samme verdi som fill). */
  left: var(--maturity-pct, 0);
}

.maturity-period {
  font-size: 0.85rem;
  color: var(--text-muted-readable);
  margin-top: 1rem;
  text-align: center;
}

.maturity-footnote {
  font-size: 0.8rem;
  color: var(--text-muted-readable);
  font-style: italic;
  text-align: center;
  margin-top: 0.25rem;
}

@media (max-width: 600px) {
  .maturity-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Meetings (links to Drive) — timeline format ── */
.meeting-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.meeting-list--timeline {
  position: relative;
  padding-left: 0.25rem;
}

/* Vertical timeline rail running through the dots. Anchored to the gap
   between date column and body column. */
.meeting-list--timeline::before {
  content: '';
  position: absolute;
  left: 8.25rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--glass-border) 12%, var(--glass-border) 88%, transparent);
  pointer-events: none;
}

.meeting-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 0.85rem 0;
  position: relative;
  border-bottom: 1px solid rgba(198, 205, 255, 0.08);
}
.meeting-item:last-child { border-bottom: 0; }

/* Dot on the timeline rail, aligned to the date row. */
.meeting-item::before {
  content: '';
  position: absolute;
  left: calc(8.25rem - 4px);
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-amber);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(8, 14, 36, 0.92);
}

.meeting-item__date {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.meeting-item__body {
  min-width: 0;
}

.meeting-item__title {
  font-size: 0.98rem;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 38em) {
  .meeting-list--timeline::before,
  .meeting-item::before { display: none; }
  .meeting-item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.85rem 0;
  }
  .meeting-item__date { text-align: left; }
}

.meeting-drive-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-amber);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.meeting-drive-link:hover { opacity: 0.8; }

.meeting-drive-link i, .meeting-drive-link svg {
  width: 16px;
  height: 16px;
}
.meeting-body ul, .meeting-body ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.meeting-body li { margin-bottom: 0.25rem; }
.meeting-body a { color: var(--color-amber); }

/* Login */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  animation: fadeIn 0.6s ease-out;
}

.login-card {
  backdrop-filter: blur(12px);
  background: var(--surface-panel);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  padding: 3.5rem 3rem;
  text-align: center;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  animation: fadeInUp 0.6s ease-out;
}

.login-logo { margin-bottom: 1.25rem; }

.login-logo img {
  filter: drop-shadow(0 0 12px rgba(255, 173, 87, 0.2));
}

.login-card h1 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.login-card p {
  color: var(--text-muted-readable);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.login-card p a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.login-card p a:hover {
  text-decoration-thickness: 2px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  color: var(--color-navy);
}

.btn-gradient {
  background: var(--gradient-button);
  color: var(--color-navy);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 173, 87, 0.3);
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 0.35rem;
  background: var(--color-blue);
  color: #fff;
  transition: background 0.2s ease;
}

.btn-sm:hover { background: #2650c0; }

.btn-danger {
  background: #c0392b;
  color: #fff;
  transition: background 0.2s ease;
}

.btn-danger:hover { background: #e04333; }

.btn-warning {
  background: #e67e22;
  color: #fff;
  transition: background 0.2s ease;
}

.btn-warning:hover { background: #f39c12; }

/* ── Admin ── */
.admin-page {
  background: var(--color-navy);
}

.admin-page .bg-overlay {
  background:
    linear-gradient(180deg, rgba(21, 30, 62, 0.98) 0%, rgba(26, 49, 116, 0.94) 100%),
    url('/images/header-background.png');
  background-size: cover;
  background-position: center bottom;
}

.admin-container {
  max-width: 1280px;
  padding-top: 1.5rem;
}

.admin-page .section-title {
  color: var(--color-amber);
  font-size: 1.55rem;
  line-height: 1.2;
  text-shadow: none;
}

.admin-page .section-separator {
  height: 1px;
  background: rgba(198, 205, 255, 0.18);
  margin-bottom: 1rem;
}

.admin-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.admin-page-kicker {
  color: rgba(198, 205, 255, 0.86);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-card-heading h3 {
  margin-bottom: 0.25rem;
}

.admin-page .btn-sm {
  padding: 0.42rem 0.75rem;
  font-size: 0.82rem;
  border-radius: 0.4rem;
}

.admin-form-card, .admin-table-card {
  backdrop-filter: blur(6px);
  background: rgba(15, 28, 70, 0.72);
  border: 1px solid rgba(198, 205, 255, 0.12);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

/* Admin chrome lite — hide marketing footer on admin pages and dim the
   page background a touch so admin reads as a workspace, not a portal. */
.admin-page .footer { display: none; }
.admin-page .bg-overlay {
  opacity: 0.55;
}

/* Compact, single-row admin toggle: text/explanation on the left, status pill
   + button on the right. Used by the maturity-scorecard switch. */
.admin-form-card--compact { padding: 1rem 1.25rem; }
.admin-toggle-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.admin-toggle-form__copy h3 { margin: 0 0 0.2rem; }
.admin-toggle-form__copy p { margin: 0; max-width: 60ch; }
.admin-toggle-form__action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.admin-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-status-pill--on {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #6bde99;
}
.admin-status-pill--off {
  background: rgba(198, 205, 255, 0.1);
  border: 1px solid rgba(198, 205, 255, 0.22);
  color: var(--text-muted-readable);
}

/* Admin form layout helpers — replace inline style="..." (CSP without
   'unsafe-inline'). Used by client-edit, client-content, client-maturity,
   client-links and disciplines. .admin-form-stacked itself is defined
   below .admin-form so its align-items override wins on cascade order. */

.form-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Admin form pairing — explicit column counts so cells flow left-to-right
   without the last row stretching to fill empty tracks (auto-fit's
   downside on partial rows). Use `.admin-form-grid--quad` for 4-field
   rows like disciplines top-row. */
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.admin-form-grid--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .admin-form-grid--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .admin-form-grid,
  .admin-form-grid--quad {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tools-row,
.cat-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tools-row__name,
.cat-row__key,
.cat-row__label { flex: 1; }

.tools-row__url { flex: 2; }

.tools-row__icon { width: 120px; }

@media (max-width: 600px) {
  .tools-row,
  .cat-row {
    flex-direction: column;
  }
  .tools-row > *,
  .cat-row > * {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }
}

/* Form-group width modifiers (replaces inline max-width / width) */
.form-group--date { max-width: 180px; }

/* Inline-input variants for maturity/discipline numeric inputs that were
   previously styled via inline style="...border-radius..." attributes. */
.input-numeric {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid rgba(198, 205, 255, 0.38);
  border-radius: 0.35rem;
  background: var(--surface-input);
  color: #fff;
  font-size: 0.9rem;
}

.input-numeric--narrow {
  width: 70px;
}

/* Section sub-heading inside admin forms */
.admin-section-heading {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-family: var(--font-heading);
}

.admin-section-heading--space-top { margin-top: 1.5rem; }

/* Per-section visibility/placement controls (e.g. dashboards meta block).
   On wide screens the checkbox sits next to a labeled select; padding-top
   nudges it down so the checkbox row aligns with the select's label baseline.
   The padding is scoped to ≥601px so it doesn't waste vertical space when
   the grid collapses to a single column on mobile. */
.dashboards-meta { align-items: start; margin-bottom: 1rem; }
.form-group--checkbox .field-hint { margin-top: 0.35rem; }
@media (min-width: 601px) {
  .form-group--checkbox { padding-top: 1.55rem; }
}
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-amber);
  cursor: pointer;
}

/* Page intro paragraph (was inline style="color:muted;font-size..."). */
.admin-intro {
  color: var(--text-muted-readable);
  margin-bottom: 2rem;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 70ch;
}

/* Inline form display variant (delete buttons inside table cells). */
.form-inline { display: inline; }

/* Tabellkort-header: tittel til venstre, sekundær handling ("Vis deaktiverte")
   til høyre. h3-en inne i kortet har egen margin fra .admin-table-card, så den
   nulles her for å holde raden vertikalt sentrert. Wrapper på smal skjerm. */
.admin-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-table-head h3 { margin: 0; }

/* Maturity admin: discipline card spacing */
.admin-table-card--space-top { margin-top: 1rem; }

/* Maturity admin: category grid — explicit 2/3/4-col breakpoints so the
   layout stays in the 2–4 column band the design wants regardless of how
   wide the admin-container gets. */
.maturity-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 720px) {
  .maturity-cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .maturity-cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Logo upload preview row + remove-checkbox label (client-edit) */
.logo-preview-row {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.logo-preview-img {
  max-height: 60px;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.35rem 0.5rem;
}

.logo-remove-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}

.logo-remove-label input {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-amber);
  flex: 0 0 auto;
}

.field-hint {
  font-size: 0.86rem;
  color: var(--text-muted-readable);
  margin-top: 0.35rem;
  line-height: 1.55;
  max-width: 78ch;
}

.field-hint code {
  display: inline-block;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 173, 87, 0.16);
  border: 1px solid rgba(255, 173, 87, 0.28);
  color: var(--color-cream);
  font-size: 0.82em;
  font-weight: 700;
}

/* Updates admin */
.updates-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.updates-status-pill--enabled {
  background: rgba(255, 173, 87, 0.14);
  border: 1px solid rgba(255, 196, 120, 0.42);
  color: var(--color-cream);
}

.updates-status-pill--disabled {
  background: rgba(198, 205, 255, 0.1);
  border: 1px solid rgba(198, 205, 255, 0.28);
  color: var(--color-lavender);
}

.updates-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.updates-brief > div {
  padding: 1rem;
  border: 1px solid rgba(198, 205, 255, 0.14);
  border-radius: 0.5rem;
  background: rgba(21, 30, 62, 0.64);
}

.updates-brief__label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.updates-brief p {
  color: var(--text-muted-readable);
  font-size: 0.88rem;
  line-height: 1.55;
}

.updates-template-grid,
.updates-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.updates-template-button {
  min-height: 6rem;
  padding: 1rem;
  border: 1px solid rgba(198, 205, 255, 0.16);
  border-radius: 0.5rem;
  background: rgba(21, 30, 62, 0.68);
  color: #fff;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.updates-template-button:hover {
  background: rgba(255, 173, 87, 0.1);
  border-color: rgba(255, 173, 87, 0.42);
  transform: translateY(-1px);
}

.updates-template-button span {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
}

.updates-template-button small {
  color: var(--text-muted-readable);
  font-size: 0.82rem;
  line-height: 1.45;
}

.updates-section-heading {
  margin-top: 0.5rem;
}

.updates-preview-shell {
  padding: 1rem;
  border: 1px solid rgba(198, 205, 255, 0.14);
  border-radius: 0.5rem;
  background: rgba(21, 30, 62, 0.5);
}

.updates-preview-shell .section-title {
  margin-bottom: 0.75rem;
  color: var(--color-amber);
  font-size: 1.25rem;
}

.updates-preview-shell .updates-card {
  border-radius: 0.5rem;
  box-shadow: none;
}

/* Looker preview (client-links) */
.looker-image-preview {
  margin-top: 0.5rem;
}

.looker-image-preview img {
  max-width: 300px;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
}

.looker-image-input {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.tool-add-row { margin-bottom: 1rem; }

.admin-form-card h3, .admin-table-card h3 {
  font-family: var(--font-heading);
  margin-bottom: 1rem;
  color: var(--color-amber);
  font-size: 1rem;
  line-height: 1.25;
}

.admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

/* admin-form sets align-items: flex-end so a non-stacked form's submit
   button anchors to the bottom of the row. In a stacked (column) form
   that becomes a *horizontal* anchor → fields slide to the right edge.
   Restore stretch + bump the gap for column layout. Defined after
   .admin-form so the cascade wins on equal specificity. */
.admin-form-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.admin-form-stacked > .form-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-form input[type="text"],
.admin-form input[type="url"],
.admin-form input[type="email"],
.admin-form input[type="date"],
.admin-form textarea {
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(198, 205, 255, 0.28);
  border-radius: 0.4rem;
  background: rgba(21, 30, 62, 0.78);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form input::placeholder,
.admin-form textarea::placeholder {
  color: rgba(198, 205, 255, 0.66);
}

.admin-form input[type="date"] {
  color-scheme: dark;
  min-width: 160px;
}

.admin-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
  cursor: pointer;
}

.admin-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.admin-form .period-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-form .period-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(198, 205, 255, 0.38);
  border-radius: 0.35rem;
  background: var(--surface-input);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color-scheme: dark;
  min-width: 120px;
}

.admin-form .period-select:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px rgba(255, 173, 87, 0.15);
}

/* Bug fix: bare browser default <select> is unreadable on dark theme; mirror .period-select. */
.admin-form select {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(198, 205, 255, 0.38);
  border-radius: 0.35rem;
  background: var(--surface-input);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color-scheme: dark;
  min-width: 120px;
}

.admin-form select:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px rgba(255, 173, 87, 0.15);
}

.dashboard-row {
  padding: 1rem;
  border: 1px solid rgba(198, 205, 255, 0.16);
  border-radius: 0.5rem;
  background: rgba(21, 30, 62, 0.44);
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dashboard-row .form-group {
  margin: 0;
}

.dashboard-row__identity {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr);
  gap: 0.75rem 1rem;
}

@media (max-width: 640px) {
  .dashboard-row__identity {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dashboard-row__divider {
  border: 0;
  height: 1px;
  background: rgba(198, 205, 255, 0.12);
  margin: 0.25rem 0;
}

.dashboard-row__remove {
  align-self: flex-end;
}

/* File picker, display select and positioner travel together — admin reads
   them as a single unit ("which image, how big, where positioned?"). */
.dashboard-image-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(198, 205, 255, 0.18);
  border-radius: 0.55rem;
  background: rgba(8, 14, 36, 0.42);
}

.dashboard-image-block__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}

.dashboard-image-block.is-image-hidden .dashboard-positioner {
  display: none;
}

/* Dashboard image positioner — drag-to-pan + zoom slider. Offsets and zoom
   persist as %-based values + multiplier so the portal re-applies the same
   crop via CSS vars on .looker-preview-img. Frame aspect-ratio is set per
   display variant in admin-editor.js (FRAME_ASPECT). */
.dashboard-positioner {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dashboard-positioner__frame {
  position: relative;
  width: 100%;
  /* aspect-ratio is set inline by admin-editor.js per display variant. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card, 0.75rem);
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(135deg, rgba(21, 30, 62, 0.85), rgba(8, 14, 36, 0.95));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-positioner[data-has-image="1"] .dashboard-positioner__frame {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 173, 87, 0.18);
}

.dashboard-positioner[data-has-image="1"] .dashboard-positioner__frame:hover {
  border-color: rgba(255, 173, 87, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 173, 87, 0.32);
}

.dashboard-positioner__frame.is-dragging {
  cursor: grabbing;
  border-color: var(--color-amber);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 173, 87, 0.35);
}

.dashboard-positioner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ox, 50%) var(--oy, 0%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--ox, 50%) var(--oy, 0%);
  pointer-events: none;
  -webkit-user-drag: none;
}

.dashboard-positioner[data-has-image="0"] .dashboard-positioner__img {
  visibility: hidden;
}

.dashboard-positioner__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(198, 205, 255, 0.66);
  font-size: 0.95rem;
  pointer-events: none;
}

.dashboard-positioner__empty i,
.dashboard-positioner__empty svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
  opacity: 0.55;
  color: var(--color-amber);
}

.dashboard-positioner[data-has-image="1"] .dashboard-positioner__empty {
  display: none;
}

.dashboard-positioner.is-removed .dashboard-positioner__frame {
  opacity: 0.45;
  filter: grayscale(0.8);
  cursor: not-allowed;
}

.dashboard-positioner__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dashboard-positioner__zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 240px;
  min-width: 200px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.dashboard-positioner__zoom span {
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--text-muted-readable);
}

.dashboard-positioner__zoom input[type="range"] {
  flex: 1;
  accent-color: var(--color-amber);
}

.dashboard-positioner__zoom output {
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
  text-align: right;
}

.dashboard-positioner__remove {
  margin-left: auto;
}

/* Secondary inline-text action — "Tilbakestill", "Last inn på nytt",
   "Fjern dashboard". Visually subordinate to gradient/danger CTAs so the
   primary action stays the obvious next step. */
.btn-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.2rem 0.1rem;
  color: var(--text-muted-readable);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: rgba(198, 205, 255, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.btn-link:hover,
.btn-link:focus-visible {
  color: var(--color-amber);
  text-decoration-color: var(--color-amber);
  outline: none;
}

.admin-form input[type="file"] {
  padding: 0.6rem;
  border: 1px dashed rgba(198, 205, 255, 0.42);
  border-radius: 0.45rem;
  background: rgba(8, 14, 36, 0.9);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  max-width: 100%;
}

.admin-form input[type="file"]:hover {
  border-color: var(--color-amber);
  background: var(--surface-input);
}

.admin-form input[type="file"]::-webkit-file-upload-button {
  padding: 0.4rem 0.9rem;
  margin-right: 0.75rem;
  border: none;
  border-radius: 0.35rem;
  background: var(--gradient-button);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.admin-form input[type="file"]::-webkit-file-upload-button:hover {
  filter: brightness(1.05);
}

.admin-form input[type="file"]::file-selector-button {
  padding: 0.4rem 0.9rem;
  margin-right: 0.75rem;
  border: none;
  border-radius: 0.35rem;
  background: var(--gradient-button);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-table input:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px rgba(255, 173, 87, 0.15);
}

.admin-form input[type="text"],
.admin-form input[type="url"],
.admin-form input[type="email"] {
  min-width: 180px;
  flex: 1;
}

.admin-form textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.form-group label {
  font-size: 0.82rem;
  color: var(--text-muted-readable);
  font-weight: 600;
}

/* Admin-only: brighter labels for legibility against the dark glass card.
   Tenant portal forms keep the muted token. */
.admin-form .form-group label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.admin-form-stacked > .form-group > label:not(.logo-remove-label),
.updates-image-row__fields > label:not(.logo-remove-label) {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
}

.form-group-full {
  width: 100%;
  flex-basis: 100%;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.table-scroll { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th, .admin-table td {
  padding: 0.72rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid rgba(198, 205, 255, 0.1);
  color: var(--text-secondary);
  vertical-align: middle;
}

.admin-table th {
  color: rgba(255, 240, 184, 0.88);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0;
  background: rgba(21, 30, 62, 0.42);
}

.admin-table tbody tr:hover {
  background: rgba(198, 205, 255, 0.045);
}

.admin-table .nav-link {
  display: inline-flex;
  padding: 0.15rem 0;
  color: var(--color-cream);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.admin-table .nav-link:hover {
  color: #fff;
  text-decoration: underline;
  background: transparent;
}

.admin-table .actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Action cluster: one primary text button followed by compact icon-only
   buttons. Reduces visual noise when each row has many secondary links. */
.admin-table .actions--cluster {
  align-items: center;
  gap: 0.35rem;
}
.admin-table .actions--cluster .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(198, 205, 255, 0.16);
  background: rgba(8, 14, 36, 0.5);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.admin-table .actions--cluster .btn-icon:hover,
.admin-table .actions--cluster .btn-icon:focus-visible {
  color: #fff;
  border-color: rgba(255, 173, 87, 0.55);
  background: rgba(255, 173, 87, 0.12);
  outline: none;
}
.admin-table .actions--cluster .btn-icon i,
.admin-table .actions--cluster .btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Client status badge */
.status-active {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 173, 87, 0.14);
  color: var(--color-cream);
  border: 1px solid rgba(255, 196, 120, 0.38);
  font-weight: 700;
  font-size: 0.85rem;
}

.status-inactive {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(198, 205, 255, 0.1);
  color: var(--color-lavender);
  border: 1px solid rgba(198, 205, 255, 0.26);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Search form */
.search-form {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem;
  border: 1px solid rgba(198, 205, 255, 0.14);
  border-radius: 0.5rem;
  background: rgba(26, 49, 116, 0.44);
}

.search-form input {
  flex: 1;
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(198, 205, 255, 0.28);
  border-radius: 0.4rem;
  background: rgba(21, 30, 62, 0.78);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.search-form input:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px rgba(255, 173, 87, 0.15);
}

/* Tabs navigation */
.admin-tabs {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
  border: 1px solid rgba(198, 205, 255, 0.16);
  border-radius: 0.5rem;
  background: rgba(26, 49, 116, 0.58);
  box-shadow: none;
  overflow-x: auto;
}

.admin-tab {
  padding: 0.56rem 0.9rem;
  text-decoration: none;
  font-size: 0.9rem;
  color: rgba(198, 205, 255, 0.88);
  border: 1px solid transparent;
  border-radius: 0.38rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.admin-tab:hover {
  color: #fff;
  background: rgba(198, 205, 255, 0.08);
  border-color: rgba(198, 205, 255, 0.14);
}

.admin-tab.active {
  color: var(--color-navy);
  background: var(--color-amber);
  border-color: rgba(255, 240, 184, 0.5);
  box-shadow: none;
}

/* Error/conflict message */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.alert-error {
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: #e88a82;
}

.alert-success {
  background: rgba(39, 174, 96, 0.15);
  border: 1px solid rgba(39, 174, 96, 0.3);
  color: #6bde99;
}

/* Footer */
.footer {
  text-align: center;
  padding: 1.75rem;
  color: var(--text-muted-readable);
  font-size: 0.8rem;
  border-top: 1px solid rgba(31, 69, 170, 0.2);
  position: relative;
  z-index: 1;
  background: rgba(10, 17, 43, 0.82);
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
}

/* Card stagger animation */
.card-grid .card { animation: fadeInUp 0.4s ease-out both; }
.card-grid .card:nth-child(1) { animation-delay: 0.05s; }
.card-grid .card:nth-child(2) { animation-delay: 0.1s; }
.card-grid .card:nth-child(3) { animation-delay: 0.15s; }
.card-grid .card:nth-child(4) { animation-delay: 0.2s; }

.chips-row .chip { animation: fadeInUp 0.4s ease-out both; }
.chips-row .chip:nth-child(1) { animation-delay: 0.05s; }
.chips-row .chip:nth-child(2) { animation-delay: 0.1s; }
.chips-row .chip:nth-child(3) { animation-delay: 0.15s; }
.chips-row .chip:nth-child(4) { animation-delay: 0.2s; }

/* Responsive */
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .quarterly-grid { grid-template-columns: 1fr; }
  .admin-form { flex-direction: column; }
  .admin-form input { width: 100%; min-width: auto; }
  .admin-tabs { overflow-x: auto; }
  .admin-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .updates-brief {
    grid-template-columns: 1fr;
  }
  .updates-image-row {
    flex-direction: column;
  }
  .updates-image-row__preview {
    align-items: flex-start;
  }
}

/* ── Smallest mobile (≤480px): wrap navbar so logo+admin+user+logout never
      overflow the viewport. Without this, an email like vegard@nova.rocket.no
      pushes the whole page into horizontal scroll on a 320px screen. ── */
@media (max-width: 480px) {
  .navbar-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 0.5rem 0;
    gap: 0.5rem;
  }
  .navbar-right {
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .nav-user {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Touch targets: bump small buttons and tabs to 44px on coarse pointers
      (Apple HIG / Material minimum). Desktop hover stays compact. ── */
@media (pointer: coarse) {
  .btn-sm {
    padding: 0.6rem 1rem;
    min-height: 44px;
  }
  /* Tilbakemeldings-triggeren i navbaren: den er synlig på mobil (navbaren
     wrapper, den skjules ikke), men rendret bare 27px høy — under minstemålet
     for et treffsikkert tapp. Uten dette er «en knapp på alle sider» i praksis
     bomskudd-utsatt på telefon. */
  .btn-bug {
    padding: 0.6rem 0.9rem;
    min-height: 44px;
  }
  .admin-tab,
  .portal-nav-item {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
}

/* ── Ultrawide (≥1800px, e.g. 5K / 57"): let the container breathe and
      flow grids into more columns instead of stranding 80% of the screen
      as empty navy. ── */
@media (min-width: 1800px) {
  .navbar-inner,
  .container {
    max-width: 1600px;
  }
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .quarterly-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }
  .maturity-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }
}

/* ─────────────────────────────────────────────────────────────
   v2 responsive layer — added in PR-portal-redesign
   Alle regler scoped til .v2-portal (klasse på <body> kun for portal).
   Specificity (0,2,0) > legacy single-class (0,1,0).
   ───────────────────────────────────────────────────────────── */
.v2-portal .container { max-width: 1200px; }

.v2-portal .quarterly-content,
.v2-portal .updates-content {
  max-width: 65ch;
  overflow-wrap: break-word;
  hyphens: auto;
}

.v2-portal .welcome-hero h1 {
  font-size: 1.75rem;
}

.v2-portal .section-title {
  font-size: 1.5rem;
}

.v2-portal .dashboard-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  min-height: calc(2em * 1.4);
  font-size: 0.95rem;
  line-height: 1.4;
}

.v2-portal .maturity-card-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  min-height: calc(2em * 1.4);
  line-height: 1.4;
}

.v2-portal .chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.v2-portal .chip {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-portal .chip-label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 1px);
  vertical-align: middle;
}

.v2-portal .dashboards-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 720px));
  max-width: max-content;
  margin-inline: auto;
}

.v2-portal .dashboard-card {
  min-width: 0;
}

.v2-portal .quarterly-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.v2-portal .maturity-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.v2-portal .portal-nav {
  padding-inline-end: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) rgba(0, 0, 0, 0);
}

.v2-portal .portal-nav::-webkit-scrollbar {
  height: 6px;
}

.v2-portal .portal-nav::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 3px;
}

.v2-portal .portal-nav::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

/* Kant-fade som signaliserer at nav-en scroller horisontalt på smale skjermer —
   ellers blir faner utenfor viewporten usynlige (samme prinsipp som admin-tabs). */
@media (max-width: 45em) {
  .v2-portal .portal-nav {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
  }
}

@media (max-width: 30em) {
  .v2-portal .chip {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }

  .v2-portal .portal-nav {
    gap: 0.15rem;
    padding: 0.25rem 1rem 0.25rem 0.25rem;
  }

  .v2-portal .portal-nav-item {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 37.5em) {
  .v2-portal .maturity-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 45em) {
  .v2-portal .welcome-hero h1 {
    font-size: 2rem;
  }

  .v2-portal .section-title {
    font-size: 1.75rem;
  }

  .v2-portal .quarterly-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 90em) {
  .v2-portal .container {
    max-width: 1320px;
  }

  .v2-portal .welcome-hero h1 {
    font-size: 2.5rem;
  }

  .v2-portal .section-title {
    font-size: 2rem;
  }

  .v2-portal .dashboard-card__title {
    font-size: 1.1rem;
  }

  .v2-portal .maturity-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (min-width: 112.5em) {
  .v2-portal .container {
    max-width: 1600px;
  }

  .v2-portal .dashboards-grid {
    gap: var(--space-lg);
  }

  .v2-portal .quarterly-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }
}

@media (min-width: 160em) {
  .v2-portal .container {
    max-width: 1920px;
    padding-inline: 2rem;
  }

  .v2-portal .welcome-hero h1 {
    font-size: 2.75rem;
  }
}

@media (min-width: 240em) {
  .v2-portal .container {
    max-width: 2400px;
    padding-inline: 3rem;
  }
}

/* ── Keyboard accessibility: visible focus ring on all interactive elements.
      Tasterbrukere så ingenting tidligere. ── */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
  border-radius: 0.35rem;
}

/* Screen-reader-only utility (a11y for unlabelled search input etc.) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Admin: breadcrumb on per-client subpages. ── */
.admin-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--surface-panel);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  color: var(--text-secondary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.admin-breadcrumb__link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
}
.admin-breadcrumb__link:hover {
  color: var(--color-amber);
  text-decoration: underline;
}
.admin-breadcrumb__sep {
  color: rgba(232, 236, 248, 0.65);
}
.admin-breadcrumb__current {
  color: #fff;
  font-weight: 700;
}
.admin-breadcrumb__back {
  margin-left: auto;
  color: var(--color-cream);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.admin-breadcrumb__back:hover { text-decoration: underline; }

/* ── Admin: tab variants. ── */
/* Global tabs (klienter / admins / disciplines / oppdateringer) — top-level nav. */
.admin-tabs--global { /* default styling already covers this */ }

/* Per-klient tabs (general / users / content / links / maturity) — sub-nav.
   Slight tint + denser to read as nested. */
.admin-tabs--client {
  background: rgba(8, 14, 36, 0.78);
  border-radius: 0.5rem;
  padding: 0.25rem;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

/* ── Admin: scrollable tabs get a fade hint on the overflowing edge.
       Two independent classes (toggled by per-edge IntersectionObservers in
       admin-editor.js) so the fade can be left-only, right-only, or both. ── */
.admin-tabs.has-mask-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black 100%);
          mask-image: linear-gradient(to right, transparent 0, black 1rem, black 100%);
}
.admin-tabs.has-mask-right {
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 1rem), transparent 100%);
          mask-image: linear-gradient(to right, black 0, black calc(100% - 1rem), transparent 100%);
}
.admin-tabs.has-mask-left.has-mask-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
}

/* ── Quarterly card header: title + period chip + "Sist lagret" timestamp. ── */
.quarterly-card-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.quarterly-card-header h3 {
  margin: 0;
  flex: 0 0 auto;
}
.period-chip {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(159, 122, 234, 0.18);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.meta-saved {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted-readable);
  font-style: italic;
}

/* ── Admin: saved-content preview card (mirrors what tenants see). ── */
.admin-form-card--preview {
  border: 1px dashed var(--glass-border, rgba(255, 255, 255, 0.15));
  background: rgba(8, 14, 36, 0.72);
}
.admin-form-card--preview h3 {
  color: var(--text-secondary);
}

/* ── Sticky save bar inside admin-form-cards.
       z-index: 40 keeps it above Quill's tooltip layer. Disabled on short or
       touch viewports to avoid colliding with the iOS virtual keyboard.
       Depends on .admin-form-card not setting overflow: hidden. ── */
.form-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin: 1rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem;
  background: rgba(13, 22, 56, 0.85);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-height: 700px), (hover: none) {
  .form-actions--sticky {
    position: static;
    margin: 1rem 0 0;
    padding: 0;
    background: none;
    border: none;
    z-index: auto;
    backdrop-filter: none;
  }
}

/* ── Inline status banners surfaced by the fetch-based submit handler.
       409 = conflict, 413 = payload-too-large, 5xx/network = generic. ── */
.form-banner {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.form-banner--conflict {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: rgba(254, 215, 170, 0.95);
}
.form-banner--error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: rgba(254, 202, 202, 0.95);
}
.form-banner__copy {
  margin-left: auto;
}

/* ── Bug-rapport-modal ──
   Trigger-knappen sitter på navbaren (begge layouts) og åpner en dialog som
   POSTer multipart til /bug-reports. Scopes med .bug-report-* slik at den
   ikke kolliderer med admin-skjemaprimitivene over. */
.btn-bug {
  background: transparent;
  color: var(--text-muted-readable);
  border: 1px solid rgba(255, 173, 87, 0.35);
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.btn-bug:hover,
.btn-bug:focus-visible {
  color: var(--color-amber);
  border-color: var(--color-amber);
  background: rgba(255, 173, 87, 0.08);
  outline: none;
}

.bug-report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 30, 0.72);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.15s ease;
}
.bug-report-overlay[hidden] { display: none; }

.bug-report-modal {
  background: var(--surface-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.bug-report-modal h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0 0 0.25rem;
  color: #fff;
}
.bug-report-modal__form {
  margin-top: 0.9rem;
}
.bug-report-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}
.bug-report-modal__field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.bug-report-modal__field input[type="text"],
.bug-report-modal__field textarea {
  width: 100%;
  background: var(--surface-input);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  border-radius: 0.45rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  resize: vertical;
}
.bug-report-modal__field input[type="text"]:focus,
.bug-report-modal__field textarea:focus {
  outline: 2px solid var(--color-amber);
  outline-offset: 1px;
}

/* Type-velger (spec v2): ekte radios i et <fieldset> med <legend>. Fieldsettet
   nullstilles helt — nettleserens standardramme/-padding matcher ingenting
   annet i modalen. */
.bug-report-modal__types {
  border: 0;
  padding: 0;
  margin: 0 0 0.9rem;
  min-width: 0;
}
.bug-report-modal__types-legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
/* <legend> er ikke et flex-item — radioene må ligge i en egen indre flexrad,
   ellers kollapser/hopper legenden når fieldsettet gjøres til flex-container. */
.bug-report-modal__types-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
/* Må matche/slå spesifisiteten til `.bug-report-modal__field label` (0,1,1) —
   ellers arver radio-etikettene font-weight: 600 og rendrer fete. */
.bug-report-modal__types .bug-report-modal__type-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-primary);
  cursor: pointer;
}
.bug-report-modal__type-option input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-amber);
  cursor: pointer;
}
.bug-report-modal__type-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

/* Felles bug-modal-spec: den native filvelgeren skjules visuelt (sr-only),
   men IKKE med display:none — da ville den falt ut av tab-rekkefølgen og
   label-koblingen ville mistet effekt. «Velg bilde»-knappen driver den. */
.bug-report-modal__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Fokus på den skjulte input-en må vises på knappen ved siden av, ellers er
   tastaturnavigasjonen usynlig. */
.bug-report-modal__file-input:focus + .bug-report-modal__file-row .bug-report-modal__file-btn,
.bug-report-modal__file-input:focus-visible
  + .bug-report-modal__file-row
  .bug-report-modal__file-btn {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}
.bug-report-modal__file-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.bug-report-modal__file-btn {
  flex: 0 0 auto;
}
.bug-report-modal__filename {
  font-size: 0.82rem;
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bug-report-modal__filename--empty {
  color: var(--text-muted-readable);
}
.bug-report-modal__file-clear {
  flex: 0 0 auto;
  font-size: 0.8rem;
}
.bug-report-modal__file-clear[hidden] {
  display: none;
}
.bug-report-modal__preview {
  /* Feltet er en flex-kolonne (align-items: stretch) — uten align-self ville
     img-en blitt strukket til full bredde og fått feil sideforhold. */
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  margin-top: 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
}
/* Eksplisitt [hidden]-regel: hvis noen senere gir preview-en en display-verdi,
   slår den ut [hidden] og et tomt/brukket bilde vises fra første åpning. */
.bug-report-modal__preview[hidden] {
  display: none;
}
.bug-report-modal__hint {
  font-size: 0.78rem;
  color: var(--text-muted-readable);
  margin: 0.25rem 0 1rem;
}
.bug-report-modal__error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: rgba(254, 202, 202, 0.95);
  padding: 0.55rem 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.bug-report-modal__success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: rgba(187, 247, 208, 0.95);
  padding: 0.55rem 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.bug-report-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.bug-report-modal__actions .btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}
.bug-report-modal__actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Respect prefers-reduced-motion (a11y + battery on mobile). ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── TikTok-trend: Rocket's anbefaling-kort (speil av rapporten) ──────
   Brukes på {slug}.rocket.no/tiktok-trend. Selv-inneholdt mørk palett +
   font-stack siden klient-portalens hovedtema er lyst og bruker en annen
   token-skala. Klasse-prefix .rec- matcher rapportens malverk slik at
   markup kan flyttes mellom prosjekter uten å renames.                 */
.tt-rec-scope {
  --tt-bg: #0d1530;
  --tt-bg-2: #131c3f;
  --tt-bg-3: #18234c;
  --tt-border: rgba(255, 255, 255, 0.12);
  --tt-border-2: rgba(255, 255, 255, 0.2);
  --tt-text: #f4f1e6;
  --tt-text-2: #dde2f2;
  /* Bumpet fra #8b95b8 → #b6bedb for å passere WCAG AA mot mørk navy bg.
     .why-tekst og rec-foot er små og kursivert, så vi trenger ekstra
     lyshet for å være lesbar uten å skrike. */
  --tt-text-3: #b6bedb;
  --tt-text-fade: #8993b5;
  --tt-orange: #ffad57;
  --tt-orange-2: #ffc478;
  --tt-orange-bg: rgba(255, 173, 87, 0.12);
  --tt-green: #5dd9b8;
  --tt-red: #ff7a7a;
  --tt-blue-soft: #c6cdff;
  --tt-font-sans: 'Open Sans', -apple-system, system-ui, sans-serif;
  --tt-font-display: 'Montserrat', 'Open Sans', system-ui, sans-serif;
  /* "mono"-tokenet er beholdt for bakoverkompat med rapporten, men peker
     nå på Open Sans — vi bruker ikke monospace lenger i UI-en (data-tabell,
     labels, sparkline-datoer, etc. — alt skal være Open Sans). */
  --tt-font-mono: 'Open Sans', -apple-system, system-ui, sans-serif;
}

.tt-rec-scope .rec-card {
  background: var(--tt-bg-2);
  color: var(--tt-text);
  border: 1px solid var(--tt-border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  font-family: var(--tt-font-sans);
}
.tt-rec-scope .rec-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--tt-orange), var(--tt-green), var(--tt-blue-soft));
  opacity: 0.7;
}
.tt-rec-scope .rec-head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--tt-border);
}
.tt-rec-scope .rec-head .eyebrow {
  font-family: var(--tt-font-mono); font-size: 10.5px;
  color: var(--tt-orange); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.tt-rec-scope .rec-head h2 {
  font-family: var(--tt-font-display);
  font-size: 26px; font-weight: 700; color: var(--tt-text);
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}
.tt-rec-scope .rec-head .stand {
  color: var(--tt-text-2); font-size: 13.5px; line-height: 1.55;
  max-width: 64ch;
  margin: 0;
}
.tt-rec-scope .rec-profile-bar {
  padding: 16px 28px 14px;
  border-bottom: 1px solid var(--tt-border);
  background: linear-gradient(to right, rgba(255, 173, 87, 0.06), transparent 60%);
}
.tt-rec-scope .rec-profile-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tt-rec-scope .rec-profile-row .rec-meta-label {
  font-family: var(--tt-font-mono); font-size: 10.5px;
  color: var(--tt-orange); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tt-rec-scope .rec-profile-row .rec-meta-value {
  background: var(--tt-bg-3);
  border: 1px solid var(--tt-orange);
  color: var(--tt-text);
  font-size: 13px; font-weight: 500;
  padding: 7px 12px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(255, 173, 87, 0.18);
}
.tt-rec-scope .rec-profile-hint {
  color: var(--tt-text-3);
  font-size: 12px;
  font-style: italic;
}
.tt-rec-scope .rec-meta-line {
  padding: 14px 28px;
  border-bottom: 1px solid var(--tt-border);
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
}
.tt-rec-scope .rec-meta-cell {
  display: flex; flex-direction: column; gap: 6px;
}
.tt-rec-scope .rec-meta-cell-label {
  font-family: var(--tt-font-mono); font-size: 10.5px;
  color: var(--tt-text-3); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tt-rec-scope .rec-meta-cell-value {
  font-size: 13.5px; color: var(--tt-text);
}
.tt-rec-scope .rec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-rec-scope .rec-chip {
  padding: 5px 11px;
  border: 1px solid var(--tt-orange);
  background: var(--tt-orange-bg);
  color: var(--tt-orange);
  font-family: var(--tt-font-mono);
  font-size: 11px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.tt-rec-scope .rec-output {
  padding: 24px 28px 28px;
  display: grid;
  /* "Kast deg på" tar hele bredden — den er hovedanbefalingen. "Unngå" og
     "Det menneskelige" stacker under, også full bredde. På 1100+ px viser
     vi 2 items pr rad inne i hver kolonne via rec-list-grid. */
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.tt-rec-scope .rec-col h3 {
  font-family: var(--tt-font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 14px 0;
  display: flex; align-items: center; gap: 8px;
}
.tt-rec-scope .rec-col.do h3 { color: var(--tt-green); }
.tt-rec-scope .rec-col.dont h3 { color: var(--tt-red); }
.tt-rec-scope .rec-col h3::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
}
.tt-rec-scope .rec-col.do h3::before { background: var(--tt-green); box-shadow: 0 0 8px var(--tt-green); }
.tt-rec-scope .rec-col.dont h3::before { background: var(--tt-red); box-shadow: 0 0 8px var(--tt-red); }
.tt-rec-scope .rec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Picks i en kort-grid: 3 kort på bred skjerm, 2 på mellom, 1 på smal.
     Hver pick får sitt eget kort som blir lesbar uten å lese et langt
     listenivå. Kortene fyller hele bredden av rec-output. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .tt-rec-scope .rec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tt-rec-scope .rec-list { grid-template-columns: minmax(0, 1fr); }
}
.tt-rec-scope .rec-item {
  padding: 16px 18px;
  border: 1px solid var(--tt-border);
  border-radius: 7px;
  background: var(--tt-bg-3);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
}
.tt-rec-scope .rec-col.do .rec-item {
  border-left: 3px solid var(--tt-green);
}
.tt-rec-scope .rec-col.dont .rec-item {
  border-left: 3px solid var(--tt-red);
}
.tt-rec-scope .rec-item .num {
  font-family: var(--tt-font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--tt-text-fade);
  text-align: right;
}
.tt-rec-scope .rec-col.do .rec-item .num { color: var(--tt-green); }
.tt-rec-scope .rec-col.dont .rec-item .num { color: var(--tt-red); }
.tt-rec-scope .rec-item .ttl {
  font-size: 15px; font-weight: 700; color: var(--tt-text);
  margin-bottom: 6px;
  word-break: break-word;
}
.tt-rec-scope .rec-item .ttl a {
  color: var(--tt-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 173, 87, 0.55);
  text-underline-offset: 3px;
}
.tt-rec-scope .rec-item .ttl a:hover {
  color: var(--tt-orange);
  text-decoration-color: var(--tt-orange);
}
.tt-rec-scope .rec-item .ttl .kind {
  font-family: var(--tt-font-mono); font-size: 10px;
  color: var(--tt-text-fade);
  margin-left: 8px; padding: 1px 6px;
  border: 1px solid var(--tt-border-2); border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}
.tt-rec-scope .rec-item .hook {
  font-size: 13.5px; color: var(--tt-text-2);
  line-height: 1.55;
  margin-bottom: 8px;
}
.tt-rec-scope .rec-item .hook strong { color: var(--tt-text); }
.tt-rec-scope .rec-item .why {
  font-size: 12.5px; color: var(--tt-text-3);
  font-family: var(--tt-font-mono);
  line-height: 1.5;
}
.tt-rec-scope .rec-human {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 18px 22px;
  background: var(--tt-bg-3);
  border-left: 3px solid var(--tt-orange);
  border-radius: 5px;
}
.tt-rec-scope .rec-human h4 {
  font-family: var(--tt-font-mono); font-size: 10.5px;
  color: var(--tt-orange); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.tt-rec-scope .rec-human p {
  font-size: 13.5px; color: var(--tt-text-2);
  line-height: 1.6;
  margin: 0;
}
.tt-rec-scope .rec-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--tt-text-3);
  font-family: var(--tt-font-mono); font-size: 12px;
  padding: 32px 0;
}
.tt-rec-scope .rec-foot {
  padding: 14px 28px;
  border-top: 1px solid var(--tt-border);
  font-family: var(--tt-font-mono);
  font-size: 11.5px;
  color: var(--tt-text-fade);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tt-rec-scope .rec-foot-cta {
  color: var(--tt-orange);
  text-decoration: none;
  font-weight: 700;
  font-family: var(--tt-font-sans);
  font-size: 13px;
  letter-spacing: 0;
}
.tt-rec-scope .rec-foot-cta:hover {
  color: var(--tt-orange-2);
  text-decoration: underline;
}
.tt-rec-scope .rec-foot-meta {
  margin-left: auto;
}
@media (max-width: 900px) {
  .tt-rec-scope .rec-output { grid-template-columns: 1fr; }
}

/* ─── Datagrunnlaget — filtrert hashtag-tabell under rec-card ─── */
.tt-rec-scope .rec-data {
  margin-top: 28px;
}
.tt-rec-scope .rec-data-table {
  padding: 6px 28px 18px;
  font-family: var(--tt-font-mono);
  font-size: 13px;
}
.tt-rec-scope .rec-data-row {
  display: grid;
  /* # | Hashtag | Sparkline | Hastighet | Trend-pill | NO | chevron */
  grid-template-columns: 36px minmax(0, 1.5fr) 130px 90px 110px 36px 24px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--tt-border);
}
.tt-rec-scope .rec-data-row:last-child { border-bottom: none; }
.tt-rec-scope .rec-data-row--head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tt-text-fade);
  border-bottom: 1px solid var(--tt-border-2);
  padding-top: 4px;
}
.tt-rec-scope .rec-data-cell--rank {
  color: var(--tt-text-fade);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tt-rec-scope .rec-data-cell--tag {
  color: var(--tt-text);
  font-weight: 600;
  font-family: var(--tt-font-sans);
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-rec-scope .rec-data-cell--tag a {
  color: var(--tt-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 173, 87, 0.5);
  text-underline-offset: 3px;
}
.tt-rec-scope .rec-data-cell--tag a:hover {
  color: var(--tt-orange);
  text-decoration-color: var(--tt-orange);
}
.tt-rec-scope .rec-data-cell--ind {
  color: var(--tt-text-3);
  font-family: var(--tt-font-sans);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-rec-scope .rec-data-cell--vs {
  color: var(--tt-text);
  font-family: var(--tt-font-mono);
  font-weight: 600;
  font-size: 13.5px;
}
.tt-rec-scope .rec-data-cell--trend {
  font-size: 11px;
}
.tt-rec-scope .rec-data-trend {
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  font-weight: 600;
}
.tt-rec-scope .rec-data-trend.eksp { background: rgba(93, 217, 184, 0.18); color: var(--tt-green); }
.tt-rec-scope .rec-data-trend.rise { background: rgba(255, 173, 87, 0.18); color: var(--tt-orange); }
.tt-rec-scope .rec-data-trend.ever { background: rgba(198, 205, 255, 0.18); color: var(--tt-blue-soft); }
.tt-rec-scope .rec-data-trend.dy   { background: rgba(255, 122, 122, 0.18); color: var(--tt-red); }
.tt-rec-scope .rec-data-cell--no {
  text-align: center;
}
.tt-rec-scope .rec-data-genuine {
  color: var(--tt-green);
  font-size: 14px;
  line-height: 1;
}
.tt-rec-scope .rec-foot--data {
  border-top: 1px solid var(--tt-border);
}

/* Klikkbar rad — visuell affordance */
.tt-rec-scope .rec-data-row--main {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.tt-rec-scope .rec-data-row--main:hover {
  background: rgba(255, 173, 87, 0.05);
}
.tt-rec-scope .rec-data-row--main:focus-visible {
  outline: 2px solid var(--tt-orange);
  outline-offset: -2px;
  background: rgba(255, 173, 87, 0.08);
}
.tt-rec-scope .rec-data-row--open {
  background: rgba(255, 173, 87, 0.08);
}
.tt-rec-scope .rec-data-cell--toggle {
  display: flex;
  justify-content: center;
  color: var(--tt-text-fade);
  transition: transform 0.18s, color 0.18s;
}
.tt-rec-scope .rec-data-row--open .rec-data-cell--toggle {
  transform: rotate(180deg);
  color: var(--tt-orange);
}

/* Sparkline */
.tt-rec-scope .rec-data-cell--spark {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.tt-rec-scope .rec-data-spark {
  width: 100%;
  height: 28px;
  display: block;
}
.tt-rec-scope .rec-data-spark--big {
  height: 160px;
}
.tt-rec-scope .rec-data-spark__line {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.tt-rec-scope .rec-data-spark__fill {
  stroke: none;
  opacity: 0.22;
}
.tt-rec-scope .rec-data-spark--eksp .rec-data-spark__line { stroke: var(--tt-green); }
.tt-rec-scope .rec-data-spark--eksp .rec-data-spark__fill { fill: var(--tt-green); }
.tt-rec-scope .rec-data-spark--rise .rec-data-spark__line { stroke: var(--tt-orange); }
.tt-rec-scope .rec-data-spark--rise .rec-data-spark__fill { fill: var(--tt-orange); }
.tt-rec-scope .rec-data-spark--ever .rec-data-spark__line { stroke: var(--tt-blue-soft); }
.tt-rec-scope .rec-data-spark--ever .rec-data-spark__fill { fill: var(--tt-blue-soft); }
.tt-rec-scope .rec-data-spark--dy   .rec-data-spark__line { stroke: var(--tt-red); }
.tt-rec-scope .rec-data-spark--dy   .rec-data-spark__fill { fill: var(--tt-red); }

/* Utvidet detalj-rad */
.tt-rec-scope .rec-data-detail {
  border-bottom: 1px solid var(--tt-border);
  padding: 18px 4px 22px;
  background: rgba(8, 14, 36, 0.45);
}
.tt-rec-scope .rec-data-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.tt-rec-scope .rec-data-detail__chart {
  padding: 8px 12px;
}
.tt-rec-scope .rec-data-detail__label {
  font-family: var(--tt-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-text-3);
  margin-bottom: 10px;
}
.tt-rec-scope .rec-data-detail__dates {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--tt-font-mono);
  font-size: 10.5px;
  color: var(--tt-text-fade);
  letter-spacing: 0.04em;
}
.tt-rec-scope .rec-data-detail__empty {
  font-family: var(--tt-font-mono);
  font-size: 12px;
  color: var(--tt-text-3);
  padding: 32px 0;
  text-align: center;
}
.tt-rec-scope .rec-data-detail__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 12px;
}
.tt-rec-scope .rec-data-stat {
  background: var(--tt-bg-3);
  border: 1px solid var(--tt-border);
  border-radius: 6px;
  padding: 14px 14px;
}
.tt-rec-scope .rec-data-stat__num {
  font-family: var(--tt-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--tt-text);
  line-height: 1;
  margin-bottom: 6px;
}
.tt-rec-scope .rec-data-stat__lab {
  font-family: var(--tt-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tt-text-3);
}
.tt-rec-scope .rec-data-detail__meta {
  grid-column: 1 / -1;
  padding: 4px 12px 0;
  border-top: 1px dashed var(--tt-border);
  padding-top: 14px;
  margin-top: 4px;
}
.tt-rec-scope .rec-data-detail__row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
}
.tt-rec-scope .rec-data-detail__row-label {
  font-family: var(--tt-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tt-text-3);
  min-width: 110px;
}
.tt-rec-scope .rec-data-detail__row-value {
  color: var(--tt-text-2);
}
.tt-rec-scope .rec-data-detail__cta {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--tt-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tt-orange);
  border-bottom: 1px solid var(--tt-orange);
  padding-bottom: 2px;
  text-decoration: none;
}
.tt-rec-scope .rec-data-detail__cta:hover {
  color: var(--tt-text);
  border-bottom-color: var(--tt-text);
}

@media (max-width: 900px) {
  .tt-rec-scope .rec-data-row {
    grid-template-columns: 28px minmax(0, 1.4fr) 90px 70px 24px;
    gap: 8px;
    font-size: 12px;
  }
  .tt-rec-scope .rec-data-cell--vs { display: none; }
  .tt-rec-scope .rec-data-cell--no { display: none; }
  .tt-rec-scope .rec-data-cell--tag { font-size: 13.5px; }
  .tt-rec-scope .rec-data-detail__grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   TIKTOK-TRENDER v2 — Editorial strategy briefing.
   Klient-vendt rec-card på {slug}.rocket.no/tiktok-trender.
   Selv-scoped under .tt-rec-v2; rører ikke andre regler.

   .tt-rec-scope-blokken over er bevart fordi /rapport-routen
   embedder samme markup-mønster (.rec-card etc.) via klient-
   rapport-filter.js — men STILEN der kommer fra rapportens egen
   HTML, ikke fra denne fila. tt-rec-scope er teknisk ubrukt nå,
   men holdt for å unngå et destruktivt CSS-cleanup mid-iterasjon.
═════════════════════════════════════════════════════════════════ */
.tt-rec-v2 {
  --tt2-bg:        #F5EFDD;
  --tt2-bg-2:      #FDF8E7;
  --tt2-ink:       #161D3E;
  --tt2-ink-2:     #2E3A66;
  --tt2-ink-soft:  #4A5577;
  --tt2-ink-mute:  #717B98;
  --tt2-rule:      rgba(22, 29, 62, 0.18);
  --tt2-rule-soft: rgba(22, 29, 62, 0.08);
  --tt2-amber:     #C8731E;
  --tt2-amber-2:   #FFAD57;
  --tt2-amber-bg:  rgba(255, 173, 87, 0.22);
  --tt2-avoid:     #A04938;
  --tt2-avoid-bg:  rgba(160, 73, 56, 0.16);

  --tt2-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --tt2-sans:    'Open Sans', -apple-system, system-ui, sans-serif;
  --tt2-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  background: var(--tt2-bg);
  color: var(--tt2-ink);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  font-family: var(--tt2-sans);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 60px -20px rgba(8, 14, 36, 0.55),
    0 4px 14px -4px rgba(8, 14, 36, 0.32);
}
.tt-rec-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}
.tt-rec-v2 > * { position: relative; z-index: 1; }

/* ─── Masthead ─── */
.tt-rec-v2__masthead {
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}
.tt-rec-v2__rule { height: 2px; background: var(--tt2-ink); margin-bottom: 1.1rem; }
.tt-rec-v2__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.8rem;
  font-family: var(--tt2-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt2-ink-soft);
}
.tt-rec-v2__eyebrow { font-weight: 500; }
.tt-rec-v2__profile {
  font-family: var(--tt2-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-variation-settings: 'opsz' 24;
  color: var(--tt2-amber);
  margin: 0 0 0.5rem;
}
.tt-rec-v2__head {
  font-family: var(--tt2-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--tt2-ink);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  text-wrap: balance;
}
.tt-rec-v2__head em {
  font-style: italic;
  font-weight: 700;
  color: var(--tt2-amber);
}
.tt-rec-v2__cats {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--tt2-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  color: var(--tt2-ink-2);
  font-variation-settings: 'opsz' 18;
}
.tt-rec-v2__cats-label {
  font-family: var(--tt2-mono);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  color: var(--tt2-ink-mute);
  margin-right: 0.4rem;
}
.tt-rec-v2__cat-sep { color: var(--tt2-amber); font-style: normal; margin: 0 0.15rem; }

/* ─── Sections ─── */
.tt-rec-v2__section--do,
.tt-rec-v2__section--avoid {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}
.tt-rec-v2__section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.8rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--tt2-rule);
}
.tt-rec-v2__section-head--center {
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}
.tt-rec-v2__section-num {
  font-family: var(--tt2-display);
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'opsz' 36;
  color: var(--tt2-amber);
  line-height: 1;
}
.tt-rec-v2__section--avoid .tt-rec-v2__section-num { color: var(--tt2-avoid); }
.tt-rec-v2__section-title {
  font-family: var(--tt2-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  letter-spacing: -0.018em;
  font-variation-settings: 'opsz' 48;
  color: var(--tt2-ink);
  margin: 0;
}
.tt-rec-v2__section-count {
  margin-left: auto;
  font-family: var(--tt2-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--tt2-ink-mute);
}

/* ─── Picks ─── */
.tt-rec-v2__picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
}
@media (max-width: 1100px) {
  .tt-rec-v2__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 720px) {
  .tt-rec-v2__picks { grid-template-columns: 1fr; gap: 1.5rem; }
}
.tt-rec-v2__pick {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--tt2-rule-soft);
  position: relative;
}
.tt-rec-v2__pick::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--tt2-amber);
}
.tt-rec-v2__pick--avoid::before { background: var(--tt2-avoid); }
.tt-rec-v2__pick-num {
  font-family: var(--tt2-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: 'opsz' 144;
  color: var(--tt2-ink);
  line-height: 0.95;
  letter-spacing: -0.04em;
  padding-top: 0.15rem;
}
.tt-rec-v2__pick--avoid .tt-rec-v2__pick-num { color: var(--tt2-avoid); opacity: 0.75; }
.tt-rec-v2__pick-kind {
  font-family: var(--tt2-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt2-ink-mute);
  margin-bottom: 0.45rem;
}
.tt-rec-v2__pick-title {
  font-family: var(--tt2-display);
  font-weight: 700;
  font-size: clamp(1.18rem, 1.5vw, 1.42rem);
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 36;
  color: var(--tt2-ink);
  margin: 0 0 0.7rem;
  line-height: 1.12;
  word-break: break-word;
}
.tt-rec-v2__pick-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to top,
    var(--tt2-amber-bg) 0, var(--tt2-amber-bg) 28%, transparent 28%);
  padding: 0 0.05em;
  transition: background-image 0.3s ease;
}
.tt-rec-v2__pick-title a:hover {
  background-image: linear-gradient(to top,
    var(--tt2-amber-bg) 0, var(--tt2-amber-bg) 100%, transparent 100%);
}
.tt-rec-v2__pick--avoid .tt-rec-v2__pick-title a {
  background-image: linear-gradient(to top,
    var(--tt2-avoid-bg) 0, var(--tt2-avoid-bg) 28%, transparent 28%);
}
.tt-rec-v2__pick--avoid .tt-rec-v2__pick-title a:hover {
  background-image: linear-gradient(to top,
    var(--tt2-avoid-bg) 0, var(--tt2-avoid-bg) 100%, transparent 100%);
}
.tt-rec-v2__pick-hook {
  font-family: var(--tt2-sans);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--tt2-ink-2);
  margin: 0 0 0.85rem;
}
.tt-rec-v2__pick-why {
  font-family: var(--tt2-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--tt2-ink-soft);
  padding-top: 0.65rem;
  border-top: 1px dashed var(--tt2-rule);
}
.tt-rec-v2__pick-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--tt2-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt2-amber);
  text-decoration: none;
  border-bottom: 1px solid var(--tt2-amber);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.tt-rec-v2__pick--avoid .tt-rec-v2__pick-link {
  color: var(--tt2-avoid);
  border-bottom-color: var(--tt2-avoid);
}
.tt-rec-v2__pick-link:hover {
  color: var(--tt2-ink);
  border-bottom-color: var(--tt2-ink);
}

/* ─── Close: dark navy slab med III + CTA ─── */
.tt-rec-v2__close {
  background: var(--tt2-ink);
  color: #F5EFDD;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
}
.tt-rec-v2__close::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    radial-gradient(1px 1px at 22% 14%, rgba(255, 173, 87, 0.6), transparent 50%),
    radial-gradient(1px 1px at 73% 8%,  rgba(198, 205, 255, 0.5), transparent 50%),
    radial-gradient(1px 1px at 12% 78%, rgba(198, 205, 255, 0.45), transparent 50%),
    radial-gradient(1px 1px at 88% 62%, rgba(255, 173, 87, 0.5), transparent 50%),
    radial-gradient(1px 1px at 48% 92%, rgba(255, 240, 184, 0.45), transparent 50%);
}
.tt-rec-v2__section--human {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.tt-rec-v2__section--human .tt-rec-v2__section-num  { color: var(--tt2-amber-2); }
.tt-rec-v2__section--human .tt-rec-v2__section-title { color: #FDF8E7; }
.tt-rec-v2__quote {
  margin: 0 auto;
  max-width: 60ch;
  position: relative;
  padding: 2.5rem 1rem 0;
}
.tt-rec-v2__quote::before {
  content: '"';
  position: absolute;
  top: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--tt2-display);
  font-size: 5.5rem;
  line-height: 0.6;
  color: var(--tt2-amber-2);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
}
.tt-rec-v2__quote p {
  font-family: var(--tt2-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.85vw, 1.55rem);
  line-height: 1.45;
  color: #FDF8E7;
  margin: 0;
  font-variation-settings: 'opsz' 48;
}
.tt-rec-v2__quote-attr {
  margin-top: 1.5rem;
  font-family: var(--tt2-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253, 248, 231, 0.6);
}

/* ─── Foot / CTA ─── */
.tt-rec-v2__foot {
  text-align: center;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(253, 248, 231, 0.12);
}
.tt-rec-v2__foot-prompt {
  font-family: var(--tt2-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: rgba(253, 248, 231, 0.78);
  margin: 0 0 1.1rem;
  font-variation-settings: 'opsz' 24;
}
.tt-rec-v2__foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.85rem;
  background: var(--tt2-amber-2);
  color: var(--tt2-ink);
  font-family: var(--tt2-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 18px -4px rgba(255, 173, 87, 0.35);
}
.tt-rec-v2__foot-cta:hover {
  background: #FFC478;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(255, 173, 87, 0.5);
}
.tt-rec-v2__foot-cta:active { transform: translateY(0); }
.tt-rec-v2__foot-note {
  margin: 1.25rem 0 0;
  font-family: var(--tt2-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253, 248, 231, 0.4);
}

/* ─── Empty state ─── */
.tt-rec-v2__section--empty {
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(4rem, 6vw, 5.5rem);
  text-align: center;
}
.tt-rec-v2__empty h2 {
  font-family: var(--tt2-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--tt2-ink);
  margin: 0 0 0.6rem;
  font-variation-settings: 'opsz' 36;
}
.tt-rec-v2__empty p {
  color: var(--tt2-ink-soft);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.55;
}