/* task: Uppgiften: /uppgifter/:id (sidhuvudet med föregående/nästa, titeln som
   ändras på plats, egenskaperna, anteckningen, lägena överst), planen och
   stegen, Att göra (.work*), frågorna, /fragor och förslagssidorna, composer
   och diff som hör till planen, filkorten (.file-card*) och filvisningen.
   Ägare: vyn "uppgiften". Designnatten 2026-10-20: omskriven från grunden.

   Upplägget: på bred skärm (sidan minst 880 px, @container taskpage) står
   egenskaperna i en egen kolumn till höger, som i Linear; annars som en
   kompakt lista under titeln. Formuläret (.taskform) är display: contents, så
   att titeln och egenskaperna är rutor i samma rutnät som resten av sidan. */

@layer views {

/* ── .task-page ──────────────────────────────────────────────────────────── */

.task-page {
  --task-props-w: 248px;
  container: taskpage / inline-size;
}
/* Bred skärm: sidan får plats för egenskapskolumnen bredvid läsbredden. */
@media (min-width: 1100px) {
  .main:has(> .task-page) { max-width: 1080px; }
}

/* Sidhuvudet: brödsmulan till vänster, föregående/nästa och Claude till höger,
   på en rad. Titeln (h1) är dold här — den synliga titeln är fältet under. */
.task-page > .page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); }
.task-page > .page-head .crumb { flex: 1; margin: 0; min-width: 0; }
/* Ett långt projektnamn kortas med … i stället för att bryta raden. */
.task-page > .page-head .crumb a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-page > .page-head .crumb a .icon { margin-right: var(--space-1); vertical-align: -3px; }
@media (max-width: 859px) {
  .task-page > .page-head .crumb a { line-height: var(--hit); }
  .task-page > .page-head .crumb a .icon { vertical-align: -5px; }
}
.task-page > .page-head .page-head__row { flex: none; }
.task-claude .attn { margin-left: var(--space-2); }
.task-claude[hidden] { display: none; }
/* Den kompakta titelraden i telefonen räknar med en synlig h1 i sidhuvudet;
   här är den dold (titeln är fältet), så raden hade stått framme direkt. */
.task-page .page-head__bar { display: none; }

/* ── .task-nav ───────────────────────────────────────────────────────────── */

/* Föregående och nästa uppgift i listan man kom från (doit.js, doit-queue). */
.task-nav { display: inline-flex; align-items: center; gap: var(--space-1); }
.task-nav[hidden] { display: none; }
.task-nav__pos { min-width: 6ch; text-align: center; font-size: var(--fs-12); color: var(--text-3); }
.task-nav [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ── .task-layout ────────────────────────────────────────────────────────── */

.task-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.taskform { display: contents; }
.taskform__head, .props-box, .task-main { grid-column: 1; min-width: 0; }

/* ── .props-box ──────────────────────────────────────────────────────────── */

/* Egenskaperna i en details. På bred skärm alltid öppen och utan rad; i
   telefonen ihopfälld till en rad (doit.js) som öppnas med ett tryck. */
.props-box { margin-top: var(--space-4); }
.props-box__summary {
  list-style: none; display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--row-h); padding: var(--space-2) 0; cursor: pointer;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: var(--fs-14); color: var(--text-2);
}
.props-box__summary::-webkit-details-marker { display: none; }
.props-box__summary::before { content: none; }
.props-box__line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.props-box__sep { color: var(--text-3); }
.props-box__due--overdue { color: var(--danger); }
.props-box__flag { color: var(--flag-text); }
.props-box__edit { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-13); color: var(--accent); }
.props-box__chevron { width: 14px; height: 14px; transition: rotate var(--dur) var(--ease); }
.props-box[open] .props-box__chevron { rotate: 180deg; }
.props-box[open] > .props-box__summary { border-bottom-color: transparent; }
.props-box[open] > .props { margin-top: 0; border-top: 0; }
/* Doit.app: pilmarkören på det man fäller ut, som i resten av fönstret (mac.css). */
body.in-mac .props-box__summary, body.in-mac .prop__tags summary, body.in-mac .plan__keep-hit { cursor: default; }
/* Egenskapskolumnen (bred sida): listan är alltid framme, raden behövs inte.
   En smal sida (telefonen, Mac-fönstret) har raden; doit.js fäller ihop. */
@container taskpage (min-width: 880px) {
  .props-box > .props-box__summary { display: none; }
}
@media (max-width: 859px) {
  .props-box__summary { min-height: var(--row-h-touch); font-size: var(--fs-15); }
}

@container taskpage (min-width: 880px) {
  .task-layout { grid-template-columns: minmax(0, 1fr) var(--task-props-w); column-gap: var(--space-10); }
  .taskform__head { grid-row: 1; }
  .task-main { grid-row: 2; }
  .props-box {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    position: sticky; top: calc(var(--titlebar-h, 0px) + 64px);
    margin: var(--space-2) 0 0;
  }
  .props-box > .props { margin: 0; border-top: 0; }
  .props .prop { grid-template-columns: 84px minmax(0, 1fr); border-bottom: 0; min-height: 32px; padding: var(--space-1) 0; }
  .props .prop__due { grid-row: 2; justify-self: start; }
  .props .prop__date .date-quick { grid-row: 3; }
  /* Snabbvalen för datumet: mindre, så att de ryms på en rad i kolumnen. */
  .props .prop__date .date-quick { gap: var(--space-2); }
  .props .date-quick__btn { min-height: 24px; padding: 0 var(--space-3); font-size: var(--fs-12); }
  .prop--status { margin-bottom: var(--space-3); }
  /* Det längsta läget ("Claude gör en ny version") bryter i stället för att
     sticka ut 9 px ur kolumnen (granskningen). */
  .prop--status .badge { flex: 0 1 auto; height: auto; min-height: 18px; white-space: normal; }
}

