/* ==========================================================================
   Neubert Work · Komponenter

   Rækkefølgen er: knapper, linje øverst, hero og søgefelt, gitteret og
   felterne, driftmærker, menuer, beskeder, dialoger, bunden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Knapper
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-raised);
  --btn-fg: var(--ink);
  --btn-line: var(--line-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: .5625rem .875rem;
  min-height: 2.5rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--btn-bg) 92%, var(--ink));
  border-color: var(--ink-3);
}
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-on);
  --btn-line: transparent;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { background: var(--brand-hover); border-color: transparent; }
.btn--primary:active:not(:disabled) { background: var(--brand-active); }

.btn--soft {
  --btn-bg: var(--brand-soft);
  --btn-fg: var(--brand);
  --btn-line: var(--brand-line);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-line: transparent;
  --btn-fg: var(--ink-2);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--surface-sunken);
  border-color: transparent;
  color: var(--ink);
}

.btn--danger {
  --btn-bg: transparent;
  --btn-fg: var(--critical-ink);
  --btn-line: color-mix(in oklab, var(--critical) 40%, transparent);
}
.btn--danger:hover:not(:disabled) { background: var(--critical-soft); border-color: var(--critical); }

.btn--danger-solid {
  --btn-bg: var(--critical);
  --btn-fg: #fff;
  --btn-line: transparent;
}
.btn--danger-solid:hover:not(:disabled) {
  background: color-mix(in oklab, var(--critical) 86%, #000);
  border-color: transparent;
}

.btn--sm { padding: .375rem .625rem; min-height: 2rem; font-size: var(--text-sm); }
.btn--icon { padding: 0; width: 2.5rem; min-height: 2.5rem; flex: 0 0 auto; }
.btn .icon { flex: 0 0 auto; }

/* Ventetilstand: knappen låses og viser en lille snurre. */
.btn[data-busy="true"] {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.05rem; height: 1.05rem;
  border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Den lille runde knap inde i et felt. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface-raised) 80%, transparent);
  color: var(--ink-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--ink); border-color: var(--line); }
.icon-btn.is-on { color: var(--brand); }
.icon-btn--pin.is-on:hover { color: var(--brand-hover); }

kbd {
  display: inline-block;
  min-width: 1.6rem;
  padding: .1rem .38rem;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Linjen øverst
   -------------------------------------------------------------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--surface-page) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  max-width: var(--app-width);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--ink);
  font-weight: 680;
  letter-spacing: -.012em;
  border-radius: var(--r-md);
  padding: .2rem .35rem;
  margin-left: -.35rem;
}
.brand-mark:hover { background: var(--surface-sunken); }
.brand-mark__glyph { border-radius: 7px; display: block; }
.brand-mark__text { font-size: var(--text-md); }

/* --------------------------------------------------------------------------
   Banner (ingen forbindelse)
   -------------------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  background: var(--warning-soft);
  border-bottom: 1px solid color-mix(in oklab, var(--warning) 45%, transparent);
  color: var(--ink);
  font-size: var(--text-base);
}
.banner .icon { color: var(--warning-ink); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Skallen
   -------------------------------------------------------------------------- */
.shell {
  max-width: var(--app-width);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter) var(--s-10);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
}
.hero__dot { color: var(--ink-3); }

.hero__title {
  margin: 0;
  font-size: clamp(2rem, 7vw, var(--text-3xl));
  font-weight: 700;
  letter-spacing: -.024em;
}

.hero__date {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-base);
  /* Ugedagen kommer fra Intl og starter med lille. På dansk er det rigtigt
     midt i en sætning, men her står den alene. */
  text-transform: lowercase;
}
.hero__date::first-letter { text-transform: uppercase; }

.hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-1) 0 0;
  min-height: 1.5rem;
  font-size: var(--text-sm);
}

