/* Dansk forklaret. Ét sæt designregler (system/dokumentation/dansk-forklaret/produkt.md, afsnit Design).
   Layout: en mørkeblå blok øverst med den hvide titel, en hvid side under den og udfyldte kort uden skygge og kant.
   Værket er kun lyst; alle farver er sat udtrykkeligt.
   Siden, værket vises på, må overskrive variablerne mærket [side] i :root fra handlingen dansk_forklaret_udseende (produkt.md, Design:
   Sidens udseende), også farverne med betydning og Test dig selv (Duong 12.11.2026). Resten hører til værket: --test-knap, --test-linje,
   afstande, bladformen og bevægelse. --tusch og --pen er billeder; en side, der sætter dem, sender sit eget billede med samme form
   (stierne herunder). Ændres formen, står det i udgivelsesnoten. */
:root{
  /* Midnat (besluttet 9.11.2026): Appens farve er Duongs mørkeblå #20242B. Toppen står i den med hvid tekst, og den går igen i teksten,
     knapperne, §-tegnet, ikonerne og prikkerne. Siden er hvid, og kortene har en lys, kølig tone af den samme farve. */
  --top:#20242B;      /* [side] blokken øverst */
  --top-fg:#FFFFFF;   /* [side] titel, logo og sprogknap i toppen */
  --top-soft:#A9B0BC; /* [side] svag tekst i toppen: linjen under logoet, tilbagelinket, logoets prikker, søgefeltets pladsholdertekst og lup, sprogknappens pil */
  --top-felt:#2A2F38; /* [side] søgefeltet og den lukkede sprogknap i toppen */
  --top-kant:#3A404B; /* [side] deres kant */
  --top-par:var(--top-kant); /* [side] det store § i toppen (som kanten, når siden ikke sætter den). Det står bag søgefeltet og sprogknappen, så det skal have en anden tone end --top-felt */
  --hovedknap:var(--top);           /* [side] skærmens hovedknap (»Lav en konto« i vinduet ved et låst opslag): flade og kant */
  --hovedknap-tekst:var(--top-fg);  /* [side] teksten på hovedknappen */
  --page:#FFFFFF;     /* [side] siden */
  --card:#EDF0F5;     /* [side] kort */
  --line:#DDE1E8;     /* [side] streger */
  --dot:#7E8590;      /* [side] globussen for oversættelse, når den er lukket */
  --edge:#B5BBC5;     /* [side] kant om knapper */
  --hover:#F5F7FA;    /* [side] flade under musen i kolonnen til venstre (kun med mus) */
  --eks-ramme:#4E6766; /* [side] ramme om eksemplerne: farven fra fasen Arbejd med sproget i TEMA */
  --ler:#A8735C;      /* [side] ramme om Typiske fejl: TEMA's lerrøde regelramme */
  --test:#4E6766;     /* [side] Test dig selv: kortets flade, farven fra fasen Arbejd med sproget i TEMA (besluttet 10.11.2026). Skal være mørk med lys
                         --test-fg, for --test-linje og fladen under en trykket globus er hvide */
  --test-fg:#FFFFFF;  /* [side] tekst, ikoner og prikken, man står på, i kortet */
  --test-knap:#FFFFFF;/* svarene og knapperne med tekst i kortet: altid hvide, også når siden har en anden farve på --page */
  --test-soft:#DCE6E5;/* [side] svag tekst i kortet (begrundelsen og beskederne), den lukkede globus og de besvarede prikker; 4,8:1 mod --test */
  --test-linje:rgba(255,255,255,.35); /* kanten om pilene, prikkerne og det tomme felt i kortet */
  --fg:#20242B;       /* [side] tekst, §-tegnet og ikonerne; teksten på de hvide knapper i Test dig selv */
  --soft:#555C68;     /* [side] svag tekst */
  --blad:0 14px 14px 14px; /* bladform som kortene i TEMA: skarpt hjørne øverst til venstre */
  /* Farver med betydning */
  --tusch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath fill='%23F1C75B' d='M1.6 4.6C6 3.1 18 2.6 34 2.9S66 2.2 82 2.5s14.6.5 16.2 1.5c.9.6.2 1.5-1.4 1.8C88 6.6 70 5.9 52 6.1S16 6.8 6 6.4C2.4 6.2.4 5.4 1.6 4.6z'/%3E%3C/svg%3E"); /* [side] billede */
  --rest:#636A76;     /* [side] det, der ikke ændrer sig, når et eksempel viser en form */
  --no:#B4473C;       /* [side] forkert: ikon og kuglepenstreg */
  --yes:#2E7D5B;      /* [side] rigtigt: ikon */
  --pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23B4473C' d='M0 8.1Q45 4.4 100 2.1Q46 7.2 0 9.7Z'/%3E%3C/svg%3E"); /* [side] billede */
  /* Skrift */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; /* [side] al tekst undtagen overskrifter */
  --head:"Jost","Inter",system-ui,sans-serif; /* [side] logo, titler, overskrifter, etiketter og knapper */
  --spor:.04em;       /* [side] bogstavafstand i titler, overskrifter og etiketter (Jost) */
  --spor-titel:.03em; /* [side] bogstavafstand i den store titel */
  --spor-tekst:.01em; /* [side] bogstavafstand i al anden tekst (Inter) */
  /* Hjørner */
  --r-kort:8px;       /* [side] flader: forsidens områdekort på telefonen, tabeller, noten, den grå boks med streg, flader med modersmålet, Forskel til dit sprog */
  --r-knap:6px;       /* [side] knapper: svarene og knapperne i Test dig selv, sprogknappen. Felter, menuer og linjerne i kolonnen til venstre er 2 px rundere */
  /* Afstande */
  --afsnit:32px;      /* mellem afsnit */
  --regel:24px;       /* mellem to regler */
  --eks:16px;         /* fra en regel til dens eksempel */
  --ovs:12px;         /* fra en overskrift til det, der står under den */
  --taet:4px;          /* fra reglens overskrift til teksten */
  --inde:16px;        /* fra kortets kant til teksten */
  --dele:12px;        /* mellem delene i et kort */
  --knap:8px;         /* mellem knapper ved siden af hinanden */
  --tid:.28s;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--fg);font:17px/26px var(--sans);letter-spacing:var(--spor-tekst)}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
