/* Copy for Originals Tools — shared site styles.
   Same look as copyfororiginals.com: paper, ink and one blaze-orange accent; Big Shoulders Display
   in heavy caps for headings, Literata for reading; square corners and thick rules instead of
   rounded cards. Fonts are self-hosted in /fonts (SIL Open Font License) so the pages still make
   no third-party requests and the strict Content-Security-Policy on the tools keeps working.
   Pages link this file with a relative path and keep only page-specific rules inline. */

@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("fonts/big-shoulders-display-latin.woff2") format("woff2")}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/literata-latin.woff2") format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("fonts/literata-italic-latin.woff2") format("woff2")}

:root{
  --bg:#fafaf6; --panel:#ffffff; --soft:#ece9e1; --line:#d9d5cb; --line-strong:#121212;
  --ink:#121212; --muted:#4a4842; --faint:#7a766d;
  --accent:#ff5a00; --accent-hover:#c94400; --accent-soft:rgba(255,90,0,.10); --on-accent:#121212;
  --red:#b3261e; --red-bg:#f8e3df;
  --ochre:#7d5b0f; --ochre-bg:#f3ead3;
  --lake:#2f5f7a; --lake-bg:#e1ecf2;
  --stone:#5b5a54; --stone-bg:#ecebe4;
  --moss:#2f6b3a; --moss-bg:#e3efde;
  --radius:0; --radius-lg:0;
  --sans:"Literata","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --display:"Big Shoulders Display","Arial Narrow",Impact,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --horizon:none;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121212; --panel:#1b1b1a; --soft:#242321; --line:#343230; --line-strong:#fafaf6;
    --ink:#fafaf6; --muted:#bdb8ae; --faint:#8a867d;
    --accent:#ff6a1a; --accent-hover:#ff8a4d; --accent-soft:rgba(255,106,26,.14); --on-accent:#121212;
    --red:#f0a699; --red-bg:#3b1f1a;
    --ochre:#e6d195; --ochre-bg:#2e2915;
    --lake:#9cc3d8; --lake-bg:rgba(156,195,216,.12);
    --stone:#b3b0a8; --stone-bg:rgba(179,176,168,.12);
    --moss:#a9d19c; --moss-bg:rgba(169,209,156,.12);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#121212; --panel:#1b1b1a; --soft:#242321; --line:#343230; --line-strong:#fafaf6;
    --ink:#fafaf6; --muted:#bdb8ae; --faint:#8a867d;
    --accent:#ff6a1a; --accent-hover:#ff8a4d; --accent-soft:rgba(255,106,26,.14); --on-accent:#121212;
    --red:#f0a699; --red-bg:#3b1f1a;
    --ochre:#e6d195; --ochre-bg:#2e2915;
    --lake:#9cc3d8; --lake-bg:rgba(156,195,216,.12);
    --stone:#b3b0a8; --stone-bg:rgba(179,176,168,.12);
    --moss:#a9d19c; --moss-bg:rgba(169,209,156,.12);
    color-scheme:dark;
}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::after{content:"";display:block;height:0}
::selection{background:var(--accent-soft)}
a{color:var(--accent-hover);text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent)}
a:hover{color:var(--accent);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:760px;margin:0 auto;padding:36px 20px 40px}
@media (max-width:480px){.wrap{padding-inline:16px}}

/* Type */
h1,h2,h3{font-family:var(--display);color:var(--ink);text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,64px);line-height:.95;font-weight:900;letter-spacing:-.01em;margin:0 0 18px}
h2{font-size:clamp(28px,4vw,40px);line-height:1;font-weight:900;letter-spacing:0;margin:0 0 14px}
h3{font-size:21px;line-height:1.1;font-weight:700;letter-spacing:.02em;margin:28px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:8px}
li::marker{color:var(--faint)}
b,strong{font-weight:700}
code{font:14px/1.4 var(--mono);background:var(--soft);padding:2px 6px}
blockquote{margin:0 0 16px;padding:2px 0 2px 18px;border-left:3px solid var(--line-strong);color:var(--muted)}
blockquote p{margin:0 0 4px}
blockquote cite{font-size:14px;font-style:normal;color:var(--faint)}

/* Page header */
.crumbs{font:700 13px/1.4 var(--display);text-transform:uppercase;letter-spacing:.12em;margin-bottom:40px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.kicker{font:700 14px/1.4 var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-hover);margin:0 0 12px}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{text-decoration:underline}
.lede{font-size:21px;line-height:1.45;color:var(--ink);letter-spacing:0}
.byline{font:700 13px/1.4 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin:0 0 8px}
.byline a{color:inherit}

/* Sections: whitespace, not rules */
section{margin-top:64px;padding-top:28px;border-top:3px solid var(--line-strong)}
section > h2:first-child{scroll-margin-top:24px}

/* Panels */
.tldr,.caveats,.aside{border-radius:var(--radius-lg);padding:22px 24px;margin:28px 0 0}
.tldr{background:var(--panel);border:2px solid var(--line-strong)}
.caveats{background:var(--ochre-bg)}
.tldr h2,.caveats h2{font-size:14px;font-weight:700;letter-spacing:.12em;margin:0 0 8px}
.tldr h2{color:var(--accent-hover)} .caveats h2{color:var(--ochre)}
.tldr p:last-child,.caveats ul:last-child,.caveats p:last-child{margin-bottom:0}
.caveats li{font-size:16px}
.aside{background:var(--moss-bg);padding:16px 20px;margin:6px 0 18px;font-size:16px}
.aside b{display:block;color:var(--moss);font:700 13px/1.4 var(--display);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.aside p{margin:0}
.callout-warn{background:var(--red-bg);color:var(--red);border-radius:var(--radius);padding:14px 18px}
.motto{font-family:var(--display);font-size:clamp(26px,4vw,36px);font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:1;margin:0 0 10px}
.scope{font-size:15px;color:var(--muted);margin:20px 0 0}

/* Labels and badges: sentence case, quiet tints */
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:var(--muted);margin:18px 0 0;padding:0;list-style:none}
.legend li{margin:0}
.ev{display:inline-block;font:700 12px/1.6 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:1px 8px;white-space:nowrap;vertical-align:1px}
.ev-strong{background:var(--moss-bg);color:var(--moss)}
.ev-mod{background:var(--lake-bg);color:var(--lake)}
.ev-inf{background:var(--ochre-bg);color:var(--ochre)}
.ev-weak{background:var(--stone-bg);color:var(--stone)}

