/* 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 = a normal big box (2026-10-14, shared css). */
.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; }

/* Headline box on the front page: white on dark ink (user is colour-blind - never colour on colour) */
.hj-headline { background: #1d1d1f; color: #fff; border: 0; margin: 12px 0 20px; }
.hj-headline h2 { color: #fff; margin-top: 0; font-size: 1.5rem; line-height: 1.25; }
.hj-headline p { color: #fff; font-size: 1.1rem; }
.hj-headline .k-btn { background: #fff; color: #1d1d1f; border-color: #fff; font-weight: 700; }

/* "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; }

/* "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}}

/* /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)}}
/* 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-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}
/* "Snart" teaser: ways to buy. State is text + icon, never colour alone (colour-blind user). */
.bs-ways{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.bs-way{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid #e6d6c2;border-radius:12px;background:#fbf6ee;color:#2a1d12}
.bs-way-icon{font-size:1.6em;line-height:1}
.bs-way-line{color:#5e4a38;font-size:.92em}
.bs-way-state{margin-top:auto;padding-top:6px;font-size:.85em;font-weight:700;color:#5e4a38}
.bs-way-state.bs-now{color:#1d4d1d}
.bs-soon-how{font-weight:600}
.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, .hj-stream > .k-card-title, .hj-semed > .k-card-title { margin: 0 0 8px; font-size: 1.2rem; }

/* "Vidste du …" ElPriser tip on the front page - pale yellow, dark text (colour-blind safe), saving in bold dark green + underline */
/* "Vidste du" boxes: see the token block for Budget/Billeder below. */
/* Small boxes on the front page instead of menu tabs (user 2026-10-07). High contrast: text colour, no meaning in colour alone. */
.hj-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.hj-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: var(--k-card); color: var(--k-text); text-decoration: none; box-shadow: var(--k-shadow); min-height: var(--k-tap, 44px); }
.hj-tile:hover, .hj-tile:focus-visible { border-color: var(--k-text); }
.hj-tile-icon { font-size: 1.5em; line-height: 1; }
.hj-tile b { font-size: 1em; }
.hj-tile-line { color: var(--k-muted); font-size: var(--k-fs-small, .9em); }
.hj-tile-fact { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--k-border); font-size: var(--k-fs-small, .9em); color: var(--k-text); }
/* Mine apps: opening one box must not stretch its neighbour in the same row (user 2026-10-07: "opens both on parallel"). */
.hj-apps { align-items: start; }
.hj-app { align-self: start; }
/* Kig med inside the chat box (user 2026-10-07). */
.hj-chat .hj-live.off, .hj-stream .hj-live.off { text-align: left; margin: 10px 0 0; }
.hj-chat .hj-live.on, .hj-stream .hj-live.on { margin: 12px 0 0; }

/* "Vidste du" boxes, Gratis Budget (/budget) and Tjek dine billeder (/billeder) - 2026-10-08.
   Colours ONLY from Kolibri tokens: tints are mixed from --k-warning/--k-success, text is always --k-text (dark on pale in
   light mode, light on dark in dark mode - the user is a bit colour-blind), so no separate dark rules are needed. */
:root {
    --hj-yellow-bg: color-mix(in srgb, var(--k-warning) 12%, var(--k-card));
    --hj-yellow-line: color-mix(in srgb, var(--k-warning) 55%, var(--k-card));
    --hj-green-bg: color-mix(in srgb, var(--k-success) 12%, var(--k-card));
    --hj-green-line: color-mix(in srgb, var(--k-success) 55%, var(--k-card));
}
.hj-eltip { background: var(--hj-yellow-bg); border: 2px solid var(--hj-yellow-line); }
.hj-eltip .k-card-title, .hj-eltip-text { color: var(--k-text); }
.hj-eltip-text { font-size: 1.1rem; margin: 6px 0; }
.hj-eltip-cheap { color: var(--k-text); text-decoration: underline; font-weight: 700; }
.hj-starttip { background: var(--hj-green-bg); border: 2px solid var(--hj-green-line); }
.hj-starttip .k-card-title, .hj-starttip .hj-eltip-text { color: var(--k-text); }

.bu-safe { background: var(--hj-green-bg); border: 2px solid var(--hj-green-line); border-radius: 10px; padding: 10px 12px; color: var(--k-text); }
.bu-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; margin-top: 12px; border: 3px dashed var(--k-muted-2); border-radius: 14px; cursor: pointer; text-align: center; font-size: 1.15rem; }
.bu-drop:hover { border-color: var(--k-text); background: var(--k-bg-deep); }
.bu-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bu-drop-icon { font-size: 2.2rem; }
.bu-big { background: var(--hj-yellow-bg); border: 2px solid var(--hj-yellow-line); border-radius: 12px; padding: 14px; text-align: center; margin: 10px 0; color: var(--k-text); }
.bu-big-label { font-weight: 700; }
.bu-big-num { font-size: 2.4rem; font-weight: 800; line-height: 1.2; }
.bu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bu-tile { border: 1px solid var(--k-border-3); border-radius: 10px; padding: 10px; }
.bu-tile-label { font-size: .9rem; font-weight: 600; }
.bu-tile-num { font-size: 1.4rem; font-weight: 800; }
.bu-tile-sub, .bu-big-sub { font-size: .9rem; }
.bu-sum { margin-top: 12px; font-size: 1.05rem; }
.bu-list { list-style: none; padding: 0; margin: 8px 0; }
.bu-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--k-border); }
.bu-list li span { overflow-wrap: anywhere; }
.bu-list li b { white-space: nowrap; }
.bu-steps li, .bu-banks li { margin: 6px 0; }
.bu-paid { border: 2px solid var(--k-text); }
.bu-blind { background: var(--k-bg-deep); border: 2px dashed var(--k-muted); border-radius: 10px; padding: 10px 12px; color: var(--k-text); margin: 4px 0 10px; }

.bi-years { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.bi-year { display: grid; grid-template-columns: 3.2rem 1fr 4.5rem; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.bi-bar { height: 14px; width: var(--w, 0%); background: var(--k-muted); border-radius: 3px; min-width: 0; }
.bi-bar.none { background: transparent; }
.bi-c { font-size: .9rem; text-align: right; }

/* Budget: the difficult payments first (2026-10-08) */
.bu-h3 { font-size: 1.05rem; margin: 16px 0 6px; }
.bu-bankvague { background: var(--hj-yellow-bg); border: 1px solid var(--hj-yellow-line); border-radius: 10px; padding: 8px 12px; color: var(--k-text); margin: 6px 0 10px; }
.bu-own { border-top: 1px dashed var(--k-border-3); margin-top: 14px; padding-top: 4px; }

/* Mine apps: a picture of the app in use (2026-10-08) */
.hj-app-pic { display: block; max-width: 100%; max-height: 420px; margin: 10px auto 0; border-radius: 12px; border: 1px solid var(--k-border-3); }
.bs-manifest{padding:10px 14px;border-left:5px solid #7a2e12;background:#f3e6d4;border-radius:8px;color:#2a1d12}
.bs-think-quote{font-size:1.25rem;font-style:italic;font-weight:700;color:#5c210c;margin:4px 0 10px}
.bs-think li{margin:4px 0}
.bs-manifest p{margin:6px 0}
/* bogshoppen.dk colour-blind fix (user 2026-10-11 could not read the white-on-red-brown poll button):
   buttons = black text on pale yellow + black border, headings dark ink - same as Stem. */
.bs-site .k-btn-primary, .bs-site .bs-btn{background:#fef3c7;color:#111827;border:2px solid #111827;font-weight:800}
.bs-site .k-btn-primary:hover, .bs-site .bs-btn:hover{background:#fde68a;color:#111827}
.bs-card h2{color:#2a1d12}
.bs-think-quote{color:#2a1d12}
.bs-tag{background:#2a1d12}
.bs-manifest{border-left-color:#2a1d12}
.bs-vote{border:2px solid #2a1d12}

/* Today's plan inside the front-page header box (2026-10-12) */
.hj-head-today { margin-top: 12px; text-align: left; }
.hj-head-today .hj-day { border: 0; padding: 0; margin: 0; background: none; }

/* Front page 2026-10-12: the three questions (chat / stream / remote) share one look - same border, heading and text size. */
.hj-stream, .hj-semed { border: 2px solid var(--k-border); }
.hj-stream p, .hj-semed p, .hj-stream .hj-live.off { font-size: 1rem; }
.hj-semed .hj-eltip-text { margin: 6px 0; }
/* "Vidste du …" boxes look like the small tiles above them (user 2026-10-12): white card, thin border, tile font sizes. */
.hj-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 14px 0; align-items: start; }
.hj-tips > .k-card { margin: 0; padding: 12px; border: 1px solid var(--k-border); background: var(--k-card); box-shadow: var(--k-shadow); }
.hj-tips .k-card-title { font-size: 1em; margin: 0 0 4px; }
.hj-tips .hj-eltip-text, .hj-tips p { font-size: var(--k-fs-small, .9em); margin: 4px 0; }
.hj-tips .k-btn { font-size: var(--k-fs-small, .9em); margin-top: 6px; }
.hj-app-contact { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--k-border); font-size: var(--k-fs-small, .9em); }

/* "Det spørger folk om" - public Q&A from the chat (2026-10-12) */
.hj-qa-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.hj-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--k-border); border-radius: 999px; background: var(--k-card); color: var(--k-text); font: inherit; font-size: var(--k-fs-small, .9em); text-decoration: none; cursor: pointer; }
.hj-chip.on, .hj-chip:hover { background: var(--k-text); color: var(--k-card); border-color: var(--k-text); }
.hj-qa-q { font-size: 1.1rem; margin: 8px 0 6px; white-space: pre-line; }
.hj-qa-a { white-space: pre-line; padding: 10px; border-radius: 10px; background: var(--k-surface-2, #eef1f0); }
.hj-qa-topic { border: 0; cursor: pointer; font: inherit; font-size: var(--k-fs-small, .9em); }
.hj-qa-related { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--k-border); font-size: var(--k-fs-small, .9em); }
.hj-qa-related ul, .hj-qa-list { margin: 6px 0; padding-left: 18px; }
.hj-qa-list li { margin: 4px 0; }
.hj-qa-admin { list-style: none; padding: 0; display: grid; gap: 6px; }
.hj-qa-admin li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hj-qa-admin li > span { flex: 1 1 200px; }

/* All pages 2026-10-12 (user: "look at css and navigation on all pages"):
   - the shared Kolibri pages (/om, /hjaelp) brought their own app header under the site menu - one menu is enough;
   - card headings were 17, 19 and 21 px on different pages - one size everywhere (the "Vidste du" tiles stay tile-sized). */
.hj-nav ~ .k-main .k-header { position: static; background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 12px; }
.hj-nav ~ .k-main .k-header .k-logo, .hj-nav ~ .k-main .k-header .k-brand span { display: none; }
.hj-nav ~ .k-main .k-header .k-brand b { font-size: 1.7rem; color: var(--k-text); }
.hj-nav ~ .k-main:has(h1) .k-header { display: none; }   /* /om has its own h1 */
.k-content .k-card-title { font-size: 1.2rem; }
.k-content .hj-tips .k-card-title { font-size: 1em; }

/* Stem polls shown on bogshoppen.dk (Components/SitePoll, 2026-10-12) */
.sp-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.sp-option { min-height: 44px; padding: 8px 14px; border: 2px solid var(--k-border); border-radius: 999px; background: var(--k-card); color: var(--k-text); font: inherit; cursor: pointer; text-align: left; }
.sp-option.on { border-color: var(--k-text); background: var(--k-text); color: var(--k-card); font-weight: 700; }
.sp-optin { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.sp-optin input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.sp-results { list-style: none; padding: 0; display: grid; gap: 6px; }
.sp-results li { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--k-border); border-radius: 10px; overflow: hidden; }
.sp-results li > * { position: relative; z-index: 1; }
.sp-results li i { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; background: var(--k-surface-2, #eef1f0); }
.sp-results li.mine { border-color: var(--k-text); font-weight: 700; }

/* What you sign up to + "Prøv gratis" (2026-10-12) */
.sp-means { margin: 10px 0; padding: 10px 12px; border: 2px solid var(--k-border); border-radius: 12px; background: var(--k-card); }
.sp-means ul { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.sp-means a { font-weight: 700; }
.tf { margin-top: 10px; }
.bs-who { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; text-align: left; }

/* Front page 2026-10-12: head box like bogshoppen.dk (centered, emoji on top), today in its own box,
   chat/stream/remote in ONE box with the three questions as sub-headings. */
html[data-family="idag"] .hj-head { text-align: center; padding: 22px 16px 18px; }
html[data-family="idag"] .hj-head::before { position: static; display: block; transform: none; font-size: 2.6rem; margin-bottom: 6px; }
@media (max-width:520px) { html[data-family="idag"] .hj-head { padding: 22px 16px 18px; } }
.hj-today .hj-head-today { margin-top: 0; }
.hj-trio-parts { display: grid; gap: 12px; }
.hj-part { padding: 12px; border-radius: 12px; border: 2px solid var(--k-border); }
.hj-part-title { margin: 0 0 8px; font-size: 1.15rem; }
.hj-part.hj-chat-top { text-align: center; }
.hj-part.hj-chat-top.is-on { border-color: var(--k-success, #1f9d55); background: #eefaf2; }

/* The two head boxes - itmartin.dk and bogshoppen.dk - feel the same (user 2026-10-12): emoji on top, pill tag, heading, subtitle.
   Only the colours differ. */
html[data-family="idag"] .hj-head, .bs-head { text-align: center; padding: 22px 16px 18px; margin: 8px 0 16px; border-radius: var(--k-radius-lg, 18px); border-width: 2px; border-style: solid; }
html[data-family="idag"] .hj-head h1, .bs-head h1 { margin: 6px 0 4px; font-size: 2rem; line-height: 1.15; }
html[data-family="idag"] .hj-tagline, .bs-tag { display: inline-block; margin: 0; padding: 2px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem; letter-spacing: .02em; }
html[data-family="idag"] .hj-head .hj-intro, .bs-head p { margin: 0; font-weight: 600; }
.bs-head::before { content: "📚"; display: block; font-size: 2.6rem; margin-bottom: 6px; }

/* bogshoppen.dk live-auction teaser (2026-10-12) */
.bs-sub { margin: 16px 0 6px; font-size: 1.1rem; }
.bs-products { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bs-products li { padding: 6px 10px; border: 1px solid var(--k-border); border-radius: 10px; }
.bs-products span { color: var(--k-muted); }
.bs-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.bs-done { padding: 10px 12px; border: 2px solid var(--k-success, #1f9d55); border-radius: 12px; }
.bs-promise { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bs-promise li { padding: 8px 10px; border: 2px solid var(--k-border); border-radius: 10px; }

/* bogshoppen.dk "Sådan køber du" as big boxes like the chat box (2026-10-12) */
.bs-bigsteps { display: grid; gap: 12px; }
.bs-bigstep { padding: 14px; border: 2px solid var(--k-border); border-radius: 14px; background: var(--k-card); text-align: center; }
.bs-bigstep h4 { margin: 0 0 6px; font-size: 1.15rem; }
.bs-bigstep p { margin: 0 0 10px; }
.hj-app-target { border: 2px solid var(--k-text); }

/* Head box on every tab (PageHead, 2026-10-12): the emoji comes from the page title */
html[data-family="idag"] .hj-head.hj-head-page::before, .bs-head.bs-head-page::before { content: attr(data-emoji); animation: none; }
.hj-head-page[data-emoji=""]::before, .bs-head-page[data-emoji=""]::before { display: none; }

/* Tile groups (2026-10-12): every tile ends with where it leads */
.hj-tile-go { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: var(--k-fs-small, .9em); color: var(--k-text); }

/* No text links for visitors (user 2026-10-12: "boxes are easier") - questions as boxes */
.hj-qa-boxes { display: grid; gap: 6px; margin: 8px 0; }
.hj-qa-boxlink { display: block; padding: 10px 12px; min-height: 44px; border: 2px solid var(--k-border); border-radius: 12px; background: var(--k-card); color: var(--k-text); text-decoration: none; font-weight: 600; }
.hj-qa-boxlink:hover { border-color: var(--k-text); }
.hj-app-contact .k-row { gap: 6px; flex-wrap: wrap; }
.hj-owner { margin: 6px 0 0; font-weight: 700; }

/* itmartin.dk front head box: the ITMartin hummingbird (brand icon) instead of the thinking emoji (user 2026-10-12) */
/* The ITMartin logo that won the Stem logo vote (session 2, image 16 - most votes), user 2026-10-12. */
html[data-family="idag"] .hj-head:not(.hj-head-page)::before { content: ""; display: block; width: min(240px, 70%); height: 72px; margin: 0 auto 8px;
  background: url("/brand/itmartin-logo.png") center / contain no-repeat; animation: none; transform: none; }
.hj-tilegroup .hj-tiles { margin: 6px 0 0; }

/* Type scale on both front pages (audit 2026-10-12, user: "look through css on fonts, boxes sizes space on the two homepages").
   Boxes were already alike (16px padding, 12px between, 22px corners); only the text sizes drifted. */
.k-content .k-card > h2, .k-content .k-card > .k-card-title { font-size: 1.2rem; }   /* every box heading 19.2px */
.k-content .hj-stream p, .k-content .hj-semed p, .k-content .hj-semed .hj-eltip-text { font-size: 1em; }   /* body text 17px */
.k-content .k-help { font-size: 15px; }
.k-content .k-btn-sm { font-size: 16px; }
.k-content .k-btn:not(.k-btn-sm), .bs-site .k-content .bs-btn:not(.k-btn-sm) { font-size: 17px; }
.k-content .hj-stream .hj-live.off { font-size: 1em; }
.k-content .hj-stream p.k-help, .k-content .hj-semed p.k-help { font-size: 15px; }

/* itmartin.dk front page: pictures instead of emojis (2026-10-12, user: "personal - rather pictures") */
.hj-tile-pic { width: 100%; height: 96px; object-fit: cover; object-position: top; border-radius: 10px; margin-bottom: 6px; }
.hj-chat-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 8px; border: 3px solid var(--k-card); box-shadow: var(--k-shadow); }

/* No emojis anywhere (2026-10-12): the decorative CSS emojis go too. The itmartin.dk front keeps the logo. */
.bs-head::before, .bs-head.bs-head-page::before, html[data-family="idag"] .hj-head.hj-head-page::before { content: none; display: none; }
html[data-family="idag"] .hj-news::before, html[data-family="nyhed"] .hj-news::before { content: none; display: none; }
.sp-option { padding-left: 38px; position: relative; }
.sp-option::before { content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid currentColor; border-radius: 4px; }
.sp-option.on::before { background: currentColor; box-shadow: inset 0 0 0 3px var(--k-text); }

/* /spoergsmaal: air between search, topics and "spørg i chatten" (2026-10-12) */
.hj-qa-search { margin-top: 12px; }
.hj-qa-topics { margin: 12px 0 0; gap: 8px; }
.hj-qa-ask { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--k-border); }
.hj-qa-ask .k-help { margin: 0 0 8px; }
.hj-qa .k-help { margin-top: 8px; }
.hj-qa-related { margin-top: 14px; }

/* ONE inner-box look on every page of both sites (user 2026-10-12: inner boxes get the I dag page's 5px stripe; 2026-10-14: "not all boxes
   share the same css... There are frames on some" -> "All pages need to share the same css"). Every box inside a big box =
   2px frame in the site's border colour + a 5px stripe in the site's accent on the left, 12px corners, the card background.
   Checked by ITMartinHjem.UiTests (SharedCssTests) on all pages of itmartin.dk and bogshoppen.dk. Big boxes (.k-card) = Kolibri default. */
.k-content .hj-part, .k-content .bs-bigstep, .k-content .sp-means, .k-content .hj-qa-boxlink,
.k-content .bs-products li, .k-content .bs-promise li, .k-content .hj-qa-a, .k-content .tm-card, .k-content .bs-manifest,
.k-content .hj-week, .k-content .hj-chat-challenge, .k-content .hj-day-entry {
    border: 2px solid var(--k-border); border-left: 5px solid var(--k-accent); border-radius: 12px; background: var(--k-card);
}
.k-content .bs-manifest, .k-content .hj-week, .k-content .hj-chat-challenge, .k-content .hj-day-entry, .k-content .hj-qa-a { padding: 10px 12px; }
.k-content .hj-day-entry { margin: 0 0 8px; }
.k-content .bs-bigstep { text-align: left; }
.k-content .hj-part.hj-chat-top.is-on { border-left-color: var(--k-success, #1f9d55); }   /* green = Martin is here now */

/* Storage request box on both front pages (2026-10-14) - stands out with the accent border, buttons in a row. */
.hj-storage .k-card-title, .hj-storage .hj-eltip-text { color: var(--k-text); }
.hj-storage-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Mobilapp vs webapp table on Mine apps (2026-10-14): scrolls sideways on narrow phones, dark-on-pale for contrast. */
.hj-compare-wrap { overflow-x: auto; margin: 8px 0 14px; }
.hj-compare { width: 100%; border-collapse: collapse; font-size: .95rem; color: var(--k-text); }
.hj-compare th, .hj-compare td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--k-border); }
.hj-compare thead th { font-weight: 700; }
.hj-compare tbody th { font-weight: 600; white-space: nowrap; }
.hj-compare td:last-child { font-weight: 600; }

/* App challenge inside the front-page chat (2026-10-14). */
.hj-chat-challenge { margin: 10px 0 0; padding: 8px 10px; border-left: 5px solid var(--k-accent); background: var(--k-surface, transparent); color: var(--k-text); }
/* Shop on bogshoppen.dk/varer (2026-10-15) */
.bs-search{display:flex;flex-wrap:wrap;gap:8px}
.bs-search .k-input{flex:1 1 200px;min-width:0}
.bs-items{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.bs-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid #2a1d12;border-radius:12px;background:#fffdf7;color:#111827!important;text-decoration:none!important}
.bs-item:hover{background:#fef3c7}
.bs-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:none}
.bs-item-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.bs-item-price{flex:none;text-align:right;white-space:nowrap}
.bs-price{font-size:1.6rem;margin:4px 0}
.bs-photo{max-width:100%;max-height:420px;border-radius:12px}
.bs-proof{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.bs-warn{color:#7a1d0c;font-weight:700}
/* "Fundet i kasserne" - both front pages (2026-10-15) */
.bs-found-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.bs-found-item{border:2px solid #2a1d12;border-radius:14px;padding:12px;background:#fffdf7;color:#111827;display:flex;flex-direction:column;gap:4px}
.bs-found-item h3{margin:4px 0 0;font-size:1.1rem}
.bs-found-item p{margin:2px 0}
.bs-found-item img{width:100%;max-height:220px;object-fit:cover;border-radius:10px}
.bs-found-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}