/* ── .taskform ───────────────────────────────────────────────────────────── */

/* Titeln: sidans rubrik, ändras på plats. Ser ut som en rubrik tills man
   pekar på den (hover) eller står i den (fokus: ringen). */
.taskform__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.taskform__title {
  flex: 1; min-width: 0; min-height: 0;
  margin: 0 calc(-1 * var(--space-3)); padding: var(--space-1) var(--space-3);
  font: inherit; font-size: 26px; line-height: 32px; font-weight: var(--fw-700); letter-spacing: var(--tracking-tight);
  color: var(--text); background: transparent; border: 0; border-radius: var(--r-md); box-shadow: none;
  resize: none; overflow: hidden; field-sizing: content;
  transition: background var(--dur-fast) var(--ease);
}
.taskform__title:hover { background: var(--hover); }
/* En lång titel (över 80 tecken) i rubrikens mindre storlek: annars fyller
   den hela telefonens skärm innan något annat syns. */
.taskform__title--long { font-size: var(--fs-20); line-height: 26px; letter-spacing: -0.01em; }
.taskform__title:focus { background: var(--bg); box-shadow: 0 0 0 2px var(--focus-ring); outline: none; }
.taskform__head--done .taskform__title, .taskform__head--dropped .taskform__title { color: var(--text-2); }
.taskform__head--dropped .taskform__title { text-decoration: line-through; text-decoration-color: var(--faint); }

/* Anteckningen: under huvudkortet, ett lugnt fält med etiketten ovanför. */
.taskform__notebox { margin-top: var(--space-9); }
.taskform__notelabel { display: block; margin-bottom: var(--space-2); font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text); }
.taskform__note {
  display: block; width: calc(100% + 2 * var(--space-3)); min-height: 72px;
  margin: 0 calc(-1 * var(--space-3)); padding: var(--space-3);
  font: inherit; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md); box-shadow: none;
  resize: none; field-sizing: content;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.taskform__note:hover { background: var(--hover); }
/* Tom anteckning: en rad, inte en tom ruta — den växer när man skriver. */
.taskform__note:placeholder-shown:not(:focus) { min-height: 0; }
/* På pekskärm ändå minst 44 px att trycka på (granskningen: 40 px). */
@media (pointer: coarse) { .taskform__note:placeholder-shown:not(:focus) { min-height: 44px; } }
.taskform__note:focus { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); outline: none; }
.taskform__note::placeholder, .taskform__title::placeholder { color: var(--text-3); }

/* Spara: bara utan JS (doit.js sparar varje ändring och döljer raden). */
.taskform__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.taskform__actions[hidden] { display: none; }
.taskform__actions .hint { margin-left: auto; }
@media (max-width: 859px) {
  .taskform__title { font-size: var(--fs-28); line-height: 34px; min-height: var(--hit); padding-block: var(--space-2); }
  .taskform__title--long { font-size: var(--fs-20); line-height: 26px; }
  .taskform__note { font-size: var(--fs-17); }
  /* Utan JS: Spara i full bredd under anteckningen (inte fäst — beslutsraden
     och Klart-raden är det som står i tumzonen). */
  .taskform__actions .btn--primary { flex: 1; }
}

/* ── .props ──────────────────────────────────────────────────────────────── */

/* Egenskaperna: etikett med ikon till vänster, värdet till höger. Värdena
   ser ut som text tills man pekar på dem; de sparas direkt (doit.js). */
.props { margin: var(--space-5) 0 0; border-top: 1px solid var(--line); }

.prop {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--space-4);
  min-height: var(--row-h); padding: var(--space-1) 0; border-bottom: 1px solid var(--line);
}
.prop__label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-13); color: var(--text-2); }
.prop__label .icon { width: 15px; height: 15px; color: var(--text-3); }
.prop__value { position: relative; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--fs-14); color: var(--text); }
.prop__value select, .prop__value input[type="text"], .prop__value input[type="date"] {
  min-height: 28px; width: 100%; margin: 0 calc(-1 * var(--space-3)); padding: var(--space-1) var(--space-3);
  font: inherit; font-size: var(--fs-14); color: var(--text);
  background-color: transparent; border: 1px solid transparent; border-radius: var(--r-sm); box-shadow: none;
}
.prop__value input[type="date"] { width: auto; font-variant-numeric: tabular-nums; }
/* Ett långt projektnamn slutar med en ellips, inte mitt i ett ord
   (slutgranskningen 2026-10-20; Safari klipper som förut). */
.prop__value select { text-overflow: ellipsis; }
.prop__value select:hover, .prop__value input:hover { background-color: var(--hover); }
.prop__value select:focus, .prop__value input:focus { background-color: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); outline: none; }
.prop__value input::placeholder { color: var(--text-3); }
/* Datumet: fältet och ordet ("imorgon", "fre 24 okt") på första raden,
   snabbvalen under, i värdets kolumn. */
