/* Fonterna ligger i app/assets/fonts/ (variabla woff2, latin). Inget hämtas
   utifrån – appen ska fungera offline och utan CDN. Se app/README.md. */
@font-face { font-family: 'Newsreader'; src: url('assets/fonts/newsreader.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('assets/fonts/newsreader-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --bg: #F4F1E8; --panel: #F9F7F1; --card: #FFFDF8; --card2: #F4F1E8;
  --border: #E3DFD3; --border2: #EFECE3;
  --ink: #1F231D; --ink2: #5C6157; --muted: #5F6459; --faint: #9A9E94;
  --accent: #4A6B3F; --accent-ink: #F4F1E8; --accent-soft: #DCE3D0; --accent-soft-ink: #2F4A28;
  --warn: #B8623A; --warn-ink: #8A3F1F; --warn-soft: #F6E3D6; --warn-soft-ink: #8A3F1F;
  --info: #3F6B8A; --gold: #7A6B2F; --info-soft: #E1EAF1; --gold-soft: #F0E9D2;
  /* Olästa notiser: blåtonad rad. Passerade dagar i månadsvyn: blek prick. */
  --unread: #E9EEF3; --unread-border: #D5DEE6; --prick-forbi: #D5D2C6; --accent-ink2: #DCE3D0;
  /* Text ovanpå färgade ytor och foton – vit i båda lägena. */
  --på-färg: #FFFFFF;
  --new-soft: #E4E7DA; --new-ink: #3F5236; --status-new: #6E7F5E;
  --hero: #D3DCC4; --hero-fg: #3F5A34; --hero-1: #A9BC95; --hero-2: #8FA77E;
  --shadow: 0 1px 2px rgba(31,35,29,0.05), 0 8px 24px -12px rgba(31,35,29,0.18);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --r: 14px; --r-sm: 10px; --r-tum: 8px; --r-cell: 12px;
  /* skala – används i stället för lösa px-värden */
  --fs-mini: 9px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 32px;
  --fs-display: clamp(30px, 4vw, 42px); --fs-latin: clamp(16px, 1.6vw, 21px); --fs-mdag: 15px; --fs-dag: 18px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-xs: 6px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px; --tap: 44px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1D18; --panel: #20241E; --card: #262B24; --card2: #1F231D;
    --border: #363C33; --border2: #2E332B;
    --ink: #ECE9DF; --ink2: #C3C6BA; --muted: #9AA093; --faint: #6F756A;
    --accent: #8FB07C; --accent-ink: #14180F; --accent-soft: #2E3A29; --accent-soft-ink: #C6DDB5;
    --warn: #D98B63; --warn-ink: #E9A57E; --warn-soft: #3E2A20; --warn-soft-ink: #F0C4AA;
    --info: #86B0CC; --gold: #C9B56A; --info-soft: #243542; --gold-soft: #37331F;
    --unread: #22303A; --unread-border: #2E3F4B; --prick-forbi: #454B41; --accent-ink2: #2A3322;
    --new-soft: #2F3429; --new-ink: #C9D2BC; --status-new: #8A9B7A; --status-new: #8A9B7A;
    --hero: #2C3527; --hero-fg: #A9BC95; --hero-1: #3E4E36; --hero-2: #4C5E42;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #1A1D18; --panel: #20241E; --card: #262B24; --card2: #1F231D;
  --border: #363C33; --border2: #2E332B;
  --ink: #ECE9DF; --ink2: #C3C6BA; --muted: #9AA093; --faint: #6F756A;
  --accent: #8FB07C; --accent-ink: #14180F; --accent-soft: #2E3A29; --accent-soft-ink: #C6DDB5;
  --warn: #D98B63; --warn-ink: #E9A57E; --warn-soft: #3E2A20; --warn-soft-ink: #F0C4AA;
  --info: #86B0CC; --gold: #C9B56A; --info-soft: #243542; --gold-soft: #37331F;
  --unread: #22303A; --unread-border: #2E3F4B; --prick-forbi: #454B41; --accent-ink2: #2A3322;
  --new-soft: #2F3429; --new-ink: #C9D2BC; --status-new: #8A9B7A;
  --hero: #2C3527; --hero-fg: #A9BC95; --hero-1: #3E4E36; --hero-2: #4C5E42;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fs-md); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, input:focus-visible, [contenteditable]:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.serif { font-family: var(--serif); }
[hidden] { display: none !important; }
[contenteditable="true"] { border-radius: var(--r-xs); cursor: text; }
[contenteditable="true"]:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
[contenteditable="true"]:empty::before { content: attr(data-ph); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- shell ---------- */
#app { display: grid; grid-template-columns: 300px 1fr; height: 100dvh; overflow-x: clip; }
html, body { overflow-x: clip; }
.side { display: flex; flex-direction: column; gap: 16px; padding: 22px 16px 14px; border-right: 1px solid var(--border); background: var(--panel); min-height: 0; }
.main { min-width: 0; min-height: 0; overflow: auto; padding: 28px 32px 60px; display: flex; flex-direction: column; gap: 22px; }
.main > * { flex: none; width: 100%; max-width: 1320px; margin: 0 auto; }
.brand { display: flex; align-items: center; justify-content: space-between; }
.brand-tools { display: flex; align-items: center; gap: 6px; }
.brand-user { display: none; }
.ibtn { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--card); border: 1px solid var(--border); color: var(--ink2); }
.ibtn:hover, .ibtn.on { color: var(--ink); border-color: var(--accent); }
.seg { display: flex; padding: 3px; border-radius: var(--r-md); background: var(--card2); border: 1px solid var(--border); }
.seg button { flex: 1; padding: 6px 6px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); display: inline-flex; justify-content: center; align-items: center; gap: 5px; white-space: nowrap; }
.seg button em { font-style: normal; font-size: var(--fs-xs); opacity: .75; }
.seg button.warn { color: var(--warn-ink); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg button.warn.on { color: var(--warn-ink); }
.brand .logo { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 500; }
.brand svg { color: var(--accent); }

.search { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--muted); }
.search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); min-width: 0; }
.search input::placeholder { color: var(--muted); }
.search kbd { font-size: var(--fs-xs); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 5px; color: var(--muted); font-family: var(--sans); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; background: var(--card); color: var(--ink2); border: 1px solid var(--border); }
.chip:hover { background: var(--border); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.warn.on { background: var(--warn); border-color: var(--warn); color: var(--på-färg); }

.list { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow: auto; }
.list-h { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 4px 6px 2px; }
.row { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--r-sm); border: 1px solid transparent; width: 100%; text-align: left; }
.row:hover { background: var(--card2); }
.row.sel { background: var(--card); border-color: var(--border); }
.row .thumb { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-soft-ink); display: grid; place-items: center; flex: none; overflow: hidden; }
.row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row .thumb.new { background: var(--new-soft); color: var(--new-ink); }
.row .t { flex: 1; min-width: 0; }
.row .n { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 500; line-height: 1.15; }
.row .s { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .due { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; display: flex; align-items: center; gap: 6px; }
.row .due.hot { color: var(--warn-ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dot.warn { background: var(--warn); } .dot.new { background: var(--status-new); } .dot.ok { background: var(--accent); }
.empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }

.who { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); }
.who .me { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: var(--r-pill); color: var(--ink); }
.who .me:hover { background: var(--card2); }
.who .me b { font-weight: 500; }
.who .who-r { display: flex; align-items: center; gap: 8px; }
.ibtn.sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.ibtn.on { color: var(--accent); border-color: var(--accent); }
.av { width: 26px; height: 26px; border-radius: 50%; color: var(--på-färg); background: var(--muted); font-size: var(--fs-xs); font-weight: 600; display: grid; place-items: center; flex: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); white-space: nowrap; }
.btn:hover { background: var(--card2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.soft { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: var(--accent-soft); }
.btn.soft:hover { filter: brightness(1.05); }
.btn.ibtn { width: 38px; padding: 0; justify-content: center; }
.btn.sm { padding: 6px 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink2); }
.btn.ghost:hover { background: var(--card2); color: var(--ink); }
.btn.danger:hover { color: var(--warn-ink); }
.btn svg { flex: none; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
.gallery .gcard.cover { grid-row: span 2; grid-column: span 2; }
.gallery.none { grid-auto-rows: 200px; }
.gcard { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--card2); border: 1px solid var(--border); text-align: left; padding: 0; cursor: zoom-in; }
.gcard img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.gcard:hover img { transform: scale(1.03); }
.gcard.cover { border-radius: var(--r-lg); }
.gcard.cover.empty { background: var(--hero); display: grid; place-items: center; cursor: pointer; }
.gcard.cover.empty svg.art { position: absolute; right: -20px; bottom: -30px; }
.gcard.cover.empty .cap { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--card) 88%, transparent); font-size: var(--fs-xs); font-weight: 500; }
.gtag { border: 0; position: absolute; left: 8px; top: 8px; padding: 3px 22px 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7F74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 10px; }
.gtag option { color: var(--ink); background: var(--card); }
.glabel { display: none; position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--ink); pointer-events: none; }
.glabel.cover { background: var(--ink); color: var(--bg); }
.gcard.dragging { opacity: .4; }
.gcard.over { outline: 2px solid var(--accent); outline-offset: 2px; }
.gcard[draggable] { cursor: grab; }
.gcard[draggable]:active { cursor: grabbing; }
.gtag.cover { background-color: var(--ink); color: var(--bg); }
.gtag:hover { background-color: var(--accent); color: var(--accent-ink); }
.gdate { position: absolute; left: 10px; bottom: 10px; font-size: var(--fs-xs); color: var(--på-färg); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.gtools { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.gcard:hover .gtools, .gtools:focus-within { opacity: 1; }
@media (max-width: 860px) { .gtools { opacity: .62; } }
.gtools .ic { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in oklab, var(--card) 92%, transparent); display: grid; place-items: center; color: var(--ink); }
.gtools .ic:hover { background: var(--accent); color: var(--accent-ink); }
.gcard.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--border); background: transparent; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; }
.gcard.add:hover { color: var(--accent); border-color: var(--accent); }
.gcard.add.less { border-style: solid; color: var(--muted); }
.facts-list .fact:last-child { border-bottom: 0; }

