/* Det vuxna uttrycket, riktning D (docs/prototyper/D-vuxen/koncept.md).

   Målgruppen är alla villaägare. Hela ytor i mättad färg, tjock kontur, hård skugga och
   lutande lappar såg ut som en app för barn för den som ska lägga in kvittot för ett
   takbyte. Här bärs färgen av siffror, pillor och smala kanter, och ytorna är lugna.

   Lagret läses in sist (App.razor) och vinner på ordning eller en klass mer, utan
   !important. Färgerna och formerna själva bor i husse-skal.css; det här är bara
   komponenterna. Texten på en yta som blivit kort eller papper måste vara --ink eller
   --*-ink, aldrig --on-color: den är mörk även i mörkt läge och blev 1,3:1 på mobilens
   rumsrutor första gången. */

/* ── Bas ─────────────────────────────────────────────────────────────────── */
body { background-image: none; }

/* Rubrikernas vikt har ett tak på 650 i @font-face i husse.css. */

/* ── Knappar ─────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--r-s); box-shadow: none; }
.btn:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn-primary, .btn-primary:hover, .btn-primary:active:not(:disabled) {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn-primary:hover { opacity: .9; }
.btn-secondary { border-color: var(--line-strong); }

/* Skalets knapp är primär som standard och var gul. Nu bär den bläck som .btn-primary. */
.btn.hk-btn, .btn.hk-btn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  border-radius: var(--r-s); box-shadow: none; transform: none;
}
.btn.hk-btn:active { transform: translateY(1px); box-shadow: none; }
.btn.hk-btn--vit, .btn.hk-btn--vit:hover { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.undo-bar { border-radius: var(--r-m); box-shadow: var(--lift); }

/* ── Fält: en tydlig gräns, minst 3:1 mot ytan ───────────────────────────── */
.input, select.input, textarea.input { border-color: var(--line-strong); border-radius: var(--r-s); }
.input:hover { border-color: var(--ink-3); }
.box, .row-task .box { border-color: var(--line-strong); border-radius: 6px; }

/* ── Hjälten och panelen på översikten: ett lugnt kort, inte en affisch ──── */
.h-hero, .h-hero:is(.sky, .lilac, .mint, .pink), .now-panel {
  --hero: var(--card);
  /* Barnen läser --on-color och --on-sky; på kortet ska de vara bläck. */
  --on-color: var(--ink); --on-sky: var(--ink);
  background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
}
.h-hero p, .now-panel .muted, .now-panel .sub { color: var(--ink-2); }
.h-hero .blob { display: none; }
.ov-hero-husse { filter: none; }
.m-app .m-home-hero { border-radius: var(--r-l); box-shadow: var(--lift); }

/* ── Siffrorna: vit ruta, färgad siffra och en smal kant upptill ─────────── */
.stat, .stat.hk-stat, .stat.hk-stat:nth-child(n),
.stat:is(.late, .soon, .ok, .idea, .room, .people),
.stat:is(.tone-tomat, .tone-sol, .tone-himmel, .tone-mint, .tone-syren) {
  --stat: var(--card); position: relative; overflow: hidden;
  background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
}
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--stat-mark, var(--line-strong));
}
.stat:is(.late, .tone-tomat) { --stat-mark: var(--tomato); --stat-ink: var(--tomato-ink); }
.stat:is(.soon, .tone-sol) { --stat-mark: var(--sun); --stat-ink: var(--sun-ink); }
.stat:is(.ok, .tone-mint) { --stat-mark: var(--mint); --stat-ink: var(--mint-ink); }
.stat:is(.idea, .tone-himmel) { --stat-mark: var(--sky); --stat-ink: var(--sky-ink); }
.stat:is(.room, .tone-syren) { --stat-mark: var(--lilac); --stat-ink: var(--lilac-ink); }
.stat.people { --stat-mark: var(--pink); }
.stat .num, .stat .lbl { color: var(--stat-ink, var(--ink)); }
.stat small { color: var(--ink-2); }
a.stat:hover, button.stat:hover, a.stat.hk-stat:hover { transform: none; border-color: var(--line-strong); }

/* ── Statuspillor: mjuk yta med text i samma färg, och ikonen som förut ──── */
.tag-due-late, .pill.late, .pill-late, .hk-pill.late { background: var(--tomato-soft); color: var(--tomato-ink); border-color: transparent; }
.tag-due-soon, .pill.soon, .pill-soon, .hk-pill.soon { background: var(--sun-soft); color: var(--sun-ink); border-color: transparent; }
.tag-ok, .tag-due-ok, .pill.ok, .pill-ok, .hk-pill.ok { background: var(--mint-soft); color: var(--mint-ink); border-color: transparent; }
.pill.idea, .pill-idea, .hk-pill.idea { background: var(--sky-soft); color: var(--sky-ink); border-color: transparent; }
.tag-due-later, .pill.later, .pill-later { border-color: transparent; }
.pill.hk-pill { border-width: 0; }

