/* list: Listorna: Tasks, Flaggat, Klart, uppgiftsraden (.task*), inmatningen
   (.capture*), Väntar och mailkön (.mailq*). Används av /,
   /flaggat, /klart, projekten, taggarna, mötet och kalenderns uppgifter.
   Ägare: vyn "listan".

   Raden (designnatten 2026-10-20): en lugn rad per uppgift — bock, titel och
   metadata på samma rad, 36 px på datorn och 48 px i telefonen. Bockens
   kolumn, texten och avdelarna linjerar: avdelaren börjar där texten börjar,
   och bocken står i sidans kant (samma x som rubrikerna och fältet). */

@layer views {

/* ── Måtten ──────────────────────────────────────────────────────────────── */

/* Lokala mått för raden. --task-pad är radens luft på sidorna (hover och
   markering sticker ut lika mycket utanför sidans kant), --task-py luften
   över och under en rad text. */
.app {
  --task-check: 18px;
  --task-gap: var(--space-5);
  --task-pad: var(--space-4);
  --task-py: var(--space-4);
  --task-line: 20px;
  --task-title: var(--fs-15);
  --task-meta: var(--fs-12);
  --task-inset: calc(var(--task-pad) + var(--task-check) + var(--task-gap));
  /* Var de klistriga rubrikerna stannar: överst, eller under Mac-fönstrets
     remsa (mac.css) och telefonens kompakta titelrad (shell.css). */
  --list-sticky-top: 0px;
}
body.mac-unified.app { --list-sticky-top: var(--mac-titlebar, 38px); }
@media (max-width: 859px) {
  .app {
    --task-check: 22px;
    --task-py: var(--space-5);
    --task-line: 24px;
    --task-title: var(--fs-16);
    --task-meta: var(--fs-13);
    --list-sticky-top: calc(env(safe-area-inset-top) + 45px);
  }
}

/* ── .listview ───────────────────────────────────────────────────────────── */

/* På datorn rullar sidhuvudet bort i listorna och avsnittens rubriker stannar
   överst i stället (som gruppernas rubriker i Linear): man ser alltid vilket
   projekt raden hör till. I telefonen tar den kompakta titelraden över. */
@media (min-width: 860px) {
  .listview .page-head--sticky { position: static; margin: 0 0 var(--space-7); padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .listview .page-head--sticky.is-stuck { box-shadow: none; }
}
/* Bred skärm: listan använder bredden — titlarna får plats och metadatan
   står i en egen kolumn till höger. */
@media (min-width: 1100px) {
  /* Taggsidan visar samma lista och får samma bredd (slutgranskningen
     2026-10-20: den var 652 px och rubriken stod på ett annat x). */
  .main:has(> .listview, > .tag-page) { max-width: 960px; }
}
.page-sub__link { color: inherit; text-decoration: none; }
.page-sub__link:hover { color: var(--accent); text-decoration: underline; }
@media (pointer: coarse) {
  .page-sub__link { display: inline-block; padding: calc((var(--hit) - 18px) / 2) 0; margin: calc((18px - var(--hit)) / 2) 0; }
}
.listview .section { margin-top: var(--space-8); }
.listview .section:first-of-type { margin-top: 0; }
@media (max-width: 859px) {
  .listview .section { margin-top: var(--space-7); }
}
.listview__more { margin-top: var(--space-6); }

/* ── .section__title (sticky) ────────────────────────────────────────────── */

.listview .section__title {
  position: sticky; top: var(--list-sticky-top); z-index: var(--z-sticky);
  margin-inline: calc(-1 * var(--task-pad)); padding: var(--space-4) var(--task-pad) var(--space-3);
  margin-bottom: 0; border-bottom: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
}
/* Linjen under rubriken i sidans kant, inte i radernas utfyllnad. */
.listview .section__title::after {
  content: ""; position: absolute; left: var(--task-pad); right: var(--task-pad); bottom: 0;
  border-top: 1px solid var(--line);
}
.section__link { color: inherit; text-decoration: none; }
.section__link:hover { color: var(--accent); }
@media (pointer: coarse) {
  .section__link { display: inline-block; padding: calc((var(--hit) - 18px) / 2) 0; margin: calc((18px - var(--hit)) / 2) 0; }
}
@media (max-width: 859px) {
  .listview .section__title { font-size: var(--fs-15); }
}

/* ── .capture ────────────────────────────────────────────────────────────── */

.capture { position: relative; display: flex; margin-bottom: var(--space-9); }
@media (max-width: 859px) {
  .capture { margin-bottom: var(--space-7); }
}
.capture .capture__input {
  flex: 1; min-width: 0; height: 44px;
  font: inherit; font-size: var(--fs-16); /* 16+ px, annars zoomar iPhone in vid fokus */
  padding: 0 var(--space-6) 0 var(--space-11);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg); color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.capture__input::placeholder { color: var(--text-3); text-overflow: ellipsis; }
/* En lång platshållare ("Ny task i Upphandling sjukresor …") slutar med en
   ellips, inte mitt i en bokstav (slutgranskningen 2026-10-20). */
.capture .capture__input { text-overflow: ellipsis; }
.capture__input:hover { border-color: var(--check-ring); }
.capture .capture__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* Plustecknet till vänster i fältet är skicka-knappen (utan JavaScript). Det
   står i bockarnas kolumn: plus, bock och mailens ikon linjerar. */
.capture__button {
  position: absolute; left: var(--space-3); top: 50%; translate: 0 -50%;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; color: var(--accent); cursor: pointer;
  display: grid; place-items: center;
}
.capture__button .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.capture__button:hover { background: var(--accent-tint); }
/* Vad som läses ut ur texten: under fältet medan man skriver, i luften under
   det (absolut, så att listan inte hoppar när fältet får fokus). */
.capture__hint {
  position: absolute; left: var(--space-11); right: 0; top: calc(100% + var(--space-2));
  font-size: var(--fs-12); color: var(--text-3); line-height: var(--lh-row);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  pointer-events: none;
}
.capture:focus-within .capture__hint { opacity: 1; visibility: visible; }
.dialog--capture .capture__hint { display: none; }
@media (pointer: coarse) {
  .capture .capture__input { height: 48px; padding-left: 48px; }
  /* 44 × 44 att trycka på, plustecknet lika stort som förut. */
  .capture__button { left: var(--space-1); width: var(--hit); height: var(--hit); }
  .capture__button:hover { background: transparent; }
  .capture__hint { left: 48px; }
}
/* /ny (hemskärmsappens start): ett stort, lugnt fält — iOS öppnar inte
   tangentbordet av autofocus, så det ska vara lätt att träffa. */
.capture--hero { margin-bottom: var(--space-9); }
.capture--hero .capture__input { height: 56px; font-size: var(--fs-20); border-radius: var(--r-xl); padding-left: 52px; }
.capture--hero .capture__button { left: var(--space-3); width: var(--hit); height: var(--hit); }
.capture--hero .capture__button .icon { width: 22px; height: 22px; }
.capture--hero .capture__hint { left: 52px; opacity: 1; visibility: visible; }

/* ── .tasks ──────────────────────────────────────────────────────────────── */

.tasks { list-style: none; }

/* ── .task ───────────────────────────────────────────────────────────────── */

.task {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--task-gap);
  margin-inline: calc(-1 * var(--task-pad)); padding-inline: var(--task-pad);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Avdelaren börjar där texten börjar, som i iOS, och försvinner runt det
   som hovras eller är markerat. */
.task + .task::before {
  content: ""; position: absolute; top: 0; left: var(--task-inset); right: var(--task-pad);
  border-top: 1px solid var(--line);
}
.task:hover::before, .task:hover + .task::before,
.task.is-selected::before, .task.is-selected + .task::before { border-color: transparent; }
@media (hover: hover) {
  .task:hover { background: var(--hover); }
}
/* Markerad = tonad bakgrund och accentkanten (en behandling i hela appen). */
.task.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.task form { display: contents; }

/* ── .task__check ────────────────────────────────────────────────────────── */

/* Bocken möter första textraden, inte radens mitt. Ringen i --check-ring
   (3:1), orange när uppgiften är flaggad. Cirkelns utseende står i lokala
   variabler, så att pekskärmens 44 px-knapp kan rita samma cirkel inuti sig. */
.task__check {
  --check-border: var(--check-ring);
  --check-bg: transparent;
  --check-bw: 1.5px;
  position: relative; flex: none;
  width: var(--task-check); height: var(--task-check);
  margin-top: calc(var(--task-py) + (var(--task-line) - var(--task-check)) / 2);
  border-radius: 50%; border: var(--check-bw) solid var(--check-border);
  background: var(--check-bg); color: var(--on-accent);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.task__check:hover { --check-border: var(--ok); --check-bg: var(--ok-tint); }
.task__check .icon {
  position: relative;
  width: 12px; height: 12px; stroke-width: 3;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--dur) var(--ease-out);
}
.task--flagged .task__check { --check-border: var(--flag); --check-bw: 2px; }
/* Avbockad: bocken fylls och strecket ritas. */
.task--closed .task__check { --check-bg: var(--ok); --check-border: var(--ok); }
.task--closed .task__check .icon { stroke-dashoffset: 0; }
.task.is-checking .task__check { animation: task-check-pop var(--dur-slow) var(--ease-spring); }
@keyframes task-check-pop {
  0% { scale: 1; }
  35% { scale: 0.82; }
  100% { scale: 1; }
}
/* Struken: ett kryss på ytan, inte en grön bock. */
.task--dropped .task__check { --check-bg: var(--surface-2); --check-border: var(--surface-2); color: var(--text-2); }
/* Pekskärm: knappen är 44 × 44 att trycka på, och cirkeln (22 px) ritas
   inuti den. Negativ marginal, så att raden inte flyttar sig. */
@media (pointer: coarse) {
  .task__check {
    z-index: var(--z-raised);
    width: var(--hit); height: var(--hit);
    margin: calc(var(--task-py) + (var(--task-line) - var(--hit)) / 2) calc((var(--task-check) - var(--hit)) / 2) 0;
    border: 0; background: transparent;
  }
  .task__check::before {
    content: ""; position: absolute;
    inset: calc((var(--hit) - var(--task-check)) / 2);
    border-radius: 50%; border: var(--check-bw) solid var(--check-border); background: var(--check-bg);
  }
}

/* ── .task__body ─────────────────────────────────────────────────────────── */

.task__body {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding-block: var(--task-py);
  color: var(--text); text-decoration: none;
  -webkit-touch-callout: none;
}
/* Titeln (med anteckningens ikon direkt efter) till vänster, metadatan till
   höger: space-between, så att metadatan står till vänster när den hamnar
   på en egen rad i telefonen. */
.task__line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); min-width: 0; }
.task__name {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--task-title); line-height: var(--task-line);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.task__title { transition: color var(--dur) var(--ease); }
.task__has-note { display: inline-flex; vertical-align: -2px; margin-left: var(--space-3); color: var(--text-3); }
.task__has-note .icon { width: 14px; height: 14px; }