.result-count {
  margin: 0;
  min-height: 1.25rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Søgefelt
   -------------------------------------------------------------------------- */
.searchbox {
  position: relative;
  display: flex;
  align-items: center;
  width: min(34rem, 100%);
  margin-top: var(--s-4);
}
.searchbox__icon {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.searchbox__input {
  width: 100%;
  padding: .8rem 5.5rem .8rem 2.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background-color: var(--surface-raised);
  color: var(--ink);
  font-size: var(--text-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.searchbox__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
/* Browserens eget kryds i et type="search" ville stå ved siden af vores. */
.searchbox__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.searchbox__kbd {
  position: absolute;
  right: .8rem;
  pointer-events: none;
  opacity: .75;
}
.searchbox__input:focus ~ .searchbox__kbd,
.searchbox__input:not(:placeholder-shown) ~ .searchbox__kbd { opacity: 0; }

.searchbox__clear {
  position: absolute;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--ink-2);
  cursor: pointer;
}
.searchbox__clear:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Driftmærke

   Aldrig kun farve: der står altid, hvad prikken betyder.
   -------------------------------------------------------------------------- */
.status,
.status-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.status-summary { font-size: var(--text-sm); }

.status__dot {
  width: .5rem; height: .5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-3);
}
[data-tone="good"]     .status__dot, .status[data-tone="good"] .status__dot     { background: var(--good); }
[data-tone="warning"]  .status__dot, .status[data-tone="warning"] .status__dot  { background: var(--warning); }
[data-tone="critical"] .status__dot, .status[data-tone="critical"] .status__dot { background: var(--critical); }

.status[data-tone="good"]     { color: var(--good-ink); }
.status[data-tone="warning"]  { color: var(--warning-ink); }
.status[data-tone="critical"] { color: var(--critical-ink); }

.status-summary[data-tone="good"]     { color: var(--good-ink); }
.status-summary[data-tone="warning"]  { color: var(--warning-ink); }
.status-summary[data-tone="critical"] { color: var(--critical-ink); }

/* Et rødt mærke skal fange øjet. Ét blink, ikke et der bliver ved. */
.status[data-state="down"] .status__dot,
.status-summary[data-tone="critical"] .status__dot {
  animation: ping 1.6s var(--ease) 2;
}
@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--critical) 55%, transparent); }
  55%      { box-shadow: 0 0 0 .3rem transparent; }
}

/* --------------------------------------------------------------------------
   Overskrifter mellem sektionerne
   -------------------------------------------------------------------------- */
.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.section-title:first-child { margin-top: 0; }
.section-title__count {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Gitteret
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}
.grid-host[data-view="list"] .grid { grid-template-columns: 1fr; gap: var(--s-2); }

/* --------------------------------------------------------------------------
   Et felt
   -------------------------------------------------------------------------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-line);
}
/* Fokus tegnes på feltet, ikke på linket inde i det — ellers ligger ringen
   rundt om teksten og ikke om det, man er ved at åbne. */
.tile:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.tile:focus-within .tile__link:focus-visible { outline: none; }

.tile[data-pinned="true"] { border-color: var(--brand-line); }
.tile[data-pinned="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: var(--s-5); bottom: var(--s-5);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}

.tile[data-state="planned"] {
  border-style: dashed;
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--surface-card) 60%, transparent);
  box-shadow: none;
}
.tile[data-state="planned"]:hover { transform: none; box-shadow: none; }
.tile[data-state="planned"] .tile__name { color: var(--ink-2); }

/* Selve målet. ::after dækker hele feltet, så man kan ramme det overalt —
   men kun ét element ligger i tabrækkefølgen. */
.tile__link {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-md);
  background: var(--brand-softer);
  border: 1px solid var(--brand-line);
  font-size: 1.6rem;
  line-height: 1;
  /* Emoji rammer ikke altid midten af sin egen linjeboks. */
  padding-bottom: .1rem;
}
.tile[data-state="planned"] .tile__icon {
  background: var(--surface-sunken);
  border-color: var(--line);
  filter: grayscale(.45);
  opacity: .8;
}
.tile__icon--svg { color: var(--brand); }

.tile__name {
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -.011em;
  color: var(--ink);
  /* Plads til stjernen og prikkerne i hjørnet. */
  padding-right: 3.5rem;
}
.tile__desc {
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: 1.5;
}