/* ---------- plant view ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.head .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.badge { padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; background: var(--new-soft); color: var(--new-ink); border: 0; }
.badge.warn { background: var(--warn-soft); color: var(--warn-soft-ink); }
.badge.ok { background: var(--accent-soft); color: var(--accent-soft-ink); }
.head h1 { font-family: var(--serif); font-size: var(--fs-display); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.head .latin { font-family: var(--serif); font-size: var(--fs-latin); font-style: italic; font-weight: 400; color: var(--ink2); letter-spacing: 0; }
.head .actions { display: flex; gap: 8px; flex-wrap: wrap; }


.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grid .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card.span2 { grid-column: span 2; }
.card.tint { background: var(--panel); }
.card h2 { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; margin: 0; }
.card .ch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card .ch .hint { font-size: var(--fs-xs); color: var(--muted); }

.task { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ic tt btn" "ic meta btn" "ic last btn"; column-gap: 12px; row-gap: 1px; align-items: center; padding: 9px 11px; border-radius: var(--r-md); background: var(--panel); cursor: pointer; }
.task .ic { grid-area: ic; } .task .tt { grid-area: tt; } .task .meta { grid-area: meta; } .task .last { grid-area: last; justify-self: start; } .task .btngrp { grid-area: btn; }
.task:hover { background: var(--card2); } .task.hot:hover, .task.late:hover { background: color-mix(in oklab, var(--warn) 16%, var(--card)); }
.task.hot { background: var(--warn-soft); }
.task.late { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); }
.task .ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.task.hot .ic, .task.late .ic { background: color-mix(in oklab, var(--warn) 22%, transparent); color: var(--warn-ink); }
.task .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task .tl { display: flex; align-items: baseline; gap: 0 8px; flex-wrap: wrap; }
.task .tt b { font-weight: 500; }
.task .meta small, .task .last { color: var(--muted); font-size: var(--fs-xs); }
.task .last { font-style: italic; white-space: nowrap; }
.task .due { font-size: var(--fs-xs); font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task.hot .due, .task.late .due { color: var(--warn-ink); }
/* Punkten före "om 4 d" bara där rubrik och due brukar rymmas på samma rad –
   på smal skärm hamnar due ibland på rad 2, och då ska den inte börja med "·". */
@media (min-width: 480px) { .task .due::before, .head .meta .sedan::before { content: '·'; margin-right: 6px; } }
.task .x { color: var(--muted); opacity: .55; }
.task:hover .x, .task .x:hover, .task .x:focus-visible { opacity: 1; }

.fact { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border2); font-size: var(--fs-sm); }
.fact:last-child { border-bottom: 0; }
.fact .k { color: var(--muted); flex: none; }
.fact .v { font-weight: 500; text-align: right; min-width: 0; }

/* Tom åtgärdsplan utan problemtext: bara rubriken och "Lägg till steg". */
.card.plan.ihop .problem, .card.plan.ihop .adder { display: none; }
.card.plan.ihop .ch { align-items: center; }
.problem { font-size: var(--fs-sm); color: var(--ink2); line-height: 1.45; padding: 9px 11px; background: var(--card2); border-radius: var(--r-sm); }
.step { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.step .cb { width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--faint); flex: none; display: grid; place-items: center; color: var(--accent-ink); }
.step.done .cb { background: var(--accent); border-color: var(--accent); }
.step.done .tx { color: var(--muted); text-decoration: line-through; }
.step .tx { flex: 1; }
.step .x { color: var(--muted); opacity: .55; }
.step:hover .x, .step .x:hover, .step .x:focus-visible { opacity: 1; }
/* Lägg till-rader: rutnät i stället för flex-wrap, så att knappen aldrig
   hamnar ensam på en rad. Standard är + · fält · knapp. */
.adder { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-sm); }
.adder input { border: 0; background: transparent; outline: 0; color: var(--ink); min-width: 0; width: 100%; }
.adder > .btn { justify-self: end; }
.adder input::placeholder { color: var(--muted); }
/* Alla fält, inte bara sök och adder – standardgrå klarar inte AA. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.adder input[type="number"] { width: 48px; text-align: center; min-height: var(--tap); }
.adder select { min-width: 0; min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card2); color: var(--ink); padding: 0 6px; }
.adder .intervall { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
/* Ny uppgift, Snabbfakta och Källor har fler fält: + och första fältet på rad
   1, resten på rad 2 med knappen längst till höger. Ett rutnät på en rad kan
   inte radbryta, och på smal desktop krympte textfältet då till några pixlar. */
.adder.uppg { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "plus titel titel titel" "typ typ int knapp"; }
.adder.uppg > svg { grid-area: plus; }
.adder.uppg > input { grid-area: titel; }
.adder.uppg > select { grid-area: typ; }
.adder.uppg > .intervall { grid-area: int; }
.adder.uppg > .btn { grid-area: knapp; }
.adder[data-form="fact"], .adder[data-form="src"] { grid-template-columns: auto minmax(0, 1fr) auto; }
.adder[data-form="fact"] > input:first-of-type, .adder[data-form="src"] > input:first-of-type { grid-column: 2 / -1; }
.adder[data-form="fact"] > input:last-of-type, .adder[data-form="src"] > input:last-of-type { grid-column: 2; }
@media (min-width: 861px) { .adder.uppg > select { justify-self: start; max-width: 100%; } }
/* Snabbfakta och Källor ligger i den smala högerkolumnen: där får båda fälten
   full bredd och knappen en egen rad, tills kolumnen är bred nog. */
@media (min-width: 861px) and (max-width: 1199px) {
  .adder[data-form="fact"] > input:last-of-type, .adder[data-form="src"] > input:last-of-type { grid-column: 2 / -1; }
  .adder[data-form="fact"] > .btn, .adder[data-form="src"] > .btn { grid-column: 2 / -1; }
}
/* Bred skärm: Ny uppgift ryms på en rad. */
@media (min-width: 1200px) {
  .adder.uppg { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "plus titel typ int knapp"; }
}

/* Loggpost: rubrikraden överst (datum · avatar · typ · rubrik · ×), texten
   och fotot under i full bredd – annars blir ett långt råd en smal spalt. */
