/* Nivlheim share pattern — nivlheim.no + fimbul.tech.
   Self-scoped twice over:
   1. every design-system token is referenced with a literal fallback, so the
      block survives on a page that does not load styles.css;
   2. every rule is two classes deep and preceded by an element reset, so host
      theme rules (.entry-content p, article a, .post span …) cannot reach in.
   Dark ground: ancestor .nivlheim-dark / [data-theme="dark"], or .nivlheim-share--invert. */

.nivlheim-share{
  --nsh-font:var(--font-text,system-ui,sans-serif);
  --nsh-display:var(--font-display,var(--nsh-font));
  --nsh-ink:var(--text-body,#222222);
  --nsh-muted:var(--text-muted,#777777);
  --nsh-meta:var(--text-meta,#222222); /* small type under 24px — grey-600 is 4.48:1 on white */
  --nsh-card:var(--surface-card,#ffffff);
  --nsh-inset:var(--surface-inset,#f2f2f2);
  --nsh-hairline:var(--border-hairline,#e7e7e7);
  --nsh-divider:var(--border-hairline,#e7e7e7);
  --nsh-control:var(--border-control,#777777);
  --nsh-accent:var(--orange-500,#F1782C);
  --nsh-ring-outer:var(--focus-ring-outer,#222222);
  --nsh-shadow:var(--shadow-overlay,0 8px 24px rgba(34,34,34,.16));
  display:inline-block;font-family:var(--nsh-font);font-size:16px;line-height:1.5;color:var(--nsh-ink)
}
.nivlheim-share--invert,.nivlheim-dark .nivlheim-share,[data-theme="dark"] .nivlheim-share{
  --nsh-ink:#ffffff;
  --nsh-muted:rgba(255,255,255,.64);
  --nsh-meta:#ffffff;
  --nsh-card:#2a2a2a;
  --nsh-inset:rgba(255,255,255,.08);
  --nsh-hairline:rgba(255,255,255,.16);
  --nsh-divider:rgba(255,255,255,.16);
  --nsh-control:rgba(255,255,255,.64);
  --nsh-ring-outer:#ffffff
}
/* Hidden until the script has resolved the canonical URL: the share hrefs are
   written at runtime, so a no-JS render would only offer dead links. */
.nivlheim-share:not([data-nivlheim-share-ready]){display:none}

/* reset — neutralises host typography before the component's own rules */
.nivlheim-share h2,.nivlheim-share p,.nivlheim-share ul,.nivlheim-share li,.nivlheim-share a,.nivlheim-share button,.nivlheim-share span{margin:0;padding:0;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:normal;line-height:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;color:inherit;background:none}
.nivlheim-share ul,.nivlheim-share li{list-style:none}
.nivlheim-share [hidden]{display:none}

.nivlheim-share .nivlheim-share__trigger{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1;color:var(--nsh-ink);border:1px solid var(--nsh-control);border-radius:3px;cursor:pointer;transition:border-color 140ms cubic-bezier(.2,0,.2,1),color 140ms cubic-bezier(.2,0,.2,1)}
.nivlheim-share .nivlheim-share__trigger:hover{border-color:var(--nsh-ink);color:var(--nsh-accent)}
.nivlheim-share .nivlheim-share__trigger svg{display:block;flex:none}

.nivlheim-share :focus-visible{outline:none;box-shadow:0 0 0 2px var(--nsh-accent),0 0 0 4px var(--nsh-ring-outer)}

.nivlheim-share .nivlheim-share__dialog{display:flex;flex-direction:column;width:min(420px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;overflow:hidden;font-size:16px;line-height:1.5;color:var(--nsh-ink);background:var(--nsh-card);border:0;border-top:4px solid var(--nsh-accent);border-radius:4px;box-shadow:var(--nsh-shadow)}
.nivlheim-share .nivlheim-share__dialog::backdrop{background:rgba(34,34,34,.56);backdrop-filter:blur(2px)}
/* display:flex above beats the UA's dialog:not([open]){display:none} — restore it */
.nivlheim-share dialog.nivlheim-share__dialog:not([open]){display:none}
@media (prefers-reduced-motion:no-preference){.nivlheim-share .nivlheim-share__dialog[open]{animation:nivlheim-share-in 200ms cubic-bezier(0,0,.2,1)}}
@keyframes nivlheim-share-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Header = a preview of what is being shared: og:image, og:title, byline, og:description */
.nivlheim-share .nivlheim-share__media{display:block;flex:none;width:100%;aspect-ratio:1.91/1;max-height:220px;object-fit:cover;background:var(--nsh-inset);border-bottom:1px solid var(--nsh-divider)}
.nivlheim-share .nivlheim-share__head{flex:none;padding:18px 20px 16px}
.nivlheim-share .nivlheim-share__headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.nivlheim-share .nivlheim-share__eyebrow{font-size:12px;font-weight:700;line-height:1.4;text-transform:uppercase;letter-spacing:var(--tracking-label,.12em);color:var(--nsh-meta)}
.nivlheim-share .nivlheim-share__title{margin:6px 0 0;font-size:22px;font-weight:700;line-height:1.22;letter-spacing:-.01em;color:var(--nsh-ink)}
.nivlheim-share .nivlheim-share__byline{margin:8px 0 0;font-size:11px;font-weight:700;line-height:1.4;text-transform:uppercase;letter-spacing:var(--tracking-label,.12em);color:var(--nsh-meta)}
.nivlheim-share .nivlheim-share__ingress{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--nsh-meta);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nivlheim-share .nivlheim-share__close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin:-7px -6px 0 0;color:var(--nsh-ink);border:1px solid transparent;border-radius:3px;cursor:pointer;transition:color 140ms cubic-bezier(.2,0,.2,1)}
.nivlheim-share .nivlheim-share__close:hover{color:var(--nsh-accent)}
.nivlheim-share .nivlheim-share__close svg{display:block}

/* the options are the scrolling region; the preview header stays put.
   min-height:0 is required — a flex item defaults to min-height:auto and would
   otherwise grow to its intrinsic height and defeat the cap. */
.nivlheim-share .nivlheim-share__list{flex:1 1 auto;min-height:0;padding-bottom:4px;overflow-y:auto;overscroll-behavior:contain}
.nivlheim-share .nivlheim-share__list li+li{border-top:1px solid var(--nsh-divider)}
/* the two device actions read as their own group */
.nivlheim-share .nivlheim-share__list li.nivlheim-share__item--break{margin-top:8px}

.nivlheim-share .nivlheim-share__option{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 20px;font-size:16px;font-weight:400;line-height:1.35;text-align:left;color:var(--nsh-ink);border:0;border-radius:0;cursor:pointer;transition:background-color 140ms cubic-bezier(.2,0,.2,1)}
.nivlheim-share .nivlheim-share__option:hover{background:var(--nsh-inset)}
.nivlheim-share .nivlheim-share__label{flex:1 1 auto;min-width:0}
.nivlheim-share .nivlheim-share__mark{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;background:var(--nsh-inset);border:1px solid var(--nsh-hairline);border-radius:2px;font-family:var(--nsh-display);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--nsh-ink)}
.nivlheim-share .nivlheim-share__mark svg{display:block}
.nivlheim-share .nivlheim-share__out{flex:none;color:var(--nsh-muted)}

/* copy-link confirmation — a state change on the option itself, no toast */
.nivlheim-share .nivlheim-share__mark-done{position:absolute;inset:0;display:grid;place-items:center;background:var(--nsh-inset);color:var(--nsh-accent);opacity:0;transition:opacity 140ms cubic-bezier(.2,0,.2,1)}
.nivlheim-share .nivlheim-share__option[data-copied] .nivlheim-share__mark-done{opacity:1}
.nivlheim-share .nivlheim-share__option[data-copied] .nivlheim-share__label{font-weight:700}

.nivlheim-share .nivlheim-share__foot{flex:none;padding:12px 20px 18px;font-size:12px;line-height:1.5;color:var(--nsh-meta);border-top:1px solid var(--nsh-divider)}
.nivlheim-share .nivlheim-share__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* short viewports: trim the preview so at least four options stay in view */
@media (max-height:720px){
  .nivlheim-share .nivlheim-share__media{aspect-ratio:auto;height:118px}
  .nivlheim-share .nivlheim-share__head{padding:14px 20px 12px}
  .nivlheim-share .nivlheim-share__title{font-size:19px}
  .nivlheim-share .nivlheim-share__ingress{margin-top:8px;font-size:14px;-webkit-line-clamp:2}
  .nivlheim-share .nivlheim-share__option{min-height:48px;padding:8px 20px}
  .nivlheim-share .nivlheim-share__foot{padding:10px 20px 14px}
}