.hit {
  background: var(--selection);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 .1em;
}

/* Adressen over driftmærket, altid. Med `flex-wrap` stod de to ting på én
   linje i de felter, hvor der lige var plads, og på to i resten — og så
   flyttede driftmærket sig fra felt til felt. Det, man skimmer efter, skal
   stå samme sted i dem alle. I listevisningen er der plads til én linje,
   og der lægges de tilbage på række. */
.tile__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-1);
}
.tile__host {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.tile__hint { font-size: var(--text-xs); color: var(--ink-3); }

.tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  padding: .1rem .45rem;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* Handlingerne ligger over ::after-fladen, så et klik på stjernen ikke
   også åbner linket. */
.tile__actions {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: flex;
  gap: var(--s-1);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.tile:hover .tile__actions,
.tile:focus-within .tile__actions,
.tile__actions:focus-within { opacity: 1; }
/* En fastgjort genvej skal kunne ses som fastgjort uden at holde musen der. */
.tile[data-pinned="true"] .tile__actions { opacity: 1; }
/* Uden mus er der ikke noget at holde over. */
@media (hover: none) {
  .tile__actions { opacity: 1; }
}

.tile__key {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  display: none;
  min-width: 1.1rem;
  padding: 0 .25rem;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
}
/* Nummeret er en tastaturgenvej. Det dukker op, når man rører tastaturet. */
body[data-keyboard="true"] .tile__key { display: block; }
body[data-keyboard="true"] .tile__icon { margin-top: var(--s-4); }

/* --- Listevisning ------------------------------------------------------- */
.grid-host[data-view="list"] .tile {
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
}
.grid-host[data-view="list"] .tile:hover { transform: none; }
.grid-host[data-view="list"] .tile__link {
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  flex: 1 1 auto;
  min-width: 0;
}
.grid-host[data-view="list"] .tile__icon {
  width: 2.25rem; height: 2.25rem;
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.grid-host[data-view="list"] .tile__name {
  font-size: var(--text-md);
  padding-right: 0;
  flex: 0 0 auto;
}
.grid-host[data-view="list"] .tile__desc {
  font-size: var(--text-sm);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-host[data-view="list"] .tile__foot {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  margin-top: 0;
  padding-top: 0;
  flex: 0 0 auto;
  justify-content: flex-end;
}
.grid-host[data-view="list"] .tile__tags { display: none; }
.grid-host[data-view="list"] .tile__actions {
  position: static;
  flex: 0 0 auto;
}
.grid-host[data-view="list"] .tile__key { position: static; flex: 0 0 auto; }
.grid-host[data-view="list"] .tile[data-pinned="true"]::before { top: .5rem; bottom: .5rem; }
body[data-keyboard="true"] .grid-host[data-view="list"] .tile__icon { margin-top: 0; }

/* Under ~34rem er der ikke plads til både beskrivelse og adresse. */
@media (max-width: 34rem) {
  .grid-host[data-view="list"] .tile__desc,
  .grid-host[data-view="list"] .tile__host { display: none; }
}

/* --------------------------------------------------------------------------
   Tom tilstand
   -------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-5);
  text-align: center;
}
.empty__glyph { font-size: 2.75rem; line-height: 1; filter: saturate(.85); }
.empty__title { margin: 0; font-size: var(--text-lg); font-weight: 650; }
.empty__text  { margin: 0; color: var(--ink-2); max-width: 32rem; }

.add-row {
  display: flex;
  justify-content: center;
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   Menuer
   -------------------------------------------------------------------------- */
.menu {
  z-index: 40;
  min-width: 13rem;
  padding: var(--s-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  animation: menu-in var(--dur-2) var(--ease);
}
.menu--floating { position: fixed; z-index: 60; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.menu__item:hover:not(:disabled) { background: var(--surface-sunken); }
.menu__item:disabled { opacity: .45; cursor: not-allowed; }
.menu__item .icon { color: var(--ink-3); }
.menu__item--danger { color: var(--critical-ink); }
.menu__item--danger .icon { color: currentColor; }
.menu__item--danger:hover:not(:disabled) { background: var(--critical-soft); }
.menu__sep { height: 1px; background: var(--line); margin: var(--s-2) 0; }

/* --------------------------------------------------------------------------
   Beskeder
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: max(var(--s-4), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-2);
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: var(--text-base);
  pointer-events: auto;
  animation: toast-in var(--dur-3) var(--ease);
}
.toast[data-leaving="true"] { animation: toast-out var(--dur-2) var(--ease) forwards; }
.toast__icon { flex: 0 0 auto; margin-top: .1rem; }
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__title { font-weight: 650; }
.toast__text {
  color: var(--ink-2);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.toast__action { margin-top: var(--s-2); }
.toast__close {
  flex: 0 0 auto;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); padding: .1rem; border-radius: var(--r-sm);
}
.toast__close:hover { color: var(--ink); }

.toast--success .toast__icon { color: var(--good); }
.toast--error   .toast__icon { color: var(--critical); }
.toast--warning .toast__icon { color: var(--warning-ink); }
.toast--info    .toast__icon { color: var(--brand); }
.toast--success { border-color: color-mix(in oklab, var(--good) 35%, var(--line)); }
.toast--error   { border-color: color-mix(in oklab, var(--critical) 40%, var(--line)); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}

/* --------------------------------------------------------------------------
   Dialoger
   -------------------------------------------------------------------------- */
dialog.modal {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 4rem);
  overflow: visible;
}
dialog.modal--wide { width: min(42rem, calc(100vw - 2 * var(--gutter))); }
dialog.modal::backdrop {
  background: var(--surface-overlay);
  backdrop-filter: blur(3px);
}
dialog.modal[open] {
  display: flex;
  flex-direction: column;
  animation: modal-in var(--dur-2) var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal__form { display: contents; }
.modal__head { padding: var(--s-5) var(--s-5) var(--s-3); }
.modal__title { font-size: var(--text-lg); }
.modal__desc { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--text-base); }
.modal__body {
  padding: var(--s-2) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__head, .modal__foot { flex: 0 0 auto; }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface-card);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.form-error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--critical-soft);
  border: 1px solid color-mix(in oklab, var(--critical) 40%, transparent);
  color: var(--critical-ink);
  font-size: var(--text-sm);
  font-weight: 500;
}
.form-error .icon { flex: 0 0 auto; }

/* --- Felter i dialogen -------------------------------------------------- */
.icon-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}
.input--icon {
  width: 3.5rem;
  text-align: center;
  font-size: 1.35rem;
  padding: .45rem .3rem;
}
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
.icon-picker__btn {
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.icon-picker__btn:hover { border-color: var(--brand); background: var(--brand-softer); }

.field[data-disabled="true"] > label,
.field[data-disabled="true"] .hint { opacity: .5; }

.switch {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-card);
  cursor: pointer;
}
.switch input { margin-top: .2rem; accent-color: var(--brand); width: 1.05rem; height: 1.05rem; }
.switch__title { display: block; font-weight: 600; }
.switch__hint { display: block; font-size: var(--text-sm); color: var(--ink-2); }

.restore-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-card);
}
.restore-row__icon { font-size: 1.1rem; line-height: 1; }
.restore-row__name { display: block; font-weight: 600; font-size: var(--text-base); }
.restore-row__url  { display: block; font-size: var(--text-xs); color: var(--ink-3); font-family: var(--font-mono); }

