/* Notifikationskort, variation A (Figma 317:11273, Spec 324:19115). Et fast felt nederst i midten viser ét kort ad gangen;
   notifications.js ejer køen. Kortene er skjulte i HTML'en, så intet blinker, før køen har valgt.
   Fallback-værdier følger tokens.css, så filen også virker på sider uden tokens (ældre base.html). */

.nt-slot{position:fixed;z-index:860;left:var(--nt-inset-left,0);right:0;bottom:18px;box-sizing:border-box;padding:0 var(--space-4,16px);display:grid;justify-items:center;align-items:end;pointer-events:none;font-family:var(--font-family-text,"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)}
.v5-authed .nt-slot{--nt-inset-left:var(--size-sidebar,232px)}

/* ---------- kort ---------- */
.nt-card{grid-area:1/1;pointer-events:auto;box-sizing:border-box;display:flex;align-items:center;gap:var(--space-3,12px);width:fit-content;max-width:min(520px,100%);padding:var(--space-2,8px) var(--space-2,8px) var(--space-2,8px) var(--space-3,12px);background:var(--color-bg-surface,#fff);color:var(--color-text-primary,#111318);border:1px solid var(--color-border-default,#eef0f2);border-radius:var(--radius-xl,14px);box-shadow:var(--shadow-float,0 1px 2px rgba(17,19,24,.06),0 16px 40px -6px rgba(17,19,24,.14));font-size:var(--type-body-size,14px);font-weight:var(--font-weight-regular,400);line-height:var(--type-body-line-height,1.5);text-align:left;opacity:0;transform:translateY(8px);transition:opacity var(--motion-duration-base,200ms) var(--motion-easing-out,cubic-bezier(.23,1,.32,1)),transform var(--motion-duration-base,200ms) var(--motion-easing-out,cubic-bezier(.23,1,.32,1))}
.nt-card.is-in{opacity:1;transform:none}
.nt-card[hidden]{display:none}
.nt-card svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

.nt-tile{display:grid;place-items:center;flex:none;width:32px;height:32px;overflow:hidden;border-radius:var(--radius-sm,8px)}
.nt-tile svg{width:16px;height:16px}
.nt-tile-info{background:var(--color-status-info-bg,#eef6fc);color:var(--color-status-info-text,#1f5a8f)}
.nt-tile-ok{background:var(--color-status-success-bg,#edf6f0);color:var(--color-status-success-text,#1e5439)}
.nt-tile-warn{background:var(--color-status-warning-bg,#fef7ea);color:var(--color-status-warning-text,#784f09)}

.nt-text{min-width:0;display:flex;flex-direction:column;gap:var(--space-1,4px)}
.nt-title{margin:0;color:var(--color-text-primary,#111318);font-size:var(--type-body-size,14px);font-weight:var(--font-weight-semibold,600);line-height:var(--type-body-line-height,1.5)}
.nt-title-medium{font-weight:var(--font-weight-medium,500)}
.nt-title-link{display:inline-flex;align-items:center;gap:var(--space-1,4px);color:var(--color-accent-default,#1f5c3e);text-decoration:none;min-width:0}
.nt-arrow{width:14px;height:14px}
.nt-fine{margin:0;color:var(--color-text-muted,#6b7079);font-size:var(--type-caption-size,12px);line-height:var(--type-caption-line-height,1.5)}
.ss-update-banner-note{margin:0;color:var(--color-text-muted,#6b7079);font-size:var(--type-caption-size,12px);line-height:var(--type-caption-line-height,1.5)}
.nt-actions{display:contents}
.nt-form{margin:0}
.nt-count{flex:none;color:var(--color-text-muted,#6b7079);font-size:var(--type-caption-size,12px);font-weight:var(--font-weight-medium,500);line-height:var(--type-caption-line-height,1.5);font-variant-numeric:tabular-nums;white-space:nowrap}
.nt-count[hidden]{display:none}

/* ---------- knapper ---------- */
.nt-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;font-family:inherit;font-size:var(--type-body-sm-size,13px);line-height:var(--type-body-sm-line-height,1.5);transition:background-color var(--motion-duration-hover,150ms),color var(--motion-duration-hover,150ms)}
.nt-btn-pri{padding:var(--space-2,8px) var(--space-3,12px);border-radius:var(--radius-sm,8px);background:var(--color-accent-default,#1f5c3e);color:var(--color-text-on-accent,#fff);font-weight:var(--font-weight-semibold,600)}
.nt-btn-link{padding:var(--space-1,4px) var(--space-2,8px);border-radius:var(--radius-xs,6px);background:transparent;color:var(--color-text-secondary,#3c4048);font-weight:var(--font-weight-medium,500)}
.nt-btn[disabled]{opacity:.7;cursor:progress}
.nt-close{display:grid;place-items:center;flex:none;box-sizing:border-box;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:var(--radius-sm,8px);background:transparent;color:var(--color-text-secondary,#3c4048);cursor:pointer;transition:background-color var(--motion-duration-hover,150ms)}
.nt-close svg{width:16px;height:16px}
.nt-close,.nt-close-form{order:2}
.nt-btn:focus-visible,.nt-close:focus-visible,.nt-title-link:focus-visible{outline:2px solid transparent;box-shadow:var(--shadow-focus,0 0 0 3px #1f5c3e22)}
.nt-title-link:focus-visible{border-radius:var(--radius-xs,6px)}
@media (hover:hover) and (pointer:fine){
  .nt-btn-pri:hover{background:var(--color-accent-hover,#194d34)}
  .nt-btn-link:hover,.nt-close:hover{background:var(--color-bg-subtle,#f8f9fa)}
  .nt-title-link:hover{text-decoration:underline;text-underline-offset:3px}
}

/* ---------- Udvidelse (desktop): tegner, tekst og luk øverst, handlinger under ---------- */
.nt-card[data-notice="extension"]{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;grid-template-areas:"tile text close" ". actions actions";gap:var(--space-3,12px);align-items:start;width:520px;padding:var(--space-3,12px) var(--space-2,8px) var(--space-3,12px) var(--space-3,12px)}
.nt-card[data-notice="extension"] .nt-tile{grid-area:tile}
.nt-card[data-notice="extension"] .nt-text{grid-area:text}
.nt-card[data-notice="extension"] .nt-close{grid-area:close}
.nt-card[data-notice="extension"] .nt-actions{grid-area:actions;display:flex;align-items:center;gap:var(--space-2,8px);padding-right:var(--space-1,4px);min-width:0;flex-wrap:wrap}
.nt-card[data-notice="extension"] .nt-count{margin-left:auto}

/* ---------- Opdatering ---------- */
.nt-card[data-notice="update"] .nt-btn-pri{padding-left:var(--space-4,16px);padding-right:var(--space-4,16px)}
.nt-card[data-notice="update"] .nt-text{gap:2px}

/* ---------- Ny besked og ny gruppebesked, mens man bruger appen (message-notice.tsx, group-notice.tsx og gruppekortet i
   simple/base.html): i hjørnet øverst til højre som på en Mac, øverst på telefon som på en iPhone, så kortet aldrig dækker
   Beskeders skrivefelt eller bundmenuen ---------- */
.nt-card.nt-card-corner{position:fixed;top:var(--space-5,20px);right:var(--space-5,20px);left:auto;bottom:auto;transform:translateY(-8px)}
.nt-card.nt-card-corner.is-in{transform:none}
@media (max-width:900px){
  .nt-card.nt-card-corner{top:calc(68px + var(--space-3,12px) + env(safe-area-inset-top,0px));left:var(--space-4,16px);right:var(--space-4,16px);width:auto;max-width:none;min-width:0}
}

/* ---------- mellemstørrelser: feedbackknappen (nederst til højre) må ikke ramme kortet ---------- */
@media (min-width:901px) and (max-width:1199px){
  .nt-slot{bottom:80px}
}

/* ---------- desktop: mens et kort vises nederst, er der plads under footeren, så dens links kan rulles fri af kortet
   (DESIGN.md: indhold må ikke ende under flydende elementer). Kortet i hjørnet (nt-card-corner) dækker ikke footeren. ---------- */
@media (min-width:901px){
  body:has(.nt-slot .nt-card:not([hidden]):not(.nt-card-corner)) .main>.ss-footer{margin-bottom:var(--nt-footer-reserve,calc(var(--space-12,48px)*2))}
}
@media (min-width:901px) and (max-width:1199px){
  body:has(.nt-slot .nt-card:not([hidden]):not(.nt-card-corner)){--nt-footer-reserve:calc(var(--space-10,40px)*4)}
}

/* ---------- telefon (<= 900 px): kortet fylder feltet, 16 px sider, 12 px over bundnavigationen ---------- */
@media (max-width:900px){
  .nt-slot,.v5-authed .nt-slot{--nt-inset-left:0;bottom:12px}
  .v5-authed .nt-slot{bottom:calc(12px + 53px + max(var(--space-5,20px),env(safe-area-inset-bottom,0px)))}
  .nt-card{width:min(100%,396px);max-width:396px;min-width:min(288px,100%);padding:var(--space-2,8px) var(--space-1,4px) var(--space-2,8px) var(--space-3,12px)}
  .nt-card[data-notice="setup"],.nt-card[data-notice="guide"]{display:grid;grid-template-columns:32px minmax(0,1fr) 44px;grid-template-areas:"tile text close" "tile actions close";column-gap:var(--space-3,12px);row-gap:0;align-items:center}
  .nt-card[data-notice="guide"]{row-gap:2px}
  .nt-card[data-notice="setup"] .nt-tile,.nt-card[data-notice="guide"] .nt-tile{grid-area:tile}
  .nt-card[data-notice="setup"] .nt-text,.nt-card[data-notice="guide"] .nt-text{grid-area:text}
  .nt-card[data-notice="setup"] .nt-actions,.nt-card[data-notice="guide"] .nt-actions{grid-area:actions;display:flex;align-items:center;gap:var(--space-2,8px);min-width:0}
  .nt-card[data-notice="guide"] .nt-actions:not(:has(.nt-count:not([hidden]))){display:none}
  .nt-card[data-notice="setup"] .nt-close,.nt-card[data-notice="guide"] .nt-close,.nt-card[data-notice="guide"] .nt-close-form{grid-area:close}
  .nt-card[data-notice="setup"] .nt-count{margin-left:auto}
  /* På telefon er "Start opsætning" et tekstlink (Figma 317:11308), ikke en udfyldt knap */
  .nt-card[data-notice="setup"] .nt-btn-pri{padding:var(--space-3,12px) var(--space-2,8px) var(--space-3,12px) 0;border-radius:var(--radius-xs,6px);background:transparent;color:var(--color-accent-default,#1f5c3e);font-weight:var(--font-weight-medium,500)}
  .nt-card[data-notice="setup"] .nt-btn-pri:hover{background:transparent}
  .nt-card[data-notice="setup"] .nt-close,.nt-card[data-notice="guide"] .nt-close,.nt-card[data-notice="extension"] .nt-close{width:44px;height:44px;border-radius:var(--radius-lg,12px)}
  .nt-card[data-notice="setup"] .nt-close svg,.nt-card[data-notice="guide"] .nt-close svg,.nt-card[data-notice="extension"] .nt-close svg{width:20px;height:20px}
  .nt-title-link{display:flex;width:100%}
  .nt-title-link .nt-arrow{margin-left:auto}
  /* Opdatering: titel, knap og luk (32) i én række, som tegnet */
  .nt-card[data-notice="update"] .nt-text{flex:1 1 auto}
  /* Udvidelse (kun computere med smalt vindue): header, tekst og handlinger i en søjle (Figma 317:11321) */
  .nt-card[data-notice="extension"]{grid-template-columns:32px minmax(0,1fr) 44px;grid-template-areas:"tile . close" "text text text" "actions actions actions";row-gap:var(--space-2,8px);column-gap:var(--space-2,8px);padding:var(--space-2,8px) var(--space-1,4px) var(--space-3,12px) var(--space-3,12px);width:min(100%,396px)}
  .nt-card[data-notice="extension"] .nt-text{padding-right:var(--space-2,8px)}
  .nt-card[data-notice="extension"] .nt-actions{flex-direction:column;align-items:stretch;gap:var(--space-1,4px);padding-right:var(--space-2,8px)}
  .nt-card[data-notice="extension"] .nt-btn-pri{width:100%;padding:var(--space-3,12px) var(--space-4,16px);border-radius:var(--radius-sm,8px);font-size:var(--type-body-size,14px)}
  .nt-card[data-notice="extension"] .nt-form{width:100%}
  .nt-card[data-notice="extension"] .nt-btn-link{width:100%;padding:var(--space-3,12px) var(--space-2,8px)}
  .nt-card[data-notice="extension"] .nt-count{margin:0 auto}
}
/* Opdatering ved 320 px: "StudieSync" må ikke knække midt i ordet, så knappen får sin egen række */
@media (max-width:359px){
  .nt-card[data-notice="update"]{flex-wrap:wrap}
  .nt-card[data-notice="update"] .nt-text{flex:1 1 calc(100% - 32px - 32px - 24px)}
  .nt-card[data-notice="update"] .nt-actions{display:flex;order:3;flex:1 0 100%;padding-left:calc(32px + var(--space-3,12px))}
}

@media (prefers-reduced-motion:reduce){
  .nt-card{transform:none;transition:opacity var(--motion-duration-base,200ms) linear}
  .nt-btn,.nt-close{transition:none}
}