/* Metadatan: på samma rad, till höger, i --text-3. Datumet står sist så att
   det linjerar i en kolumn längs högerkanten. */
.task__meta {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-4);
  height: var(--task-line);
  font-size: var(--task-meta); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.task__status { display: inline-flex; }
/* Bara tipset "↩ planerar" (syns på den markerade raden): ingen egen rad i
   telefonen och ingen plats på pekskärm. */
@media (hover: none) and (pointer: coarse) {
  .task__meta--hint { display: none; }
}
.task__tags { display: inline-flex; gap: var(--space-4); }
/* Projektsidan döljer de ärvda taggarna (projects.css): står bara sådana i
   raden tas hela gruppen bort, annars får en tom grupp metaradens mellanrum
   och datumet hamnar 8 px in (slutgranskningen 2026-10-20). */
.project-main .task__tags:not(:has(> .tag-pill:not(.tag-pill--inherited))) { display: none; }
/* Taggen som Claude satt: "C" läses som ett felskrivet c på raden. Den syns
   på uppgiften; här bara för skärmläsaren. */
.task .tag-pill__by { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.task__project { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task__project--none, .task__due-none { display: none; }
/* Bred lista: egenskaperna i fasta kolumner som i Linear — märket, taggarna,
   projektet och datumet står i samma x på varje rad (en tom kolumn där de
   saknas). Frågan gäller listans bredd, inte fönstrets: i Idags spalt och
   kalenderns dagkort (500–700 px) får titeln platsen (slutgranskningen
   2026-10-20). */
.tasks { container: tasks / inline-size; }
@container tasks (min-width: 760px) {
  .task__project, .task__project--none { display: block; width: 12rem; max-width: none; }
  .task .due, .task__due-none { display: inline-flex; min-width: 5rem; }
  /* Uppgiftsraderna (inte mailkön): metadatan i ett rutnät där projektet
     och datumet har fasta spår, så att de — och taggarnas högerkant — står
     på samma x på varje rad, också när datumet saknas. Märket och taggarna
     tar bara den plats de behöver (titeln går före). Klockslaget på Klart
     står i datumets spår (avbockat har inget datum). */
  .task[data-task] .task__meta {
    display: grid; grid-auto-flow: column; align-items: center; justify-items: end;
    grid-template-columns: [status] auto [dropped] auto [tags] auto [due] 5.25rem;
  }
  .task[data-task] .task__meta:has(> .task__project) {
    grid-template-columns: [status] auto [dropped] auto [tags] auto [project] 12rem [due] 5.25rem;
  }
  .task[data-task] :is(.task__status, .task__hint) { grid-column: status; }
  .task[data-task] .task__dropped { grid-column: dropped; }
  .task[data-task] .task__tags { grid-column: tags; }
  .task[data-task] .task__project { grid-column: project; justify-self: stretch; }
  .task[data-task] :is(.due, .task__due-none, .task__time) { grid-column: due; justify-self: start; }
}
/* Smal lista på datorn (Idags spalt, dagkortet): en lång titel skjuter ner
   metadatan under sig, som i telefonen, i stället för att kapas bredvid den. */
@container tasks (max-width: 600px) {
  .task__line { flex-wrap: wrap; row-gap: var(--space-1); }
  .task__meta:not(:has(> :not(.task__due-none, .task__project--none, .task__hint))) { display: none; }
  .mailq__row .task__line { flex-wrap: nowrap; }
  /* Bara taggprickar i metadatan (bredvid de dolda platshållarna och
     tipset): de står kvar till höger om titeln, också när den har två rader
     — inte ensamma på en egen tredje rad. (:has får inte nästlas, därav
     uppräkningen.) */
  .task__line:has(
    > .task__meta > .task__tags:only-child,
    > .task__meta > .task__tags:first-child + .task__due-none:last-child,
    > .task__meta > .task__tags:first-child + .task__project--none + .task__due-none:last-child,
    > .task__meta > .task__hint:first-child + .task__tags:last-child,
    > .task__meta > .task__hint:first-child + .task__tags + .task__due-none:last-child,
    > .task__meta > .task__hint:first-child + .task__tags + .task__project--none + .task__due-none:last-child
  ) { flex-wrap: nowrap; }
}
@container tasks (max-width: 600px) {
  @media (pointer: fine) {
    .task.is-selected .task__meta:has(> .task__hint) { display: inline-flex; }
  }
}
.task__time { min-width: 2.75rem; text-align: right; }
.task__dropped { color: var(--text-2); }
/* Datumet är metadata: grått, rött när det passerat. (.due--soon är accent i
   komponenten; i raden betyder accent bara handling och markering.) */
.task .due--soon { color: var(--text); background: var(--surface); }
.task .due { min-width: 3.5rem; }
/* ↩ planerar: bara på den markerade raden, och bara med tangentbord. */
.task__hint { display: none; }
@media (max-width: 600px) and (pointer: fine) {
  .task.is-selected .task__meta:has(> .task__hint) { display: inline-flex; }
}
@media (pointer: fine) {
  .task.is-selected .task__hint { display: inline-flex; align-items: center; height: 18px; padding: 0 var(--space-3); border-radius: var(--r-xs); background: var(--surface); color: var(--text-2); }
}

/* Märket för planen (fråga, plan, utkast): något som väntar på Philip, i
   accent. Stapeln medan Claude genomför är information, inte en handling:
   grå (accent betyder handling och markering). Minst en tiondel syns. */
.task__claude { flex: none; background: var(--accent-tint); color: var(--accent); }
.task__claude--ok { background: transparent; color: var(--ok); }
.task__claude--ok .icon { width: 14px; height: 14px; stroke-width: 3; }
/* "väntar" (stegen väntar på ett svar eller en fil) är information: grått,
   inte flaggans orange. */
.task__claude--wait { background: var(--surface); color: var(--text-2); }
.task__progress {
  -webkit-appearance: none; appearance: none; width: 44px; height: 6px; border: 0; border-radius: var(--r-xs);
  background: var(--line); overflow: hidden; vertical-align: middle;
}
.task__progress::-webkit-progress-bar { background: var(--line); border-radius: var(--r-xs); }
.task__progress::-webkit-progress-value { background: var(--text-3); border-radius: var(--r-xs); min-width: 4px; }
.task__progress::-moz-progress-bar { background: var(--text-3); border-radius: var(--r-xs); }

/* Andra raden: bara när den betyder något. Grå; ett steg som väntar på
   Philip får en accentprick. */
.task__next {
  display: block; margin-top: var(--space-1);
  font-size: var(--fs-13); line-height: var(--lh-row); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task__next--mine::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: var(--space-3); vertical-align: 1px; }
.task__next--faint { color: var(--text-3); }
/* Ett svar som dröjer är information, inte en flagga: grått som resten av
   andra raden (orange betyder bara flagga; slutgranskningen 2026-10-20). */
.task__next--stale { color: var(--text-2); }
@media (max-width: 859px) {
  .task__next { font-size: var(--fs-15); }
}

/* Avbockad och struken: titeln grå och överstruken, metadatan borta utom
   taggarna. Ingen opacity — den gör text oläslig. */
.task--closed .task__name { color: var(--text-2); }
.task--closed .task__title { text-decoration: line-through; text-decoration-color: var(--text-3); }
.task--closed .task__status, .task--closed .task__next, .task--closed .task__hint { display: none; }
.task--closed .tag-pill { color: var(--text-3); }

/* Telefonen: titeln får platsen. Taggarna bara som prickar och stapeln
   kortare. En kort titel har metadatan bredvid sig (en rad, 48 px); en lång
   titel skjuter ner den under sig i stället för att brytas bredvid den. */
@media (max-width: 600px) {
  .task__tags .tag-pill { font-size: 0; gap: 0; }
  .task__tags { gap: var(--space-2); }
  .task__progress { width: 28px; }
  .task__line { flex-wrap: wrap; row-gap: var(--space-1); }
  .task__meta { height: 20px; }
  /* Metadata med bara platshållare (bredskärmens tomma kolumner) eller
     tipset: ingen tom rad under en lång titel (granskningen 2026-10-20). */
  .task__meta:not(:has(> :not(.task__due-none, .task__project--none, .task__hint))) { display: none; }
  .mailq__row .task__line { flex-wrap: nowrap; }
}

/* ── Rörelsen ────────────────────────────────────────────────────────────── */

/* Raden som just bockats av tonar och glider ihop (doit.js sätter höjden). */
.task.is-leaving {
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.task.is-leaving::before, .task.is-leaving + .task::before { border-color: transparent; }
/* Kvittot på en ny rad: den glider in och tonas kort i --selected-bg. */
.task.is-new { animation: task-new calc(var(--dur-slow) * 6) var(--ease-out); }
@keyframes task-new {
  0% { opacity: 0; translate: 0 -6px; background: var(--selected-bg); }
  12% { opacity: 1; translate: 0 0; background: var(--selected-bg); }
  60% { background: var(--selected-bg); }
  100% { background: transparent; }
}

/* ── Svepet (telefonen) ──────────────────────────────────────────────────── */

/* doit.js flyttar raden med --swipe-x. Bakom: grönt med en bock (höger, klar)
   eller orange med en flagga (vänster). Utan JS finns bocken. */
@media (pointer: coarse) {
  /* Lodrätt rullar sidan, vågrätt är svepet; nypa för att zooma ska gå. */
  .tasks .task[data-task] { touch-action: pan-y pinch-zoom; }
}
.task.is-swiping { overflow: hidden; background: var(--swipe-bg, var(--surface)); }
/* Handlingsytan når skärmkanten, som i iOS: raden går ut i sidans fält under
   svepet (innehållet står kvar där det var; slutgranskningen 2026-10-20). */
@media (max-width: 859px) {
  .task.is-swiping {
    --task-pad: var(--gutter);
    --task-inset: calc(var(--task-pad) + var(--task-check) + var(--task-gap));
    border-radius: 0;
  }
}
.task.is-swiping::before, .task.is-swiping + .task::before { border-color: transparent; }
.task.is-swiping .task__check, .task.is-swiping .task__body { translate: var(--swipe-x, 0) 0; }
.task.is-swiping .task__body { position: relative; z-index: var(--z-raised); background: var(--bg); margin-left: calc(-1 * var(--task-inset)); padding-left: var(--task-inset); margin-right: calc(-1 * var(--task-pad)); padding-right: var(--task-pad); }
.task.is-swiping .task__check { z-index: calc(var(--z-raised) + 1); }
.task.is-settling .task__check, .task.is-settling .task__body { transition: translate var(--dur-slow) var(--ease-spring); }
.task--swipe-done { --swipe-bg: var(--ok); }
.task--swipe-flag { --swipe-bg: var(--flag); }
.task__swipe {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  padding: 0 var(--space-7); color: var(--on-accent);
}
.task__swipe .icon { width: 22px; height: 22px; stroke-width: 2.4; transition: scale var(--dur-fast) var(--ease); }
.task__swipe--done { left: 0; }
.task__swipe--flag { right: 0; }
.task--swipe-done .task__swipe--flag, .task--swipe-flag .task__swipe--done { display: none; }
.task.is-armed .task__swipe .icon { scale: 1.2; }

/* ── Klart ───────────────────────────────────────────────────────────────── */

/* Klart per dag: avbockat utan överstrykning med en lugn grön bock (som
   Things loggbok), struket överstruket med ett kryss och ordet "Struken". */
.listview--closed .task--closed:not(.task--dropped) .task__title { text-decoration: none; }
.listview--closed .task--closed:not(.task--dropped) .task__check { --check-bg: var(--ok-tint); --check-border: var(--ok-tint); color: var(--ok); }

/* ── .waiting-list ───────────────────────────────────────────────────────── */

/* Väntar: samma rubrik som avsnitten, med en chevron som vrids. */
.waiting-list { margin-top: var(--space-9); }
.waiting-list__summary {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 36px; margin-inline: calc(-1 * var(--task-pad)); padding: var(--space-3) var(--task-pad);
  border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text);
  cursor: pointer; list-style: none;
}
.waiting-list__summary::-webkit-details-marker { display: none; }
.waiting-list__summary::after { content: ""; position: absolute; left: var(--task-pad); right: var(--task-pad); bottom: 0; border-top: 1px solid var(--line); }
.waiting-list__summary:hover { background: var(--hover); }
.waiting-list__chevron { width: 14px; height: 14px; margin-left: auto; color: var(--text-3); transition: rotate var(--dur) var(--ease); }
.waiting-list[open] .waiting-list__chevron { rotate: 90deg; }
.waiting-list__hint { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-13); color: var(--text-2); }
@media (pointer: coarse) {
  .waiting-list__summary { min-height: var(--hit); font-size: var(--fs-15); }
}

/* ── .mailq ──────────────────────────────────────────────────────────────── */

/* Mailkön överst på Tasks. Raderna är inte uppgifter: ingen bock, sortens
   ikon i bockens kolumn (titlarna börjar på samma x som uppgifternas, och
   avdelaren där texten börjar), sorten som märke till höger. Andra raden är
   grå; bara det ↩ gör står i accent. */
.mailq__body { display: grid; grid-template-columns: var(--task-check) minmax(0, 1fr); column-gap: var(--task-gap); }
.mailq__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: var(--task-check); height: var(--task-line); color: var(--text-3); }
.mailq__icon .icon { width: 16px; height: 16px; }
.mailq__body .task__line, .mailq__body .task__next { grid-column: 2; }
.mailq__time { min-width: 2.75rem; text-align: right; color: var(--text-3); }
.mailq__action { color: var(--accent); }
.mailq__sep { color: var(--text-3); }
.mailq__sorting { margin: var(--space-3) 0 var(--space-2); }
.mailq__toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 32px; margin-top: var(--space-2); margin-left: var(--task-check); padding: 0 var(--task-gap);
  font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--accent);
  border-radius: var(--r-sm); cursor: pointer; list-style: none;
}
.mailq__toggle::-webkit-details-marker { display: none; }
.mailq__toggle:hover { background: var(--accent-tint); }
.mailq__toggle-less, .mailq__rest[open] .mailq__toggle-more { display: none; }
.mailq__rest[open] .mailq__toggle-less { display: inline; }
.mailq__chevron { width: 14px; height: 14px; transition: rotate var(--dur) var(--ease); }
.mailq__rest[open] .mailq__chevron { rotate: 180deg; }
@media (pointer: coarse) {
  .mailq__toggle { min-height: var(--hit); font-size: var(--fs-15); }
}
/* Telefonen: två rader per mail. Titeln på en rad, märket bort (ikonen säger
   sorten) och andra raden bara sammanfattningen — det ↩ gör gäller inte
   fingret. */