.prop.field--date { row-gap: var(--space-1); }
.prop.field--date > .prop__label { grid-row: 1; }
.prop__date { display: contents; }
.prop__date > input[type="date"] { grid-column: 2; grid-row: 1; justify-self: start; }
.prop__due { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--fs-13); color: var(--text-2); }
/* Snabbvalen under värdet, inte under etiketten (slutgranskningen 2026-10-20). */
.prop__date .date-quick { grid-column: 2; grid-row: 2; padding-bottom: var(--space-2); }
.prop__date .date-quick__btn--clear .icon { width: 14px; height: 14px; }
.prop__due--overdue { color: var(--danger); }
.prop__flag-word { font-size: var(--fs-13); color: var(--text-2); }
.prop--flag .switch { gap: 0; }

.prop__tags { margin: 0; flex: 1; min-width: 0; }
.prop__tags summary {
  list-style: none; display: flex; align-items: center; gap: var(--space-3);
  min-height: 28px; margin: 0 calc(-1 * var(--space-3)); padding: var(--space-1) var(--space-3);
  border-radius: var(--r-sm); cursor: pointer; color: var(--text); font-size: var(--fs-14);
}
.prop__tags summary:hover { background: var(--hover); }
.prop__tags summary::-webkit-details-marker { display: none; }
.prop__tags summary::before { content: none; }
.prop__chosen { display: inline-flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); min-width: 0; }
.prop__chosen .tag-pill { font-size: var(--fs-14); color: var(--text); }
.prop__none { color: var(--text-3); }
.prop__edit { margin-left: auto; font-size: var(--fs-13); color: var(--accent); }
.prop__tags[open] .prop__edit { color: var(--text-2); }
.prop__tags .tag-picker { padding: var(--space-3) 0; }

@media (max-width: 859px) {
  /* Telefonen: Status säger huvudkortet redan; raderna 48 px, fälten 16 px. */
  .prop--status { display: none; }
  .prop { grid-template-columns: 104px minmax(0, 1fr); min-height: var(--row-h-touch); }
  .prop__value select, .prop__value input[type="text"], .prop__value input[type="date"] { min-height: var(--hit); font-size: var(--fs-16); }
  .prop__tags summary { min-height: var(--hit); font-size: var(--fs-16); }
  .prop__chosen .tag-pill { font-size: var(--fs-16); }
}

/* ── .task-notice ────────────────────────────────────────────────────────── */

/* Läget överst: avbockad, struken, väntar på en person (och svaret som kom). */
.task-notice {
  display: flex; align-items: flex-start; gap: var(--space-4);
  margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg); background: var(--surface); font-size: var(--fs-14);
}
.task-notice__icon { flex: none; width: 18px; height: 18px; margin-top: var(--space-1); color: var(--text-2); }
.task-notice__body { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.task-notice__title { font-weight: var(--fw-600); color: var(--text); }
.task-notice__text { color: var(--text-2); }
.task-notice__actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: 0; }
.task-notice__actions form { margin: 0; }
.task-notice--done { background: var(--ok-tint); }
.task-notice--done .task-notice__icon { color: var(--ok); }
.task-notice--reply { background: var(--accent-tint); }
.task-notice--reply .task-notice__icon { color: var(--accent); }
@media (max-width: 600px) {
  .task-notice { flex-wrap: wrap; }
  .task-notice__actions { flex-basis: 100%; padding-left: calc(18px + var(--space-4)); }
}

/* ── .task-main ──────────────────────────────────────────────────────────── */

/* Huvudkortet står tätt under titeln; sektionerna under det med vanlig luft. */
.task-main > .section:first-child, .task-main > .task-notice + .section, .task-main > .task-notice + .task-notice { margin-top: var(--space-7); }
.task-main > .task-notice:first-child { margin-top: var(--space-7); }

/* ── .task-details ───────────────────────────────────────────────────────── */

/* Det som är ihopfällt: planen i sin helhet och tidslinjen. */
.task-details { margin-top: var(--space-9); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.task-details > summary { color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-500); padding-block: var(--space-2); }
.task-details > summary:hover { color: var(--text); }
.task-details[open] > summary { margin-bottom: var(--space-4); color: var(--text); }

/* ── .task-foot ──────────────────────────────────────────────────────────── */

.task-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.task-foot form { margin: 0; }
.task-foot__meta { margin: 0 0 0 auto; font-size: var(--fs-12); color: var(--text-3); }
@media (max-width: 600px) {
  .task-foot__meta { flex-basis: 100%; margin: var(--space-3) 0 0; }
}

/* ── .work: Att göra ─────────────────────────────────────────────────────── */

.work { display: grid; gap: var(--space-4); }
.work__list { list-style: none; display: grid; }

/* Kortet: Nu-steget, Planera nu, allt gjort. Ett kort med en ram — ingen
   accentkant. Markören (j k) byter kantfärg i stället för att lägga en
   ram till (granskningen: tre linjer till vänster). */
.work__card {
  display: grid; gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-4); padding: var(--space-6);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Väntar uppgiften på en person är det notisen som är huvudkortet: Planera nu
   står kvar, men lugnt, utan kort. */