/* Telefonens grå blink ved tryk er slået fra; i stedet toner det, man trykker på, kort ned */
:is(.row,.area-h,.fold-h,.see-link,.step-btn,.back,.opt:not([aria-disabled]),.q-knap:not([aria-disabled])):active{opacity:.6}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:4px}
:is(.top,.top-baand) :focus-visible{outline-color:var(--top-fg)}
.top-baand .lang-menu :focus-visible{outline-color:var(--fg)}
svg.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
em{font-style:italic}
p,li,.line span,figcaption{text-wrap:pretty}
.nobr{white-space:nowrap}
.inner{max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- Blokken øverst ---------- */
.top{background:var(--top)}
.top{position:relative;padding-bottom:20px}
/* Siden er et hvidt ark, der ligger oven på den mørkeblå top: arkets runde hjørner foroven står nederst i toppen. Også i den lave top står de lige under båndet med knapperne. */
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20px;background:var(--page);border-radius:20px 20px 0 0;pointer-events:none}
.top>.inner{position:relative;display:flex;flex-direction:column;gap:var(--regel);padding-block:12px 0}
/* Et tomt element sidst i toppens indhold giver samme luft under det sidste element som mellem de andre */
.top>.inner::after{content:""}
/* Værkets kendetegn: et stort § i en tone lige lysere end toppen. Det beskæres af sin egen boks, så sprogmenuen ikke beskæres. */
.par-box{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;user-select:none}
.par-box .inner{position:relative;height:100%}
.par{position:absolute;right:6px;top:-38px;font:400 190px/1 var(--head);color:var(--top-par);transition:opacity var(--tid) ease}
/* I den lave top er der kun plads til tilbagelinket og sprogknappen, så det store § toner ud */
.top.lav .par{opacity:0}
.top-more:empty{display:none}
.top-sub{color:var(--top-soft);font-size:15px;line-height:22px}
.top-sub .tr{margin-top:var(--taet)}
.top .tr{color:var(--top-soft)}
.top-more .search-box{margin-top:var(--eks)}
/* Linjen med tilbagelinket (eller logoet) og sprogknappen står i sit eget bånd lige over toppen, ikke inde i den: Klæbende inde i klæbende
   vises forkert i Safari på iPhone, når man scroller. Båndet er gennemsigtigt; toppen trækkes op under det, og en tom plads i toppen holder
   linjens plads, så alt står præcis, hvor det stod. Scriptet (skrumpMaal) sætter båndets klæbende top, pladsens højde og toppens margen. */
.top-baand{position:sticky;top:0;z-index:42;pointer-events:none}
.top-baand>.inner{padding-block:12px 0}
.top-baand.home>.inner{padding-top:24px}
.top-baand .top-bar{pointer-events:auto}
.top-bar-plads{flex:none;height:36px}
/* Før scriptet har kørt: toppen står under båndet fra første billede (12 px + linjens 36 px); scriptet sætter de præcise tal */
.top{margin-top:-48px}
.top-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.back{display:flex;align-items:center;gap:6px;min-height:36px;padding:0;border:0;background:none;color:var(--top-soft);font:500 15px/20px var(--head);letter-spacing:var(--spor);cursor:pointer}
.back svg{width:18px;height:18px}
.top-title{color:var(--top-fg);font:500 30px/36px var(--head);letter-spacing:var(--spor-titel);text-wrap:balance}
.top-title em{font-style:italic}
/* Et område: ikonet og linjen med eksempler fra forsiden står ved titlen. Ikonet står i søgefeltets mørke, runde flade, så det passer til toppen. */
.top-title:has(.omr-ik){display:flex;align-items:center;gap:12px}
.omr-ik{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--top-felt);border:1px solid var(--top-kant);color:var(--top-fg)}
.omr-ik svg{width:26px;height:26px;stroke-width:1.4}
.top-more .omr-sub{margin-top:calc(var(--ovs) - var(--regel))}
/* Forsiden: logoet står i stedet for tilbagelinket, på linje med sprogknappen */
.top.home>.inner{padding-top:24px}
.top.home .par{top:-30px}
.top.home #toptitle{display:none}
.top-baand.home #topleft{min-width:0}
.top.home .top-more{margin-top:calc(var(--knap) - var(--regel))}
/* Logoet: et ordmærke sat som et opslagsord med prikker mellem stavelserne */
.logo{display:inline-flex;align-items:baseline;gap:.3em;color:var(--top-fg);font-family:var(--head);letter-spacing:-.01em;white-space:nowrap}
.logo-a{font-weight:500}
.logo-b{font-weight:400}
.logo-d{color:var(--top-soft);padding:0 .04em}
.top-baand.home #topleft .top-title{font-size:clamp(22px,calc((100vw - 140px) / var(--logo-plads,8.2)),38px);line-height:1.2;cursor:pointer;transform-origin:left center;will-change:transform;transition:transform var(--tid) ease}
.top-baand.home.lav #topleft .top-title{transform:scale(var(--logo-k,1))}
/* Forsiden på en side med en startskærm (DF.hjem): »‹ Start« står på linje med sprogknappen i sidens tekstfarve og skrift og er 44 px høj
   uden at gøre linjen højere. Logoet står under den som titel i samme størrelse som ellers og toner ud som en titel. */
