/* Rummen, idékorten och tavlan: det ni vill göra med huset. Läses efter sida-oversikt och
   sida-planering (som fortfarande har rummens och tavlans grundregler) och före husse-vuxen,
   så selektorerna här är avgränsade till sidan och krockar inte med det vuxna lagret.
   Färger kommer ur tokens. Rummens kulörprov är undantaget: deras färg är husets egen data. */

/* ══ Rummen: listan som kort ═════════════════════════════════════════════ */
.rum-sida .rooms-side { padding: 18px 12px; }
.rum-sida .rooms-side > .kicker { margin: 0 0 4px 6px; }
.rum-sida .floor-head { margin: 16px 6px 8px; padding: 0 0 6px; }
.rum-kort-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.rum-sida .room-link.rum-kort {
  display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; width: 100%; min-height: 60px; padding: 8px;
  border: var(--bw-thin) solid transparent; border-radius: var(--r-m); color: var(--ink); text-decoration: none;
  transition: transform .2s var(--spring), border-color .15s, background-color .15s;
}
.rum-sida .room-link.rum-kort:hover { background: var(--paper-2); transform: translateX(2px); }
.rum-sida .room-link.rum-kort:active { transform: scale(.98); }
.rum-sida .room-link.rum-kort.active {
  background: var(--tile-soft); border-color: var(--line-strong); border-left-width: var(--bw-thin);
}
.rum-sida .room-link.rum-kort.active .label { color: var(--on-soft); }
.rum-sida .room-link.rum-kort.active small { color: var(--on-soft); }
.rum-sida .room-link.rum-kort:focus-visible { outline-width: 3px; outline-style: solid; outline-offset: 2px; }

.rum-kort-bild {
  flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: var(--tile); color: var(--on-color); border: var(--bw-thin) solid var(--line);
}
.rum-kort-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rum-kort-text { display: grid; gap: 1px; min-width: 0; }
.rum-sida .rum-kort .label { font: 700 16px/1.2 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.rum-kort-text small { font-size: 13px; color: var(--ink-2); }
.rum-nytt { margin: 18px 6px 0; padding-top: 14px; border-top: var(--bw-thin) solid var(--line); }

/* ══ Rummets hjälte ══════════════════════════════════════════════════════ */
.rum-hjalte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 40%); gap: 0; align-items: stretch;
  margin: 0 0 30px; background: var(--tile-soft); color: var(--on-soft);
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-l); overflow: hidden;
}
.rum-hjalte-text { display: grid; align-content: center; gap: 8px; padding: 30px 32px; min-width: 0; }
.rum-hjalte .kicker.eyebrow { margin: 0; color: var(--on-soft); }
.rum-hjalte h1 {
  margin: 0; font: 800 clamp(36px, 4.6vw, 58px)/.98 var(--f-display); letter-spacing: -.03em;
  color: var(--on-soft); overflow-wrap: anywhere;
}
.rum-hjalte .room-summary { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: var(--on-soft); }
.rum-pa-gang { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--on-soft); font-size: 15px; }
.rum-pa-gang b { font-weight: 700; }
.rum-hjalte .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.rum-hjalte-bild { position: relative; min-height: 220px; display: grid; place-items: center; }
.rum-hjalte.med-bild .rum-hjalte-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Utan bild en dämpad ton av rummets färg. Hela blocket i mättad syren var den största färgytan i
   appen och lyste i mörkt läge; prylens sida har samma ruta mjuk. */
.rum-hjalte.utan-bild .rum-hjalte-bild {
  background: color-mix(in srgb, var(--tile) 40%, var(--tile-soft)); border-left: var(--bw-thin) solid var(--line);
  color: var(--on-soft);
}
.rum-hjalte.utan-bild .rum-hjalte-bild .husse { transform: rotate(-4deg); }

/* ══ Idéerna som kort ════════════════════════════════════════════════════ */
.rum-ideer .ov-sec-head { margin-top: 0; }
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }

.rooms-body .card.idea-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 14px;
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-m); box-shadow: none; overflow: hidden;
  transition: transform .22s var(--spring), box-shadow .22s var(--spring), border-color .15s;
}
/* Kanten upptill visar läget i färg; pillan bredvid rubriken säger det i ord. */
.rooms-body .card.idea-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--sky); }
.rooms-body .card.idea-card--soon::before { background: var(--sun); }
.rooms-body .card.idea-card--ok::before { background: var(--mint); }
.rooms-body .card.idea-card:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: var(--line-strong); }

