/* Martin Hvidberg's page - on top of kolibri.css. Theme "glaede" (happy: sun yellow + coral + mint, same as Kig med) at the bottom. */
.hj-head { margin: 8px 0 16px; }
.hj-head h1 { margin: 0 0 4px; font-size: 1.9rem; }
.hj-intro { margin: 0 0 10px; color: var(--k-muted); }
.hj-links { margin: 0 0 10px; font-size: var(--k-fs-small); }
.hj-bare { padding: 10px; }
.hj-bare .hj-chat { margin: 0; box-shadow: none; border: 0; }
.hj-h2 { font-size: 1.15rem; margin: 24px 0 8px; }

.hj-now { border-left: 4px solid var(--k-accent); }
.hj-now-text { font-size: 1.1rem; margin: 6px 0 4px; }
.hj-now-text p { margin: 0 0 8px; }
.hj-now-img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; margin: 8px 0; display: block; background: var(--k-surface-2, #eef1f0); }
.hj-embed { position: relative; aspect-ratio: 16 / 9; margin: 8px 0; }
.hj-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.hj-now-text ul, .hj-post ul { margin: 0 0 10px; padding-left: 0; list-style: none; display: grid; gap: 6px; }

.hj-chat-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.hj-chat-status .k-dot { background: #b8bec3; }
.hj-chat-status .k-dot.on { background: var(--k-success, #1f9d55); box-shadow: 0 0 0 4px rgba(31,157,85,.18); }
.hj-msgs { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 4px; }
.hj-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.hj-msg.me { align-self: flex-end; background: var(--k-accent-soft); }
.hj-msg.owner { align-self: flex-start; background: var(--k-surface-2, #eef1f0); }
.hj-msg-at { font-size: 12px; color: var(--k-muted); margin-top: 2px; }

.hj-post-meta { font-size: var(--k-fs-small); color: var(--k-muted); display: flex; gap: 8px; align-items: center; }
.hj-post-title { margin: 4px 0 6px; font-size: 1.1rem; }
.hj-post p { margin: 0 0 8px; overflow-wrap: anywhere; }
.hj-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 8px; }
.hj-pics.one { grid-template-columns: 1fr; }
.hj-pics img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; display: block; aspect-ratio: 1; }
.hj-pics.one img { aspect-ratio: auto; object-fit: contain; background: var(--k-surface-2, #eef1f0); }
.hj-video { width: 100%; max-height: 70vh; border-radius: 10px; margin-top: 8px; background: #000; }
.hj-audio { margin-top: 8px; }
.hj-audio audio { width: 100%; }
.hj-doc { display: inline-block; margin-top: 8px; }

.hj-year { margin: 8px 0; }
.hj-year > summary { cursor: pointer; padding: 10px 4px; font-size: 1.05rem; }
.hj-lock { text-align: center; }

.hj-switch { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.hj-switch input { width: 28px; height: 28px; flex: none; accent-color: var(--k-accent); }
.hj-unread { margin: 10px 0 0; font-weight: 700; color: var(--k-accent-dark); }
.hj-threads { display: flex; flex-direction: column; gap: 4px; }
.hj-thread { text-align: left; border: 1px solid var(--k-border); background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; color: inherit; font: inherit; }
.hj-thread.sel { border-color: var(--k-accent); background: var(--k-accent-soft); }
.hj-thread.new b::after { content: " ●"; color: var(--k-accent); }
.hj-edit-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hj-chip { border: 1px solid var(--k-border); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 14px; }
.hj-chip button { border: 0; cursor: pointer; background: none; }
.hj-admin-post { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--k-border); }

/* Blazor reconnect banner: hidden until the connection really drops (copied from Forløbet). */
#components-reconnect-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); color: #fff; align-items: center; justify-content: center; z-index: 1000; }
#components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed { display: flex; }
.reconnect-failed-msg { display: none; }
.components-reconnect-failed .reconnect-msg { display: none; }
.components-reconnect-failed .reconnect-failed-msg { display: inline; }

/* Site menu + pages (Om mig, Ydelser …) */
.hj-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; padding: 10px 16px; border-bottom: 1px solid var(--k-border); background: var(--k-surface, #fff); }
.hj-nav a { color: inherit; text-decoration: none; font-weight: 600; padding: 4px 0; }
.hj-nav a:hover { color: var(--k-accent); }
.hj-page h1 { margin: 0 0 12px; font-size: 1.7rem; }
.hj-page h2 { font-size: 1.2rem; margin: 18px 0 8px; }
.hj-page p { margin: 0 0 10px; }
.hj-page ul { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 4px; }
.tm-img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; margin: 8px 0; display: block; }
.hj-subpages { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.hj-subpage { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; margin: 0; }
.hj-subpage:hover { border-color: var(--k-accent); }
.hj-subpage span { color: var(--k-muted); font-size: var(--k-fs-small); }
.hj-page-edit { border-top: 1px solid var(--k-border); padding-top: 8px; }
.hj-nav a.hj-nav-pilot { color: var(--k-accent); }

/* Mine apps */
.hj-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.hj-app { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; margin: 0; }
a.hj-app:hover { border-color: var(--k-accent); }
.hj-app.off { opacity: .65; }
.hj-app-icon { font-size: 2rem; line-height: 1; }
.hj-dot { display: inline-block; vertical-align: middle; background: #b8bec3; }
.hj-dot.on { background: var(--k-success, #1f9d55); }
.hj-admin-app { display: grid; grid-template-columns: auto 56px 1fr 72px; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--k-border); }
.hj-admin-app .hj-in-wide { grid-column: 1 / -1; }
.hj-in-icon { text-align: center; }
.tm-fig { margin: 8px 0; }
.tm-fig figcaption { font-size: var(--k-fs-small); color: var(--k-muted); margin-top: 4px; }
.tm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 10px 0; }
.tm-gallery .tm-fig { margin: 0; }
.tm-gallery .tm-img { aspect-ratio: 1; object-fit: cover; margin: 0; max-height: none; }
.tm-gallery video.tm-img { background: #000; object-fit: contain; }
.hj-app-body { flex: 1; min-width: 0; }
.hj-app-tier { font-size: var(--k-fs-small); margin-top: 6px; }
.hj-tag-plus { background: var(--k-accent); color: #fff; }
.hj-hero h2 { margin-top: 8px; }
.hj-app-body { flex: 1; min-width: 0; }
.hj-app-tier { font-size: var(--k-fs-small); margin-top: 6px; }
.hj-tag-plus { background: var(--k-accent); color: #fff; }
.hj-hero h2 { margin-top: 8px; }

/* Bogshoppen news box at the very top of the front page */
.hj-news { border: 3px solid var(--k-accent); margin: 12px 0 20px; }
.hj-news h2:first-child { margin-top: 0; }

/* "Martin er her nu" at the top of the front page - big and impossible to miss */
.hj-chat-top { text-align: center; border: 2px solid var(--k-border); }
.hj-chat-top.is-on { border-color: var(--k-success, #1f9d55); background: #eefaf2; }
.hj-chat-top .hj-chat-status { justify-content: center; font-size: 1.15rem; }
.hj-chat-top .k-dot { width: 16px; height: 16px; }
.hj-chat-top.is-on .k-dot { animation: hj-pulse 1.6s ease-in-out infinite; }
@keyframes hj-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(31,157,85,.25); } 50% { box-shadow: 0 0 0 9px rgba(31,157,85,.08); } }
@media (prefers-reduced-motion: reduce) { .hj-chat-top.is-on .k-dot { animation: none; } }
/* Square gallery crops keep the top of the picture - heads, not tables (user: "cannot see the top of my head"). */
.tm-gallery img.tm-img { object-position: 50% 12%; }
.hj-page .hj-now { margin: 4px 0 16px; box-shadow: none; }

/* "Min dag" on the Lige nu tab: a day heading, then entries (time, line, picture) newest first */
.hj-day { margin: 6px 0 14px; }
.hj-day-head { font-weight: 700; font-size: 1.05rem; margin: 4px 0 8px; }
.hj-day-head::first-letter { text-transform: uppercase; }
.hj-day-entry { border-left: 3px solid var(--k-accent); padding: 2px 0 10px 12px; margin-left: 4px; }
.hj-day-time { font-size: .85rem; color: var(--k-muted, #667); font-weight: 600; }
.hj-day-text { font-size: 1.05rem; margin: 2px 0 6px; }
.hj-day-img { width: 100%; max-width: 520px; max-height: 60vh; object-fit: cover; border-radius: 10px; display: block; }
.hj-day-earlier summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.hj-day-plan, .hj-day-done { background: var(--k-surface-2, #eef1f0); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.hj-day-tasks { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 2px; }
/* Svar: the AI proofreading panel, fixed at the bottom so it is seen wherever the save was pressed */
.hj-review { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50; max-width: 640px; margin: 0 auto; max-height: 70vh; overflow: auto;
  background: var(--k-surface, #fff); border: 2px solid var(--k-accent); border-radius: 14px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.hj-review-text { white-space: pre-line; margin: 8px 0; padding: 10px; border-radius: 10px; background: var(--k-surface-2, #eef1f0); }
.hj-review-notes { margin: 8px 0 0; padding-left: 4px; list-style: none; display: grid; gap: 4px; }
/* Svar: today's entries, small, removable */
.hj-day-admin { display: grid; gap: 6px; }
.hj-day-row { display: flex; align-items: center; gap: 8px; }
.hj-day-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.hj-day-row span { flex: 1; }

/* ── Birthday front (Components/Fest.razor, temporary) ── Vibeke 2026-10-03: rose + gold, heart balloons, photo slideshow */
.fest{position:relative;overflow:hidden;margin:0 0 16px;padding:64px 18px 26px;border-radius:22px;text-align:center;color:#fff5f7;
  background:radial-gradient(circle at 20% 10%,rgba(255,215,120,.25),transparent 40%),linear-gradient(160deg,#7a1037,#c2185b 45%,#e8648f 75%,#d4a017),#7a1037;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
.fest ~ .hj-head h1{display:none}
.fest-garland{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;gap:3px;flex-wrap:nowrap}
.fest-garland span{width:clamp(18px,5vw,32px);height:clamp(22px,6vw,38px);clip-path:polygon(0 0,100% 0,50% 100%);display:grid;justify-items:center;
  padding-top:3px;font:900 clamp(.6rem,2.4vw,.95rem) system-ui,sans-serif;color:#4a0a22;transform-origin:top;animation:fest-wave 2.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .12s);background:#ffd76e}
.fest-garland span:nth-child(3n+2){background:#fff5f7}.fest-garland span:nth-child(3n){background:#ff9dbb}
.fest-title{margin:.2em 0 .1em;font:900 clamp(1.9rem,7.5vw,3.4rem)/1.05 Georgia,"Times New Roman",serif;font-style:italic;
  background:linear-gradient(100deg,#fff5f7,#ffd76e 35%,#fff 55%,#ffd76e 75%,#fff5f7);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fest-shine 5s linear infinite;filter:drop-shadow(2px 2px 0 #4a0a22)}
.fest-sub{margin:0;font-weight:800;font-size:1.15rem;color:#ffd76e}
.fest-show{position:relative;z-index:1;width:min(340px,82%);aspect-ratio:4/5;margin:18px auto 4px;border-radius:18px;overflow:hidden;
  border:5px solid #fff5f7;box-shadow:0 8px 26px rgba(74,10,34,.45);transform:rotate(-2deg);background:#4a0a22}
.fest-show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0;transition:opacity 1.2s}
.fest-show img.on{opacity:1}
.fest-msg{position:relative;z-index:1;min-height:3em;margin:14px auto 6px;max-width:34em;font-size:1.1rem;font-weight:700;transition:opacity .35s}
.fest-msg.out{opacity:0}
.fest-btns{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0 14px}
.fest-btn{border:0;border-radius:999px;padding:12px 18px;font:800 1rem system-ui,sans-serif;cursor:pointer;color:#4a0a22;
  background:linear-gradient(135deg,#ffe49a,#d4a017);box-shadow:0 4px 0 #6b4f06}
.fest-btn.alt{background:linear-gradient(135deg,#fff5f7,#ff9dbb);box-shadow:0 4px 0 #7a1037}
.fest-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4a0a22}
.fest-how{position:relative;z-index:1;max-width:36em;margin:0 auto;text-align:left;background:rgba(74,10,34,.72);border:1px solid #a33a63;border-radius:14px;padding:10px 16px}
.fest-how p{margin:.5em 0}.fest-how a{color:#ffd76e;font-weight:800}
.fest-when{font-size:.9rem;color:#f7c6d6}
.fest-balloons{position:absolute;inset:0;pointer-events:none}
.fest-balloons i{position:absolute;bottom:-90px;left:calc(4% + var(--i) * 11%);width:46px;height:46px;opacity:.8;background:#ff9dbb;
  clip-path:path('M23 44 C10 34 0 26 0 14 C0 6 6 0 13 0 C18 0 21 3 23 6 C25 3 28 0 33 0 C40 0 46 6 46 14 C46 26 36 34 23 44Z');
  animation:fest-rise 11s linear infinite;animation-delay:calc(var(--i) * -1.3s)}
.fest-balloons i:nth-child(3n+1){background:#ffd76e}.fest-balloons i:nth-child(3n+2){background:#fff5f7}
@keyframes fest-wave{50%{transform:rotate(6deg)}}
@keyframes fest-shine{to{background-position:-250% 0}}
@keyframes fest-rise{to{transform:translateY(-860px) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.fest *{animation:none!important}}

/* ── Birthday day on every page (MainLayout .fest-site, temporary) ── rose/gold over the Kolibri tokens */
.fest-site{--k-accent:#c2185b;--k-accent-dark:#7a1037;--k-accent-soft:#fde4ec;--k-accent-text:#fff;--k-bg:#fff5f7;--k-bg-deep:#fde4ec;--k-border:#f4c6d4}
html[data-theme="dark"] .fest-site{--k-accent:#ff7aa8;--k-accent-dark:#ffd76e;--k-accent-soft:#3d1426;--k-accent-text:#1d0b12;--k-bg:#1d0b12;--k-bg-deep:#14070c;--k-card:#2c111c;--k-border:#5a2438}
body:has(.fest-site){background:var(--fest-bg,#fff5f7)}
html[data-theme="dark"] body:has(.fest-site){--fest-bg:#1d0b12}
.fest-site .k-main{background:transparent}
.fest-site .hj-nav{border-bottom:4px solid transparent;border-image:linear-gradient(90deg,#ffd76e,#ff9dbb,#c2185b,#ff9dbb,#ffd76e) 1}
.fest-site h1,.fest-site h2{color:var(--k-accent)}
.fest-strip{position:relative;display:block;overflow:hidden;padding:26px 16px 10px;text-align:center;text-decoration:none;color:#fff5f7;
  background:linear-gradient(90deg,#7a1037,#c2185b,#d4a017,#c2185b,#7a1037);background-size:200% 100%;animation:fest-slide 8s linear infinite;font-size:1rem}
.fest-strip span:not(.fest-strip-flags){display:inline-block;margin-left:6px;text-decoration:underline}
.fest-strip-flags{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-around}
.fest-strip-flags i{width:18px;height:20px;clip-path:polygon(0 0,100% 0,50% 100%);background:#ffd76e;animation:fest-wave 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .15s);transform-origin:top}
.fest-strip-flags i:nth-child(3n+2){background:#fff5f7}.fest-strip-flags i:nth-child(3n){background:#ff9dbb}
.fest-site:has(.fest) .fest-strip{display:none}
@keyframes fest-slide{to{background-position:-200% 0}}

/* ── Fold-out cards in page texts (TinyMarkdown "### Title | short text") ── */
.tm-card{margin:10px 0;border:1px solid var(--k-border);border-left:5px solid var(--k-accent);border-radius:var(--k-radius);background:var(--k-card)}
.tm-card>summary{list-style:none;cursor:pointer;padding:12px 16px;display:grid;gap:2px}
.tm-card>summary::-webkit-details-marker{display:none}
.tm-card-title{font-weight:800;color:var(--k-accent)}
.tm-card-sub{font-weight:700;font-size:1.05rem}
.tm-card-more{justify-self:start;margin-top:6px;font-size:.9rem;font-weight:700;color:var(--k-accent);border:1px solid var(--k-accent);border-radius:999px;padding:2px 12px}
.tm-card[open] .tm-card-more{background:var(--k-accent);color:var(--k-accent-text)}
.tm-card[open] .tm-card-more::after{content:" – luk"}
.tm-card-body{padding:0 16px 12px}
.tm-card-body a[href*="#pilot"]{display:inline-block;margin-top:4px;padding:10px 16px;border-radius:999px;background:var(--k-accent);color:var(--k-accent-text);font-weight:800;text-decoration:none}

/* ── Kig med on the front page (Components/LiveCard) ── */
.hj-live.on{display:flex;gap:14px;align-items:center;flex-wrap:wrap;text-decoration:none;color:var(--k-text);border:2px solid #d62828;background:linear-gradient(90deg,rgba(214,40,40,.10),transparent)}
.hj-live.on:hover{box-shadow:0 0 0 3px rgba(214,40,40,.25)}
.hj-live-dot{width:14px;height:14px;border-radius:50%;background:#d62828;flex:none;animation:hj-live-pulse 1.4s ease-in-out infinite}
.hj-live-text{display:grid;gap:2px;flex:1 1 240px}
.hj-live-text b{font-size:1.2rem;color:#d62828}
.hj-live.off{text-align:center;margin:6px 0 12px}
@keyframes hj-live-pulse{50%{box-shadow:0 0 0 8px rgba(214,40,40,.0),0 0 0 0 rgba(214,40,40,.5);transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.hj-live-dot{animation:none}}

/* ── Theme "glaede": working with happiness (same palette as Kig med) ── */
html[data-family="glaede"]{--k-accent:#d9432a;--k-accent-dark:#b8321c;--k-accent-soft:#ffe7d6;--k-accent-text:#fff;
  --k-bg:#fff8ec;--k-bg-deep:#ffefd2;--k-card:#ffffff;--k-border:#f6dcb8;--k-text:#2b1d12;--k-muted:#6e5a48;
  --k-sun:#ffc531;--k-mint:#2bb39a;--k-radius-lg:22px;--k-shadow:0 2px 4px rgba(217,67,42,.06),0 8px 24px rgba(255,170,60,.16)}
html[data-family="glaede"] body{background:
  radial-gradient(900px 500px at 100% -10%,rgba(255,197,49,.35),transparent 60%),
  radial-gradient(700px 420px at -10% 110%,rgba(43,179,154,.18),transparent 60%),var(--k-bg);background-attachment:fixed}
html[data-family="glaede"][data-theme="dark"]{--k-bg:#1e1712;--k-bg-deep:#17110d;--k-card:#2a201a;--k-border:#4a3627;--k-text:#fbefe3;--k-muted:#cdb7a2;--k-accent:#ff7a5c;--k-accent-dark:#ff9a80;--k-accent-soft:#4a2a20;--k-accent-text:#1e1712}
html[data-family="glaede"][data-theme="dark"] body{background:radial-gradient(900px 500px at 100% -10%,rgba(255,197,49,.14),transparent 60%),var(--k-bg)}
html[data-family="glaede"] .hj-nav{background:linear-gradient(90deg,#ffd75e,#ffb56b 55%,#ff8f73);border-bottom:0;box-shadow:var(--k-shadow)}
html[data-family="glaede"] .hj-nav a{color:#2b1d12}
html[data-family="glaede"] .hj-nav a:hover,html[data-family="glaede"] .hj-nav a.hj-nav-pilot{color:#fff;text-shadow:0 1px 2px rgba(150,50,20,.45)}
.hj-head{position:relative;padding:18px 20px 16px 84px;border-radius:var(--k-radius-lg);
  background:linear-gradient(120deg,#ffe58a 0%,#ffc98f 55%,#ffad97 100%);color:#2b1d12;box-shadow:var(--k-shadow);overflow:hidden}
.hj-head::before{content:"☀️";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:3.2rem;animation:hj-sun 14s linear infinite}
.hj-head::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.22);pointer-events:none}
.hj-head h1{color:#2b1d12}
.hj-head .hj-intro{color:#4a3222}
.hj-tagline{display:inline-block;margin:0 0 4px;padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.6);font-weight:800;font-size:.85rem;letter-spacing:.02em}
@keyframes hj-sun{to{transform:translateY(-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hj-head::before{animation:none}}
@media (max-width:520px){.hj-head{padding-left:20px;padding-top:58px}.hj-head::before{top:30px;font-size:2.4rem}}
html[data-family="glaede"] .hj-now{border-left-color:var(--k-sun)}

/* /admin/tal - visit numbers */
.hj-tal-big { font-size: 1.25rem; margin: 0; }
.hj-tal-big b { font-size: 1.8rem; }
.hj-tal { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.hj-tal th, .hj-tal td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--k-line, rgba(0,0,0,.1)); white-space: nowrap; }
.hj-tal td:first-child { white-space: normal; min-width: 10em; }
.hj-tal th { font-weight: 600; opacity: .75; }
.hj-tal-bar { width: 40%; }
.hj-tal-bar span { display: block; height: .7em; border-radius: 4px; background: var(--k-brand, #1f7a5c); }
.hj-tal-off { opacity: .55; }

/* App cards: equal height, buttons on one line at the bottom (user 2026-10-01). */
.hj-app { align-self: stretch; }
.hj-app-body { display: flex; flex-direction: column; align-self: stretch; }
.hj-app-body > .k-row:last-child { margin-top: auto; padding-top: 12px; }

/* ── Theme "nyhed" (user 2026-10-04: "exciting news" - ITMartin og Bogshoppen). Switch back = App.razor data-family="glaede". ── */
html[data-family="nyhed"]{--k-accent:#7c3aed;--k-accent-dark:#5b21b6;--k-accent-soft:#efe7ff;--k-accent-text:#fff;
  --k-bg:#faf7ff;--k-bg-deep:#f1eaff;--k-card:#ffffff;--k-border:#e2d6fb;--k-text:#1e1533;--k-muted:#5f5577;
  --k-sun:#ff7a2f;--k-hot:#ff2d87;--k-radius-lg:22px;--k-shadow:0 2px 4px rgba(124,58,237,.08),0 8px 24px rgba(255,45,135,.14)}
html[data-family="nyhed"] body{background:
  radial-gradient(900px 500px at 100% -10%,rgba(255,45,135,.20),transparent 60%),
  radial-gradient(700px 420px at -10% 110%,rgba(255,122,47,.18),transparent 60%),var(--k-bg);background-attachment:fixed}
html[data-family="nyhed"][data-theme="dark"]{--k-bg:#140f22;--k-bg-deep:#0e0a19;--k-card:#1f1833;--k-border:#3b2d5c;--k-text:#f3eeff;--k-muted:#b9acd6;--k-accent:#b48cff;--k-accent-dark:#d2b8ff;--k-accent-soft:#2e2150;--k-accent-text:#140f22}
html[data-family="nyhed"][data-theme="dark"] body{background:radial-gradient(900px 500px at 100% -10%,rgba(255,45,135,.16),transparent 60%),var(--k-bg)}
html[data-family="nyhed"] .hj-nav{background:linear-gradient(90deg,#5b21b6,#7c3aed 45%,#db2777);border-bottom:0;box-shadow:var(--k-shadow)}
html[data-family="nyhed"] .hj-nav a{color:#fff}
html[data-family="nyhed"] .hj-nav a:hover,html[data-family="nyhed"] .hj-nav a.hj-nav-pilot{color:#ffd23f}
html[data-family="nyhed"] .hj-head{background:linear-gradient(120deg,#5b21b6 0%,#7c3aed 40%,#ff2d87 75%,#ff7a2f 100%);color:#fff}
html[data-family="nyhed"] .hj-head h1,html[data-family="nyhed"] .hj-head .hj-intro{color:#fff}
html[data-family="nyhed"] .hj-head::before{content:"📣";animation:hj-shout 2.4s ease-in-out infinite}
html[data-family="nyhed"] .hj-tagline{background:#ffd23f;color:#1e1533}
@keyframes hj-shout{0%,70%,100%{transform:translateY(-50%) rotate(0)}80%{transform:translateY(-50%) rotate(-12deg) scale(1.1)}90%{transform:translateY(-50%) rotate(8deg) scale(1.1)}}
html[data-family="nyhed"] .hj-now{border-left-color:var(--k-hot)}
/* The Bogshoppen box: gradient frame + "NYHED" ribbon */
html[data-family="nyhed"] .hj-news{position:relative;border:3px solid transparent;
  background:linear-gradient(var(--k-card),var(--k-card)) padding-box,linear-gradient(120deg,#7c3aed,#ff2d87,#ff7a2f) border-box}
html[data-family="nyhed"] .hj-news::before{content:"✨ NYHED";position:absolute;top:-12px;right:16px;padding:2px 12px;border-radius:999px;
  background:linear-gradient(90deg,#ff2d87,#ff7a2f);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.06em;box-shadow:var(--k-shadow)}
html[data-family="nyhed"] .hj-news h2,html[data-family="nyhed"] .hj-news h3{color:var(--k-accent)}

/* "Følg samarbejdet" tab: the Bogshoppen story above the page's own news */
.hj-news-inline { border-left: 4px solid var(--k-accent); padding-left: 14px; margin: 8px 0 20px; }
.hj-week h2:first-child { margin-top: 0; }

/* ── Theme "idag" (user 2026-10-05: "Det er mandag, hvad skal jeg mon lave i dag og i denne uge? Spændende").
      Morning sky -> sunrise. Switch back = App.razor data-family="nyhed" or "glaede". ── */
html[data-family="idag"]{--k-accent:#0b6fb8;--k-accent-dark:#0a5590;--k-accent-soft:#e3f1fc;--k-accent-text:#fff;
  --k-bg:#f5faff;--k-bg-deep:#e8f3fd;--k-card:#ffffff;--k-border:#cfe3f5;--k-text:#13263a;--k-muted:#4d6378;
  --k-sun:#ff9f43;--k-hot:#ff6b6b;--k-radius-lg:22px;--k-shadow:0 2px 4px rgba(11,111,184,.08),0 8px 24px rgba(255,159,67,.16)}
html[data-family="idag"] body{background:
  radial-gradient(900px 500px at 100% -10%,rgba(255,159,67,.22),transparent 60%),
  radial-gradient(700px 420px at -10% 110%,rgba(110,190,255,.20),transparent 60%),var(--k-bg);background-attachment:fixed}
html[data-family="idag"][data-theme="dark"]{--k-bg:#0d1824;--k-bg-deep:#09121b;--k-card:#152536;--k-border:#28425c;--k-text:#eaf4ff;--k-muted:#a6bcd2;--k-accent:#6cb8ff;--k-accent-dark:#a3d2ff;--k-accent-soft:#1d3a57;--k-accent-text:#0d1824}
html[data-family="idag"][data-theme="dark"] body{background:radial-gradient(900px 500px at 100% -10%,rgba(255,159,67,.14),transparent 60%),var(--k-bg)}
/* Colour-blind safe (user 2026-10-05: could not read text on the blue box): text never on a mid-tone colour -
   dark text on pale backgrounds, white only on the solid dark blue, links underlined. */
html[data-family="idag"] .hj-nav{background:#0a3f6b;border-bottom:4px solid #ff9f43;box-shadow:var(--k-shadow)}
html[data-family="idag"] .hj-nav a{color:#fff}
html[data-family="idag"] .hj-nav a:hover,html[data-family="idag"] .hj-nav a.hj-nav-pilot{color:#ffe08a}
html[data-family="idag"] .hj-head{background:linear-gradient(160deg,#e4f2ff 0%,#f3f9ff 45%,#fff4e6 100%);color:#13263a;border:2px solid #cfe3f5}
html[data-family="idag"] .hj-head .k-help,html[data-family="idag"] .hj-head p{color:#13263a}
html[data-family="idag"] .hj-head a:not(.k-btn){color:#0a3f6b;text-decoration:underline;font-weight:700}
html[data-family="idag"][data-theme="dark"] .hj-head{background:#152536;border-color:#28425c;color:#eaf4ff}
html[data-family="idag"][data-theme="dark"] .hj-head h1,html[data-family="idag"][data-theme="dark"] .hj-head p,html[data-family="idag"][data-theme="dark"] .hj-head .k-help,html[data-family="idag"][data-theme="dark"] .hj-head .hj-intro{color:#eaf4ff}
html[data-family="idag"][data-theme="dark"] .hj-head a:not(.k-btn){color:#a3d2ff}
html[data-family="idag"] .hj-head h1{color:#0d2a44}
html[data-family="idag"] .hj-head .hj-intro{color:#21405c;font-weight:600}
html[data-family="idag"] .hj-head::before{content:"🤔";animation:hj-think 3.2s ease-in-out infinite}
html[data-family="idag"] .hj-tagline{background:#0a3f6b;color:#fff}
@keyframes hj-think{0%,60%,100%{transform:translateY(-50%) rotate(0)}75%{transform:translateY(-58%) rotate(-10deg)}90%{transform:translateY(-50%) rotate(6deg)}}
html[data-family="idag"] .hj-now{border-left-color:var(--k-sun)}
html[data-family="idag"] .hj-week{border-left:5px solid var(--k-accent)}
html[data-family="idag"] .hj-week h2,html[data-family="idag"] .hj-news h2,html[data-family="idag"] .hj-news h3{color:var(--k-accent)}
/* Bogshoppen box: stays until the collaboration is done - gradient frame + "SAMARBEJDET" ribbon */
html[data-family="idag"] .hj-news{position:relative;border:3px solid transparent;
  background:linear-gradient(var(--k-card),var(--k-card)) padding-box,linear-gradient(120deg,#0b6fb8,#ff9f43,#ff6b6b) border-box}
html[data-family="idag"] .hj-news::before{content:"🤝 ITMARTIN + BOGSHOPPEN";position:absolute;top:-12px;right:16px;padding:2px 12px;border-radius:999px;
  background:#0a3f6b;color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.06em;box-shadow:var(--k-shadow)}

/* bogshoppen.dk (Components/BogshoppenHome): cream paper + dark ink - colour-blind safe, dark text on pale only */
.bs-site{--k-accent:#7a2e12;--k-accent-dark:#5c210c;--k-accent-soft:#f6e9dc;--k-accent-text:#fff;--k-bg:#fbf6ee;--k-card:#fffdf9;--k-border:#e6d6c2;--k-text:#2a1d12;--k-muted:#5e4a38;
  background:#fbf6ee;color:#2a1d12;min-height:100vh}
.bs-head{text-align:center;padding:28px 16px 18px;margin:8px 0 16px;border-radius:var(--k-radius-lg,18px);background:#f3e6d4;border:2px solid #e6d6c2}
.bs-head h1{margin:6px 0 4px;font-size:2.2rem;color:#2a1d12}
.bs-head p{margin:0;color:#5e4a38;font-weight:600}
.bs-tag{display:inline-block;padding:2px 12px;border-radius:999px;background:#5c210c;color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.04em}
.bs-card h2{color:#7a2e12}
.bs-card a{color:#5c210c;text-decoration:underline}
.bs-btn{display:block;text-align:center;margin:16px 0;font-size:1.1rem}
.hj-page .hj-week{margin:16px 0;padding:12px 16px;border-radius:12px;background:var(--k-accent-soft);border-left:5px solid var(--k-accent)}

/* Show/hide everywhere (user 2026-10-05): app cards = heading row (icon + name) + body; page parts = own boxes */
.hj-app { flex-direction: column; gap: 6px; align-items: stretch; }
.hj-app-head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem; }
.hj-app-head .hj-app-icon { font-size: 1.6rem; }
.hj-sec h2 { margin: 0; font-size: 1.2rem; }
.hj-sec > div { margin-top: 8px; }
.hj-chat > .k-card-title, .hj-now > .k-card-title { margin: 0 0 8px; font-size: 1.15rem; }

/* "Vidste du …" ElPriser tip on the front page - pale yellow, dark text (colour-blind safe), saving in bold dark green + underline */
.hj-eltip{background:#fff8dc;border:2px solid #e9c44a}
.hj-eltip .k-card-title{color:#3d2c00}
.hj-eltip-text{font-size:1.1rem;color:#2a2000;margin:6px 0}
.hj-eltip-cheap{color:#0b5d1e;text-decoration:underline}
html[data-theme="dark"] .hj-eltip{background:#2c2614;border-color:#7a6420}
html[data-theme="dark"] .hj-eltip .k-card-title,html[data-theme="dark"] .hj-eltip-text{color:#fff3c4}
html[data-theme="dark"] .hj-eltip-cheap{color:#9ff0b0}