.back.hjem{min-height:44px;margin-block:-4px;color:var(--top-fg);font:500 15px/20px var(--sans);letter-spacing:var(--spor-tekst);text-decoration:none}
.top-baand.home.med-hjem>.inner,.top.home.med-hjem>.inner{padding-top:12px}
.top.home.med-hjem #toptitle{display:block;margin-top:calc(var(--ovs) - var(--regel));font-size:clamp(22px,calc((100vw - 140px) / var(--logo-plads,8.2)),38px);line-height:1.2}
.top.home.med-hjem .top-more{margin-top:calc(var(--ovs) - var(--regel))}

/* Sprogvælgeren: menuen vokser ud af knappen */
.lang{position:relative;height:36px;margin-left:auto}
.lang-btn{position:relative;z-index:31;display:flex;align-items:center;gap:6px;height:36px;padding:0 11px;border:0;border-radius:var(--r-knap);background:none;color:var(--top-fg);font:500 14px/20px var(--head);letter-spacing:var(--spor);cursor:pointer;transition:color var(--tid) ease}
.lang.open .lang-btn{color:var(--fg)}
.lang-btn .chev{color:var(--top-soft)}
.lang.open .lang-btn .chev{color:var(--soft)}
.top-baand .lang.open .lang-btn:focus-visible{outline-color:var(--fg)}
.lang-btn svg{width:18px;height:18px}
.lang-btn .chev{width:14px;height:14px;transition:transform var(--tid) ease}
.lang.open .lang-btn .chev{transform:rotate(180deg)}
/* Menuen er knappens egen flade: Lukket har den knappens størrelse og søgefeltets mørke flade og kant; åben er den hvid og vokser nedad og mod venstre */
.lang-menu{position:absolute;top:0;right:0;z-index:30;display:grid;grid-template-rows:0fr;width:100%;padding:34px 0 0;border:1px solid var(--top-kant);border-radius:var(--r-knap);background:var(--top-felt);box-shadow:0 8px 24px rgba(32,36,43,0);transition:grid-template-rows var(--tid) ease,width var(--tid) ease,padding var(--tid) ease,border-radius var(--tid) ease,box-shadow var(--tid) ease,background-color var(--tid) ease,border-color var(--tid) ease}
.lang-menu.open{grid-template-rows:1fr;width:184px;padding:34px 4px 4px;border-color:var(--edge);border-radius:calc(var(--r-knap) + 2px);background:var(--page);box-shadow:0 8px 24px rgba(32,36,43,.14)}
.lang-menu .reveal-in{display:grid;min-height:0;overflow:hidden;opacity:0;transition:opacity .2s ease}
.lang-menu.open .reveal-in{opacity:1;transition:opacity .2s ease .08s}
.lang-menu button{position:relative;display:block;width:100%;height:40px;padding:0 12px 0 32px;border:0;border-radius:var(--r-knap);background:none;color:var(--fg);font:400 15px/20px var(--sans);text-align:left;cursor:pointer}
@media (hover:hover) and (pointer:fine){.lang-menu button:hover{background:var(--card)}}
.lang-menu button[aria-selected="true"]::before{content:"";position:absolute;left:12px;top:14px;width:5px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(40deg)}

/* ---------- Siden ---------- */
#view{display:flex;flex-direction:column;gap:var(--afsnit);padding-block:4px 48px}
#view>*{min-width:0}
.hint{color:var(--soft);font-size:15px;line-height:22px}
.note{padding:var(--inde);border-radius:var(--r-kort);background:var(--card);color:var(--soft);font-size:15px;line-height:22px}

/* Glidende åbning og lukning */
.reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--tid) ease,opacity .22s ease}
.reveal.open{grid-template-rows:1fr;opacity:1}
.reveal-in{min-height:0;overflow:hidden}

/* Forsiden: søgning og områder */
.search-box{position:relative}
.search-box svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--top-soft);pointer-events:none}
.search{display:block;width:100%;height:48px;padding:0 14px 0 44px;border:1px solid var(--top-kant);border-radius:calc(var(--r-knap) + 2px);background:var(--top-felt);color:var(--top-fg);font:400 17px/24px var(--sans)}
.search::placeholder{color:var(--top-soft)}
.search:focus-visible{outline:none;border-color:var(--top-soft)}
.search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.list{display:grid}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.row-t{display:grid;min-width:0}
.row small{color:var(--soft);font-size:14px;line-height:20px}
.row .go{width:18px;height:18px;color:var(--fg)}
/* Et låst opslag: en lås i stedet for pilen og, når siden kræver en konto, en linje under titlen */
.row .laas{width:18px;height:18px;color:var(--soft)}
.row-t .konto{color:var(--soft);font-size:14px;line-height:20px;font-weight:400}
/* Vinduet ved et låst opslag (platform.md, »Tryk på noget låst«): nederst på skærmen i sidens farver og skrifter. Knapperne står under
   hinanden i fuld bredde og er 48 px; »Lav en konto« er skærmens hovedknap (--hovedknap) og står øverst. */
.laas-vindue{position:fixed;inset:auto 0 0;width:100%;max-width:480px;max-height:none;margin:0 auto;padding:0;border:0;border-radius:var(--r-kort) var(--r-kort) 0 0;background:var(--card);color:var(--fg);font:400 16px/24px var(--sans);letter-spacing:var(--spor-tekst);box-shadow:0 -8px 24px rgba(32,36,43,.12)}
html.lv-aaben{overflow:hidden}
.laas-vindue::backdrop{background:rgba(20,22,27,.45)}
.lv-in{display:grid;gap:var(--ovs);padding:20px var(--side,16px) calc(20px + env(safe-area-inset-bottom,0px))}
.lv-titel{display:flex;align-items:flex-start;gap:10px;margin:0;font:500 22px/28px var(--head);letter-spacing:var(--spor)}
.lv-titel .laas{flex:none;width:24px;height:24px;margin-top:2px;color:var(--soft)}
.lv-tekst{margin:0;color:var(--soft)}
.lv-knapper{display:grid;gap:var(--knap);margin-top:var(--knap)}
.lv-knap{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:1px solid var(--edge);border-radius:var(--r-knap);background:none;color:var(--fg);font:500 16px/20px var(--head);letter-spacing:var(--spor);text-decoration:none;cursor:pointer}
.lv-knap.hoved{border-color:var(--hovedknap);background:var(--hovedknap);color:var(--hovedknap-tekst)}
.lv-knap:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.laas-vindue[open]{animation:lv-ind var(--tid) cubic-bezier(.22,.61,.36,1)}}
@keyframes lv-ind{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:1024px){.laas-vindue{bottom:24px;border-radius:var(--r-kort)}.lv-in{padding-bottom:20px}}
.nav-op .laas{width:14px;height:14px;margin-left:6px;vertical-align:-2px;color:var(--soft)}
div.row{cursor:default}
/* Forsiden: hvert område er et udfyldt kort med ikonet i en rund, hvid flade */
.areas{display:grid;gap:8px}
.area-h{display:grid;grid-template-columns:40px 1fr 18px;gap:12px;align-items:center;width:100%;padding:12px 14px;border:0;border-radius:var(--r-kort);background:var(--card);text-align:left;cursor:pointer}
.area-h .ik{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fg);color:var(--page)}
.area-h .ik svg{width:22px;height:22px;stroke-width:1.4}
.area-h .go{width:18px;height:18px;color:var(--fg)}
.area-h strong{display:block;font:500 17px/24px var(--head);letter-spacing:var(--spor)}
.area-h small{display:block;color:var(--soft);font-size:14px;line-height:20px}
.chev{width:18px;height:18px;color:var(--soft);transition:transform var(--tid) ease}
[aria-expanded="true"]>.chev{transform:rotate(180deg)}
/* Et område (produkt.md, Design): En gruppe er ét kort med bladform. Øverst står gruppens navn i en mørk top, som man ikke kan trykke på,
   og under den gruppens opslag som linjer med en tynd streg imellem; overblikket står først. Et opslag uden gruppe er sit eget lyse kort,
   så kortets kant viser, hvad der hører til gruppen. Hver linje med › er ét opslag. */
.kort-liste{display:grid;gap:12px}
.kort{display:grid;border-radius:var(--blad);overflow:hidden;background:var(--card)}
.kort-navn{margin:0;padding:9px 16px;background:var(--top);color:var(--top-fg);font:500 15px/22px var(--head);letter-spacing:var(--spor)}
.kort-rk{display:grid;padding:4px 16px}
.kort .row{padding:12px 0}
.kort .row:last-child{border-bottom:0}
.kort .row .row-t{font-weight:500}
.kort .row small{font-weight:400}
.kort.enkelt .row{padding:14px 0}
/* Fokusrammen står inden for linjen, så kortets kant og runde hjørner ikke skærer den af */
.kort .row:focus-visible{outline-offset:-2px}

/* ---------- Opslaget ---------- */
.steps{display:flex;flex-direction:column;gap:var(--afsnit)}
.steps>.reveal>.reveal-in{display:flex;flex-direction:column;gap:var(--afsnit)}
.steps>.reveal:not(.open){margin-top:calc(var(--afsnit) * -1)}
.steps>.reveal{transition:grid-template-rows var(--tid) ease,opacity .22s ease,margin-top var(--tid) ease}

/* Øvelserne (Typiske fejl og Test dig selv) skilles fra forklaringen med en tynd streg */
:not(.ove)+.ove:not(.test){padding-top:var(--afsnit);border-top:1px solid var(--line)}

/* Et afsnit: overskrift, så indhold */
.sec{display:flex;flex-direction:column}
.sec>*+*{margin-top:var(--regel)}
.sec>h3+*{margin-top:var(--ovs)}
.sec>h3+.errs.kar{margin-top:calc(var(--ovs) - 10px)}
.sec>:not(h3)+.fold,.sec>.fold+*{margin-top:var(--afsnit)}
.sec>h3{font:500 18px/24px var(--head);letter-spacing:var(--spor)}
.sec>p+.ex,.sec>p+.tw{margin-top:var(--eks)}

/* En regel: § overskrift, tekst, eksempler */
.concept{display:flex;flex-direction:column;gap:var(--eks)}
.concept-head{display:flex;flex-direction:column;gap:var(--taet)}
.concept-head>b{display:flex;gap:8px;align-items:baseline;font:600 18px/26px var(--sans)}
.concept-head>b::before{content:"§";font:500 16px/1 var(--head);color:var(--fg)}
.concept-head>b.w{font-style:italic}
/* En hverdagssituation i et overblik er ikke en regel, så den har intet § */
.concept-head>b.sit::before{content:none}
.concept-head>span{font-size:17px;line-height:26px}
.concept.main .concept-head>span{font-size:18px;line-height:28px}
.concept-body{display:flex;flex-direction:column;gap:var(--eks)}
.concept-body:empty{display:none}
.group{display:flex;flex-direction:column;gap:var(--eks)}

