/* Översikten och rummen. Byggstenarna (.h-hero, .stat, .row-task, .note-card, .room-tile)
   kommer från husse.css; här ligger bara det sidspecifika: hjältens upplägg, listorna
   och de små detaljerna. Laddas efter husse-skal.css och vinner utan !important. */

/* ── Hjälten: en mjuk färgyta efter läget, figuren till höger ──────────────
   Ytan säger samma sak som figuren: tomat när något är sent, sol när något är snart, mint när det
   är lugnt eller firas, himmel för ett nytt hus. Mjuka ytor bär --on-soft, aldrig --on-color, som
   blev 1,3:1 i mörkt läge. Ordet står alltid med (rubriken och pillan), färgen är bara stämning.
   Två klasser för att vinna över husse-vuxen.css, som gör .h-hero till ett vitt kort. */
.ov-hero.h-hero {
  --tone: var(--sky-soft); --tone-mark: var(--sky);
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 4vw, 40px);
  margin-bottom: 22px; padding: clamp(22px, 3.4vw, 40px);
  background: var(--tone); color: var(--on-soft); border-color: transparent; box-shadow: none;
  overflow: hidden; isolation: isolate;
}
.ov-hero.ov-hero--sent { --tone: var(--tomato-soft); --tone-mark: var(--tomato); }
.ov-hero.ov-hero--snart { --tone: var(--sun-soft); --tone-mark: var(--sun); }
.ov-hero.ov-hero--lugnt, .ov-hero.ov-hero--firar { --tone: var(--mint-soft); --tone-mark: var(--mint); }
.ov-hero.ov-hero--nytt { --tone: var(--sky-soft); --tone-mark: var(--sky); }
/* Solytan blir lerbrun i mörkt läge (samma skäl som på startsidan), så snart tar papperet där. Pillan
   och rubriken bär läget ändå. */
:root[data-theme="dark"] .ov-hero.ov-hero--snart { --tone: var(--paper-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ov-hero.ov-hero--snart { --tone: var(--paper-2); } }
/* En stor cirkel i lägets färg bakom figuren, så att ytan får djup utan att ritas med fler färger. */
.ov-hero.h-hero::after {
  content: ""; position: absolute; z-index: -1; right: clamp(-90px, -4vw, -30px); top: 50%;
  width: clamp(220px, 26vw, 340px); aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%);
  background: color-mix(in srgb, var(--tone-mark) 26%, transparent);
}
.ov-hero-text { display: grid; gap: 14px; position: relative; z-index: 1; min-width: 0; }
.ov-hero h1 { font: 650 clamp(32px, 4.4vw, 52px)/1.02 var(--f-display); letter-spacing: -.03em; margin: 0; max-width: 18ch; color: var(--on-soft); }
.ov-hero.h-hero .eyebrow, .ov-hero.h-hero .ov-lead { margin: 0; color: var(--on-soft); }
.ov-hero.h-hero .ov-lead { font-size: 18px; max-width: 48ch; }
.ov-hero-husse { position: relative; z-index: 1; margin-right: clamp(0px, 2vw, 24px); }
.ov-hero-husse .husse { transform-origin: 50% 100%; animation: ov-hej 1.5s var(--ease) .35s 1 both; }
.ov-hero--ny { margin-bottom: 8px; }

/* Uppgiften i hjälten: ett kort på färgytan, större än raderna i listan. */
.ov-focus { display: grid; gap: 8px; margin-top: 6px; max-width: 640px; }
.ov-focus .ov-focus-lbl { color: var(--on-soft); }
.ov-tasks--fokus .row-task { min-height: 76px; padding-block: 14px; border-color: transparent; box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--ink) 60%, transparent); }
.ov-tasks--fokus .row-task .what b { font-size: 20px; }