/* ── Rader och kort ──────────────────────────────────────────────────────── */
.row-task:hover { transform: none; box-shadow: none; background: var(--paper); }
.row-task input:checked ~ .box { transform: none; }
.check-row:has(input:checked) .box, input:checked ~ .box { transform: none; }

/* Idélappen står rakt och utan tejp. Färgen finns kvar som en mjuk yta. */
.note-card, .note-card:nth-child(n) { --tilt: 0deg; box-shadow: none; border-color: var(--line); }
.note-card::before { display: none; }
.note-card:hover, .note-card:focus-within { transform: none; border-color: var(--line-strong); }

.room-tile { border-radius: var(--r-m); box-shadow: none; }
.room-tile:hover { transform: none; border-color: var(--line-strong); }

/* ── Husses bubblor: samma lugna yta som allt annat ──────────────────────── */
.bubble, .bubble.sun, .bubble.lilac, .husse-bubble,
.ov-tip .bubble, .hk-getstarted-husse .bubble {
  background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); box-shadow: none; animation: none;
}

/* ── Mobilens flikrad: ljus platta, aktiv flik på papper ────────────────── */
.m-app .m-nav { box-shadow: var(--lift); border-color: var(--line); }
.m-app .m-tab.active, .m-app .m-tab.active:active { background: var(--paper-2); color: var(--ink); }
.m-app .m-tab:active { transform: none; }

/* ── Skrivbordets meny ───────────────────────────────────────────────────── */
.hk-nav.app-nav a.active { box-shadow: none; }

/* ── Välkomstsidan: det första man ser ───────────────────────────────────── */
/* Panelen var syrenfärgad med prickar och Husse som gungade. Nu är den papper. */
.onb-side, .onb--fel .onb-side {
  --on-color: var(--ink);
  background-color: var(--paper-2); background-image: none; border-right-color: var(--line);
}
.onb-husse { width: min(100%, 180px); }
.onb-husse-bild { animation: none; }
.onb-bubble { box-shadow: none; font-weight: 600; font-size: 17px; border-radius: var(--r-l) var(--r-l) var(--r-l) 6px; }
.onb-type, .onb-type:hover { transform: none; box-shadow: none; border-radius: var(--r-m); }
.onb-type.on { --on-color: var(--ink); background: var(--card); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transform: none; }
/* Stegmätaren: bläck för det man står på och det som är klart, ingen färg och inget hopp. */
.onb-bar { height: 4px; border: 0; background: var(--line); }
.onb-step.done .onb-bar, .onb-step.now .onb-bar { background: var(--ink); border: 0; }
.onb-step.now .onb-bar { animation: none; }

/* ── Offlineraden: mjuk sol och en smal kant, inte ett helt gult block ──── */
/* Mjuk yta bär --on-soft, som följer med i mörkt läge. --on-color här blev mörkt på mörkt. */
.offline-bar, .m-app .m-offline-bar {
  background: var(--sun-soft); color: var(--on-soft); border: 0;
  border-bottom: var(--bw) solid var(--sun);
}
.m-app .m-offline-bar { border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: var(--lift); }
.m-app .m-offline-bar a { color: var(--on-soft); }

/* ── Återanslutningsdialogen: lugnt kort, bläckknapp, inget gung ────────── */
#components-reconnect-modal {
  border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
}
#components-reconnect-modal[open] {
  animation: components-reconnect-modal-fadeInOpacity .3s var(--ease, ease-out) .2s both;
}
#components-reconnect-modal button, #components-reconnect-modal button:active {
  font-weight: 700; color: var(--paper); background-color: var(--ink);
  border: var(--bw) solid var(--ink); border-radius: var(--r-s); box-shadow: none;
}
#components-reconnect-modal button:hover { opacity: .9; }
#components-reconnect-modal button:active { transform: translateY(1px); }
.components-rejoining-animation { animation: none; }

/* Guidelänken på underhållskortet och raden i Just nu. Blockfärgen på kortets mjuka yta
   klarar inte kontrasten, därför bläcket. Normal vikt så att den inte tävlar med "Bocka av". */
.kort-guide { align-self: flex-start; color: var(--sky-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.kort-guide:hover { color: var(--sky-ink); }