@media (max-width: 600px) {
  .mailq__row .task__name { -webkit-line-clamp: 1; line-clamp: 1; flex-basis: 0; }
  .app .mailq__row .mailq__kind, .mailq__body .mailq__sep { display: none; }
  .mailq__next:has(.mailq__note-text) .mailq__action:not(.mailq__action--state) { display: none; }
  /* Svar och påminnelser: läget ("Utkastet är klart", "Svara själv", "Claude
     skriver svaret …") först, sammanfattningen efter med ellips. */
  .mailq__next:has(.mailq__note-text):has(.mailq__action--state) { display: flex; }
  .mailq__next .mailq__action--state { order: -1; flex: none; }
  .mailq__next .mailq__action--state .keys-hint { display: none; }
  .mailq__next:has(.mailq__note-text) .mailq__action--state::after { content: "·"; content: "·" / ""; margin: 0 var(--space-2); color: var(--text-3); }
  .mailq__next:has(.mailq__action--state) .mailq__note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Mailkön i körläget (/mail/ko/:id): förslaget och de andra valen. */
.mailq__note { margin: var(--space-3) 0 0; color: var(--text-2); }
.mailq__proposal { margin: var(--space-6) 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.mailq__proposal p { margin: 0 0 var(--space-5); }
.mailq__proposal .inline-form { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.mailq__proposal .inline-form input[type="text"] { flex: 1 1 220px; min-width: 0; }
.mailq__more { margin: var(--space-4) 0 var(--space-7); flex-wrap: wrap; gap: var(--space-4); }
.mailq__more .inline-form { display: flex; gap: var(--space-3); align-items: center; }
.mailq__more select, .mailq-review select { max-width: 200px; }
.mailq__rowactions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.mailq__rowactions form { display: inline-flex; gap: var(--space-2); align-items: center; }

/* ── Doit.app ─────────────────────────────────────────────────────────────── */

/* Pilmarkören i Mac-fönstret också på listans egna klickbara delar (mac.css
   har listan för komponenterna). */
body.in-mac :is(.mailq__toggle, .waiting-list__summary, .section__link, .page-sub__link) { cursor: default; }

/* ── .mailq-review ───────────────────────────────────────────────────────── */

.mailq-review__group { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.mailq-review__sender { font-size: var(--fs-14); margin: 0 0 var(--space-3); }
.mailq-review__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.mailq-review__item { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-2) 0; }
.mailq-review__subject { flex: 1 1 200px; min-width: 0; }
.mailq-review__unsub { font-size: var(--fs-13); display: inline-flex; gap: var(--space-2); align-items: center; }
/* Hör till (förvalt med förslaget) först, sedan Tillbaka och Svara. */
.mailq-review__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.mailq-review__belongs { display: inline-flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.mailq-review__auto { font-size: var(--fs-13); display: inline-flex; gap: var(--space-2); align-items: center; }
}