/* Analytics. Layoutet er Philips (10. september 2026); farverne, radierne og skyggerne er
   appens egne fra tokens.css. Ingen ny palet: en analyseside der har sine egne farver laeser
   som en anden app, og det var praecis det tokens.css blev lavet for at stoppe.

   Basis-kontrollerne (knap, input, select, tabel, tom-tilstand) arver fra social.css, som
   .social-page allerede saetter. Her staar KUN det der er nyt paa den her flade. */

.omg-an { --an-radius:16px; }
.omg-an h1 { font-size:40px; line-height:1.1; letter-spacing:-.035em; margin:0 0 8px; }
.omg-an h1 span { color:var(--maerke-tekst); }
.omg-an h2 { font-size:20px; }
.omg-an h3 { font-size:16px; margin:0 0 6px; }
.an-eyebrow { font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:10px; }
.an-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.an-head p { color:var(--muted); margin:0; }
.an-head-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Platform-filteret. Chips frem for endnu en select: der er sjaeldent mere end fem, og
   det aktive valg skal kunne ses uden at aabne noget. */
.an-platforms { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.omg-an .an-platforms button { border-radius:999px; padding:8px 14px; display:inline-flex; align-items:center; gap:7px; min-height:36px; }
.omg-an .an-platforms button[aria-pressed=true] { background:var(--ink); color:var(--cream); border-color:var(--ink); font-weight:600; }
.an-mark { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; background:var(--felt-dyb); color:var(--ink-2); font-size:10px; font-weight:700; flex:none; }
.an-platforms button[aria-pressed=true] .an-mark { background:rgba(255,255,255,.18); color:var(--cream); }
.an-mark-instagram { background:var(--maerke-svag-2); color:var(--maerke-tekst); }
.an-mark-facebook,.an-mark-metaads { background:#e7eefc; color:#1b4ba8; }
.an-mark-linkedin { background:#e3eff6; color:#0a5f8a; }
.an-mark-youtube { background:#fde8e8; color:#a71d1d; }
.an-mark-tiktok { background:#eae7ef; color:#25202c; }

.an-scope { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:0 0 18px; }

/* ── Maalingskortene ──────────────────────────────────────────────────────────────────── */
.an-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:18px; }
.omg-an .an-metric { display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; background:var(--cream); border:1px solid var(--line); border-radius:var(--an-radius); padding:18px 18px 16px; min-height:104px; }
.omg-an button.an-metric:hover { background:var(--cream); border-color:var(--line-2); box-shadow:var(--gloed-1); }
.omg-an .an-metric.selected { border-color:var(--maerke-linje); box-shadow:var(--gloed-maerke); }
.an-metric-label { font-size:12px; color:var(--muted); }
.an-metric-value { font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.an-metric-note { font-size:11px; color:var(--muted); }
.an-metrics-detail { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.an-metrics-detail .an-metric { min-height:88px; padding:14px; }
.an-metrics-detail .an-metric-value { font-size:22px; }

/* ── Organisk / betalt ────────────────────────────────────────────────────────────────── */
.an-split { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,2.4fr); gap:12px; margin-bottom:18px; }
.an-split-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--an-radius); padding:18px; text-align:left; display:flex; flex-direction:column; gap:4px; }
.omg-an button.an-split-card,.omg-an .an-split-card button { border:0; background:transparent; padding:0; text-align:left; display:flex; flex-direction:column; gap:4px; min-height:0; }
.omg-an button.an-split-card { background:var(--cream); border:1px solid var(--line); padding:18px; }
.an-split-card strong { font-size:24px; letter-spacing:-.03em; }
.an-split-card small { color:var(--maerke-tekst); font-size:12px; }
.an-split-card.paid { background:var(--maerke-svag); border-color:var(--maerke-linje); display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,2fr); align-items:center; gap:18px; }
.an-split-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:14px; }
.an-split-stats span { display:block; font-size:12px; color:var(--muted); }
.an-split-stats strong { font-size:20px; letter-spacing:-.02em; }

/* ── Paneler og graf ──────────────────────────────────────────────────────────────────── */
.an-panel { background:var(--cream); border:1px solid var(--line); border-radius:var(--an-radius); padding:22px; margin-bottom:18px; }
.an-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.an-panel-head h2 { margin:0 0 4px; }
.an-panel-head .social-footnote { margin:0; }
.an-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,320px); gap:18px; align-items:start; }
.an-two .an-panel { margin-bottom:0; }
.an-next { background:var(--ink); color:var(--cream); border-radius:var(--an-radius); padding:24px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.an-next .an-eyebrow { color:rgba(255,255,255,.62); margin:0; }
.an-next h3 { font-size:24px; letter-spacing:-.03em; line-height:1.2; margin:0; }
.an-next p { color:rgba(255,255,255,.78); margin:0; font-size:13px; }

.an-chart-tabs { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.omg-an .an-chart-tabs button { border-radius:999px; padding:7px 13px; min-height:34px; font-size:13px; }
.omg-an .an-chart-tabs button[aria-pressed=true] { background:var(--felt-dyb); border-color:var(--line-2); font-weight:600; }
.an-chart-modes { margin-left:auto; display:flex; gap:6px; background:var(--felt); border-radius:999px; padding:3px; }
.omg-an .an-chart-modes button { border:0; background:transparent; }
.omg-an .an-chart-modes button[aria-pressed=true] { background:var(--cream); border:1px solid var(--line-2); }

.an-chart { position:relative; padding:0 0 4px 0; }
.an-chart svg { width:100%; height:260px; display:block; overflow:visible; }
.an-chart:focus-visible { outline:2px solid var(--maerke-tekst); outline-offset:4px; border-radius:8px; }
.an-gridline { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
.an-area { fill:var(--maerke-svag); }
.an-line { fill:none; stroke:var(--maerke-tekst); stroke-width:2; vector-effect:non-scaling-stroke; }
.an-dot { fill:var(--maerke-tekst); }
.an-cross { stroke:var(--line-2); stroke-width:1; vector-effect:non-scaling-stroke; }
.an-axis { position:absolute; font-size:11px; color:var(--muted); pointer-events:none; }
.an-axis-max { left:0; top:8px; } .an-axis-mid { left:0; top:49%; } .an-axis-zero { left:0; bottom:44px; }
.an-axis-first { left:56px; bottom:12px; } .an-axis-last { right:16px; bottom:12px; }
.an-tip { position:absolute; top:8px; background:var(--ink); color:var(--cream); border-radius:10px; padding:9px 12px; font-size:12px; pointer-events:none; display:grid; gap:2px; max-width:200px; box-shadow:var(--lift-1); }
.an-tip span { color:rgba(255,255,255,.66); }
.an-tip b { font-weight:700; }

/* Annonce-sammenligningen. Der findes ingen daglig serie for annoncer, saa de stilles op
   mod hinanden i stedet. Se noten under overskriften paa fladen. */
.an-bars { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.omg-an .an-bars button { width:100%; display:grid; grid-template-columns:minmax(120px,1.2fr) minmax(0,2fr) auto; align-items:center; gap:14px; text-align:left; background:transparent; border:0; border-radius:10px; padding:9px 10px; }
.omg-an .an-bars button:hover { background:var(--felt); }
.an-bar-label { display:flex; align-items:center; gap:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.an-bar-track { height:10px; border-radius:999px; background:var(--felt-dyb); overflow:hidden; }
.an-bar-fill { display:block; height:100%; border-radius:999px; background:var(--maerke-grad); }

/* ── Indholdsgitteret. Fire pr. raekke paa desktop, som i Philips design ──────────────── */
.an-grid-head { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin:26px 0 14px; }
.an-grid-head h2 { margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.an-grid-head .social-footnote { margin:0; }
.an-count { font-size:12px; font-weight:600; color:var(--muted); background:var(--felt-dyb); border-radius:999px; padding:3px 9px; }
.an-grid-tools { display:flex; gap:10px; flex-wrap:wrap; }
.an-grid-tools input { min-width:200px; }
.an-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.an-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--an-radius); overflow:hidden; display:flex; flex-direction:column; }
.an-card.is-ad { border-color:var(--maerke-linje); }
.omg-an .an-thumb { position:relative; border:0; border-radius:0; padding:0; width:100%; aspect-ratio:1/1; background:var(--felt-dyb); overflow:hidden; min-height:0; }
.an-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.an-thumb-empty { display:grid; place-items:center; width:100%; height:100%; font-size:28px; color:var(--muted); }
.an-format { position:absolute; left:10px; bottom:10px; background:var(--cream); border-radius:7px; padding:3px 8px; font-size:11px; }
.an-thumb-mark { position:absolute; right:10px; top:10px; }
.an-card-body { padding:14px 14px 0; }
.an-card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:8px; }
.an-card-meta strong { color:var(--ink); }
.omg-an .an-card-title { border:0; background:transparent; padding:0; text-align:left; font-size:15px; font-weight:700; letter-spacing:-.015em; line-height:1.35; min-height:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.an-card-badges { margin:10px 0 0; }
.an-badge { display:inline-block; font-size:11px; border-radius:999px; padding:3px 9px; background:var(--felt-dyb); color:var(--ink-2); }
.an-badge.win { background:var(--status-ok-svag); color:var(--status-ok); font-weight:600; }
.an-badge.warn { background:var(--status-obs-svag); color:var(--status-obs); }
.an-badge.paid { background:var(--maerke-svag-2); color:var(--maerke-tekst); }
.an-card-stats { display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; padding:14px; margin-top:auto; }
.omg-an .an-card-stats button { border:0; background:transparent; padding:6px 0; text-align:left; display:grid; gap:1px; min-height:0; }
.omg-an .an-card-stats button:hover strong { color:var(--maerke-tekst); }
.an-card-stats strong { font-size:19px; letter-spacing:-.02em; }
.an-card-stats small { font-size:11px; color:var(--muted); }
.an-card-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); }
.omg-an .an-learn,.omg-an .an-open { border:0; background:transparent; padding:4px 6px; font-size:12px; color:var(--maerke-tekst); min-height:0; }
.omg-an .an-open { color:var(--muted); }

/* ── Vindere ──────────────────────────────────────────────────────────────────────────── */
.an-winner-banner { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--sunk); border:1px solid var(--line); border-radius:var(--an-radius); padding:20px 22px; margin-bottom:18px; }
.an-winner-banner p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.an-counts { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.an-counts span { font-size:12px; background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:4px 11px; }
.an-spotlight { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:0; background:var(--cream); border:1px solid var(--line); border-radius:var(--an-radius); overflow:hidden; margin-bottom:18px; }
.omg-an .an-spot-img { position:relative; border:0; border-radius:0; padding:0; min-height:0; }
.an-spot-img img { width:100%; height:100%; object-fit:cover; display:block; }
.an-spot-img span { position:absolute; left:18px; right:18px; bottom:18px; background:var(--maerke-2); color:var(--maerke-ink); border-radius:9px; padding:8px 12px; font-size:11px; font-weight:700; letter-spacing:.08em; }
.an-spot-copy { padding:26px; }
.an-spot-copy h2 { font-size:26px; letter-spacing:-.03em; margin:6px 0 18px; }
.an-spot-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:16px; margin-bottom:18px; }
.an-spot-stats strong { display:block; font-size:22px; letter-spacing:-.02em; }
.an-spot-stats small { color:var(--muted); font-size:11px; }
.an-why { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.an-why span { font-size:12px; background:var(--status-ok-svag); color:var(--status-ok); border-radius:999px; padding:4px 11px; }
.omg-an .an-rank-link { border:0; background:transparent; padding:0; text-align:left; display:flex; align-items:center; gap:8px; min-height:0; }
.an-rank { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--felt-dyb); font-size:11px; font-weight:700; }
.omg-an td.an-roas { font-weight:700; color:var(--maerke-tekst); }
.an-coverage { font-size:11px; color:var(--muted); margin:12px 0 0; }

/* ── Laering ──────────────────────────────────────────────────────────────────────────── */
.an-learn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.an-learn-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--an-radius); padding:18px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.an-learn-card h3 { margin:0; font-size:16px; letter-spacing:-.015em; }
.an-learn-card p { margin:0; font-size:13px; color:var(--ink-2); }
.an-learn-card small { color:var(--muted); font-size:11px; }
.omg-an .an-learn-card>button { margin-top:auto; border:0; background:transparent; padding:4px 0; color:var(--maerke-tekst); min-height:0; }
.an-decision { font-size:11px; font-weight:600; border-radius:999px; padding:3px 10px; background:var(--felt-dyb); }
.an-decision-repeat { background:var(--status-ok-svag); color:var(--status-ok); }
.an-decision-test { background:var(--maerke-svag-2); color:var(--maerke-tekst); }
.an-decision-stop { background:var(--status-obs-svag); color:var(--status-obs); }

