/* Delas av appen och den publika rapportsidan. Tokens, bastypografi,
   allvarsflaggor och underlagsbrickan har en enda definition. */
:root{
  --ground:#f2f4f3; --surface:#fff; --surface-2:#eaeeec; --surface-3:#dfe4e2;
  --ink:#12171a; --ink-2:#48545a; --ink-3:#78868c;
  --line:#d3dbd8; --line-2:#bcc6c2;
  --accent:#0d4a58; --accent-soft:#dbe9ed;
  --fel:#a51f18; --fel-soft:#fae4e2; --fel-text:#fff;
  --varning:#e3a900; --varning-soft:#fdf0d0; --varning-text:#3d2c00;
  --mojlighet:#1d6244; --mojlighet-soft:#ddece4; --mojlighet-text:#fff;
  --info:#2f6b52; --info-soft:#e4efe9; --info-text:#fff;
  --verifierad:#1d6244; --verifierad-soft:#ddece4;
  --e-syn:#0d4a58; --e-ctr:#a3540d; --e-konv:#1d6244;
  --e-ret:#5b3d72; --e-risk:#96261f; --e-fortr:#3d4f58;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ground:#0d1114; --surface:#151b1e; --surface-2:#1c2427; --surface-3:#242d31;
  --ink:#e8edeb; --ink-2:#a3b0b4; --ink-3:#6f7d82;
  --line:#283236; --line-2:#374246;
  --accent:#63bccc; --accent-soft:#123039;
  --fel:#f0928a; --fel-soft:#3d1c19; --fel-text:#2a0f0d;
  --varning:#f3c34a; --varning-soft:#392c0c; --varning-text:#2b2003;
  --mojlighet:#6cc79a; --mojlighet-soft:#132e23; --mojlighet-text:#0b1f17;
  --info:#7fbb9f; --info-soft:#16261f; --info-text:#0b1f17;
  --verifierad:#6cc79a; --verifierad-soft:#132e23;
  --e-syn:#63bccc; --e-ctr:#dcb265; --e-konv:#6cc79a;
  --e-ret:#b294cc; --e-risk:#e88a80; --e-fortr:#9fb0b8;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:15px/1.55 "IBM Plex Sans",-apple-system,Segoe UI,system-ui,sans-serif}
h1,h2,h3{margin:0;font-family:Archivo,system-ui,sans-serif;font-weight:600;
  letter-spacing:-.012em;text-wrap:balance}
button{font:inherit;cursor:pointer}
a{color:var(--accent)}
input,select,textarea{font:inherit;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);padding:8px 10px;width:100%}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.etikett{font-family:Archivo;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
label{display:block;font-family:Archivo;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

.flagga{display:inline-block;font-family:Archivo;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border:1px solid;white-space:nowrap}
/* Fel och varning fylls helt. En konturerad flagga har samma tyngd som alla
   andra etiketter pa raden, och da syns inte skillnaden mellan ett fel som
   stoppar forsaljningen och en mojlighet att putsa en titel. */
.flagga.fel{color:var(--fel-text);border-color:var(--fel);background:var(--fel)}
.flagga.varning{color:var(--varning-text);border-color:var(--varning);background:var(--varning)}
.flagga.mojlighet{color:var(--mojlighet);border-color:var(--mojlighet);background:var(--mojlighet-soft)}
.flagga.info{color:var(--info);border-color:var(--info);background:var(--info-soft)}
.flagga.verifierad{color:var(--verifierad);border-color:var(--verifierad);background:var(--verifierad-soft)}

.underlag{display:inline-flex;align-items:center;gap:6px;font-family:Archivo;font-size:10.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border:1px solid;
  white-space:nowrap}
.underlag[data-u=glossary]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.underlag[data-u=tonprofil]{color:var(--e-ret);border-color:var(--e-ret)}
.underlag[data-u=guide]{color:var(--e-ret);border-color:var(--e-ret)}
.underlag[data-u=google]{color:var(--ink-2);border-color:var(--line-2)}
.underlag[data-u=lag]{color:var(--e-risk);border-color:var(--e-risk)}
.underlag[data-u=guard]{color:var(--ink-3);border-color:var(--line-2);border-style:dashed}
.underlag[data-u=sprak]{color:var(--accent);border-color:var(--line-2)}