.entry { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-top: 1px solid var(--border2); }
.entry .eh { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
/* Texten centreras mot avatarens 26 px även när rubriken går på två rader. */
.entry .eh > .d, .entry .eh > .k { padding-top: 4px; }
.entry .eh > .ti { padding-top: 3px; }
.entry .d { flex: none; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.entry .k { flex: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.entry .k.Problem { color: var(--warn-ink); } .entry .k.Vattning { color: var(--info); } .entry .k.Näring { color: var(--gold); } .entry .k.Råd { color: var(--accent); }
.entry .k.Foto, .entry .k.Info, .entry .k.Anteckning, .entry .k.Klart { color: var(--muted); }
/* Korta anteckningar sparas bara som rubrik – då får den radbrytas. Finns
   brödtext räcker en rad, hela texten står ju under. */
.entry .ti { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.entry.har-text .ti { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .no { font-size: var(--fs-sm); color: var(--ink2); white-space: pre-wrap; }
.entry .no.klipp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.entry.oppen .no.klipp { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.entry .visamer { align-self: flex-start; position: relative; font-size: var(--fs-sm); }
.entry .visamer::after { content: ''; position: absolute; inset: -12px -8px; }
.entry img { display: block; align-self: flex-start; max-width: 100%; max-height: 160px; border-radius: var(--r-sm); margin-top: 2px; }
.entry .x { flex: none; margin-left: auto; color: var(--muted); opacity: .55; }
.entry:hover .x, .entry .x:hover, .entry .x:focus-visible { opacity: 1; }

/* Loggformuläret: typen som chip-rad ovanför fältet, så att texten får bredden. */
.logform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px dashed var(--border); border-radius: var(--r-md); }
.loggtyper { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.loggtyper label { position: relative; display: inline-flex; }
.loggtyper input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.loggtyper .chip { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding-inline: var(--sp-2); }
.loggtyper input:checked + .chip { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: var(--accent-soft); font-weight: 600; }
.loggtyper input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }
/* På mobil fyller de fyra valen raden, så att alla ryms utan att bryta. */
@media (max-width: 860px) { .loggtyper label { flex: 1 1 auto; } }
.logform input { border: 0; background: transparent; outline: 0; color: var(--ink); min-width: 0; }

.src { display: flex; gap: 8px; font-size: var(--fs-sm); align-items: baseline; flex-wrap: wrap; }
.src a { min-width: 0; }
.src .n { color: var(--muted); width: 18px; flex: none; font-variant-numeric: tabular-nums; }
.src .site { color: var(--muted); font-size: var(--fs-xs); }
.src .x { color: var(--muted); opacity: .55; margin-left: auto; }
.src:hover .x, .src .x:hover, .src .x:focus-visible { opacity: 1; }
.srcs { display: grid; grid-template-columns: 1fr; gap: 6px; }

/* ---------- chat (floating) ---------- */
.drawer-bg { position: fixed; inset: 0; z-index: 40; background: color-mix(in oklab, var(--ink) 35%, transparent); animation: fade-in .18s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; height: 100dvh; z-index: 45; width: min(460px, 100vw); display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border); box-shadow: -16px 0 48px -24px rgba(0,0,0,.7); animation: slide-in .2s ease-out; }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--border2); flex: none; }
.drawer .dh h2 { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Långt växtnamn: "Chatt" som rubrik och namnet på en egen rad under. */
.drawer .dh h2.tva { line-height: 1.15; }
.drawer .dh h2 small { display: block; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.drawer .dh-r { display: flex; align-items: center; gap: 6px; }
.drawer .prov { background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; font-size: var(--fs-xs); font-weight: 500; }
.drawer .msgs { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.m { display: flex; gap: 10px; align-items: flex-start; }
.m.user { flex-direction: row-reverse; }
.m > div { display: flex; flex-direction: column; gap: 4px; max-width: 86%; min-width: 0; }
.m.user > div { align-items: flex-end; }
.mav { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-soft-ink); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; flex: none; margin-top: 2px; }
.msg { padding: 10px 14px; border-radius: var(--r-lg); font-size: var(--fs-md); white-space: pre-wrap; line-height: 1.55; }
.msg.user { background: var(--ink); color: var(--bg); border-bottom-right-radius: 4px; }
.msg.assistant { background: var(--card2); border: 1px solid var(--border2); border-top-left-radius: 4px; }
.msg.err { color: var(--warn-ink); }
.mmeta { font-size: var(--fs-xs); color: var(--muted); }
.mmeta button { color: var(--accent-soft-ink); font-size: var(--fs-xs); font-weight: 500;
  position: relative; min-height: var(--tap); padding: 0 2px; }
.mmeta button::after { content: ''; position: absolute; inset: -8px -6px; }
.mmeta button:hover { text-decoration: underline; }
.drawer .df { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border2); background: var(--panel); }
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 46px; max-height: 180px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); outline: 0; line-height: 1.4; }
.composer textarea:focus { border-color: var(--accent); }
.composer .send { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: var(--r-md); flex: none; }
.ctx { display: flex; gap: 6px; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
.ctx .ctxbtn { font-size: var(--fs-xs); padding: 4px 8px; max-width: 100%; }
.ctx .ctxbtn svg { transform: rotate(-90deg); width: 12px; height: 12px; }
.ctx .kbd { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.thinking { font-size: var(--fs-sm); color: var(--muted); padding: 10px 0; }
/* Punkterna tänds en i taget: . → .. → ... Alla tre finns hela tiden, så
   raden håller samma bredd och inget hoppar. */
.thinking .prickar { display: inline-block; }
.thinking .prickar i { font-style: normal; }
.thinking .prickar i:nth-child(2) { opacity: 0; animation: prick2 1.2s steps(1, end) infinite; }
.thinking .prickar i:nth-child(3) { opacity: 0; animation: prick3 1.2s steps(1, end) infinite; }
@keyframes prick2 { 0%, 32% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes prick3 { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thinking .prickar i { animation: none; opacity: 1; } }
.nokey { font-size: var(--fs-sm); color: var(--muted); padding: 12px; background: var(--card2); border-radius: var(--r-sm); }

/* ---------- settings ---------- */
.tabs { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--card2); border: 1px solid var(--border); width: fit-content; max-width: 100%; overflow: auto; }
.tabs button { padding: 8px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); white-space: nowrap; }
.tabs button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.settings-body { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.settings-body .seg { max-width: 360px; }
.settings-body .seg button { padding: 9px 10px; font-size: var(--fs-sm); }
.muted { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-body .fact .v { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.settings-body .fact .x { color: var(--muted); }
.proposal { margin-top: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-soft-ink); font-size: var(--fs-sm); }
.proposal b { display: block; margin-bottom: 4px; }
.proposal ul { margin: 0 0 8px; padding-left: 18px; }
.proposal li { margin: 2px 0; }
.proposal.done { background: transparent; color: var(--muted); padding: 2px 0; font-size: var(--fs-xs); }
.m > div { max-width: 92%; }

/* ---------- ny växt från foton ---------- */
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pickgrid.small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.pk { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--card2); border: 1px solid var(--border); }
.pk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk .x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--ink); display: grid; place-items: center; }
.pk .gtag { pointer-events: none; }
.pk.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--border); background: transparent; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; }
.pk.add:hover { color: var(--accent); border-color: var(--accent); }
.idres { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.idhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.idname { font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 500; border: 0; border-bottom: 1px dashed var(--border); background: transparent; padding: 0 0 2px; outline: 0; width: 100%; }
.idcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: var(--fs-sm); }
.idres b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.idres .li { padding: 3px 0; border-bottom: 1px solid var(--border2); font-size: var(--fs-sm); }
.dialog form.wide, .dialog form { max-height: 92dvh; overflow: auto; }
@media (max-width: 600px) { .idcols { grid-template-columns: 1fr; } }

/* ---------- spinner (Google-stil: roterar + dash 5→90 %) ---------- */
.spin { flex: none; animation: spin-rot 1.4s linear infinite; }
.spin circle { stroke-dasharray: 57; stroke-dashoffset: 54; transform-origin: center; animation: spin-dash 1.4s ease-in-out infinite; }
@keyframes spin-rot { to { transform: rotate(360deg); } }
@keyframes spin-dash { 0% { stroke-dashoffset: 54; transform: rotate(0); } 50% { stroke-dashoffset: 6; transform: rotate(45deg); } 100% { stroke-dashoffset: 54; transform: rotate(360deg); } }
button:disabled { opacity: .65; cursor: default; }
#toast .spin { flex: none; color: var(--bg); }

/* ---------- chat-bilder ---------- */
.composer .ibtn.cam { width: 46px; height: 46px; border-radius: var(--r-md); flex: none; color: var(--muted); }
.attach { display: flex; gap: 6px; flex-wrap: wrap; }
.attach .pk { width: 64px; height: 64px; aspect-ratio: auto; }
.mimgs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.mimgs img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-md); cursor: zoom-in; border: 1px solid var(--border2); }
.m.user .mimgs { justify-content: flex-end; }