/* ── Siffrorna: stora, och hela rutan leder vidare ─────────────────────── */
.ov-stats .stat.hk-stat { transition: transform .25s var(--spring), box-shadow .2s var(--ease), border-color .2s; }
.ov-stats .stat::before { height: 5px; }
/* Pilen säger att rutan går att trycka på, och knuffar sig fram när man pekar. */
.ov-stats a.stat.hk-stat::after {
  content: "→"; position: absolute; right: 18px; top: 16px; font: 650 20px/1 var(--f-display);
  color: var(--stat-ink, var(--ink)); transition: transform .2s var(--spring);
}
.ov-stats a.stat.hk-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--ink) 55%, transparent); border-color: var(--line-strong); }
.ov-stats a.stat.hk-stat:hover::after { transform: translateX(4px); }
.ov-stats a.stat.hk-stat:active { transform: translateY(0) scale(.98); }
.ov-stats > * { animation: ov-upp .45s var(--ease) both; }
.ov-stats > :nth-child(2) { animation-delay: .05s; }
.ov-stats > :nth-child(3) { animation-delay: .1s; }
.ov-stats > :nth-child(4) { animation-delay: .15s; }

/* ── Rytmen ─────────────────────────────────────────────────────────── */
/* Ett avstånd mellan avsnitten, satt på ett ställe. Varje block hade sin egen marginal (44, 28,
   22 px), så sidan stod tätt på ett ställe och glest på nästa och läste som hoplappad. */
:root { --ov-rytm: 48px; --ov-rytm-liten: 20px; }
@media (max-width: 760px) { :root { --ov-rytm: 34px; --ov-rytm-liten: 14px; } }

/* ── Sektionsrubriker ───────────────────────────────────────────────── */
.ov-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: var(--ov-rytm) 0 var(--ov-rytm-liten); scroll-margin-top: 20px; }
.ov-sec-head h2, .ov-h2 { margin: 0; }
.ov-h2 { margin: var(--ov-rytm) 0 var(--ov-rytm-liten); }
.ov-h2--bar { margin: 0 0 4px; }
.ov-sec-head a { font-weight: 700; color: var(--sky-ink); text-underline-offset: 3px; }
.ov-h3 { margin: 0 0 12px; }

/* ── Uppgiftsraderna ────────────────────────────────────────────────── */
.ov-tasks { display: flex; flex-direction: column; gap: 10px; }
.ov-tasks--senare { margin-top: 0; }
/* Läget som en kant till vänster, så att listan går att skumma. Pillan bär ordet. */
.ov-tasks .row-task { position: relative; overflow: hidden; transition: transform .2s var(--spring), border-color .2s, background .2s; }
.ov-tasks .row-task::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--edge, transparent); }
.ov-tasks .row-task[data-lage="sent"] { --edge: var(--tomato); }
.ov-tasks .row-task[data-lage="snart"] { --edge: var(--sun); }
.ov-tasks .row-task[data-lage="senare"] { --edge: var(--line-strong); }
.ov-tasks .row-task:hover { transform: translateX(3px); border-color: var(--line-strong); background: var(--card); }
.ov-tasks .row-task:active { transform: scale(.99); }
.row-task .what small.form-error { color: var(--tomato-ink); font-weight: 600; }
/* Bocken: rutan studsar till, raden blir mint och glider sedan undan innan listan laddas om. */
.row-task.klar { background: var(--mint-soft); --edge: var(--mint); }
.row-task.klar .what b { color: var(--on-soft); }
.row-task.klar .what small, .row-task.klar .what a { color: var(--on-soft); }
.ov-tasks .row-task.klar .box { animation: ov-pop .45s var(--spring) both; }
.ov-tasks:not(.ov-tasks--fokus) .row-task.klar { animation: ov-ut .35s var(--ease) .95s both; }
.row-task .pill.later { background: transparent; border: var(--bw-thin) solid var(--line-soft); color: var(--ink-2); }
.row-task input:disabled ~ .box { opacity: .55; }
.row-task input:disabled:not(:checked) ~ .what { opacity: .85; }
.row-task:has(input:disabled:not(:checked)) { cursor: default; }
.ov-tasks .row-task:has(input:disabled:not(:checked)):hover, .row-task:has(input:disabled:not(:checked)):hover { transform: none; box-shadow: none; }

/* ── Kom igång: en mätare under räknaren ────────────────────────────── */
.hk-getstarted-bar { display: block; width: min(240px, 100%); height: 6px; margin-top: 8px; border-radius: var(--r-pill); background: var(--paper-2); overflow: hidden; }
.hk-getstarted-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--mint); transition: width .6s var(--ease); }