.work__now--quiet { padding: 0; border: 0; box-shadow: none; background: none; gap: var(--space-3); }
.work__now--quiet .work__step { font-size: var(--fs-15); }
.app .work__now--quiet .work__actions { position: static; margin: 0; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.app .work__now--quiet .work__actions .btn { width: auto; }
.work__label { font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; }
.work__label-now { font-weight: var(--fw-600); color: var(--accent); }
.work__step { display: flex; gap: var(--space-4); align-items: baseline; font-size: var(--fs-17); font-weight: var(--fw-600); line-height: var(--lh-row); }
.work__step > .icon { flex: none; width: 20px; height: 20px; align-self: center; color: var(--ok); }
.work__step > .badge { position: relative; top: -2px; }
.work__text { min-width: 0; overflow-wrap: anywhere; }
.work__card > .hint { margin-top: calc(-1 * var(--space-2)); font-size: var(--fs-14); }

.work__how { background: var(--surface); border-radius: var(--r-md); padding: var(--space-4) var(--space-5); }
.work__how-head { font-size: var(--fs-12); font-weight: var(--fw-600); color: var(--text-2); margin-bottom: var(--space-2); }
.work__how-body { white-space: pre-wrap; font-size: var(--fs-14); line-height: var(--lh-text); }
/* "När du trycker Klart …": förklarande text, grå (chevronen räcker som signal). */
.work__then { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-14); line-height: var(--lh-text); color: var(--text-2); }
.work__then .icon { flex: none; width: 14px; height: 14px; margin-top: var(--space-2); color: var(--text-3); }

/* Handlingsraden: primär (Öppna i …, Claude gör det i Chrome), anteckningen,
   Klart och ⋯. I telefonen står den kvar längst ner medan kortet syns. */
.work__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-2); }
.work__actions > form { margin: 0; }
.work__actions .inline-form, .work__row-actions .inline-form { margin: 0; align-items: center; flex-wrap: nowrap; gap: var(--space-3); }
.work__done--note { flex: 1; min-width: 220px; }
.work__note {
  flex: 1; min-width: 0; height: 28px; padding: 0 var(--space-4);
  font: inherit; font-size: var(--fs-14); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.work__actions kbd { font-size: var(--fs-11); }
.work__actions .menu { margin-left: auto; }
/* Anteckningen på en egen rad i full bredd ovanför knapparna, inte inklämd
   mellan dem (där fick den 93–100 px och platshållaren klipptes;
   slutgranskningen 2026-10-20). Formuläret är display: contents, så att
   Klart står kvar i knapparnas rad. */
@media (min-width: 860px) {
  .work__actions .work__done--note { display: contents; }
  .work__actions .work__done--note .work__note { order: -1; flex: 1 1 100%; height: 32px; }
}

/* Raderna: gjort, Claude gör det, väntar, efter ditt Klart, körs. Platta rader
   med hårfina linjer (som listan), inga lådor. */
.work__row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline;
  min-height: var(--row-h); padding: var(--space-3) var(--space-3);
  border-radius: var(--r-sm);
}
/* Avdelaren börjar där texten börjar (som i listan och i iOS). */
.work__row + .work__row, .work__card + .work__row {
  background-image: linear-gradient(var(--line), var(--line)); background-repeat: no-repeat;
  background-size: calc(100% - 20px - var(--space-4) - var(--space-3)) 1px; background-position: right top;
}
.work__card + .work__row { background-image: none; }
.work__num { color: var(--text-3); font-size: var(--fs-12); text-align: right; }
.work__check { display: inline-flex; justify-self: end; align-self: start; margin-top: var(--space-1); color: var(--ok); }
.work__check .icon { width: 16px; height: 16px; }
.work__body { min-width: 0; display: grid; gap: var(--space-1); font-size: var(--fs-14); }
.work__row--done .work__text { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--faint); }
.work__done-note { color: var(--text-2); font-size: var(--fs-13); }
.work__row-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: flex-end; }
.work__who { color: var(--text-3); font-size: var(--fs-12); }
.work__row--running .work__text { color: var(--text); }

/* Status utan Nu-steg ("Inget väntar på dig just nu"): en rad, inte ett kort. */
.work__status { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-4) var(--space-5); border-radius: var(--r-lg); background: var(--surface); font-size: var(--fs-14); color: var(--text-2); }
.work__status strong { color: var(--text); font-weight: var(--fw-600); }
.work__status .work__pulse { display: none; }
.work__status--running .work__pulse { display: inline-block; }

/* Pricken som andas medan Claude arbetar (ingen rörelse vid reduced motion). */
.work__pulse { flex: none; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-3); vertical-align: 1px; border-radius: 50%; background: var(--accent); animation: work-pulse 1.6s var(--ease) infinite; }
.work__step > .work__pulse { align-self: center; margin-right: 0; }
@keyframes work-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.work__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.work__keys { font-size: var(--fs-12); color: var(--text-3); }
.work__keys kbd { font-size: var(--fs-11); }
.work__revise { margin-top: var(--space-4); }

/* Markören bland stegen: syns först när tangentbordet använts (data-keyed).
   Raderna: "vald" (tonad bakgrund och accentkant). Nu-kortet: kantfärgen. */