/* ---------- misc ---------- */
.stat { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.stat .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.stat.busy .d { background: var(--gold); animation: pulse 1s infinite; }
.stat.err .d { background: var(--warn); }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
#toast button { flex: none; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--fs-xs); font-weight: 600; }
#toast { display: flex; align-items: center; gap: 10px; position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateX(var(--tdx, 0px)); animation: toast-in .18s ease-out; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); box-shadow: var(--shadow); z-index: 110; max-width: 90vw; touch-action: pan-y; transition: transform .18s ease-out, opacity .18s ease-out; }
/* Texten måste vara ett eget flexbarn med min-width: 0 – annars krymper det
   anonyma textblocket ner till sitt längsta ord och radbryter efter varje ord. */
#toast .tmsg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#toast.drar { transition: none; }
.login { display: grid; place-items: center; height: 100dvh; grid-column: 1 / -1; padding: 20px; position: relative; overflow: hidden; background: radial-gradient(900px 500px at 50% 110%, color-mix(in oklab, var(--accent) 10%, var(--bg)) 0%, var(--bg) 60%); }
.login form { position: relative; z-index: 1; }
.login .bgleaf { position: absolute; color: color-mix(in oklab, var(--accent) 7%, var(--bg)); pointer-events: none; }
.login .bgleaf svg { width: 320px; height: 320px; }
.login .bgleaf.a { left: -70px; bottom: -90px; }
.login .bgleaf.b { right: -60px; top: -80px; transform: rotate(150deg); }
.login .bgleaf.b svg { width: 300px; height: 300px; }
.login .todayline { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); padding-top: 2px; }
.login form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
.login h1 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-3xl); margin: 0; }
.login input { padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card2); outline: 0; }
.login input:focus { border-color: var(--accent); }
.login .err { color: var(--warn-ink); font-size: var(--fs-sm); }
.login .ask { margin: -6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.login .pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.login .pick-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 14px; border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--card2); cursor: pointer; font: inherit; color: var(--ink); transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.login .pick-btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.login .pick-btn:active { transform: translateY(0) scale(.98); }
.login .pick-btn .mono { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; background: var(--accent-soft); color: var(--accent-soft-ink); transition: background .15s ease, color .15s ease, transform .15s ease; }
.login .pick-btn .nm { font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.login .pick-btn.sel { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--card2)); }
.login .pick-btn.sel .mono { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.login .pick-btn.sel .nm { color: var(--ink); }
.login .btn.primary b { font-weight: 600; margin-left: 4px; }
.tabbar, .mob-back { display: none; }
.hidden-file { display: none; }
.dialog { position: fixed; inset: 0; background: color-mix(in oklab, var(--ink) 45%, transparent); display: grid; place-items: center; z-index: 80; padding: 20px; }
.dialog form { width: min(420px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.dialog h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); margin: 0; }
.dialog input, .dialog select { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card2); outline: 0; }
.dialog input:focus { border-color: var(--accent); }
.dialog label { font-size: var(--fs-xs); color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.dialog label .lbl { display: block; }
.dialog .row2 { display: flex; gap: 8px; justify-content: flex-end; }
/* Dialogernas egna mått – låg här som inline-stilar förut (paket 25/30). */
.dialog form.dlgform { width: min(560px, 100%); }
.dialog form.dlgform.bred { width: min(640px, 100%); }
.dialog .mdruta { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card2); outline: 0; font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-xs); }
.dialog .impprev { font-size: var(--fs-xs); color: var(--muted); }
.dialog .seg.smal { max-width: 340px; }
.dialog .chip.valbar { cursor: pointer; }
.dialog .chip .dold { display: none; }
.dialog .idhead .latin { font-family: var(--serif); font-style: italic; color: var(--ink2); }
.muted.mitten, .btn.mitten { text-align: center; justify-content: center; }
.login .logo { display: flex; align-items: center; gap: 9px; color: var(--accent); }
.login .logotext { color: var(--ink); font-family: var(--serif); font-size: var(--fs-2xl); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: grid; place-items: center; z-index: 90; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--r-sm); }
.lightbox .cap { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--på-färg); font-size: var(--fs-sm); opacity: .85; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  #app { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100dvh; }
  .side { min-width: 0; }
  .seg button { padding: 6px 2px; font-size: var(--fs-xs); }
  .side { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 14px 12px; }
  .side .brand { position: sticky; top: 0; z-index: 25; margin: 0 -14px; padding: 12px 14px 10px; background: var(--panel); border-bottom: 1px solid var(--border); }
  .brand-tools, .who { display: none; }
  .brand-user { display: flex; align-items: center; gap: 10px; }
  .brand-user .status { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
  .brand-user .me { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
  .brand-user .me .av { width: 32px; height: 32px; font-size: var(--fs-sm); }
  .side .list { max-height: none; overflow: visible; }
  #app.detail .side { display: none; }
  #app:not(.detail) .main { display: none; }
  .main { padding: 16px 14px 120px; gap: 16px; }
  #app.chat-open .tabbar, .mob-back { display: none; }
  .drawer { width: 100vw; border-left: 0; }
  .ctx .kbd { display: none; }
  /* Tangentbordsgenvägen "/" betyder inget på mobil. */
  .search kbd { display: none; }
  .drawer .dh { padding: 10px 12px 10px 14px; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 78px; }
  .gallery .gcard.cover { grid-column: span 4; grid-row: span 3; }
  .head h1 { flex-direction: column; align-items: flex-start; gap: 2px; }
  .head .actions { width: 100%; }
  .head .actions .btn.ibtn { flex: none; width: 44px; }
  .grid { grid-template-columns: 1fr; }
  .card.span2 { grid-column: auto; }
  .srcs { grid-template-columns: 1fr; }
  .head .actions .btn { flex: 1; justify-content: center; }
  .side { padding-bottom: 90px; }
  .mob-back { display: inline-grid; width: 30px; height: 30px; margin-right: 2px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 4px; border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
  .tabbar button svg { width: 22px; height: 22px; }
  .tabbar button.on { color: var(--accent); }
  .tabbar button.on::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .tabbar button:active { background: var(--card2); }
  .tabbar em { position: absolute; top: 2px; left: calc(50% + 6px); font-style: normal; font-size: var(--fs-xs); font-weight: 700; line-height: 16px; min-width: 16px; padding: 0 4px; border-radius: var(--r-sm); background: var(--warn-ink); color: var(--bg); text-align: center; }
  .main { padding-bottom: 100px; }
  .task .x, .step .x, .entry .x, .src .x { opacity: 1; }
  .msg { max-width: 94%; }
}

/* ── bulk / task extras (q1) ── */
.row .cb { width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--faint); flex: none; display: grid; place-items: center; color: var(--accent-ink); }
.row .cb.on { background: var(--accent); border-color: var(--accent); }
.btngrp { display: flex; align-items: stretch; flex: none; }
/* I en knappgrupp plattas bara den vänstra knappens högerhörn – sista knappen
   behåller sina, annars blir hela gruppen fyrkantig i högerkanten. */
.btngrp > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn.caret { padding: 0 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; min-width: 26px; }
.btn.caret svg { transform: rotate(90deg); }
.btn.caret.on { background: var(--accent-soft); color: var(--accent-soft-ink); }
.stats { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.stats small { font-size: var(--fs-xs); color: var(--muted); }
.spark { display: block; flex: none; }
.snz { color: var(--warn-ink); font-weight: 500; }
.lnk { background: none; border: 0; padding: 0; color: var(--accent); font-size: inherit; text-decoration: underline; cursor: pointer; }
.task.snoozed { opacity: .6; }
.task.snoozed.hot, .task.snoozed.late { background: var(--panel); box-shadow: none; }
small .now { color: var(--accent); font-weight: 600; }

/* ── photos: captions, lightbox, timeline (q2) ── */
.gcap { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: var(--fs-xs); color: var(--på-färg); text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.entry .k.Foto { color: var(--muted); }
.entry img[data-act] { cursor: zoom-in; }
.lightbox.lb { padding: 12px; align-items: stretch; }
.lbx { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 900px; width: 100%; max-height: 100%; margin: auto; align-items: center; }
.lbx img { max-height: min(72vh, 900px); width: auto; max-width: 100%; object-fit: contain; }
.lbclose { position: absolute; top: -4px; right: -4px; z-index: 2; background: rgba(0,0,0,.5); color: var(--på-färg); }
.lbbar { width: 100%; display: flex; flex-direction: column; gap: 8px; background: var(--card); border-radius: var(--r-md); padding: 10px 12px; }
.lbcap { display: flex; align-items: center; gap: 10px; }
.lbdate { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.capin { flex: 1; min-width: 0; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card2); color: var(--ink); font-size: var(--fs-sm); }
.lbacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lbacts .cmp { display: flex; align-items: center; gap: 0; }
.lbtag { padding: 0 8px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card2); color: var(--ink); font-size: var(--fs-xs); flex: none; }
.lbacts .cmp .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cmpsel { padding: 0 8px; height: 30px; border-radius: 0 9px 9px 0; border: 1px solid var(--border); border-left: 0; background: var(--card2); color: var(--ink); font-size: var(--fs-xs); max-width: 180px; }
.lbacts .danger { margin-left: auto; color: var(--warn-ink); }

/* ── settings: inköp + rum ── */
.chip.sm { padding: 2px 8px; font-size: var(--fs-xs); flex: none; }
.roomrow { display: grid; grid-template-columns: 1fr auto 2fr; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border2); }
.roomrow .rn { display: flex; flex-direction: column; min-width: 0; }
.roomrow .rn b { font-weight: 500; }
.roomrow select, .roomrow input { padding: 6px 9px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card2); color: var(--ink); font-size: var(--fs-sm); min-width: 0; }
@media (max-width: 600px) { .roomrow { grid-template-columns: 1fr 1fr; } .roomrow input { grid-column: 1 / -1; } }