/* ── Skelettet medan huset laddas: sidans form, så att inget hoppar ──── */
.ov-skel { display: grid; gap: 16px; }
.ov-skel-hero { height: 260px; border-radius: var(--r-l); }
.ov-skel-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ov-skel-stats .skeleton { height: 132px; border-radius: var(--r-l); }
.ov-skel-row { height: 64px; border-radius: var(--r-m); }

/* ── Rörelsen ───────────────────────────────────────────────────────── */
@keyframes ov-upp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ov-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes ov-ut { to { opacity: 0; transform: translateX(24px); } }
/* Ett hej när sidan öppnas, en gång. Figuren saknar armar, så det är hela huset som nickar. */
@keyframes ov-hej {
  0%, 100% { transform: none; }
  20% { transform: translateY(-10px) rotate(-4deg); }
  40% { transform: translateY(0) rotate(0); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
}

/* ── Idélappar ──────────────────────────────────────────────────────── */
.ov-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 24px; padding-top: 12px; }
.ov-notes .note-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ov-notes .note-card h3 { font: 800 21px/1.12 var(--f-display); letter-spacing: -.01em; margin: 0; }
.ov-notes .pill.plain { background: var(--card); text-decoration: none; }
.ov-price { font: 800 26px/1 var(--f-display); font-variant-numeric: lining-nums; }
.ov-note-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 6px; }
.ov-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--on-color); border: var(--bw-thin) solid var(--line); font: 800 14px var(--f-display); }
.ov-vote {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; cursor: pointer;
  background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line); border-radius: var(--r-pill);
  font: 800 15px var(--f-body); transition: transform .2s var(--spring), background .15s;
}
.ov-vote:hover:not(:disabled) { transform: scale(1.06) rotate(-2deg); }
.ov-vote[aria-pressed="true"] { background: var(--tomato); color: var(--on-color); }
.ov-vote[aria-pressed="true"] svg { fill: currentColor; }
.ov-vote:disabled { opacity: .55; cursor: not-allowed; }
.ov-vote[aria-pressed="true"] svg { animation: ov-pop .4s var(--spring); }
.ov-vote:active:not(:disabled) { transform: scale(.94); }
.ov-notes .note-card { transition: transform .25s var(--spring), border-color .2s, box-shadow .2s; }
.ov-notes .note-card:hover, .ov-notes .note-card:focus-within { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--ink) 60%, transparent); }

/* ── Året framåt och byggdelarnas ålder ─────────────────────────────── */
.ov-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: var(--ov-rytm); }
.ov-card { background: var(--card); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); padding: 22px 24px; }
.ov-card p { margin: 0; }
.ov-months { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 14px; }
.ov-months dt { font: 800 13px var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding-top: 3px; }
.ov-months dd { margin: 0; font-weight: 600; }
/* Razor tar bort mellanrummet mellan två länkar efter ett @if, så "Hela årshjulet" och "Vad huset
   kostar framöver" lästes som ett ord. Avståndet sätts här i stället. */
.ov-more { font-weight: 700; color: var(--sky-ink); display: inline-block; margin-right: 18px; }

/* ── Rummen som block ───────────────────────────────────────────────── */
.ov-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.ov-rooms .room-tile { min-height: 150px; transition: transform .25s var(--spring), border-color .2s; }
.ov-rooms .room-tile:hover { transform: translateY(-3px); }
.ov-rooms .room-tile:active { transform: scale(.98); }
/* Namnet på en rad och antalet stort under, även när namnet är kort. */
.ov-rooms .room-tile b { display: block; }
.ov-rooms .room-tile:nth-child(3n+2) { border-radius: 28px 10px 28px 28px; }
.ov-rooms .room-tile:nth-child(3n) { border-radius: 28px 28px 10px 28px; }
.ov-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov-tile-top .eyebrow { margin: 0; font-size: 11px; }
.room-tile .n small { font: 700 14px var(--f-body); }
.ov-room-invites { margin-top: 22px; }
.ov-room-invites .eyebrow { margin: 0 0 10px; }
.ov-invite-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ov-invite-action { margin-top: 14px; }
.ov-invite {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 16px; min-height: 52px; text-decoration: none;
  background: var(--card); color: var(--ink); border: var(--bw-thin) dashed var(--line); border-radius: var(--r-m);
  transition: transform .2s var(--spring), background .15s;
}
.ov-invite b { font: 800 16px var(--f-display); }
.ov-invite span { font-size: 13px; color: var(--ink-2); }
.ov-invite:hover { transform: translateY(-2px) rotate(-.6deg); background: var(--sun-soft); border-style: solid; }

