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

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

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

/* Välkomstflödet och återanslutningen har sina regler i sida-valkomst.css. */

/* ── 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 {
  background: var(--sun-soft); color: var(--on-soft); border: 0;
  border-bottom: var(--bw) solid var(--sun);
}
.offline-bar a { color: var(--on-soft); font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }

/* 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); }
/* Fristående sektionslänkar (Alla uppgifter, Prioritera alla, Alla rum) och guidelänken var 23 till
   26 px höga på telefonen, för små för en tumme. Rutan växer till 44 px, och den negativa marginalen
   tar tillbaka platsen så att raden ligger kvar där den låg. */
@media (max-width: 760px) {
  .ov-sec-head a, .kort-guide {
    display: inline-flex; align-items: center; min-height: 44px;
    margin-block: calc((44px - 1lh) / -2);
  }
}

/* ── Dialoger: samma form överallt ──────────────────────────────────────── */
/* Rubrik och kryss överst, sekundär knapp till vänster och primär längst till höger i en rad som
   följer med när innehållet scrollar. Förut hade dialogerna inget kryss, raden försvann under
   fälten i Ny post på telefonen, och snabbläget hade Spara till vänster men dialogerna till höger. */
.dialog { position: relative; padding: 24px; gap: 16px; box-shadow: var(--lift); animation: dlg-in .26s var(--ease) both; }
.dialog-backdrop { animation: dlg-tona .2s var(--ease) both; }
.dialog-backdrop.is-leaving { animation: dlg-ut .14s ease forwards; }
.dialog-backdrop.is-leaving .dialog { animation: dlg-bort .14s ease forwards; }
@keyframes dlg-tona { from { opacity: 0; } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes dlg-ut { to { opacity: 0; } }
@keyframes dlg-bort { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.dialog-head { display: flex; align-items: flex-start; gap: 12px; margin: -6px -10px 0 0; }
.dialog-head .dialog-title { flex: 1; margin: 6px 0 0; min-width: 0; overflow-wrap: anywhere; }
.dialog-head--tom { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 3; }
/* En dialog med egen rubrik (Underlag till hantverkare) lämnar plats för krysset i sin första rad. */
.dialog-head--tom + * { padding-right: 48px; }
.dialog-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.dialog-close:hover { background: var(--paper-2); color: var(--ink); }
.dialog-actions {
  position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  margin: 8px -24px -24px; padding: 14px 24px 20px;
  background: var(--card); border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-l) var(--r-l);
}
.m-sheet-head .dialog-close { margin-right: -8px; }

@media (max-width: 760px) {
  .dialog, .dialog[class*="dlg-"] { padding: 0 16px; gap: 16px; animation-name: dlg-upp; }
  @keyframes dlg-upp { from { opacity: .4; transform: translateY(40px); } }
  .dialog-head, .dialog-head--tom {
    position: sticky; top: 0; z-index: 3; margin: 0 -16px; justify-content: flex-end;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px;
    background: var(--card); border-bottom: 1px solid var(--line-soft);
  }
  .dialog-head .dialog-title { margin: 4px 0 0; font-size: 24px; }
  .dialog-head--tom + * { padding-right: 0; }
  /* Knapparna sitter längst ner på skärmen, där tummen når, även när fälten är fler än skärmen. */
  .dialog-actions {
    margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top-color: var(--line); border-radius: 0;
  }
  .dialog-actions > .btn { flex: 1 1 auto; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .dialog, .dialog-backdrop, .dialog-backdrop.is-leaving, .dialog-backdrop.is-leaving .dialog { animation: none; }
}