/* ── semester ── */
.vacform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; }
.vacform label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.vacform label.wide, .vacform .row2 { grid-column: 1 / -1; }
.vacform input { padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card2); color: var(--ink); font-size: var(--fs-sm); min-width: 0; }
.vaclink { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.vaclink input { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card2); color: var(--ink2); font-size: var(--fs-xs); font-family: ui-monospace, monospace; }
@media (max-width: 860px) {
  .task { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ic tt tt" "meta meta meta" "last last btn"; row-gap: 8px; align-items: center; padding: 11px 11px 11px 12px; position: relative; }
  .task .tl { align-items: center; }
  .task .tt b { font-size: var(--fs-lg); }
  .task .due { font-size: var(--fs-md); }
  .task .meta small { font-size: var(--fs-sm); }
  .task .last { font-size: var(--fs-sm); align-self: end; padding-bottom: 8px; }
  .task .x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; }
  .task .btngrp { justify-self: end; }
  .gtools, .gtag { display: none; }
  .gcard .glabel { display: block; }
  .lbacts .danger { margin-left: auto; }
  .task .btngrp .btn { height: 42px; font-size: var(--fs-md); padding: 0 16px; }
  .task .btngrp .btn.caret { padding: 0 12px; min-width: 44px; }
  .lightbox.lb { padding: 8px; }
}
.btn.primary.danger { background: var(--warn); border-color: var(--warn); color: var(--på-färg); }

.req { color: var(--warn-ink); font-weight: 700; }
.dialog label input:invalid:not(:placeholder-shown) { border-color: var(--warn); }

.picksrc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Valarket (välj() i sheet.js): lika breda knappar som fyller raden, luft ner mot gestfältet. */
.valgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-2); }
.valgrid .btn.big { width: 100%; justify-content: center; text-align: center; }
.btn.big { flex-direction: column; height: auto; padding: 18px 10px; gap: 8px; font-size: var(--fs-sm); border-radius: var(--r-md); }
.btn.big svg { width: 26px; height: 26px; color: var(--accent); }

#toast.long { left: 12px; right: 12px; bottom: 96px; transform: none; margin: 0 auto; max-width: 520px; border-radius: var(--r-lg); align-items: flex-start; text-align: left; line-height: 1.4; padding: 12px 16px; cursor: pointer; }

/* På mobil går snackbaren kant till kant ovanför tabbaren. Full bredd gör att
   texten radbryter normalt i stället för efter varje ord, och när den ligger
   mot skärmkanterna ska hörnen vara nästan raka – en pillerform som nuddar
   båda kanterna ser fel ut. */
@media (max-width: 860px) {
  #toast, #toast.long {
    left: 0; right: 0; bottom: calc(70px + env(safe-area-inset-bottom));
    transform: translateX(var(--tdx, 0px)); margin: 0; max-width: none;
    border-radius: var(--r-sm); text-align: left; line-height: 1.4; padding: 12px 16px;
  }
  #toast.long { align-items: flex-start; }
  /* Full bredd ger plats åt en riktig träffyta på Ångra – i pillerformen på
     desktop hade knappen bara varit 24 px hög. */
  #toast button { min-height: 44px; padding: 0 16px; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
}

/* ── modellval ── */
.modellist { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.modelrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card2); text-align: left; color: var(--ink2); }
.modelrow:hover { border-color: var(--accent); }
.modelrow.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-ink); }
.modelrow .mr-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.modelrow b { font-weight: 600; font-size: var(--fs-sm); }
.modelrow small { color: var(--muted); font-size: var(--fs-xs); }
.modelrow.on small { color: var(--accent-soft-ink); opacity: .75; }
.lbl-hint { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); margin-left: 4px; }

/* ── logga vattning: split-knapp med datumval ── */
.btngrp.water { flex: none; }
/* Bara vänstra halvan plattas till – annars träffar regeln även pilknappen,
   som redan nollar sina vänstra hörn, och då blir den fyrkantig runt om. */
.btngrp.water > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn.primary.caret, .btn.primary.caret.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; padding: 0 10px; min-width: 38px; justify-content: center; box-shadow: inset 1px 0 0 color-mix(in oklab, var(--accent-ink) 25%, transparent); }
.btn.primary.caret.on { filter: brightness(1.08); }

.mer { width: 100%; justify-content: center; margin-top: 10px; }

/* Flikraden scrollar på mobil – toning i kanten visar att det finns fler. */
.tabs { position: relative; scroll-snap-type: x proximity; }
.tabs > button { scroll-snap-align: start; }
.tabs-wrap { position: relative; }
.tabs-wrap { width: fit-content; max-width: 100%; }
@media (max-width: 860px) {
  .tabs-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; pointer-events: none; border-radius: 0 12px 12px 0; background: linear-gradient(to right, transparent, var(--bg)); }
}