/* ── Fråga huset ────────────────────────────────────────────────────── */
.ov-fraga { margin-top: var(--ov-rytm); }
.ov-fraga-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ov-fraga-head p { margin: 0; }
.ov-fraga.ask-off { opacity: .92; }

/* ── Rum ────────────────────────────────────────────────────────────── */
.rooms-layout { gap: 36px; }
.rooms-side { background: var(--card); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); padding: 18px 14px; }
.rooms-side > .kicker { margin: 0 0 6px 6px; font: 800 19px var(--f-display); text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.room-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.room-link .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--dot, var(--lilac)); border: var(--bw-thin) solid var(--line); }
.room-link .label { flex: 1; }
.room-link .count { font: 800 13px var(--f-display); background: var(--paper-2); border-radius: var(--r-pill); padding: 2px 9px; }
.room-link.active .count { background: var(--card); }

.rum-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: 26px; gap: 20px; }
.rum-hero-text { display: grid; gap: 6px; position: relative; z-index: 1; }
.rum-hero h1 { font: 800 clamp(36px, 4.4vw, 52px)/1 var(--f-display); letter-spacing: -.025em; margin: 0; }
.rum-hero .eyebrow, .rum-hero .room-summary { margin: 0; color: var(--on-color); }
.rum-hero .room-summary { font-size: 17px; font-weight: 600; }
.rum-hero .actions { position: relative; z-index: 1; }
.rum-edit { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 26px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: 18px; }
.rum-bilder { margin-top: 12px; }
.rum-bilder .ov-sec-head { margin-top: 36px; }
.rooms-body .idea-card { border-width: var(--bw-thin); box-shadow: none; }

/* ── Smala skärmar ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .rum-hero { grid-template-columns: 1fr; }
  /* Figuren står liten bredvid datumet i stället för att ta en egen skärmhöjd ovanför rubriken.
     Textens rutnät löses upp så att figuren och datumet delar första raden. */
  .ov-hero.h-hero { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 14px; padding: 20px 18px; }
  .ov-hero-text { display: contents; }
  .ov-hero-text > * { grid-column: 1 / -1; }
  .ov-hero-text > .eyebrow { grid-column: 2; grid-row: 1; align-self: center; }
  .ov-hero-husse { grid-column: 1; grid-row: 1; margin: 0; }
  .ov-hero-husse svg { width: 64px; height: auto; }
  .ov-hero.h-hero::after { width: 200px; right: -70px; top: 0; transform: translateY(-40%); }
  .ov-hero h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .ov-hero.h-hero .ov-lead { font-size: 16.5px; }
  .ov-tasks--fokus .row-task .what b { font-size: 18px; }
  /* Pillan på egen rad under texten: bredvid den pressades uppgiftens namn till tre rader. 48 px är
     rutan och mellanrummet, så att pillan står i linje med texten. */
  .ov-tasks .row-task { flex-wrap: wrap; row-gap: 8px; }
  .ov-tasks .row-task .what { flex: 1 1 calc(100% - 48px); }
  .ov-tasks .row-task > .pill { margin-left: 48px; }
  .ov-skel-hero { height: 300px; }
  .ov-skel-stats { grid-template-columns: 1fr 1fr; }
  .ov-stats a.stat.hk-stat::after { right: 14px; top: 14px; }
  .ov-notes { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  /* minmax(0, 1fr): med 1fr fick "ÖVERVÅNINGEN" bredda kolumnen, och rutorna stack ut 6 px till höger. */
  .ov-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ov-rooms .room-tile { min-width: 0; padding: 14px; }
  .ov-tile-top { flex-wrap: wrap; justify-content: flex-start; }
  .ov-more { min-height: 44px; display: inline-flex; align-items: center; }
  .ov-fraga-head { flex-direction: column; align-items: flex-start; }
}
/* Fyra lappar ska bli 2x2 på smal skrivbordsbredd, inte tre och en ensam. */
@media (max-width: 1100px) and (min-width: 761px) {
  .ov-notes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ov-notes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-hero-husse .husse, .ov-stats > *, .ov-tasks .row-task.klar, .ov-tasks .row-task.klar .box, .ov-vote[aria-pressed="true"] svg { animation: none; }
  .ov-stats a.stat.hk-stat, .ov-stats a.stat.hk-stat::after, .ov-tasks .row-task, .ov-notes .note-card, .ov-rooms .room-tile, .hk-getstarted-bar > span { transition: none; }
  .ov-stats a.stat.hk-stat:hover, .ov-stats a.stat.hk-stat:hover::after, .ov-tasks .row-task:hover, .ov-notes .note-card:hover, .ov-rooms .room-tile:hover { transform: none; }
}