/* --- Tastaturgenveje ---------------------------------------------------- */
.keys {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0;
}
.keys dt { display: flex; align-items: center; gap: .2rem; justify-self: end; }
.keys dd { margin: 0; color: var(--ink-2); font-size: var(--text-base); }
.keys__plus { color: var(--ink-3); font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Bunden
   -------------------------------------------------------------------------- */
.foot {
  max-width: var(--app-width);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter) calc(var(--s-10) + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.foot p { margin: 0 0 var(--s-2); }
.foot p:last-child { margin: 0; }

/* --------------------------------------------------------------------------
   Små skærme
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .shell { padding-top: var(--s-6); }
  .brand-mark__text { display: none; }
  .grid { grid-template-columns: 1fr; }
  .tile { padding: var(--s-4); }
  .searchbox__kbd { display: none; }
  .searchbox__input { padding-right: 3rem; }
}

/* --------------------------------------------------------------------------
   Brødtekst (privatlivspolitikken)
   -------------------------------------------------------------------------- */
.prose { max-width: 44rem; }
.prose h1 { font-size: var(--text-2xl); margin-bottom: var(--s-2); }
.prose h2 {
  margin: var(--s-8) 0 var(--s-3);
  font-size: var(--text-lg);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.prose ul { margin: 0 0 var(--s-4); padding-left: var(--s-6); color: var(--ink-2); }
.prose li { margin-bottom: var(--s-2); }
.prose code {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: .1rem .3rem;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
}
.prose abbr { text-decoration-style: dotted; cursor: help; }
.prose .back { margin-top: var(--s-10); }

/* --------------------------------------------------------------------------
   Administrationen

   Egen side, ikke en tilstand på forsiden. Den skal ligne resten, men man
   skal kunne se på den, at man står et andet sted.
   -------------------------------------------------------------------------- */
.shell--narrow { max-width: 48rem; }

.admin-badge {
  padding: .15rem .5rem;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Log ind ------------------------------------------------------------ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.auth {
  max-width: 24rem;
  margin: var(--s-12) auto;
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
}
.auth__title { font-size: var(--text-xl); }
.auth__text { margin: 0; color: var(--ink-2); font-size: var(--text-base); }

/* --- Hovedet ------------------------------------------------------------ */
.admin-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.admin-head__title { font-size: var(--text-2xl); }
.admin-head__meta { margin: var(--s-1) 0 0; font-size: var(--text-sm); }

.admin-dirty {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent);
  font-size: var(--text-sm);
  font-weight: 500;
}
.admin-dirty .icon { color: var(--warning-ink); flex: 0 0 auto; }

/* --- Listen ------------------------------------------------------------- */
.admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Rækkefølgen betyder noget her — det er den, forsiden viser dem i —
     så rækkerne nummereres. */
  counter-reset: genvej;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-card);
  counter-increment: genvej;
}
.admin-row::before {
  content: counter(genvej);
  flex: 0 0 1.5rem;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
}
.admin-row[data-state="planned"] {
  border-style: dashed;
  background: color-mix(in oklab, var(--surface-card) 55%, transparent);
}

.admin-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-sm);
  background: var(--brand-softer);
  border: 1px solid var(--brand-line);
  font-size: 1.1rem;
  line-height: 1;
}
.admin-row[data-state="planned"] .admin-row__icon {
  background: var(--surface-sunken);
  border-color: var(--line);
  filter: grayscale(.45);
}

.admin-row__body { min-width: 0; }
.admin-row__name { display: block; font-weight: 620; }
.admin-row__url {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.admin-row__url em { font-family: var(--font-sans); font-style: normal; }
.admin-row__body .tile__tags { margin-top: var(--s-1); }

.admin-row__actions {
  display: flex;
  gap: var(--s-1);
  flex: 0 0 auto;
}
.icon-btn--danger:hover { color: var(--critical-ink); background: var(--critical-soft); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; border-color: transparent; color: var(--ink-3); }

/* Under ~32rem er der ikke plads til fire knapper ved siden af teksten. */
@media (max-width: 32rem) {
  .admin-row { flex-wrap: wrap; }
  .admin-row__actions { width: 100%; justify-content: flex-end; }
}

/* --- Mærkat på den besøgendes egne genveje ------------------------------ */
.chip--local {
  background: var(--brand-softer);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-weight: 600;
}

.section-title__note {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

/* En planlagt genvej ser ikke ud som noget, man kan klikke på. */
.tile__link[aria-disabled="true"] { cursor: default; }

.foot__sep { margin: 0 .4rem; color: var(--ink-3); }
.foot__admin { color: var(--ink-3); text-decoration-color: currentColor; }
.foot__admin:hover { color: var(--brand); }