/* Eksempler i kort */
/* Eksemplerne står i en tynd ramme med bladform i farven fra fasen Arbejd med sproget, uden flade */
.ex{display:grid;gap:var(--dele);padding:var(--inde);border:1px solid var(--eks-ramme);border-radius:var(--blad);background:var(--page)}
.ex li{min-width:0}
.ctx{color:var(--soft);font-size:15px;font-style:italic}
/* Nøgleord i en sætning: vægt 500 og en tynd, organisk gul streg under */
.k{margin:0 -1px;padding:0 1px 2px;font-weight:500;background:var(--tusch) no-repeat 0 100%/100% 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Et eksempel, der viser en form: Det, der ikke ændrer sig, træder tilbage, og det, der kommer på eller ændrer sig, står mørkt */
.rest{color:var(--rest)}
.skift{font-weight:500}

/* Oversættelser */
.tr{display:block;color:var(--soft);font-size:15px;line-height:22px}
.tr[dir="rtl"]{text-align:right}
.tr[lang="ar"],.sheet-tr[lang="ar"]{font-family:"Noto Sans Arabic",var(--sans);line-height:24px}
.tr em.ar{font-style:normal;font-weight:600}
/* Danske ord i en arabisk tekst får deres egen retning, så fx -e og spørgsmålstegnet står rigtigt */
.tr[dir="rtl"] em,.sammen[dir="rtl"] em{unicode-bidi:plaintext}
/* I opslaget står oversættelsen på den danske teksts plads (produkt.md, Sprogstøtte). Man trykker på ikonet,
   og teksten toner over i den anden, mens feltets højde glider til den nye teksts højde (openTr). Der er kun én åben ad gangen. */
.sw{display:block}
.sw>.da,.sw>.tr{display:block;min-width:0}
.sw>.tr{margin:0;color:inherit;font:inherit;letter-spacing:inherit}
.sw>.tr[lang="ar"]{font-family:"Noto Sans Arabic",var(--sans)}
.sw:not(.on)>.tr,.sw.on>.da{display:none}
/* Ikonet for oversættelse sidder øverst til højre ved reglen eller i eksempelkortet */
.has-tb{position:relative}
/* Globussen er lille og lys, så den ikke fylder. Er oversættelsen åben, er den mørk og står på en lille grå cirkel. */
.tb{position:absolute;top:0;right:-3px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--dot);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s ease,background-color .2s ease}
.has-tb>.tb{margin:0}
.tb::before{content:"";position:absolute;inset:-9px -6px}
.tb svg{width:14px;height:14px;stroke-width:1.4;transition:stroke-width .2s ease}
.tb[aria-pressed="true"]{color:var(--fg);background:var(--line)}
.tb[aria-pressed="true"] svg{stroke-width:1.8}
.tb:active{opacity:.6}
section.has-tb>:first-child,.fold.has-tb>:first-child,.concept.has-tb>.concept-head>:first-child,.fb.has-tb,figcaption.has-tb{padding-right:32px}
.fb.has-tb>.tb{right:-4px;top:-2px}
.boks{display:grid;gap:var(--dele);padding:var(--inde);border-radius:var(--r-kort);border:1px solid var(--line);font-size:15px;line-height:22px}
.boks>p{color:var(--soft)}
.boks .see-link{font-size:15px;line-height:22px}
.boks.has-tb{padding-right:44px}
.boks>.tb{top:calc(var(--inde) - 2px);right:8px}
.native{display:grid;gap:var(--taet);padding:var(--inde);border-radius:var(--r-kort);background:var(--card)}
.native .tr{margin:0;color:var(--fg)}

/* Rækker, man kan folde ud */
.fold{display:flex;flex-direction:column;gap:var(--ovs)}
.fold>b{font:500 18px/24px var(--head);letter-spacing:var(--spor)}
.fold-list{display:grid}
.fold-row{border-bottom:1px solid var(--line)}
.fold-row:last-child{border-bottom:0}
/* Efter den sidste række er der ingen streg, så dens luft forneden lægges ind over afstanden til det næste: Trykfladen er lige så høj som i de andre rækker, og afstanden er den faste afstand efter rækkerne */
.fold-row:last-child .fold-h{margin-bottom:-11px}
.fold-row:last-child .fold-body{padding-top:11px;padding-bottom:0}
.fold-h{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 0;border:0;background:none;font:400 16px/22px var(--sans);text-align:left;cursor:pointer}
.fold-row:first-child .fold-h{padding-top:0}
.fold-h>span{flex:1;min-width:0}
/* Plus foran viser, at rækken kan foldes ud; den bliver til minus, når rækken er åben */
.fold-h .plus{width:16px;height:16px;margin-top:3px;color:var(--fg);stroke-width:1.6}
.fold-h .plus .v{transform-box:fill-box;transform-origin:center;transition:transform var(--tid) ease}
.fold-h[aria-expanded="true"] .plus .v{transform:scaleY(0)}
.fold-body{display:flex;flex-direction:column;gap:var(--eks);padding-bottom:var(--inde)}

/* Typiske fejl: ét kort pr. par */
.errs{display:grid;gap:var(--dele)}
/* Med flere par står Typiske fejl ét par ad gangen: man swiper eller bruger pilene under parret, og prikkerne viser, hvor man er.
   Hvert par er sin egen højde. Polstringen foroven giver plads til krydset i rammen. */