/* Rättelser efter ögonloopen */
.ov-tile-top .eyebrow { color: var(--on-color); }
.room-tile .n small { margin-left: 5px; }
.ov-fraga { border-top: 0; max-width: none; padding-top: 0; }
.ov-fraga .ov-h2 { color: var(--ink); }
.ov-fraga.ask-off .ask-house { max-width: 760px; }
.ov-fraga.ask-off #ask-title { color: var(--ink); }
.ov-fraga.ask-panel { border-top: 0; }
.rooms-side { flex: 0 0 256px; max-width: 256px; }
.rooms-side .row { flex-wrap: wrap; }
.rooms-side .row .input { min-width: 0; flex: 1 1 120px; }
.rooms-side select.input { width: 100%; }
@media (max-width: 760px) { .rooms-side { flex-basis: 100%; max-width: none; } }
.rum-hero { grid-template-columns: 1fr; align-items: start; }

/* ── Garantier som snart går ut ─────────────────────────────────────── */
.ov-garanti { margin-top: var(--ov-rytm); }
.ov-garanti .ov-h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ov-garanti-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ov-garanti-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.ov-garanti-lista a { font-weight: 700; color: var(--ink); }
.ov-garanti-nar { display: inline-flex; align-items: center; gap: 10px; }

/* ── Rummets fakta (skrivbord och mobil) ────────────────────────────── */
.rum-fakta .ov-sec-head { margin-top: 36px; }
.rum-fakta-tom { margin: 0 0 12px; max-width: 56ch; }
.rum-fakta-lista { list-style: none; margin: 0 0 12px; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); }
.rum-fakta-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 44px; }
.rum-fakta-lista .rum-fakta-rad + .rum-fakta-rad { border-top: 1px solid var(--line); }
.rum-fakta > .rum-fakta-rad { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; }
.rum-fakta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.rum-fakta-text b { font-size: 16.5px; color: var(--ink); }
.rum-fakta-text .eyebrow { color: var(--ink-2); }
.rum-fakta-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 12px 16px; width: 100%; }
.rum-fakta-form .field { margin: 0; }
.rum-fakta-form .form-error, .rum-fakta-fraga, .rum-fakta-knappar { grid-column: 1 / -1; margin: 0; }
.rum-fakta-knappar { gap: 8px; }
.rum-fakta-bort { margin-left: auto; }
@media (max-width: 760px) {
  .rum-fakta-form { grid-template-columns: 1fr; }
}
/* Material på idékortet. Raden är en uppgiftsrad i tätt format; Ta bort står bredvid och
   inte i etiketten, annars bockade ett klick på knappen av raden samtidigt. */
.materials {
  background: var(--paper-2); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3);
}
.material-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.material-row { display: flex; align-items: center; gap: 8px; }
.material-row .row-task { flex: 1; min-width: 0; min-height: 52px; padding: 8px 12px 8px 8px; }
.material-row .row-task .what b { font-size: 16px; overflow-wrap: anywhere; }
.material-sum { font-weight: 700; color: var(--ink); }
.material-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
@media (max-width: 640px) { .material-form { grid-template-columns: 1fr 1fr; } .material-form .field:first-child { grid-column: 1 / -1; } }
:root[data-theme="dark"] .materials .row-task input:focus-visible ~ .box { outline-color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .materials .row-task input:focus-visible ~ .box { outline-color: var(--sun); } }