.idea-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.idea-card .idea-head .title { margin: 0; font: 700 20px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.idea-card .pill.idea-status {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px;
  font: 700 13.5px/1 var(--f-body); border-radius: var(--r-pill); cursor: pointer;
  transition: transform .2s var(--spring), filter .15s;
}
.idea-card .pill.idea-status:hover:not(:disabled) { transform: scale(1.05); }
.idea-card .pill.idea-status:active:not(:disabled) { transform: scale(.96); }
.idea-card .pill.idea-status:disabled { cursor: default; }
.idea-card .pill.idea-status:focus-visible { outline-width: 3px; outline-style: solid; outline-offset: 2px; }

.idea-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.idea-cost { color: var(--ink-2); font-weight: 700; }
.idea-cost b { font: 800 30px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); margin-right: 2px; }
.idea-fact { display: inline-flex; align-items: center; gap: 5px; }
.idea-note { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.idea-link { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.idea-link a { color: var(--sky-ink); }
.idea-card .pro-note { margin: 0; color: var(--on-soft); }

.idea-foot { padding-top: 8px; border-top: var(--bw-thin) solid var(--line); margin-inline: -6px; }
.idea-social { display: flex; flex-wrap: wrap; gap: 2px; }
.idea-edit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: -6px; }
.idea-edit-knappar { display: flex; gap: 2px; margin-right: -8px; }
.idea-act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink);
  font: 600 14px/1 var(--f-body); cursor: pointer; transition: background-color .15s, transform .2s var(--spring);
}
.idea-act:hover:not(:disabled) { background: var(--paper-2); }
.idea-act:active:not(:disabled) { transform: scale(.95); }
.idea-act:disabled { opacity: .8; cursor: not-allowed; }
.idea-act:focus-visible { outline-width: 3px; outline-style: solid; outline-offset: 1px; }
.idea-act .hk-icon { color: var(--ink-2); }
.idea-act.is-on { background: var(--pink-soft); color: var(--on-soft); }
.idea-act.is-on .hk-icon { color: var(--tomato-ink); fill: currentColor; }
.idea-act.is-on .hk-icon path { fill: currentColor; }
@media (min-width: 761px) { .idea-edit .btn-sm { min-height: 40px; } }
.idea-card .comments { margin: 0; }

/* ══ Rummets fakta: kulörer som färgprov, mått som siffror ══════════════ */
.rum-sida .rum-fakta-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px;
  background: none; border: 0; border-radius: 0;
}
/* Som ett färgkort från butiken: provet överst, kulören under. */
.rum-sida .rum-fakta-lista .rum-fakta-rad,
.rum-sida .rum-fakta-lista .rum-fakta-rad + .rum-fakta-rad {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 14px; border: var(--bw-thin) solid var(--line); border-radius: var(--r-m);
  background: var(--card); transition: border-color .15s, transform .2s var(--spring);
}
.rum-sida .rum-fakta-lista .rum-fakta-rad:hover { border-color: var(--line-strong); }
.rum-sida .rum-fakta-lista .rum-fakta-rad:has(.rum-fakta-form) { grid-column: 1 / -1; }
.rum-sida .rum-fakta-lista .rum-fakta-rad > .rum-fakta-form { grid-column: 1 / -1; }
.rum-fakta-prov {
  width: 100%; height: 64px; border-radius: 12px; background: var(--prov);
  border: var(--bw-thin) solid var(--line-strong);
}
.rum-fakta-ikon {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-2);
}
.rum-sida .rum-fakta-lista .rum-fakta-text { grid-column: 1 / -1; grid-row: 2; }
.rum-sida .rum-fakta-lista .rum-fakta-rad > .btn { grid-column: 2; grid-row: 1; margin: -6px -6px 0 0; }
.rum-fakta-rad.is-matt .rum-fakta-text b { font: 800 22px/1.1 var(--f-display); letter-spacing: -.02em; }

