/* AI-henvisninger (ai-henvisninger.html). Produktflader i Inter under .ar-*.
   Heroen er den eneste .pd-demo med mærkning; sektionernes flader er .ar-panel. */

.ar-demo { --ar-text: #0F172A; --ar-muted: #64748B; --ar-line: #E8E8E4; --ar-soft: #FAFAF8; --ar-good: #0E7A55; text-align: left; }
.ar-head-id { display: flex; align-items: center; gap: 12px; }
.ar-head-logo { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid var(--ar-line); border-radius: 9px; background: #FFFFFF; }
.ar-head-logo img { width: 26px; height: 26px; }
.ar-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ar-pf { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; background: #0F172A; -webkit-mask: var(--pf) center / contain no-repeat; mask: var(--pf) center / contain no-repeat; }
.ar-pf[data-pf='chatgpt'] { --pf: url('/logos/chatgpt-bw.png'); background: #111827; }
.ar-pf[data-pf='perplexity'] { --pf: url('/logos/perplexity.svg'); background: #1F8A8A; }
.ar-pf[data-pf='gemini'] { --pf: url('/logos/gemini.svg'); background: #3B82F6; }
.ar-pf[data-pf='copilot'] { --pf: url('/logos/copilot-mono.svg'); background: #0F6CBD; }
.ar-pf[data-pf='claude'] { --pf: url('/logos/claude-bw.png'); background: #D97757; }

/* KPI-rækken */
.ar-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--ar-line); }
.ar-kpi { display: flex; flex-direction: column; gap: 3px; padding: 18px 24px 17px; }
.ar-kpi + .ar-kpi { border-left: 1px solid var(--ar-line); }
.ar-kpi-label { color: var(--ar-muted); font-size: 12px; font-weight: 500; }
.ar-kpi-value { color: var(--ar-text); font-size: 28px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.ar-kpi-note { color: var(--ar-muted); font-size: 11.5px; line-height: 1.4; }
.ar-kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.ar-kpi-delta.is-good { color: var(--ar-good); }
.ar-kpi-delta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Grafen og fordelingen */
.ar-body { display: grid; grid-template-columns: minmax(0, 1fr) 272px; }
.ar-chart { position: relative; padding: 22px 24px 18px; }
.ar-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.ar-chart-title, .ar-side-title { color: var(--ar-text); font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.ar-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--ar-muted); font-size: 11.5px; }
.ar-legend li { display: inline-flex; align-items: center; gap: 5px; }
.ar-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.ar-plot { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.ar-yaxis { position: relative; height: 200px; }
.ar-yaxis span { position: absolute; right: 0; bottom: var(--y); color: #94A3B8; font-size: 11px; line-height: 1; transform: translateY(50%); }
.ar-cols {
  position: relative;
  display: grid;
  height: 200px;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  border-top: 1px dashed #E6E9EE;
  background-image: linear-gradient(to top, #E9EDF1 1px, transparent 1px);
  background-size: 100% 20%;
  background-position: 0 100%;
  border-radius: 2px;
  cursor: crosshair;
  touch-action: pan-y;
}
.ar-cols:focus-visible { outline: 3px solid rgba(27,42,74,.28); outline-offset: 4px; }
.ar-col { position: relative; display: flex; height: 100%; align-items: flex-end; border-radius: 4px; transition: background-color .15s ease; }
.ar-stack {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column-reverse;
  transform-origin: 50% 100%;
  transition: opacity .15s ease, transform .7s cubic-bezier(.22,.8,.2,1);
  transition-delay: 0s, calc(var(--d, 0) * 18ms);
}
.ar-stack i { display: block; height: var(--h); flex: none; background: var(--c); }
.ar-stack i + i { box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.ar-stack i:last-child { border-radius: 3px 3px 0 0; }
.ar-chart.is-hover .ar-stack { opacity: .4; }
.ar-chart.is-hover .ar-col.is-active { background: #F1F4F8; }
.ar-chart.is-hover .ar-col.is-active .ar-stack { opacity: 1; }
.ar-xaxis { position: relative; height: 16px; margin: 10px 0 0 34px; }
.ar-xaxis span { position: absolute; left: calc((var(--x) + .5) / 30 * 100%); color: #94A3B8; font-size: 11px; white-space: nowrap; transform: translateX(-50%); }
.ar-xaxis span:last-child { transform: translateX(-80%); }

.ar-tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 196px;
  padding: 11px 12px 10px;
  border-radius: 11px;
  background: #0B1220;
  box-shadow: 0 14px 34px rgba(15,23,42,.26), 0 2px 6px rgba(15,23,42,.18);
  color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: opacity .15s ease, transform .16s cubic-bezier(.22,.8,.2,1);
}
.ar-chart.is-hover .ar-tip { opacity: 1; }
.ar-tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 12.5px; }
.ar-tip-head > b { font-weight: 600; }
.ar-tip-head span { color: #94A3B8; font-size: 11.5px; }
.ar-tip-head span b { color: #FFFFFF; font-weight: 600; }
.ar-tip ol { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ar-tip li { display: grid; grid-template-columns: 8px 14px 1fr auto; align-items: center; gap: 7px; color: #A7B0BE; font-size: 12px; }
.ar-tip li i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.ar-tip li .ar-pf { width: 12px; height: 12px; background: #FFFFFF; }
.ar-tip li b { color: #FFFFFF; font-weight: 600; }
.ar-tip li.is-zero { opacity: .45; }

.ar-sources { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-left: 1px solid var(--ar-line); background: var(--ar-soft); }
.ar-src-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ar-src-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 6px 10px; font-size: 13px; }
.ar-src-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ar-text); font-weight: 500; }
.ar-src-list b { color: var(--ar-text); font-weight: 650; text-align: right; }
.ar-src-list small { color: var(--ar-muted); font-size: 12px; text-align: right; }
.ar-src-bar { grid-column: 1 / -1; order: 4; height: 5px; overflow: hidden; border-radius: 3px; background: #ECEEF0; }
.ar-src-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--c); }
.ar-side-note { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0 !important; padding-top: 12px; border-top: 1px solid var(--ar-line); color: var(--ar-muted); font-size: 11.5px; line-height: 1.5; }
.ar-side-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; fill: #E37400; }

/* Enkel intro: søjlerne vokser op én gang, når grafen ses. Uden script står alt færdigt. */
.ar-demo.is-live:not(.is-drawn) .ar-stack { transform: scaleY(0); }

/* Sektionernes flader */
.ar-panel { overflow: hidden; border: 1px solid #DFE2E5; border-radius: 16px; background: #FFFFFF; box-shadow: 0 2px 4px #1B2A4A04, 0 20px 55px #1B2A4A09; color: #1B2A4A; font-family: Inter, Arial, sans-serif; font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; text-align: left; }
.ar-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 24px; border-bottom: 1px solid #E8E8E4; }
.ar-panel-title { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.015em; }
.ar-panel-meta { display: block; margin-top: 3px; color: #64748B; font-size: 12px; }

.ar-table-wrap { overflow-x: auto; }
.ar-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ar-table th, .ar-table td { padding: 12px 18px; border-bottom: 1px solid #EEF0EE; text-align: right; white-space: nowrap; }
.ar-table thead th { padding-block: 10px; background: #FAFAF8; color: #64748B; font-size: 11.5px; font-weight: 600; }
.ar-table th:first-child { text-align: left; }
.ar-table tbody th { color: #0F172A; font-weight: 500; }
.ar-path { display: inline-flex; align-items: center; gap: 8px; }
.ar-path svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: #94A3B8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-cell-bar { display: inline-grid; grid-template-columns: 26px 70px; align-items: center; justify-items: end; gap: 10px; }
.ar-cell-bar b { font-weight: 650; }
.ar-cell-bar i { justify-self: start; width: var(--w); height: 6px; border-radius: 3px; background: rgba(27,42,74,.78); }
.ar-src-chip { display: inline-flex; align-items: center; gap: 6px; color: #334155; }
.ar-src-chip .ar-pf { width: 12px; height: 12px; flex-basis: 12px; }
.ar-row-muted th, .ar-row-muted td { color: #64748B !important; }
.ar-row-muted .ar-cell-bar i { background: #CBD5E1; }
.ar-table tfoot th, .ar-table tfoot td { border-bottom: 0; color: #0F172A; font-weight: 650; }

.ar-events { padding: 8px 24px 16px; }
.ar-ev-head, .ar-ev-list li { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px; align-items: center; gap: 14px; }
.ar-ev-head { padding: 8px 0; border-bottom: 1px solid #EEF0EE; color: #64748B; font-size: 11.5px; font-weight: 600; }
.ar-ev-head span:not(:first-child) { text-align: right; }
.ar-ev-list { margin: 0; padding: 0; list-style: none; }
.ar-ev-list li { padding: 11px 0; border-bottom: 1px solid #F1F2F0; font-size: 13px; }
.ar-ev-count { color: #64748B; text-align: right; }
.ar-ev-count b { color: #0F172A; font-weight: 650; }
.ar-ev-rate { display: grid; grid-template-columns: 1fr 32px; align-items: center; gap: 10px; }
.ar-ev-rate i { display: block; width: var(--w); height: 6px; border-radius: 3px; background: var(--c); }
.ar-ev-rate b { font-weight: 650; text-align: right; }
.ar-ev-note { margin: 12px 0 0 !important; color: #64748B; font-size: 12px; line-height: 1.55; }
.ar-study { padding: 18px 24px 20px; border-top: 1px solid #E8E8E4; background: #FAFAF8; }
.ar-study-kicker { display: block; margin-bottom: 6px; color: #64748B; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ar-study p { margin: 0; color: #334155; font-size: 13.5px; line-height: 1.6; }
.ar-study p b { color: #0F172A; }
.ar-study .ar-study-caveat { margin-top: 6px; color: #64748B; font-size: 12px; }
.ar-study a { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: #1B2A4A; font-size: 12.5px; font-weight: 600; text-underline-offset: 3px; }
.ar-study a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-study a:focus-visible { outline: 3px solid rgba(27,42,74,.28); outline-offset: 3px; border-radius: 4px; }

.ar-scope { display: grid; grid-template-columns: 1fr 1fr; }
.ar-scope-col { padding: 22px 26px 24px; }
.ar-scope-col + .ar-scope-col { border-left: 1px solid #E8E8E4; background: #FAFAF8; }
.ar-scope-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #0F172A; font-size: 13px; font-weight: 650; }
.ar-scope-kicker svg { width: 20px; height: 20px; padding: 3px; border-radius: 6px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.is-yes .ar-scope-kicker svg { background: #E7F4EE; stroke: #0E7A55; }
.is-no .ar-scope-kicker svg { background: #EEF0F3; stroke: #64748B; }
.ar-scope ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ar-scope li b { display: block; color: #0F172A; font-size: 13.5px; font-weight: 650; }
.ar-scope li span { display: block; margin-top: 2px; color: #64748B; font-size: 13px; line-height: 1.55; }

@media (max-width: 900px) {
  .ar-body { grid-template-columns: 1fr; }
  .ar-sources { border-top: 1px solid var(--ar-line); border-left: 0; }
  .ar-side-note { margin-top: 2px !important; }
}
@media (max-width: 700px) {
  .ar-kpis { grid-template-columns: 1fr 1fr; }
  .ar-kpi { padding: 14px 16px; }
  .ar-kpi:nth-child(3) { border-left: 0; }
  .ar-kpi:nth-child(n+3) { border-top: 1px solid var(--ar-line); }
  .ar-kpi-value { font-size: 23px; }
  .ar-chart { padding: 18px 16px 14px; }
  .ar-cols { gap: 2px; height: 170px; }
  .ar-yaxis { height: 170px; }
  .ar-sources { padding: 18px 16px; }
  .ar-tip { width: 184px; }
  .ar-hide-sm { display: none; }
  .ar-table th, .ar-table td { padding: 11px 12px; }
  .ar-cell-bar { grid-template-columns: 26px 44px; gap: 8px; }
  .ar-events { padding: 6px 16px 14px; }
  .ar-ev-head, .ar-ev-list li { grid-template-columns: minmax(0, 1fr) 92px 96px; gap: 10px; }
  .ar-ev-rate { grid-template-columns: 1fr 28px; gap: 6px; }
  .ar-study { padding: 16px; }
  .ar-scope { grid-template-columns: 1fr; }
  .ar-scope-col { padding: 18px 16px 20px; }
  .ar-scope-col + .ar-scope-col { border-top: 1px solid #E8E8E4; border-left: 0; }
  .ar-panel { border-radius: 12px; }
  .ar-panel-head { padding: 16px; }
}
@media (max-width: 380px) {
  .ar-ev-head, .ar-ev-list li { grid-template-columns: minmax(0, 1fr) 80px 64px; }
  .ar-ev-rate { grid-template-columns: 1fr; }
  .ar-ev-rate i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-demo.is-live:not(.is-drawn) .ar-stack { transform: none; }
  .ar-stack, .ar-tip, .ar-col { transition: none; }
}