/* Länken till inköpslistan: kortets egen yta, så texten bär --ink. */
.ov-handla { display: flex; align-items: center; gap: 14px; margin-top: var(--ov-rytm); color: var(--ink); text-decoration: none; min-height: 56px; }
.ov-handla-text { flex: 1; }
.ov-handla > svg:last-child { flex: none; transition: transform .2s var(--spring); }
.ov-handla:hover > svg:last-child { transform: translateX(4px); }
.ov-handla:hover { border-color: var(--line); color: var(--ink); }
.ov-handla-text { display: grid; gap: 2px; min-width: 0; }
.ov-handla-text b { font-weight: 800; }

/* Prylarna i rummet: en lista på kortets yta, med uppgiftens läge som tagg till höger. */
.rum-prylar { margin-top: 36px; }
.rum-prylar-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rum-prylar-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); padding: 10px 14px;
}
.rum-prylar-lista a { display: grid; gap: 2px; min-height: 44px; align-content: center; color: var(--ink); text-decoration: none; min-width: 0; }
.rum-prylar-lista a b { font-weight: 700; }

/* På telefonen kommer det man valt först; listan att välja bland ligger under. Annars låg
   rummet eller prylen man tryckte på en hel skärm ner, under listan man just kom från. */
@media (max-width: 760px) {
  .rooms-layout.has-current .rooms-body { order: -1; }
}

/* Att köpa (/handla): en grupp per idé, hela raden bockar, och en köpt rad står kvar överstruken
   tills sidan öppnas igen, så att ett felklick går att ångra med tummen kvar på skärmen. */
.buy-list { display: grid; gap: 28px; max-width: 720px; }
.buy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.buy-head h2 { font: 800 22px/1.1 var(--f-display); letter-spacing: -.02em; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.buy-rows { display: grid; gap: 10px; }
.buy-row { min-height: 64px; }
.buy-row .what b { overflow-wrap: anywhere; }
.buy-row.klar .what b { text-decoration: line-through; color: var(--ink-2); }
.buy-sum { margin: 10px 4px 0; }

/* Fråga huset (/fraga): Husvos bubbla ovanför fältet. */
.ask-page { max-width: 720px; display: grid; gap: 18px; }
.ask-page-husse { display: flex; align-items: center; }

/* ── Det som väntar: garantier och inköp ────────────────────────────── */
/* Direkt under listan, eftersom en garanti som går ut inte väntar på att man scrollat förbi
   idépotten. Två kort sida vid sida på bred skärm, och kortens egen marginal tas bort här så att
   blocket har en enda. */
.ov-vantar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ov-rytm-liten); align-items: start; margin-top: var(--ov-rytm); }
.ov-vantar > .ov-garanti, .ov-vantar > .ov-handla { margin-top: 0; }
/* Direkt under uppgiftslistan hör blocket till den, och står lika nära som raderna står varandra. */
.ov-tasks + .ov-vantar { margin-top: var(--ov-rytm-liten); }
.ov-vantar + .ov-nytt, .ov-tasks + .ov-nytt { margin-top: var(--ov-rytm-liten); }

/* ── Senast i huset ─────────────────────────────────────────────────── */
/* En lista på kortets yta, så texten bär --ink och --ink-2 som resten av korten. Det olästa bär
   ordet Nytt på en mjuk yta (--on-soft), inte bara en prick. */
.ov-senast-lista { list-style: none; margin: 0; padding: 6px; display: grid; }
.ov-senast-lista li + li { border-top: var(--bw-thin) solid var(--line-soft); }
.ov-senast-rad { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 12px; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
a.ov-senast-rad:hover { background: var(--paper-2); color: var(--ink); }
.ov-senast-rad .hk-av { flex: none; margin: 0; }
.ov-senast-text { display: grid; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ov-senast-text b { font-weight: 700; }
.ov-senast-text small { color: var(--ink-2); font-size: 13.5px; }
.ov-senast-ny {
  flex: none; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--sky-soft); color: var(--on-soft); font: 700 12px/1.3 var(--f-body);
}
.ov-senast-tom { max-width: 64ch; }
@media (prefers-reduced-motion: reduce) {
  .ov-handla > svg:last-child { transition: none; }
  .ov-handla:hover > svg:last-child { transform: none; }
}
.ov-rum-tom a { font-weight: 700; color: var(--sky-ink); margin-left: 4px; }