/* ══ Tavlan ══════════════════════════════════════════════════════════════ */
.tavla .board-col-head .name { display: inline-flex; align-items: center; gap: 8px; }
.tavla .bc-cost { margin-top: 3px; font: 800 18px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.tavla .board-card { transition: transform .2s var(--spring), box-shadow .2s var(--spring), opacity .15s; }
.tavla .board-card:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.tavla-filter { max-width: 100%; min-width: 0; }
/* Ett hus med många våningar får fler knappar än skärmen rymmer; raden rullar i stället för att klippas. */
.tavla-filter .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tavla-filter .seg-btn { flex: none; white-space: nowrap; }
.tavla:focus-visible { outline-width: 3px; outline-style: solid; outline-offset: 4px; border-radius: var(--r-l); }

/* Dra och släpp (tavla.js). Kortet är handtaget för den som får redigera; läsarens kort går att
   markera och kopiera som vanlig text. Tryck och håll ska inte öppna telefonens text- eller bildmeny. */
.tavla .board-card { flex-wrap: wrap; }
.tavla.kan-flytta .board-card { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tavla.kan-flytta .board-card button { cursor: pointer; }
.tavla.is-drar, .tavla.is-drar .board-card { cursor: grabbing; }
.tavla.is-drar .board-card:hover { transform: none; box-shadow: 0 2px 0 var(--line-soft); }
.tavla .board-card.is-haller { transform: scale(.98); box-shadow: var(--lift); }
/* Platsen kortet lyftes från: genomskinlig och streckad, så att det syns var det låg. */
.tavla .board-card.is-dragging { opacity: .5; outline: 2px dashed var(--line-strong); outline-offset: -2px; transform: none; }
.bc-acts { flex: none; display: flex; flex-direction: column; gap: 6px; }
/* Samma runda knapp som pilen, men en egen klass: pilen är "nästa steg" och testerna letar efter den. */
.bc-flytta-knapp {
  flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: var(--bw-thin) solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink);
  transition: transform .18s var(--spring);
}
.bc-flytta-knapp:hover:not(:disabled), .bc-flytta-knapp[aria-expanded="true"] { background: var(--sky-soft); color: var(--on-soft); }
.bc-flytta-knapp:disabled { opacity: .55; cursor: not-allowed; }
/* Flyttlistan: tangentbordets och skärmläsarens väg, samma flyttar som att dra. */
.bc-val {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; padding-top: 10px;
  border-top: var(--bw-thin) solid var(--line-soft);
}
.bc-val .btn { min-height: 40px; }
/* Kopian som följer pekaren ligger i <body>, utanför kolumnen, och får därför kortets form här. */
.board-card.tavla-spoke {
  position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px 10px 14px;
  border-radius: var(--r-s); box-shadow: var(--lift); opacity: .96; cursor: grabbing;
}
.board-card.tavla-spoke .bc-main { flex: 1; min-width: 0; }
.board-card.tavla-spoke .title { margin: 0; font: 700 16px/1.2 var(--f-display); }
.board-card.tavla-spoke .bc-cost { margin-top: 3px; font: 800 18px/1 var(--f-display); color: var(--ink); }
.board-card.tavla-spoke .step-btn, .board-card.tavla-spoke .bc-flytta-knapp { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.board-card.tavla-spoke .bc-val { display: none; }
/* Linjen mellan korten där kortet landar. Bläck i himmelsfärg och en kant i kortets färg, så att den
   syns både mot kolumnens yta och mot ett kort, i ljust och mörkt. */
.tavla-linje {
  position: fixed; left: 0; top: 0; z-index: 999; height: 4px; border-radius: 2px; pointer-events: none;
  background: var(--sky-ink); box-shadow: 0 0 0 2px var(--card);
}
.tavla-linje[hidden] { display: none; }
@media (forced-colors: active) {
  .tavla-linje { background: Highlight; }
  .tavla .board-card.is-dragging { outline-color: Highlight; }
}

/* ══ Tidslinjen ═════════════════════════════════════════════════════════ */
.tl-card { transition: transform .22s var(--spring), box-shadow .22s var(--spring); }
.tl-card:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.tl-items li { transition: border-color .15s, background-color .15s; }
.tl-items li:hover { border-color: var(--line-strong); background: var(--card); }

/* ══ Smal skärm ══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Rummen under det valda rummet, två kort i bredd: en bläddervy över huset. */
  .rum-sida .rum-kort-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rum-sida .room-link.rum-kort { flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 6px 10px; border-color: var(--line); background: var(--card); }
  .rum-sida .room-link.rum-kort.active { background: var(--tile-soft); }
  .rum-kort-bild { width: 100%; height: 60px; }
  .rum-kort-text { padding: 0 4px; }

  .rum-hjalte { grid-template-columns: 1fr; }
  .rum-hjalte-bild { order: -1; min-height: 160px; }
  .rum-hjalte.utan-bild .rum-hjalte-bild { min-height: 120px; border-left: 0; border-bottom: var(--bw-thin) solid var(--line); }
  .rum-hjalte-text { padding: 20px; }
  .rum-hjalte .actions .btn { flex: 1 1 auto; justify-content: center; }

  .rooms-body .card.idea-card { padding: 18px 16px 12px; }
  .idea-foot { justify-content: flex-start; }

  /* Tavlan: kolumnerna i en rad som man sveper mellan, med nästa kolumn synlig i kanten. */
  .board.kanban.tavla {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: -16px; padding: 4px 16px 12px; scroll-padding-inline: 16px; gap: 12px;
  }
  .tavla .kcol { scroll-snap-align: start; min-width: 0; }
  /* Fästpunkterna drog tillbaka raden medan ett kort rullade den till nästa kolumn. */
  .board.kanban.tavla.is-drar { scroll-snap-type: none; }
  .tavla .board-cards { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rum-sida .room-link.rum-kort, .rooms-body .card.idea-card, .idea-card .pill.idea-status, .idea-act,
  .tavla .board-card, .tl-card, .tl-items li { transition: none; }
  .tavla .board-card.is-haller { transform: none; }
  .bc-flytta-knapp { transition: none; }
  .rum-sida .room-link.rum-kort:hover, .rum-sida .room-link.rum-kort:active, .rooms-body .card.idea-card:hover,
  .idea-card .pill.idea-status:hover:not(:disabled), .idea-card .pill.idea-status:active:not(:disabled),
  .idea-act:active:not(:disabled), .tavla .board-card:hover, .tl-card:hover { transform: none; }
  .board.kanban.tavla { scroll-behavior: auto; }
}

/* ══ Idékortets omslag ═══════════════════════════════════════════════════ */
/* Bilden går ut till kortets kanter. Statuskanten ligger kvar ovanpå, så läget syns även med bild. */
.rooms-body .card.idea-card::before { z-index: 1; }
.idea-card .idea-cover { position: relative; margin: -20px -20px 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.idea-card .idea-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Antalet står på egen platta: texten ska gå att läsa vad bilden än föreställer. */
.idea-cover-count {
  position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px;
  background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 1px var(--line);
}

/* ══ Budget mot utfall på en klar idé ═════════════════════════════════════
   Domen står i ord med ikon; färgen på ordet är förstärkning. Text i -ink direkt på kortet,
   aldrig blockfärgen, så att kontrasten håller i båda lägena. */
.idea-utfall { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14.5px; }
.idea-utfall-belopp { font-weight: 700; color: var(--ink); }
.idea-utfall-dom { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; color: var(--ink-2); }
.idea-utfall--over .idea-utfall-dom { color: var(--tomato-ink); }
.idea-utfall--under .idea-utfall-dom, .idea-utfall--inom .idea-utfall-dom { color: var(--mint-ink); }
.idea-utfall-mot { font-weight: 500; color: var(--ink-2); }
.idea-utfall-lucka { flex-basis: 100%; }
.idea-utfall-knapp { margin-left: auto; }
.tavla .board-card .idea-utfall { margin-top: 6px; font-size: 13.5px; gap: 2px 8px; }
.idea-dialog-utfall { display: grid; gap: 6px; padding: 12px 14px; border: var(--bw-thin) solid var(--line); border-radius: var(--r-m); background: var(--paper-2); }
.idea-dialog-utfall .kicker { margin: 0; }
@media (max-width: 760px) {
  /* Gilla, Kommentarer och Material var 40 px höga, för lite för en tumme. */
  .idea-act { min-height: 44px; }
  .idea-utfall-knapp { margin-left: 0; min-height: 44px; }
}

/* ══ Rummet som samlad vy ════════════════════════════════════════════════
   Siffrorna under hjälten leder till avsnitten, snabbraden lägger in saker med rummet valt, och
   uppgifterna, prylarna och journalen står under idéerna. Läget bärs av ord och ikon, aldrig av
   färgen ensam; texten ligger på kortet och har därför --ink, inte blockets egen färg. */
.rum-kort-text .rum-kort-sen { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
.rum-siffror { margin: 0 0 18px; }
.rum-snabb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; }
.rum-snabb .kicker { margin: 0 4px 0 0; }
.rum-snabb .btn { display: inline-flex; align-items: center; gap: 6px; }

.rum-uppgifter, .rum-ideer, .rum-journal { margin-top: 36px; }
.rum-uppgifter .ov-sec-head, .rum-journal .ov-sec-head { margin-top: 0; }
.rum-uppgifter .uh-group { margin: 0 0 24px; }
.rum-uppgifter .uh-group .group-label h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.rum-tomt { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 15.5px; }

.rum-journal-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rum-post {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: 100%;
  min-height: 56px; padding: 10px 14px; text-align: left; font: inherit; cursor: pointer;
  background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m);
  transition: border-color .15s, background-color .15s;
}
.rum-post:hover { border-color: var(--line-strong); background: var(--paper-2); }
.rum-post-datum { font-size: 14px; color: var(--ink-2); }
.rum-post-text { display: grid; gap: 2px; min-width: 0; }
.rum-post-text b { font-weight: 700; overflow-wrap: anywhere; }
.rum-post-text small { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.rum-post-kr { font-weight: 700; white-space: nowrap; }
.rum-journal-alla { margin-top: 10px; }

@media (max-width: 760px) {
  .rum-snabb .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .rum-snabb .kicker { flex-basis: 100%; }
  /* Datumet ovanför texten: tre kolumner på 390 px lämnade texten ett par ord per rad. */
  .rum-post { grid-template-columns: minmax(0, 1fr) auto; }
  .rum-post-datum { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .rum-post { transition: none; }
}