/* Tables */
.tablewrap{overflow-x:auto;border:2px solid var(--line-strong);margin:8px 0 18px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
caption{caption-side:top;text-align:left;font:700 14px/1.4 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);padding:16px 16px 6px}
th,td{text-align:left;vertical-align:top;padding:11px 16px;border-bottom:1px solid var(--line)}
thead th{font:700 13px/1.4 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid var(--line-strong)}
tbody th{font-weight:700}
tbody tr.group th{background:var(--soft);font:700 13px/1.4 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
tr:last-child td,tr:last-child th{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}

/* Assembly-manual steps */
ol.check{counter-reset:c;list-style:none;padding:0}
ol.check li{counter-increment:c;position:relative;padding-left:44px;margin-bottom:14px;min-height:30px}
ol.check li::before{content:counter(c);position:absolute;left:0;top:-1px;width:30px;height:30px;border:2px solid var(--ink);color:var(--ink);font:700 15px/1 var(--display);display:grid;place-items:center}

/* Sources */
.sources li{font-size:15px;color:var(--muted)}

/* Index cards */
.cards{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.cards li{margin:0}
a.card{display:block;padding:20px 22px;background:var(--panel);border:2px solid var(--line);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--line-strong);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--accent)}
a.card b{display:block;font-family:var(--display);font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:8px;color:var(--ink)}
a.card > span{color:var(--muted);font-size:15px;line-height:1.5}
a.card .backed{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--faint)}
a.card .backed em{font-style:normal;color:var(--accent-hover)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tag{display:inline-block;font:700 12px/1.6 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;margin:0}
/* Topic tags: one color per subject, so a reader can scan the list by what it is about */
.tag.law{background:var(--lake-bg);color:var(--lake)}
.tag.ads{background:var(--accent-soft);color:var(--accent-hover)}
.tag.health{background:var(--red-bg);color:var(--red)}
.tag.content{background:var(--moss-bg);color:var(--moss)}
.tag.video{background:var(--ochre-bg);color:var(--ochre)}
/* Note tags: format and evidence, quiet by design so the topic color carries the eye */
.tag.note{background:transparent;border:1.5px solid var(--line);color:var(--muted);padding:.5px 7px}
.group-label{font:700 14px/1.4 var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-hover);margin:48px 0 14px}

/* Footer */
footer{margin-top:64px;padding-top:18px;border-top:3px solid var(--line-strong);font:700 13px/1.5 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
footer p{margin:0}
footer a{color:inherit}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* Controls: every button on the tools shares the main site's button voice */
button,.btn,input[type="submit"],input[type="button"]{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-radius:0}
button,.btn{border-width:2px}
input,select,textarea{border-radius:0}
input[type="text"],input[type="number"],input[type="search"],input[type="url"],input[type="email"],select,textarea{font-family:var(--sans)}

/* Main-site navigation, shared with copyfororiginals.com */
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding:18px clamp(16px,4vw,48px);border-bottom:3px solid var(--line-strong);background:var(--bg)}
.site-nav-brand{font:900 20px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0}
.site-nav li{margin:0}
.site-nav ul a{font:700 13px/1.4 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.site-nav ul a:hover{color:var(--accent-hover);border-bottom-color:var(--accent)}
.site-nav ul a[aria-current="true"]{border-bottom-color:var(--ink)}
@media (max-width:560px){.site-nav{padding-block:14px}.site-nav ul{gap:4px 16px}}

/* Every page exists in Swedish and English. Each language is its own static URL (crawlers don't run JS),
   linked with hreflang and with this switch, which sits last in the site nav. */
.site-nav .site-nav-brand{margin-right:auto}
.site-nav .lang-switch{gap:6px}
.lang-switch{display:flex;gap:6px;margin:0;padding:0;list-style:none;font:700 13px/1.4 var(--display);text-transform:uppercase;letter-spacing:.12em}
.lang-switch li{margin:0}
.lang-switch a,.lang-switch span,.site-nav .lang-switch a{display:block;padding:3px 10px;border:2px solid var(--line);color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.12em}
.lang-switch a:hover,.site-nav .lang-switch a:hover{border-color:var(--line-strong);color:var(--ink)}
.lang-switch [aria-current]{border-color:var(--line-strong);background:var(--ink);color:var(--bg)}

/* Breadcrumb row on service pages */
.pagebar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:40px}
.pagebar .crumbs{margin-bottom:0}

/* Service pages */
.btn-cta{display:inline-block;padding:13px 22px;background:var(--accent);color:var(--on-accent);border:2px solid var(--line-strong);font:700 16px/1.2 var(--display);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.btn-cta:hover{background:var(--ink);color:var(--bg)}
.tablewrap table.wide{min-width:640px}
.tldr + .tablewrap{margin-top:20px}
header + .cards{margin-top:28px}