/* ---------- sheet: en lucka underifrån på mobil, en ruta mitt på skärmen på desktop ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 85; background: color-mix(in oklab, var(--ink) 45%, transparent); display: flex; align-items: flex-end; justify-content: center; animation: sheet-bg-in .14s ease-out; }
.sheet { width: 100%; max-width: 520px; max-height: 88dvh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--r-lg) 20px 0 0; box-shadow: var(--shadow); animation: sheet-in .18s cubic-bezier(.2,.8,.3,1); padding-bottom: env(safe-area-inset-bottom); }
.sheet.smal { max-width: 420px; }
.sheet-h { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border2); }
.sheet-h .grepp { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border); }
.sheet-h h2 { flex: 1; margin: 0; font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; }
.sheet-h .ibtn { flex: none; }
.sheet-b { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.sheet-f { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--border2); }
.sheet-f .btn { flex: 1; justify-content: center; min-height: 44px; }
.sheet .ph { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.sheet .meny { display: flex; flex-direction: column; gap: 2px; }
.sheet .meny button, .sheet .meny a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--ink2); text-align: left; }
.sheet .meny button span, .sheet .meny a span { flex: 1; }
.sheet .meny button:hover, .sheet .meny a:hover { background: var(--card2); color: var(--ink); text-decoration: none; }
.sheet .meny button.on { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 500; }
.sheet .meny button.danger { color: var(--warn-ink); }
.sheet .meny hr { border: 0; border-top: 1px solid var(--border2); margin: 6px 0; }
.sheet .meny label.chk { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-md); cursor: pointer; }
.sheet .meny label.chk:hover { background: var(--card2); }
.sheet .meny label.chk input { accent-color: var(--accent); margin: 0; width: 22px; height: 22px; position: relative; }
.sheet .meny label.chk input::after { content: ''; position: absolute; inset: -11px; }
.sheet .meny label.chk small { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.sheet .datumval { display: flex; gap: 8px; }
.sheet .datumval .btn { flex: 1; justify-content: center; min-height: 44px; }
.sheet .datumval.fyra .btn { padding: 0; }
.sheet .datumrad { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-md); color: var(--ink2); }
.sheet .datumrad input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card2); color: var(--ink); font: inherit; }
@keyframes sheet-bg-in { from { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(14px); opacity: 0; } }
@media (min-width: 861px) {
  .sheet-bg { align-items: center; }
  .sheet { border: 1px solid var(--border); border-radius: var(--r-lg); }
  .sheet-h .grepp { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-bg { animation: none; } }

/* ---------- träffytor på mobil: tummen behöver 44 px ---------- */
@media (max-width: 860px) {
  .btn, .btn.sm, .ibtn, .ibtn.sm, .chip, .seg button, .tabs button, .pick-btn,
  .adder button, .logform button, .sheet .meny button, .sheet .meny a,
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: var(--tap); }
  .seg button, .tabs button, .chip { padding-inline: var(--sp-3); }
  .ibtn, .ibtn.sm, .btn.ibtn { min-width: var(--tap); }
  .logform input, .adder input { padding-block: var(--sp-2); }

  /* små ikonknappar: behåll storleken, väx träffytan utanför */
  .x, .cb, .me, .badge, .ibtn.sm, .glabel, .src a, .entry .x { position: relative; }
  .x::after, .cb::after, .me::after, .badge::after, .src a::after { content: ''; position: absolute; inset: -15px; }
  .x, .cb { opacity: .62; }
  .x:hover, .x:focus-visible, .cb:hover, .cb:focus-visible { opacity: 1; }

  /* rader med redigerbar text: hela raden blir träffyta, texten byter inte storlek */
  .fact, .step, .entry, .src li { min-height: var(--tap); }
  .fact, .step { align-items: center; }
  .fact [contenteditable], .step .tx { display: flex; align-items: center; min-height: var(--tap); }
  .fact .k { min-width: var(--tap); }
  .btngrp.water > .btn.caret { min-width: var(--tap); }
  /* rubrik och rumsrad: texten ska ligga kvar som den är, träffytan växer utanför */
  .head h1 [contenteditable], .head .meta [contenteditable] { position: relative; }
  .head h1 [contenteditable]::after, .head .meta [contenteditable]::after { content: ""; position: absolute; inset: -14px; }
}

/* ---------- fokus ska synas även på färgade knappar ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary:focus-visible, .btn.primary.danger:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 2px var(--bg); }

/* ---------- endast för skärmläsare ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* statusbricka: ikon + text, så färgen inte är ensam bärare */
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); }
.badge svg { flex: none; }

.chattknapp.olast { position: relative; }
.chattknapp.olast::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.list-h-r { display: flex; align-items: center; gap: var(--sp-2); }
@media (min-width: 861px) { .mob-ny { display: none; } }


/* ---------- "Nu"-remsan på växtsidan ---------- */
.nu { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; }
.nu::-webkit-scrollbar { display: none; }
.nu-chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-sm); }
.nu-chip.sen { background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.nu-chip em { font-style: normal; color: var(--muted); font-size: var(--fs-xs); }
.nu-chip.sen em { color: var(--warn-ink); font-weight: 600; }
.nu-chip svg:last-child { color: var(--accent); }
.nu-chip:hover { border-color: var(--accent); }

/* fältrader i sheets */
.sheet .falt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink2); }
.sheet .falt input { flex: 1 1 140px; min-width: 0; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card2); color: var(--ink); font: inherit; }
.sheet .typrad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.sheet .typ { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; padding: var(--sp-2) 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); color: var(--ink2); font-size: var(--fs-xs); }
.sheet .typ.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-ink); font-weight: 500; }
.sheet .typ small { font-size: var(--fs-xs); }
.sheet .snitt { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--card2); border-radius: var(--r-md); }
.sheet .snitt p { margin: 0; font-size: var(--fs-sm); }
.sheet .radera { justify-content: center; min-height: var(--tap); margin-top: var(--sp-2); color: var(--warn-ink); }
.sheet .meny button .dot { width: 9px; height: 9px; flex: none; }

/* ---------- foto: banner överst, tumnaglar i egen sektion ---------- */
.banner { display: block; }
.banner.none { display: none; }
.banner .gcard.cover { width: 100%; aspect-ratio: 16 / 9; }
.card.foton .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-2); }
.card.foton .gcard { aspect-ratio: 1; }
.card.foton .jamfor { align-self: flex-start; margin-top: var(--sp-2); }

@media (max-width: 860px) {
  /* vattningen ligger redan i "Nu"-remsan – då behövs inte den stora knappen */
  .btngrp.water.har-nu { display: none; }
  .banner .gcard.cover { max-height: 200px; }
}

/* ---------- inställningar: sektionslista på mobil ---------- */
.sektionslista { display: flex; flex-direction: column; gap: var(--sp-1); }
.sektionslista button, .jagrad { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 58px; padding: var(--sp-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); text-align: left; color: var(--ink); }
.sektionslista button:hover, .jagrad:hover { border-color: var(--accent); }
.sektionslista .t, .jagrad .t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sektionslista small, .jagrad small { color: var(--muted); font-size: var(--fs-xs); }
.sektionslista svg, .jagrad svg { color: var(--muted); flex: none; }
.jagrad .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--på-färg); font-size: var(--fs-sm); font-weight: 600; flex: none; }
.bara-smal { display: none; }
@media (max-width: 860px) {
  .bara-smal { display: inline; }
  .bara-bred { display: none; }
  .tabs-wrap { display: none; }
  .vy-settings [data-act=settingsClose] { display: inline-flex; }
}

/* ---------- bildvisaren: bläddra och jämför ---------- */
.lb .lbnav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); border-radius: 50%; background: rgba(0,0,0,.72); color: var(--på-färg); display: grid; place-items: center; }
.lb .lbnav.bak { left: var(--sp-3); } .lb .lbnav.fram { right: var(--sp-3); }
.lb .lbnav:hover { background: var(--ink); }
.lb .lbräknare { position: absolute; top: var(--sp-3); left: 50%; transform: translateX(-50%); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: rgba(0,0,0,.72); color: var(--på-färg); font-size: var(--fs-xs); }
.lb .lbjmf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%; max-height: min(70vh, 760px); min-height: 0; }
.lb .lbjmf figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); min-height: 0; }
.lb .lbjmf img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lb .lbjmf figcaption { text-align: center; color: var(--på-färg); font-size: var(--fs-xs); }
@media (max-width: 860px) { .lb .lbjmf { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; max-height: 62vh; } }

/* ---------- arkiv ---------- */
.arkivbanner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink2); }
.arkivbanner .btn { margin-left: auto; }
.row.arkiverad { opacity: .62; }
.arkivrad { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--tap); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border2); color: var(--muted); font-size: var(--fs-sm); }
.arkivrad em { font-style: normal; margin-left: auto; }
.arkivrad:hover { color: var(--ink); }

/* ---------- rum (Inställningar → Rum) ---------- */
.rumkort { gap: var(--sp-3); }
.rumkort h2 .lnk { font: inherit; color: inherit; text-decoration: none; }
.rumkort h2 .lnk:hover { text-decoration: underline; }
.rumkort .hint .sen { color: var(--warn-ink); }
.rumtumnaglar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.rumtum { width: 46px; height: 46px; border-radius: var(--r-sm); overflow: hidden; background: var(--card2); color: var(--muted); display: grid; place-items: center; border: 1px solid var(--border); }
.rumtum img { width: 100%; height: 100%; object-fit: cover; }
.rumtum.sen { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.rumfler { color: var(--muted); font-size: var(--fs-sm); }
.rumfalt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.rumfalt label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--muted); }
.rumfalt label.bred { grid-column: 1 / -1; }
.rumfalt input, .rumfalt select { min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card2); color: var(--ink); font: inherit; }
.rumknappar { display: flex; align-items: center; gap: var(--sp-2); }
.rumflytt { margin-left: auto; display: flex; gap: var(--sp-1); }
.rumflytt .ibtn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 860px) { .rumfalt { grid-template-columns: 1fr; } }