.errs.kar{display:flex;gap:var(--dele);padding-top:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.errs.kar::-webkit-scrollbar{display:none}
.errs.kar>.pair{flex:0 0 100%;align-self:flex-start;scroll-snap-align:start}
/* Rækken er lige så høj som det par, der vises (scriptet sætter højden). Skifter man par, glider højden med til det nye par. */
.errs.kar{align-items:flex-start}
.errs.kar.glid{transition:height var(--tid) ease}
@media (prefers-reduced-motion:reduce){.errs.kar.glid{transition:none}}
.sec>.k-fod{position:relative;display:flex;align-items:center;gap:12px;margin-top:var(--dele)}
.k-fod>[data-kar="1"]{margin-left:auto}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.q-knap.pil[aria-disabled]{color:var(--dot);border-color:var(--line);cursor:default}
/* Typiske fejl: en tynd lerrød ramme med bladform. Krydset står i rammen foroven og fluebenet i en tynd streg mellem det forkerte og det rigtige,
   placeret som mærket i TEMA's regel- og sprogstøttekasser */
.pair{display:grid;border:1px solid var(--ler);border-radius:var(--blad);background:var(--page)}
.pair>.line{position:relative;display:block;padding:var(--inde)}
.pair>.line.yes{border-top:1px solid var(--ler)}
.pair>.line>svg{position:absolute;top:0;left:10px;box-sizing:content-box;width:18px;height:18px;margin:0;padding:0 6px;background:var(--page);transform:translateY(-50%)}
.line{display:flex;gap:10px;align-items:flex-start}
.line svg{width:20px;height:20px;margin-top:3px}
.line.no svg{color:var(--no)}
.line.yes svg{color:var(--yes)}
.line span{min-width:0}
.pair .mk{font-weight:500}
/* Kuglepenstregen over det forkerte: tynd, lidt skrå, tyndere i enderne; ordet kan stadig læses */
s.mk{position:relative;text-decoration:none;white-space:nowrap}
/* Kuglepenstregen tegnes hen over det forkerte, første gang kortet kommer frem på skærmen (tegnStreg) */
@media (prefers-reduced-motion:no-preference){.kan-tegne .pair:not(.tegn) s.mk::after{clip-path:inset(0 100% 0 0)}}
.pair.tegn s.mk::after{animation:streg .5s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes streg{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
s.mk::after{content:"";position:absolute;left:-.12em;right:-.12em;top:calc(50% - .37em);height:.6em;background:var(--pen) no-repeat center/100% 100%;opacity:.8;pointer-events:none}

/* Billeder og tabeller */
.fig{display:grid;gap:var(--dele)}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{color:var(--soft);font-size:15px;line-height:22px}
.ax{stroke:var(--soft);stroke-width:1.5;fill:none}
.m1{fill:var(--fg)}.m2{fill:none;stroke:var(--fg);stroke-width:2.5}
.tx{fill:var(--fg);font:italic 600 14px var(--sans)}.tx2{fill:var(--soft);font:13px var(--sans)}
.tw{overflow-x:auto;border-radius:var(--r-kort);background:var(--card)}
.tw table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.tw th{font:500 13px/18px var(--head);letter-spacing:var(--spor);text-align:left;color:var(--soft);vertical-align:bottom;white-space:nowrap}
.tw th,.tw td{padding:12px 8px;border-top:1px solid var(--line);white-space:nowrap}
.tw tr:first-child>*{padding-top:var(--inde)}
.tw tbody tr:last-child>*{padding-bottom:var(--inde)}
.tw tr:first-child th{border-top:0}
.tw :is(th,td):first-child{padding-left:var(--inde)}
.tw :is(th,td):last-child{padding-right:var(--inde)}
.tw .hl{font-style:italic}

/* Forskel til et andet sprog */
/* Forskel til dit sprog står i et mørkeblåt kort med hvid tekst, så kursistens eget sprog har sin egen, tydelige plads */
.sec.sammen{padding:var(--inde);border-radius:var(--r-kort);background:var(--top);color:var(--top-fg)}
.sammen>h3{color:var(--top-fg)}
.sammen p+p{margin-top:var(--taet)}
.sammen[dir="rtl"]{text-align:right}
.sammen[lang="ar"],.sammen[lang="ar"]>h3{font-family:"Noto Sans Arabic",var(--sans)}

/* Test dig selv: ét kort i --test pr. trin med overskriften, ét spørgsmål ad gangen og knapperne (produkt.md, Design).
   Spørgsmålets felt (.qk) er lige så højt som det, der står i det nu, og højden glider, når der kommer noget til, eller når man skifter spørgsmål (glid i scriptet). */
/* Hele afsnittet står i ét kort med bladform i --test: overskriften, spørgsmålet, svarene, begrundelsen og knapperne under spørgsmålet.
   Svarene og knappen Næste er hvide, så de er det, man trykker på; alt andet står i --test-fg eller --test-soft på kortets flade. Intet her forudsætter en grøn flade, kun en mørk. */
.sec.test{padding:var(--inde);border-radius:var(--blad);background:var(--test);color:var(--test-fg)}
.sec.test :focus-visible{outline-color:var(--test-fg)}
/* Feltet har luft om sig (padding) med en lige så stor negativ margen, så intet flytter sig, men fokusrammen, globussen og spørgsmålet,
   der glider op på plads, ikke bliver skåret af, mens højden glider */
.qk{padding:var(--inde);margin:0 calc(var(--inde) * -1);background:none}
.sec.test>.qk{margin-top:calc(var(--ovs) - var(--inde));margin-bottom:calc(var(--inde) * -1)}
.qk>.q,.qk>.q-slut{display:none;flex-direction:column;min-width:0}
.qk>.on{display:flex}
.qk>.on.ind{animation:qind .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes qind{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qk>:focus{outline:none}
.q>*+*,.q-slut>*+*{margin-top:var(--dele)}
.q>.fb:empty{margin:0}
/* Under spørgsmålet står Forrige (en pil) og prikkerne til venstre og Næste spørgsmål (ved det sidste Færdig) til højre. Prikkerne står fast efter pilen,
   så de ikke flytter sig, når Næste skifter navn. Næste er altid hvid, men virker først, når man har svaret; trykker man før, står der »Vælg et svar først.« under svarene. Knapper, der ikke bruges, er usynlige, men holder
   deres plads; ved slutbeskeden er hele rækken usynlig, men holder sin højde, så intet flytter sig. */
.sec>.q-fod{display:flex;align-items:center;gap:12px;margin-top:var(--dele)}
.q-fod>[data-naeste]{margin-left:auto}
.q-fod.skjul{visibility:hidden}
.q-fod>.skjul{visibility:hidden}
.q-slut .q-nav{display:flex;justify-content:flex-start}
.q-knap{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--edge);border-radius:var(--r-knap);background:var(--page);font:500 15px/22px var(--head);letter-spacing:var(--spor);cursor:pointer;white-space:nowrap;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.q-knap svg{width:18px;height:18px}
.q-knap:not(.pil){border-color:var(--fg);background:var(--fg);color:var(--page)}
.q-knap:not(.pil)[aria-disabled]{cursor:default}
.q-knap.pil{flex:none;justify-content:center;width:40px;height:40px;padding:0}
/* Prikkerne viser, hvor langt man er: besvarede i den svage farve, det spørgsmål, man står på, en lang, hvid prik, de andre svage (farverne under .test) */
.q-prik{display:flex;justify-content:center;gap:6px}
.q-prik>span{width:6px;height:6px;border-radius:3px;background:var(--edge);transition:width var(--tid) ease,background-color var(--tid) ease}
.q-prik>.ok{background:var(--soft)}
.q-prik>.on{width:18px;background:var(--fg)}
.blank{display:inline-block;width:2.8em;height:.7em;margin:0 .15em;border-radius:4px;background:var(--line);vertical-align:-.08em}
/* Når man har svaret, forsvinder feltet, og det rigtige svar står tilbage */
.filled{display:inline-block;font-weight:500;animation:ind .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes ind{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.opts{display:flex;flex-wrap:wrap;gap:var(--knap)}
.opt{min-height:40px;padding:8px 14px;border:1px solid var(--edge);border-radius:var(--r-knap);background:var(--page);font:400 16px/22px var(--sans);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease}
/* Efter et svar: det rigtige svar og et forkert valg har en kant i to px i rigtigts grønne og forkerts røde; de andre svar træder tilbage */
.opt.right{border-color:var(--yes);box-shadow:inset 0 0 0 1px var(--yes)}
.opt.wrong{border-color:var(--no);box-shadow:inset 0 0 0 1px var(--no)}
.opt.ude{opacity:.55}
.opt[aria-disabled]{cursor:default}
.fb{color:var(--soft);font-size:15px;line-height:22px}
/* Farverne i kortet */
.test .fb{color:var(--test-soft)}
.test .tb{color:var(--test-soft)}
.test .tb[aria-pressed="true"]{color:var(--test-fg);background:rgba(255,255,255,.18)}
.test .blank{background:var(--test-linje)}
.test .opt{border-color:var(--test-knap);background:var(--test-knap);color:var(--fg)}
.test .opt.right{border-color:var(--yes)}
.test .opt.wrong{border-color:var(--no)}
.test .q-knap.pil{border-color:var(--test-linje);background:none;color:var(--test-fg)}
.test .q-knap:not(.pil){border-color:var(--test-knap);background:var(--test-knap);color:var(--fg)}
.test .q-prik>span{background:var(--test-linje)}
.test .q-prik>.ok{background:var(--test-soft)}
.test .q-prik>.on{background:var(--test-fg)}
.test .q-slut .line.yes svg{color:var(--test-fg)}

/* Næste trin */
.step-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--dele) 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--fg);font:500 17px/24px var(--head);letter-spacing:var(--spor);text-align:left;cursor:pointer}
/* Trinknappen har ingen flade: en tynd streg over den markerer, hvor næste trin begynder, og teksten og pilen står i tekstens farve */
.step-btn .chev{color:var(--fg)}
.step-btn[hidden]{display:none}
.steps>.step-btn{margin-block:calc(var(--regel) - var(--afsnit))}

/* Se også */
.see{display:flex;flex-direction:column;gap:var(--ovs)}
.see-h>h3{font:500 18px/24px var(--head);letter-spacing:var(--spor)}
.see-link{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;border:0;background:none;font:400 16px/22px var(--sans);text-align:left;cursor:pointer}
.see-link::before{content:"";position:absolute;inset:-6px 0}
.see-link .go{width:18px;height:18px;color:var(--fg)}

/* Ordlisten */
.glist{display:grid;gap:var(--inde)}
.gitem{display:grid;gap:var(--taet);padding-top:var(--inde);border-top:1px solid var(--line)}
.gitem:first-child{padding-top:0;border-top:0}
.gitem h3{font:500 17px/24px var(--head);letter-spacing:var(--spor)}
.sheet-tr{font-weight:500}
.sheet-tr[dir="rtl"]{text-align:right}

/* Toppen bliver lav, når man scroller: Den er klæbende og glider op, til kun 48 px er tilbage. Tilbagelinket, logoet og sprogknappen
   bliver stående og glider ind i den lave top; titlen, linjen under logoet og søgefeltet toner ud under dem (skrump i scriptet). */
html{scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
/* Viser appen sin egen bjælke øverst (sikkerhedsmargenen), står den lave top lige under den, og båndet bag bjælken har toppens farve */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--top);z-index:41;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pair.tegn s.mk::after,.filled,.qk>.on.ind{animation:none}.q-prik>span,.q-knap{transition:none}}
@media (prefers-reduced-motion:reduce){.reveal,.steps>.reveal,.chev,.lang-menu,.lang-menu .reveal-in,.lang-menu.open .reveal-in,.lang-btn .chev,.fold-h .plus .v,.top-baand.home #topleft .top-title{transition:none}}

/* ---------- Store skærme (produkt.md, Design: Store skærme) ----------
   Teksten i et opslag står højst 640 px bred på alle skærme, så linjerne ikke bliver for lange. Det, der vokser med skærmen, er rammen om teksten:
   fra 768 px mere luft i siderne og forsidens områder i to kolonner, fra 1024 px områderne i tre kolonner og en kolonne med områderne
   til venstre for et område og et opslag. Under 768 px er alt som på telefonen. */
.logo-lille{display:none}
.sidenav{display:none}
#res{max-width:640px}
@media (min-width:768px){
  :root{--side:32px;--laes:640px}
  .inner{max-width:calc(var(--laes) + var(--side) * 2);padding-left:max(var(--side),env(safe-area-inset-left,0px));padding-right:max(var(--side),env(safe-area-inset-right,0px))}
  .top-title{font-size:34px;line-height:42px}
  /* Forsidens områder er fliser: ikonet og pilen øverst, navnet og linjen med eksempler under */
  .areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .area-h{grid-template-columns:1fr 18px;grid-template-rows:auto 1fr;align-items:start;row-gap:20px;min-height:148px;padding:20px;border-radius:var(--blad)}
  .area-h .ik{width:44px;height:44px}
  .area-h .ik svg{width:24px;height:24px}
  .area-h>span:not(.ik){grid-column:1/-1;align-self:end}
  .area-h .go{grid-row:1;grid-column:2;margin-top:13px}
  .area-h strong{font-size:19px;line-height:26px}
  .area-h small{margin-top:2px;font-size:15px;line-height:22px}
  .par{right:calc(var(--side) - 10px)}
}
@media (min-width:1024px){
  :root{--nav:232px;--nav-gap:56px}
  .inner{max-width:calc(var(--nav) + var(--nav-gap) + var(--laes) + var(--side) * 2)}
  /* Forsiden: logoet er større, søgefeltet er lige så bredt som teksten i et opslag, og områderne står i tre kolonner */
  .top-baand.home #topleft .top-title,.top.home.med-hjem #toptitle{font-size:46px}
  .top.home .top-more{max-width:var(--laes)}
  .top-sub{font-size:16px;line-height:24px}
  .areas{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Et område og et opslag: områderne står i en kolonne til venstre; titlen og teksten står i kolonnen til højre */
  .flade.med-nav{display:grid;grid-template-columns:var(--nav) minmax(0,var(--laes));column-gap:var(--nav-gap);align-items:start}
  .sidenav:not([hidden]){display:block;position:sticky;top:calc(48px + 20px + env(safe-area-inset-top,0px));max-height:calc(100vh - 88px);overflow:auto;padding:4px 0 48px;scrollbar-width:thin}
  .top:not(.home)>.inner{padding-left:calc(max(var(--side),env(safe-area-inset-left,0px)) + var(--nav) + var(--nav-gap))}
  /* Over kolonnen med områderne står et lille logo, der fører til forsiden; tilbagelinket står over titlen */
  .top-baand:not(.home) #topleft{display:grid;grid-template-columns:var(--nav) auto;column-gap:var(--nav-gap);align-items:center;flex:1}
  /* Tilbagelinket er kun så bredt som sin tekst, så et tryk på den tomme flade ved siden af ikke fører tilbage */
  .top-baand:not(.home) #topleft>.back{justify-self:start}
  /* Lige så stort som logoet i forsidens lave top (LOGO_LAV i scriptet), så logoet ikke skifter størrelse mellem siderne */
  .logo-lille{display:block;justify-self:start;padding:0;border:0;background:none;font-size:21px;line-height:36px;cursor:pointer}
  .logo-lille:active{opacity:.6}
}
@media (min-width:1280px){
  :root{--nav:256px;--nav-gap:80px}
}
/* Kolonnen med områderne */
/* Søgefeltet i kolonnen står på det hvide ark og har derfor kortenes lyse flade i stedet for toppens mørke */
.nav-soeg{margin-bottom:var(--regel)}
.nav-soeg .search{height:40px;padding-left:40px;border-color:transparent;background:var(--card);color:var(--fg);font-size:15px}
.nav-soeg .search::placeholder{color:var(--soft)}
.nav-soeg .search:focus-visible{border-color:var(--edge)}
.nav-soeg svg{left:12px;width:18px;height:18px;color:var(--soft)}
.nav-op.nav-res{display:grid;gap:1px;margin-left:0;width:100%}
.nav-res small{color:var(--soft);font-size:13px;line-height:18px}
.nav-tom{margin:0;color:var(--soft);font-size:15px;line-height:21px}
.nav-h{margin:0 0 var(--ovs);color:var(--soft);font:500 14px/20px var(--head);letter-spacing:var(--spor)}
.nav-liste{display:grid;gap:2px}
.nav-omr{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 10px 6px 6px;border:0;border-radius:calc(var(--r-knap) + 2px);background:none;font:500 16px/22px var(--head);letter-spacing:var(--spor);text-align:left;cursor:pointer;transition:background-color .2s ease}
.nav-omr .ik{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--fg);color:var(--page)}
.nav-omr .ik svg{width:18px;height:18px;stroke-width:1.4}
.nav-sub{display:grid;gap:var(--ovs);padding:6px 0 var(--ovs) 44px}
.nav-grp{display:grid;gap:2px}
.nav-grp-h{margin:0 0 2px;color:var(--soft);font:500 13px/18px var(--head);letter-spacing:var(--spor)}
.nav-op{display:block;width:100%;margin-left:-10px;width:calc(100% + 10px);padding:7px 10px;border:0;border-radius:calc(var(--r-knap) + 2px);background:none;font:400 15px/21px var(--sans);text-align:left;cursor:pointer;text-wrap:pretty;transition:background-color .2s ease}
/* Fladen under musen vises kun med mus, så den ikke bliver hængende efter et tryk på en tablet */
@media (hover:hover) and (pointer:fine){.nav-omr:hover,.nav-op:hover{background:var(--hover)}}
/* Det, man står på, har kortenes lyse flade */
:is(.nav-omr,.nav-op).nu{background:var(--card)}
.nav-op.nu{font-weight:500}
:is(.nav-omr,.nav-op):active{opacity:.6}
:is(.nav-omr,.nav-op):focus-visible{outline-offset:-2px}