/* ── Dialoger ─────────────────────────────────────────────────────────────────────────── */
.an-dialog { border:0; border-radius:20px; padding:26px; width:min(720px,94vw); max-height:88vh; box-shadow:var(--lift-3); background:var(--cream); color:var(--ink); }
.an-dialog::backdrop { background:rgba(20,16,24,.42); }
.an-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.an-dialog-head h2 { margin:0; }
.omg-an .an-close { border:0; background:var(--felt); border-radius:999px; width:36px; height:36px; padding:0; font-size:19px; line-height:1; }
.an-detail-img { width:100%; max-height:280px; object-fit:cover; border-radius:12px; margin-bottom:14px; }
.an-detail-copy { white-space:pre-wrap; background:var(--sunk); border-radius:12px; padding:14px; font-size:13px; }
.an-reqs { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:6px; }
.an-reqs li { font-size:13px; border-radius:9px; padding:7px 11px; background:var(--felt); }
.an-reqs li.ok { background:var(--status-ok-svag); color:var(--status-ok); }
.an-reqs li.no { background:var(--status-obs-svag); color:var(--status-obs); }
.an-dialog-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.an-dialog form { display:grid; gap:14px; }
.an-dialog label { display:grid; gap:6px; font-size:12px; color:var(--ink-2); }
.an-kpi-scope { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.an-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.an-info-list { margin:0; padding-left:18px; display:grid; gap:8px; font-size:13px; line-height:1.6; }

/* ── Smallere skaerme ─────────────────────────────────────────────────────────────────── */
@media (max-width:1180px) {
  .an-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .an-two { grid-template-columns:minmax(0,1fr); }
  .an-spotlight { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px) {
  .an-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .an-split,.an-split-card.paid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px) {
  .omg-an h1 { font-size:30px; }
  .an-grid { grid-template-columns:minmax(0,1fr); }
  .an-grid-tools { width:100%; }
  .an-grid-tools input,.an-grid-tools select { flex:1 1 140px; min-width:0; }
  .an-chart-modes { margin-left:0; }
}

.an-mere{display:flex;justify-content:center;margin-top:18px}