/* ---------- aktivitet och personer ---------- */
.aktrad .av, .personrad .av { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--på-färg); font-size: var(--fs-xs); font-weight: 600; }
.aktlista { display: flex; flex-direction: column; gap: 2px; }
.aktrad { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--tap); padding: var(--sp-2); border-radius: var(--r-sm); text-align: left; }
.aktrad:hover { background: var(--card2); }
.aktrad .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aktrad .t b { font-size: var(--fs-sm); font-weight: 600; }
.aktrad .t small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aktrad .d { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.personrad { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) 0; border-top: 1px solid var(--border2); }
.personrad input { flex: 1 1 120px; min-width: 0; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card2); color: var(--ink); font: inherit; }
.fargval { display: flex; gap: 4px; flex-wrap: wrap; }
.farg { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; position: relative; }
.farg::after { content: ''; position: absolute; inset: -10px; }
.farg.on { border-color: var(--ink); }

/* ---------- tillväxt ---------- */
.mattyp { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) 0; border-top: 1px solid var(--border2); }
.mattyp:first-of-type { border-top: 0; }
.matrubrik { display: flex; align-items: baseline; gap: var(--sp-2); justify-content: space-between; font-size: var(--fs-sm); }
.matgraf { display: block; }
.matrader { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.matrad { display: inline-flex; align-items: center; gap: 2px; padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--card2); color: var(--ink2); font-size: var(--fs-xs); }
.sheet .typrad.tva { grid-template-columns: repeat(2, 1fr); }
.sheet .typrad.tva .typ { flex-direction: row; justify-content: center; gap: var(--sp-2); align-items: baseline; }
.rumkort h2 .lnk { position: relative; }
.rumkort h2 .lnk::after { content: ''; position: absolute; inset: -9px -12px; }

/* markdown i chattsvar och råd */
.msg p, .no p { margin: 0 0 .5em; }
.msg p:last-child, .no p:last-child { margin-bottom: 0; }
.msg ul, .msg ol, .no ul, .no ol { margin: .25em 0 .5em; padding-left: 1.2em; }
.msg li, .no li { margin: .15em 0; }
.msg code, .no code { padding: 1px 4px; border-radius: var(--r-xs); background: color-mix(in oklab, var(--ink) 8%, transparent); font-family: ui-monospace, Menlo, monospace; font-size: .92em; }
.msg .mdrubrik, .no .mdrubrik { margin-top: .6em; }

@media (max-width: 860px) {
  /* Uppgiftsraden: två rader, "senast" flyttar in i meta-raden.
     Bara Klar-knappen behöver vara 44 px – resten är text man läser. */
  .task { grid-template-areas: "ic tt btn" "ic meta btn"; row-gap: 0; padding: var(--sp-2) var(--sp-3); }
  .task .last { display: none; }
  /* Meta får två rader innan den klipps – hela texten finns i uppgiftens sheet. */
  .task .meta small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--fs-xs); }
  .task .tt .tl { width: 100%; flex-wrap: wrap; min-width: 0; }
  .task .due { flex: none; }
  .task .tt b { flex: 0 1 auto; }
  .task .tt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .task .btngrp .btn { min-height: var(--tap); }
}
.last-inline { display: none; font-style: italic; }
@media (max-width: 860px) { .last-inline { display: inline; } }
.msg.skriver::after { content: '▍'; margin-left: 2px; animation: blink 1s steps(2) infinite; color: var(--muted); }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msg.skriver::after { animation: none; } }
.proposal .valrad { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; }
.proposal .valrad input { accent-color: var(--accent); width: 22px; height: 22px; margin-top: 2px; flex: none;
  position: relative; }
/* Rutan är liten men träffytan ska vara 44 px – etiketten runt om räcker inte
   för tap.mjs, och inte för en tumme heller. */
.proposal .valrad input::after { content: ''; position: absolute; inset: -11px; }
.proposal ul { list-style: none; padding: 0; margin: var(--sp-1) 0; }
.valfoton { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-2); }
.valfoto { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; }
.valfoto img { width: 100%; height: 100%; object-fit: cover; }
.valfoto .bock { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); color: var(--muted); display: grid; place-items: center; opacity: .6; }
.valfoto.on { border-color: var(--accent); }
.valfoto.on .bock { background: var(--accent); color: var(--accent-ink); opacity: 1; }
.gcard.vantar img { opacity: .55; }
.vantarikon { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--muted); box-shadow: var(--shadow); }
.dialoghjalp { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.filknapp { position: relative; overflow: hidden; cursor: pointer; }

/* Lägg till-rader på mobil: tätare, fälten har redan 44 px höjd. */
@media (max-width: 860px) { .adder { padding: var(--sp-1) var(--sp-3); row-gap: var(--sp-1); } }
/* Riktigt smala telefoner: Lägg till får en egen rad i full bredd. */
@media (max-width: 359px) {
  .adder.uppg { grid-template-areas: "plus titel titel titel" "typ typ int int" "knapp knapp knapp knapp"; }
  .adder.uppg > .btn { justify-self: stretch; justify-content: center; }
}

/* ---------- typfärger: blå vatten/spray, guld näring, grön övrigt ---------- */
.typ-vatten { --typ: var(--info); --typ-soft: var(--info-soft); }
.typ-naring { --typ: var(--gold); --typ-soft: var(--gold-soft); }
.typ-ovrigt { --typ: var(--accent); --typ-soft: var(--accent-soft); }
.typ-foto { --typ: var(--status-new); --typ-soft: var(--new-soft); }
.knopp { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--typ-soft); color: var(--typ); }
.knopp svg { width: 12px; height: 12px; }
[data-olasta][hidden] { display: none !important; }

