/* Endast integritetspolicyn: regler som inte redan finns i site.css. */
/* Policy page body: title block, then a sticky table of contents in columns 1-3 and the policy text in one column (max 68ch) from column 4. */
html { background: var(--bg); }

address { margin: 0; }

h2 { font-weight: 700; line-height: 1.08; letter-spacing: -.012em; }

.eyebrow { color: var(--primary-press); }

/* ---------- Policy: title block ---------- */
.pol-head {
  display: grid; gap: 14px; justify-items: start;
  padding-block: clamp(32px, 5.5vw, 80px) clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.crumbs ol {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-size: var(--fs-small); line-height: 1.4; color: var(--muted);
}

.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ctl-line); }

.crumbs a { color: var(--muted); }

.crumbs a:hover { color: var(--primary); }

.pol-head h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); margin-top: 6px; }

.updated { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }

.pol-head .lead { margin-top: 10px; max-width: 60ch; }

/* ---------- Policy: contents + text ---------- */
.pol-body {
  display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(36px, 5vw, 48px);
  padding-block: clamp(36px, 5vw, 64px) var(--sec-pad);
}

/* Below 1040px the title block's bottom rule already sits right above the contents list, so the list gets no rule of its own */
.toc { min-width: 0; }

.toc ol { list-style: none; padding: 0; margin-top: 8px; }

.toc li { break-inside: avoid; }

.toc a {
  display: block; padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-head); text-decoration: none;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.35;
}

.toc a:hover { color: var(--primary); text-decoration: underline; }

@media (min-width: 640px) and (max-width: 1039.98px) {
  .toc ol { columns: 2; column-gap: var(--gap); }
}

@media (min-width: 1040px) {
  .pol-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .toc {
    grid-column: 1 / 4; align-self: start;
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + 104px);
    border-top: 1px solid var(--line-strong); padding-top: 14px;
  }
  .prose { grid-column: 4 / 12; }
}

.prose { min-width: 0; max-width: 68ch; line-height: 1.65; }

.prose section { scroll-margin-top: 96px; }

/* A jump tucks the section's top rule under the 72px sticky header, so only the header's own rule shows above the heading */
.prose section + section {
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(71px + env(safe-area-inset-top, 0px));
}

.nw { white-space: nowrap; }

.prose h2 { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); }

.prose h3 { font-size: 1.25rem; }

.prose section > * + * { margin-top: 16px; }

.prose section > h2 + * { margin-top: 20px; }

.prose section > * + h3 { margin-top: 36px; }

.prose section > h3 + * { margin-top: 12px; }

.prose strong { font-weight: 600; color: var(--ink-head); }

.bul { list-style: none; padding: 0; display: grid; gap: 6px; }

.bul li { position: relative; padding-left: 24px; }

.bul li::before {
  content: ""; position: absolute; left: 6px; top: calc(.825em - 3px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}

.rules { list-style: none; padding: 0; border-top: 1px solid var(--line-strong); }

.rules li { padding-block: 16px; border-bottom: 1px solid var(--line); }

.basis { font-weight: 600; color: var(--ink-head); white-space: nowrap; }

.ctrl {
  font-style: normal;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 32px);
  display: grid; gap: 14px;
}

.ctrl-name { font: 600 1.375rem/1.2 var(--font-display); color: var(--ink-head); }

.ctrl-list { display: grid; border-top: 1px solid var(--line-strong); }

.ctrl-list > div {
  display: grid; gap: 2px 20px;
  padding-block: 12px; border-bottom: 1px solid var(--line);
}

.ctrl-list > div:last-child { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 540px) {
  .ctrl-list > div { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; }
}

.ctrl-list dt {
  font: 600 var(--fs-xs)/1.25 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* Every value row is as tall as the 32px Mejla/Ring links, so the four rows line up evenly */
.ctrl-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; min-height: 32px; line-height: 1.4; }

.mini { font-size: .875rem; }

.ext { white-space: nowrap; }

.ext svg { display: inline-block; width: .7em; height: .7em; margin-left: .18em; vertical-align: .05em; }