.work[data-keyed] .work__row.is-cursor { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.work[data-keyed] .work__card.is-cursor { border-color: var(--selected-edge); box-shadow: var(--shadow-sm), 0 0 0 1px var(--selected-edge); }
html.mac-inactive .work[data-keyed] .work__row.is-cursor { background: var(--active); box-shadow: inset 3px 0 0 var(--text-3); }
html.mac-inactive .work[data-keyed] .work__card.is-cursor { border-color: var(--text-3); box-shadow: var(--shadow-sm), 0 0 0 1px var(--text-3); }

/* Klart: kortet tonar och glider ihop innan sidan ritas om (doit.js). */
.work__card.is-leaving, .work__row.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* Lågt fönster (Doit.app med Claude-panelen öppen, ≈330 px kvar): Klart-raden
   står kvar längst ner också på datorn, så att den inte hamnar under vecket. */
@media (min-width: 860px) and (max-height: 600px) {
  .work__now .work__actions:not(.work__actions--quiet) {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
}
@media (max-width: 600px) {
  .work__card { padding: var(--space-5); }
  .work__row { grid-template-columns: 20px minmax(0, 1fr); min-height: var(--row-h-touch); padding-block: var(--space-4); }
  .work__row-actions { grid-column: 2; justify-content: flex-start; }
  .work__row--done .work__row-actions { grid-column: auto; grid-row: 1; grid-column-start: 3; }
  .work__row--done { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .work__done--note { min-width: 0; flex-basis: 100%; }
}
@media (max-width: 859px) {
  /* Klart i tumzonen: raden står kvar längst ner, ovanför bottenmenyn och
     safe area, så länge Nu-kortet syns. */
  .work__now .work__actions {
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
    margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-4) var(--space-5);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  /* Ett utkast: Skicka i mailets fot är huvudhandlingen — den står kvar
     längst ner medan mailet syns, och raden under (bara ⋯) är inte fäst. */
  .work__now .work__actions--quiet { position: static; margin: 0; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: flex-end; }
  .work__now form.composer > .composer__foot {
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  }
  .work__now form.composer > .composer__foot .btn--primary { flex: 1; }
  /* clip, inte hidden: med hidden blir mailet en rullningsbehållare, och då
     fastnade foten 50 px upp i mailet (ovanpå raden om bilagan) i stället för
     ovanför bottenmenyn. Tipset på en egen rad, så att Skicka får hela raden
     (granskningen: knappen var 55 px och texten stack ut). */
  .work__now form.composer { overflow: clip; }
  .work__now form.composer > .composer__foot .hint { flex-basis: 100%; }
  .work__now .work__actions { flex-wrap: nowrap; }
  .work__now .work__actions > form, .work__now .work__actions > a.btn { flex: 1 1 0; min-width: 0; }
  .work__now .work__actions .btn { width: 100%; justify-content: center; white-space: nowrap; overflow: hidden; }
  /* Tre knappar ryms inte bredvid varandra: den första (huvudhandlingen) på
     en egen rad i full bredd, de andra två bredvid varandra under. Ingen
     knapp bryts på två rader (slutgranskningen 2026-10-20). */
  .work__now .work__actions:has(> :nth-child(3):not(.menu)) { flex-wrap: wrap; }
  .work__now .work__actions:has(> :nth-child(3):not(.menu)) > :first-child { flex: 1 1 100%; }
  .work__now .work__actions:has(> :nth-child(3):not(.menu)) > :not(:first-child, .menu) { flex: 1 1 auto; width: auto; min-width: 0; }
  .work__now .work__actions .menu { flex: none; margin-left: 0; }
  .work__now .work__actions .menu .btn { width: auto; }
  .work__now .work__actions .work__done--note { flex: 1 1 0; min-width: 0; }
  /* Anteckningen till steget är datorns (⌘↩); raden i tumzonen är en rad. */
  .work__now .work__note { display: none; }
  .work__done-more { display: none; }
}

/* ── .plan ───────────────────────────────────────────────────────────────── */

.plan { display: grid; gap: var(--space-5); }
.plan--proposed { padding: var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
/* Ersatt eller medan Claude gör en ny version: grå text, inte genomskinlig
   (granskningen: opacity gav 3.3–3.9:1). */
.plan--old, .plan--stale { color: var(--text-2); }
.plan--old { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.plan--old .step-class, .plan--stale .step-class { --badge-bg: var(--surface); --badge-fg: var(--text-2); }
.plan__label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-12); font-weight: var(--fw-600); color: var(--text-2); }
.plan__interpretation { font-size: var(--fs-15); line-height: var(--lh-text); }
.plan__steps { list-style: none; display: grid; }
.plan__step {
  display: grid; grid-template-columns: 24px auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: baseline;
  padding: var(--space-4) 0;
}
.plan__step + .plan__step {
  background-image: linear-gradient(var(--line), var(--line)); background-repeat: no-repeat;
  background-size: calc(100% - 24px - var(--space-4)) 1px; background-position: right top;
}
.plan__num { color: var(--text-3); font-size: var(--fs-12); text-align: right; }
.plan__keep-hit { display: inline-flex; justify-content: flex-end; align-self: start; padding-top: var(--space-1); cursor: pointer; }
.plan__keep { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.plan__step .step-class { align-self: start; margin-top: var(--space-1); }
.plan__step-text { min-width: 0; font-size: var(--fs-14); line-height: var(--lh-text); overflow-wrap: anywhere; }
.plan__step--removed .plan__step-text, .plan__step:has(.plan__keep:not(:checked)) .plan__step-text { text-decoration: line-through; color: var(--text-3); }
.plan__mail { grid-column: 3; margin: var(--space-3) 0 var(--space-1); }
.plan__open { padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--surface); }
.plan__list { padding-left: var(--space-7); font-size: var(--fs-14); line-height: var(--lh-text); }
.plan__list li + li { margin-top: var(--space-1); }
.plan__sources-toggle { font-size: var(--fs-13); color: var(--text-2); }
.plan__sources-toggle > summary { padding-block: var(--space-2); }
.plan__sources-toggle[open] > summary { margin-bottom: var(--space-3); color: var(--text); }
.plan__sources { padding-left: var(--space-7); margin-bottom: var(--space-4); color: var(--text); font-size: var(--fs-13); }
.plan__sources li { margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.plan__coverage { margin-bottom: var(--space-4); color: var(--text); }
.plan__comment { padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-14); }
.plan__meta { margin: 0; font-size: var(--fs-12); color: var(--text-3); }
.plan__project { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: var(--space-3); }
.plan__project .actions { margin: 0; }
.plan__revising { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-14); color: var(--text); }
.plan__revising .icon { flex: none; margin-top: var(--space-1); color: var(--text-2); }
.plan__older { margin-top: var(--space-6); }
.plan__older > summary { font-size: var(--fs-14); color: var(--text-2); }
.plan-wrap { display: grid; gap: var(--space-4); }
.plan__state { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Beslutet: kommentaren i formuläret, knapparna i en rad som står kvar längst
   ner medan planen läses (sticky i sektionen) — i telefonen i tumzonen. */
.plan__decide.stack { margin-top: var(--space-5); }
/* Linjen överst avgränsar raden mot planen ovanför (kortets sidor slutade
   annars i luften; slutgranskningen 2026-10-20). */
.plan__bar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin: var(--space-4) calc(-1 * var(--space-4)) 0; padding: var(--space-4);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.plan__bar .btn[hidden] { display: none; }
.plan__bar-hint { margin-left: auto; font-size: var(--fs-12); color: var(--text-3); }
@media (max-width: 859px) {
  .plan__bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-4) var(--gutter); border-top: 1px solid var(--line); }
  .plan__bar .btn--primary { flex: 1; }
  .plan__bar-hint { flex-basis: 100%; margin: 0; order: -1; }
}
@media (max-width: 600px) {
  /* I sidans 16 px-fält, utan negativ marginal: kortets innehåll linjerar
     med resten av sidan (slutgranskningen 2026-10-20). */
  .plan--proposed { padding: var(--space-5); }
  .plan__step { grid-template-columns: 24px auto minmax(0, 1fr); }
  .plan__mail { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  /* Kryssrutan syns 16 px men har 44 px att trycka på (etiketten runt den). */
  .plan__keep-hit { min-width: var(--hit); min-height: var(--hit); margin: calc(-1 * var(--space-5)) 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-6)); padding: var(--space-5) var(--space-3) 0 0; }
}

/* ── .step-result ────────────────────────────────────────────────────────── */

/* Stegets läge under texten: grått, utom gjort (grönt), gick inte (rött) och
   väntar (flaggans text). Förberett är Philips tryck: mörkare, inte blått. */
.step-result { display: block; margin-top: var(--space-1); font-size: var(--fs-13); line-height: var(--lh-text); color: var(--text-2); }
.step-result .icon { width: 14px; height: 14px; margin-right: var(--space-2); vertical-align: -2px; }
.step-result--done { color: var(--ok); }
.step-result--prepared { color: var(--text); font-weight: var(--fw-500); }
.step-result--failed { color: var(--danger); font-weight: var(--fw-500); }
.step-result--waiting, .step-result--waits { color: var(--flag-text); }
.step-result--running { color: var(--text-2); }
/* Hur långt Claude kommit (Philip 2026-10-20): en tunn stapel över raden.
   Utan värde (i kö) rör den sig fram och tillbaka. */
.step-progress { display: block; margin-top: var(--space-2); }
.step-progress .step-result { margin-top: var(--space-1); }
.step-progress__bar { display: block; width: 100%; max-width: 320px; height: 4px; border: 0; border-radius: 2px; background: var(--line); color: var(--accent); appearance: none; overflow: hidden; }
.step-progress__bar::-webkit-progress-bar { background: var(--line); border-radius: 2px; }
.step-progress__bar::-webkit-progress-value { background: var(--accent); border-radius: 2px; transition: width 400ms var(--ease); }
.step-progress__bar::-moz-progress-bar { background: var(--accent); border-radius: 2px; }
.task__progress { display: inline-block; width: 64px; height: 3px; margin-left: var(--space-2); vertical-align: 2px; border: 0; border-radius: 2px; appearance: none; background: var(--line); }
.task__progress::-webkit-progress-bar { background: var(--line); border-radius: 2px; }
.task__progress::-webkit-progress-value { background: var(--accent); border-radius: 2px; }
.task__progress::-moz-progress-bar { background: var(--accent); border-radius: 2px; }
.step-edit { display: block; margin-top: var(--space-3); }
.step-files { display: block; margin-top: var(--space-3); }

/* ── .composer ───────────────────────────────────────────────────────────── */

/* Ett mail som går att läsa eller ändra, uppställt som i Mail: Till, Kopia
   och Ämne på en rad var med etiketten till vänster, texten under. Fälten är
   ramlösa; fokus syns som en accentlinje under raden (granskningen). */
.composer {
  display: block; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg); font-size: var(--fs-14); overflow: hidden;
}
.composer:focus-within { border-color: var(--accent); }
.composer__row {
  display: flex; align-items: baseline; gap: var(--space-5); margin: 0;
  padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line);
}
.composer__row:focus-within { box-shadow: inset 0 -2px 0 var(--focus-ring); }
.composer__label { flex: none; width: 46px; font-size: var(--fs-13); color: var(--text-2); }
.composer__value { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: var(--lh-text); }
.composer .composer__input, .composer .composer__body {
  flex: 1; min-width: 0; width: 100%; min-height: 28px; margin: 0; padding: var(--space-1) 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; font: inherit; font-size: var(--fs-14); line-height: var(--lh-text); color: var(--text);
}
.composer .composer__input:focus { outline: none; box-shadow: none; border: 0; }
.composer .composer__body:focus { outline: none; border: 0; box-shadow: inset 3px 0 0 var(--focus-ring); }
textarea.composer__input { resize: none; overflow: hidden; overflow-wrap: anywhere; }
.composer__row:has(input[name*="subject"]) .composer__input { font-weight: var(--fw-600); }
.composer .composer__body { display: block; padding: var(--space-5) var(--space-6) var(--space-6); resize: none; overflow: hidden; white-space: pre-wrap; }
div.composer__body { overflow-wrap: anywhere; }
.composer__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-6); border-top: 1px solid var(--line); background: var(--surface);
}
.composer__foot .hint { margin: 0; }
.composer.is-dirty [data-composer-state] { color: var(--flag-text); font-weight: var(--fw-500); }
.composer .draft__attachments { margin: 0; padding: 0 var(--space-6) var(--space-5); }
.composer select.composer__input { border: 0; background: transparent; font: inherit; font-size: var(--fs-14); color: var(--text); padding: 0; }
@media (max-width: 600px) {
  /* Etiketten ovanför värdet: en adress får hela bredden och bryts inte mitt
     i domänen. */
  .composer__row { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--space-5); }
  .composer__label { width: auto; font-size: var(--fs-12); }
  /* I en kolumn skulle flex: 1 ge fältet höjden 0 + min-höjd (data-grow
     sätter höjden efter texten). */
  .composer .composer__input { flex: none; }
  .composer__foot { padding-inline: var(--space-5); }
  .composer .composer__body { padding-inline: var(--space-5); }
}
@media (pointer: coarse) and (min-width: 601px) {
  .composer__row { padding-block: 0; align-items: center; }
}
@media (pointer: coarse) {
  .composer .composer__input { min-height: var(--hit); font-size: var(--fs-16); padding-block: var(--space-4); }
  .composer .composer__body { font-size: var(--fs-16); }
}

/* ── .recipients ─────────────────────────────────────────────────────────── */

.recipients { list-style: none; margin: 0; padding: var(--space-3) var(--space-6); font-size: var(--fs-13); color: var(--text-2); border-bottom: 1px solid var(--line); }
.recipients__warn { color: var(--danger); }

/* ── .draft ──────────────────────────────────────────────────────────────── */

.draft { display: block; margin-top: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-14); }
form.draft { padding: 0; background: var(--bg); }
.draft > summary { font-weight: var(--fw-600); }
.draft__meta { color: var(--text-2); font-size: var(--fs-13); margin: var(--space-3) 0; overflow-wrap: anywhere; }
.draft__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-text); }
.draft__attachments { margin-top: var(--space-3); font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--text); }
.draft__attachments .icon { width: 13px; height: 13px; vertical-align: -2px; color: var(--ok); }

/* ── .questions ──────────────────────────────────────────────────────────── */

.questions { list-style: none; padding: 0; margin: 0; }
.question { padding: var(--space-5) 0; }
.question + .question { box-shadow: inset 0 1px 0 var(--line); }
.question__text { font-size: var(--fs-15); font-weight: var(--fw-500); line-height: var(--lh-text); margin: var(--space-1) 0 var(--space-4); }
.question__answer { color: var(--text); font-size: var(--fs-14); white-space: pre-wrap; }
.question__form .actions { margin: 0; }
.question form textarea { font-size: var(--fs-14); }
/* Frågan som huvudkort: samma kort som planen och Nu-steget. */
.questions--lead > .question { padding: var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.questions--lead > .question + .question { margin-top: var(--space-4); box-shadow: var(--shadow-sm); }
.questions--lead .question__text { font-size: var(--fs-17); font-weight: var(--fw-600); line-height: var(--lh-row); }
@media (max-width: 600px) {
  .questions--lead > .question { padding: var(--space-5); margin-inline: calc(-1 * var(--space-2)); }
}
@media (pointer: coarse) {
  .question form textarea { font-size: var(--fs-16); }
}

/* ── .review: /fragor ────────────────────────────────────────────────────── */

.review__task { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; font-size: var(--fs-13); color: var(--text-2); }
.review__task:hover { color: var(--text); }
.review__project { font-size: var(--fs-12); color: var(--text-3); }
.review__text { margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-15); line-height: var(--lh-text); }
.review__steps { list-style: none; display: grid; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-14); color: var(--text-2); }
.review__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.review__actions { display: flex; align-items: center; gap: var(--space-4); }
/* j k i Frågor (raderna är [data-row]): samma "vald" som i listorna. */
.review > .question { position: relative; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); border-radius: var(--r-md); }
/* Avdelaren i spaltens bredd och utan rundade ändar (skuggan i radens
   utfyllnad stack ut 8 px och följde radien; slutgranskningen 2026-10-20). */
.review > .question + .question { box-shadow: none; }
.review > .question + .question::before {
  content: ""; position: absolute; top: 0; left: var(--space-4); right: var(--space-4);
  border-top: 1px solid var(--line);
}
.review > .question.is-selected::before, .review > .question.is-selected + .question::before { border-color: transparent; }
.review > .question.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
html.mac-inactive .review > .question.is-selected { background: var(--active); box-shadow: inset 3px 0 0 var(--text-3); }
@media (pointer: coarse) {
  .review__task { min-height: var(--hit); align-content: center; }
}

/* ── .diff och förslagen ─────────────────────────────────────────────────── */

.proposal__summary { font-size: var(--fs-15); line-height: var(--lh-text); }
.proposal__stat { margin-top: var(--space-5); font-size: var(--fs-12); color: var(--text-3); }
.proposal__whole { margin-top: var(--space-4); }
.proposal__whole > summary { font-size: var(--fs-14); color: var(--text-2); }
.proposal__actions { margin-top: var(--space-6); }
.proposal__open { margin-top: var(--space-6); }
.diff {
  font: var(--fs-13)/var(--lh-text) var(--mono); background: var(--surface); border-radius: var(--r-lg);
  padding: var(--space-4) 0; margin: var(--space-3) 0; overflow-x: auto;
}
.diff__line { display: block; padding: 0 var(--space-6); white-space: pre-wrap; overflow-wrap: anywhere; }
.diff__line--same { color: var(--text-2); }
.diff__line--add { background: var(--ok-tint); color: var(--text); box-shadow: inset 3px 0 0 var(--ok); }
.diff__line--del { background: var(--danger-tint); color: var(--text); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent); box-shadow: inset 3px 0 0 var(--danger); }
.diff__gap { display: block; padding: var(--space-1) var(--space-6); color: var(--text-3); font-family: var(--font); font-size: var(--fs-12); }
@media (max-width: 600px) {
  .diff { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .diff__line, .diff__gap { padding-inline: var(--gutter); }
}

/* ── .files och .file-card ───────────────────────────────────────────────── */

.files { list-style: none; display: grid; gap: var(--space-3); }
.file { display: grid; gap: var(--space-2); }
.files-empty { margin-top: var(--space-9); }

/* Filkortet: sorten, namnet med storleken och varifrån under, Öppna och ⋯. */
.file-card {
  display: flex; align-items: center; gap: var(--space-4); min-width: 0; max-width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); font-size: var(--fs-14);
}
.file-card__kind { flex: none; }
.file-card__kind--excel { --badge-bg: var(--kind-excel-tint); --badge-fg: var(--kind-excel); }
.file-card__kind--word { --badge-bg: var(--kind-word-tint); --badge-fg: var(--kind-word); }
.file-card__kind--pdf { --badge-bg: var(--danger-tint); --badge-fg: var(--danger); }
.file-card__main { flex: 1; min-width: 0; display: grid; }
.file-card__name { min-width: 0; font-weight: var(--fw-500); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card__name:hover { text-decoration: underline; }
.file-card__meta { min-width: 0; color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card__actions { flex: none; display: flex; align-items: center; gap: var(--space-1); }
@media (pointer: coarse) {
  /* 44 px att trycka på utan att kortet blir högre: luft inåt, lika mycket
     negativ marginal utåt. */
  .file-card__name { display: block; line-height: 20px; padding-block: var(--space-5); margin-block: calc(-1 * var(--space-5)); }
}
@media (max-width: 600px) {
  .file-card__actions > .btn:not(.btn--icon) { display: none; }
}
.file__note { color: var(--text-2); font-size: var(--fs-13); padding-left: var(--space-4); }
.file__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding-left: var(--space-4); color: var(--text-2); font-size: var(--fs-12); }
.file__share .icon { width: 12px; height: 12px; color: var(--text-3); }
.file__share .inline-form { display: inline-flex; margin: 0; }
.file__versions { padding-left: var(--space-4); font-size: var(--fs-13); color: var(--text-2); }
.file__versions ul { margin: var(--space-2) 0 0; padding-left: var(--space-7); }
.file-upload { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.file-upload .btn { cursor: pointer; }
.file-upload--quiet .hint { color: var(--text-3); font-size: var(--fs-12); }

/* ── Filvisningen ────────────────────────────────────────────────────────── */

.sheets { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.sheet > summary { font-weight: var(--fw-500); padding-block: var(--space-3); }
.sheet__scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--r-md); }
.sheet__table { border-collapse: collapse; font-size: var(--fs-13); }
.sheet__table td { border: 1px solid var(--line); padding: var(--space-2) var(--space-4); white-space: nowrap; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
.sheet__table td.num { text-align: right; }
.sheet__table tr:first-child td { font-weight: var(--fw-600); background: var(--surface); position: sticky; top: 0; }
.file-text { padding: var(--space-5) var(--space-6); border-radius: var(--r-lg); background: var(--surface); font: var(--fs-13)/var(--lh-text) var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.file-image { max-width: 100%; border-radius: var(--r-md); }

}

/* Tangentbordstipsen i Att göra döljs på pekskärm (också i base.css via
   .keys-hint; .work__keys står kvar här för äldre markup). */
@layer views {
@media (hover: none) and (pointer: coarse) {
  .work__keys { display: none; }
}
}