/* ---------- Notiser ---------- */
.notiser, .schema { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.notiser { gap: var(--sp-2); }
.nt-h, .sc-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.nt-h h1, .sc-h h1 { margin: 0; font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.nt-antal { position: relative; top: -4px; vertical-align: middle; padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--warn-ink); color: var(--bg); font-family: var(--sans); font-size: var(--fs-sm); font-style: normal; font-weight: 600; letter-spacing: 0; }
.nt-datum { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.nt-topp { display: flex; gap: var(--sp-2); margin-top: 6px; }
.nt-topp .btn { flex: 1; justify-content: center; height: var(--tap); font-size: var(--fs-md); border-radius: var(--r-sm); }
.nt-topp .btn.primary { font-weight: 600; }
.nt-rubrik { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.nt-rubrik.sen { color: var(--warn-ink); }
.nt-rubrik em { font-style: normal; color: var(--ink2); letter-spacing: 0; }
/* Svepet: raden glider åt vänster och den gröna panelen bakom syns. */
.nt-svep { position: relative; border-radius: var(--r-md); overflow: hidden; }
.nt-svep.drar, .nt-svep.ut { background: var(--accent); }
.nt-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600; }
.nt-panel svg { width: 22px; height: 22px; }
.nt-svep.drar .nt-panel, .nt-svep.ut .nt-panel { display: flex; }
.nt-rad { position: relative; display: flex; align-items: center; width: 100%; background: var(--card); border: 1px solid var(--border2); border-radius: var(--r-md); text-align: left; cursor: pointer; transform: translateX(var(--dx, 0px)); transition: transform .18s ease-out; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Öppna-delen fyller raden (hela raden är träffyta); Klar och Fler val ligger bredvid. */
.nt-oppna, .nt-hand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 14px var(--sp-3) var(--sp-3); }
.nt-oppna { flex: 1; min-width: 0; text-align: left; border-radius: inherit; }
.nt-svep.drar .nt-rad { transition: none; }
.nt-svep.ut .nt-rad { transform: translateX(-100%); }
.nt-rad.olast { background: var(--unread); border-color: var(--unread-border); }
.nt-prick { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.nt-rad.olast .nt-prick { background: var(--info); }
.nt-tum { position: relative; flex: none; }
.nt-tum .bild { width: 40px; height: 40px; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--hero-1), var(--hero-2)); color: var(--hero-fg); }
.nt-tum .bild img, .sc-tum img, .sc-vtum img { width: 100%; height: 100%; object-fit: cover; }
.nt-tum .knopp { position: absolute; right: -6px; bottom: -6px; border: 2px solid var(--card); }
.nt-rad.olast .nt-tum .knopp { border-color: var(--unread); }
.nt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-titel { font-size: var(--fs-lg); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-titel b { font-weight: 500; }
.nt-rad.olast .nt-titel b { font-weight: 600; }
.nt-titel span, .sc-namn span { color: var(--ink2); font-weight: 400; }
.nt-meta { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-nar { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--info); white-space: nowrap; }
.nt-nar.sen { color: var(--warn-ink); }
/* Mobil: Klar och Fler val nås med svep och håll – för skärmläsare och tangentbord
   finns knapparna kvar, osynliga tills de får fokus. */
.nt-knappar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nt-rad:has(:focus-visible) .nt-knappar { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: flex; gap: var(--sp-1); padding-right: var(--sp-3); }
.nt-hint { margin: 0; padding-top: 6px; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
.nt-tomt { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); text-align: center; }
.nt-tomt .art { width: 100%; max-width: 360px; opacity: .9; }
.nt-tomt .art svg { width: 100%; height: auto; }
.nt-tomt .stort { margin: 0; font-family: var(--serif); font-size: var(--fs-2xl); }
.nt-tomt p { margin: 0; }
/* Bred skärm: Klar och Fler val står i raden. Med mus syns de när man pekar på
   raden; på pekskärm (surfplatta, liggande telefon) syns de hela tiden. */
@media (min-width: 861px) {
  .nt-knappar { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: flex; gap: var(--sp-1); padding-right: var(--sp-3); }
  .nt-hint { display: none; }
}
@media (min-width: 861px) and (hover: hover) {
  .nt-knappar { opacity: 0; pointer-events: none; transition: opacity .12s; }
  .nt-rad:hover .nt-knappar, .nt-rad:focus-within .nt-knappar { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .nt-rad { transition: none; } }

/* ---------- Schema ---------- */
.schema { gap: var(--sp-3); }
.sc-period { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.sc-pil { position: relative; display: grid; place-items: center; color: var(--muted); }
.sc-pil::after { content: ''; position: absolute; inset: -14px; }
.sc-etikett { position: relative; font-weight: 500; color: var(--ink); white-space: nowrap; }
.sc-etikett::after { content: ''; position: absolute; inset: -13px -4px; }
.sc-lagen button { font-size: var(--fs-sm); padding: 7px 6px; }
.sc-lagen button:not(.on) { color: var(--muted); }
.schema .vd { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.schema .nr { font-family: var(--serif); font-size: var(--fs-dag); line-height: 1; color: var(--ink); }
.schema .pr { display: flex; align-items: center; gap: 3px; height: 5px; }
.schema .pr i { width: 5px; height: 5px; border-radius: 50%; background: var(--typ, var(--accent)); }
/* Dag: veckoremsan */
.sc-remsa { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.sc-remsdag { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--sp-2) 0 7px; border-radius: var(--r-cell); background: var(--card); border: 1px solid var(--border); }
.sc-remsdag.idag:not(.vald) { border-color: var(--accent); }
.sc-remsdag.vald { background: var(--accent); border-color: var(--accent); }
.sc-remsdag.vald .vd { color: var(--accent-ink2); }
.sc-remsdag.vald .nr { color: var(--accent-ink); }
.sc-remsdag.vald .pr i { background: var(--accent-ink); }
/* Vecka: en kolumn per dag med tumnaglar */
.sc-vecka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 2px; }
.sc-vdag { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-2) 0 10px; border-radius: var(--r-cell); border: 1px solid transparent; }
.sc-vdag.vald { background: var(--accent-soft); border-color: var(--accent); }
.sc-vdag.vald .nr { color: var(--accent-soft-ink); }
.sc-stapel { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 110px; }
.sc-vtum { position: relative; width: 30px; height: 30px; border-radius: var(--r-tum); display: grid; place-items: center; background: linear-gradient(135deg, var(--hero-1), var(--hero-2)); color: var(--hero-fg); }
.sc-vtum img { border-radius: inherit; }
.sc-vtum svg { width: 16px; height: 16px; }
.sc-vtum i { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--typ); }
.sc-plus { width: 30px; height: 20px; border-radius: var(--r-xs); background: var(--border); display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: 600; color: var(--ink2); }
.sc-tomdag { width: 30px; height: 6px; border-radius: var(--r-pill); background: var(--border2); }
.sc-inline { display: none; }
/* Månad: rutnät 7 × 6 */
.sc-mhuvud, .sc-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.sc-manad { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: 2px; }
.sc-mhuvud span { text-align: center; font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sc-mdag, .sc-mtom { height: 46px; }
.sc-mdag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--border2); }
.sc-mdag .nr { font-size: var(--fs-mdag); }
.sc-mdag .pr { height: 6px; }
.sc-mdag .pr em { font-style: normal; font-size: var(--fs-mini); font-weight: 600; line-height: 1; color: var(--muted); }
.sc-mdag.forbi .nr { color: var(--muted); }
.sc-mdag.forbi .pr i { background: var(--prick-forbi); }
.sc-mdag.vald { background: var(--accent-soft); border-color: var(--accent); }
.sc-mdag.idag { background: var(--accent); border-color: var(--accent); }
.sc-mdag.idag .nr { color: var(--accent-ink); }
.sc-mdag.idag .pr i { background: var(--accent-ink); }
.sc-mdag.idag .pr em { color: var(--accent-ink2); }
/* Vald dags lista */
.sc-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sc-listh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.sc-dagtitel { font-family: var(--serif); font-size: var(--fs-xl); }
.sc-antal { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.sc-grupp { display: flex; flex-direction: column; gap: 6px; }
.sc-rum { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sc-rad { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) 10px var(--sp-2) var(--sp-2); background: var(--card); border: 1px solid var(--border2); border-radius: var(--r-cell); }
.sc-vaxt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; position: relative; }
/* Raden är 50 px hög som i mockupen – träffytan växer utanför knappen till 44. */
.sc-vaxt::after { content: ''; position: absolute; inset: -6px 0; }
.sc-tum { flex: none; width: 32px; height: 32px; border-radius: var(--r-tum); overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--hero-1), var(--hero-2)); color: var(--hero-fg); }
.sc-namn { min-width: 0; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-namn b { font-weight: 500; }
.sc-bock { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--faint); display: grid; place-items: center; }
.sc-bock::after { content: ''; position: absolute; inset: -8px; }
.sc-bock.klar { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sc-bock.klar svg { width: 14px; height: 14px; }
/* Avbockat tonas ned – texten byter bara färg, så den går att läsa. */
.sc-rad.klar .sc-tum, .sc-rad.klar .knopp { opacity: .55; }
.sc-rad.klar .sc-namn, .sc-rad.klar .sc-namn span { color: var(--muted); }
.sc-tom { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.sc-fler { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
.sc-fler .lnk { position: relative; color: var(--accent); }
.sc-fler .lnk::after { content: ''; position: absolute; inset: -14px -6px; }
.sc-legend { display: flex; justify-content: center; gap: 14px; padding-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.sc-legend span { display: flex; align-items: center; gap: 5px; }
.sc-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--typ); }
/* Uppgiften man kom till från en notis lyser upp en stund. */
.task.markerad { animation: markerad 2.4s ease-out; }
@keyframes markerad { 0%, 40% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .task.markerad { animation: none; box-shadow: 0 0 0 2px var(--accent); } }

/* Mobil: samma kant som i mockuperna, 20 px från skärmkanten. */
@media (max-width: 860px) {
  .notiser, .schema { padding: var(--sp-2) 6px 0; }
}
/* Desktop: Vecka med listorna direkt i kolumnerna. */
@media (min-width: 861px) {
  .notiser, .schema { padding-top: var(--sp-2); }
  .schema.lage-vecka { max-width: 1200px; }
  .lage-vecka .sc-stapel { display: none; }
  .lage-vecka .sc-vdag { align-items: stretch; min-height: 50vh; padding: var(--sp-2) 6px; background: var(--card); border-color: var(--border2); }
  .lage-vecka .sc-vdag.vald { background: var(--accent-soft); border-color: var(--accent); }
  .lage-vecka .sc-vdag .vd, .lage-vecka .sc-vdag .nr { text-align: center; }
  .sc-inline { display: flex; flex-direction: column; gap: var(--sp-1); }
  .sc-vrad { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 6px; align-items: baseline; padding: 6px; border-radius: var(--r-xs); background: var(--bg); text-align: left; font-size: var(--fs-xs); }
  .sc-vrad i { width: 8px; height: 8px; border-radius: 50%; background: var(--typ); }
  .sc-vrad b, .sc-vrad span { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-vrad b { font-weight: 600; }
  .sc-vrad span { color: var(--muted); }
  .sc-vrad.klar b { color: var(--muted); font-weight: 500; }
}

/* Kryssruta i uppgifts-sheeten ("Vilar på vintern") */
.sheet label.kryss { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; font-size: var(--fs-md); }
.sheet label.kryss input { accent-color: var(--accent); width: 22px; height: 22px; margin: 0; flex: none; }