/* Dailyus (02-10-2026). Designguiden: docs/designguide.md. Inter til alt, tal med tabular-nums. Farverne har betydning:
   grøn er råderum (kun når der er luft), rav er stram måned, rød kun ved reelt minus. Ingen skygger i lys tilstand,
   ingen konfetti. Formen (afstande, 16px i siden, ingen vandret rulning) kommer fra skabelonerne (skabelon.css). */
:root {
  --skifer: #1F2A37; --groen: #2E9E6B; --mint: #BFE8D2; --rav: #E0A030; --roed: #C9473F;
  --ink: #1F2A37; --ink-soft: #5B6773; --faint: #5B6773; --line: #E3E8E5; --surface: #FFFFFF; --ground: #F6F8F7;
  --groen-soft: #E6F5EC; --rav-soft: #FBF1DC; --roed-soft: #F8E3E1;
  --p: var(--groen); --a: var(--rav); --bg: var(--ground);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #F6F8F7; --ink-soft: #A6B1BB; --faint: #A6B1BB; --line: #36434F; --surface: #283543; --ground: #1F2A37;
    --groen-soft: #22402F; --rav-soft: #45361A; --roed-soft: #46262A; }
}
:root[data-theme="dark"] { --ink: #F6F8F7; --ink-soft: #A6B1BB; --faint: #A6B1BB; --line: #36434F; --surface: #283543; --ground: #1F2A37;
  --groen-soft: #22402F; --rav-soft: #45361A; --roed-soft: #46262A; }

html, body { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--font) !important; font-weight: 600 !important; letter-spacing: -.01em; }
h1:focus, h1:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
code, .du-tal, .du-num, td.num { font-variant-numeric: tabular-nums; }

/* ── Wordmark ── */
.du-word { font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: -.03em; color: var(--ink); }
.du-word b { font-weight: 700; }
.du-word i { color: var(--groen); font-style: normal; font-weight: 700; }

/* ── Tekst ── */
.du-muted { color: var(--ink-soft); }
.du-faint { color: var(--faint); font-size: 13px; }
.du-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.du-ansvar { color: var(--faint); font-size: 13px; margin-top: 16px; }
a.du-link { color: var(--groen); font-weight: 600; text-decoration: none; }
a.du-link:hover { text-decoration: underline; }

/* ── Layout (designguiden afsnit 8) ── */
.du-page { max-width: 1040px; margin: 0 auto; padding: 16px 16px 96px; }
@media (min-width: 600px) { .du-page { padding: 24px 24px 96px; } }
.du-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.du-card + .du-card { margin-top: 12px; }
.du-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .du-grid { grid-template-columns: 1fr 1fr; } }
.du-grid3 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .du-grid3 { grid-template-columns: 1fr 1fr 1fr; } }
.du-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Knapper: rolige, runde, grøn kun til den primære handling ── */
.du-btn { font-family: var(--font); font-weight: 600; font-size: 15px; border: 1px solid var(--groen); border-radius: 999px; padding: 10px 20px; cursor: pointer; color: #fff;
  background: var(--groen); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 44px; transition: filter .15s; }
.du-btn:hover { filter: brightness(1.06); }
.du-btn:disabled { opacity: .55; cursor: default; }
.du-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.du-btn.full { width: 100%; }
.du-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* ── Chips og lys ── */
.du-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--mint); color: #1F2A37; }
.du-chip.rav { background: var(--rav); }
.du-chip.roed { background: var(--roed); color: #fff; }
.du-chip.line { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }

/* Råderumslyset: ét tal, farve efter trappen (designguiden afsnit 4) */
.du-lys { display: flex; flex-direction: column; gap: 2px; }
.du-lys small { color: var(--ink-soft); font-size: 13px; }
.du-tal { font-weight: 600; font-size: 40px; letter-spacing: -.02em; line-height: 1.1; transition: color .2s; }
@media (min-width: 600px) { .du-tal { font-size: 48px; } }
.du-tal.groen { color: var(--groen); }
.du-tal.rav { color: var(--rav); }
.du-tal.roed { color: var(--roed); }
.du-tal.ingen { color: var(--faint); }

/* Kontoskiftet i toplinjen: "Min konto | Familien" (som koncernskiftet i Company Game) */
.du-skift { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 13px; }
.du-skift a { padding: 5px 12px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.du-skift a.on { background: var(--skifer); color: #fff; }

/* Tabeller: tal højrestillet og lige */
table.du-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.du-table th, .du-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.du-table th { font-weight: 600; }
.du-table td.num, .du-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Søjler i admin (uploads pr. dag) */
.du-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.du-bars div { flex: 1; background: var(--groen); border-radius: 4px 4px 2px 2px; min-height: 3px; position: relative; opacity: .85; }
.du-bars div span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--faint); }

/* Forside (website) */
.du-hero { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 24px 0 8px; }
@media (min-width: 900px) { .du-hero { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } }
.du-hero h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 700; }
.du-hero .lead { font-size: clamp(16px, 2vw, 19px); color: var(--ink-soft); }
.du-hero-art { display: grid; place-items: center; }

/* Mikrofon (fra skabelonmønstret): rolig, ingen puls-farver ud over grøn */
.du-mic { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; font-size: 26px; background: var(--surface); color: var(--ink); }
.du-mic.on { background: var(--groen); color: #fff; border-color: var(--groen); animation: du-ring 1.4s ease-out infinite; }
.du-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--surface); border-radius: 999px; padding: 4px 12px; border: 1px solid var(--line); }

/* Forslag med skærmbillede */
.du-feedback { position: fixed; right: 16px; bottom: 16px; z-index: 50; }
.du-steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.du-steps li { display: flex; gap: 10px; align-items: center; }
.du-steps li b { width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: #1F2A37; display: grid; place-items: center; font-size: 12px; flex: 0 0 auto; }
.du-draw-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-height: 60vh; }
.du-draw-wrap canvas { width: 100%; height: auto; display: block; touch-action: none; }

/* Toplinjen uden login */
.du-ude .mud-toolbar { background: var(--surface); }
.du-adminbar .mud-toolbar { background: var(--skifer); color: #fff; }

/* Bevægelse (afsnit 9): kun det nødvendige */
@keyframes du-ring { 0% { box-shadow: 0 0 0 0 rgba(46,158,107,.5); } 100% { box-shadow: 0 0 0 16px rgba(46,158,107,0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }