/* components: Komponenterna: knapparna (en familj), märken och räknare, chips och segment,
   menyerna (details), tomma lägen och skelett, fält, switch och kryssrutor, listraderna,
   avatarer, bekräftelsen på plats, .card, .row, .section, .notice, .keys, .prose,
   datumväljaren, taggarna (.tag-pill, taggvalet, tc-*) och hjälparna för layout
   (.stack, .actions, .inline-form). Används av alla vyer. Hjälparna som ritar
   markupen finns i src/views/components.js; alla varianter syns på /designsystem
   (bara med dev-inloggningen). API:t och reglerna: ds/components.md (designnatten).
   Ägs av komponent-agenten. */

@layer components {

/* ── .btn ────────────────────────────────────────────────────────────────── */

/* En knappfamilj: sekundär (förval), primär, ghost och farlig, i tre storlekar.
   32 px på desktop (28 för --sm, 40 för --lg), 44 px på pekskärm. Hover lägger
   --hover ovanpå ytan i stället för att byta den, så att knappen är lika solid
   i ett sticky sidhuvud. Ett primärt utseende: accenten med --on-accent. */
.btn {
  --btn-h: 32px;
  --btn-bg: var(--bg);
  --btn-fg: var(--text);
  --btn-edge: var(--line-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--btn-h); padding: var(--space-2) var(--space-5);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-500); line-height: var(--lh-tight);
  text-decoration: none; cursor: pointer; user-select: none;
  border: 1px solid var(--btn-edge); border-radius: var(--r-md);
  background-color: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { background-image: linear-gradient(var(--hover), var(--hover)); color: var(--btn-fg); }
.btn:active { background-image: linear-gradient(var(--active), var(--active)); }
.btn .attn { margin-left: var(--space-3); vertical-align: 1px; }
.btn .icon { width: 16px; height: 16px; }
.btn kbd {
  margin-left: var(--space-2); background: transparent; color: inherit;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; box-shadow: none; background-image: none; }
.btn[aria-disabled="true"] { pointer-events: none; }

.btn--secondary { --btn-bg: var(--bg); --btn-fg: var(--text); --btn-edge: var(--line-strong); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-edge: transparent; }
.btn--primary:hover, .btn--primary:active { background-image: none; --btn-bg: var(--accent-hover); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-2); --btn-edge: transparent; box-shadow: none; }
.btn--ghost:hover { --btn-fg: var(--text); }
.btn--danger { --btn-bg: var(--danger); --btn-fg: var(--on-accent); --btn-edge: transparent; }
.btn--danger:hover, .btn--danger:active { background-image: none; --btn-bg: color-mix(in srgb, var(--danger) 88%, var(--text)); }

.btn--sm { --btn-h: 28px; padding: var(--space-1) var(--space-4); gap: var(--space-2); font-size: var(--fs-13); border-radius: var(--r-sm); }
.btn--sm .icon { width: 14px; height: 14px; }
.btn--lg { --btn-h: 40px; padding: var(--space-3) var(--space-6); font-size: var(--fs-15); }
.btn--icon { min-width: var(--btn-h); padding: 0; }
.btn--block { width: 100%; }

/* Röd text för en farlig handling (Ta bort #tagg). Efter .btn, så att färgen vinner. */
.danger { color: var(--danger); }
.btn.danger { --btn-fg: var(--danger); }
.btn--ghost.danger:hover { --btn-fg: var(--danger); background-image: linear-gradient(var(--danger-tint), var(--danger-tint)); }

/* Pekskärm: 44 px träffyta för varje knapp (Apples HIG). */
@media (pointer: coarse) {
  .btn, .btn--sm, .btn--lg { --btn-h: var(--hit); min-width: var(--hit); }
}

/* ── .section ────────────────────────────────────────────────────────────── */

.section { margin-top: var(--space-10); }
.section__title {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: var(--fs-13); font-weight: var(--fw-600); letter-spacing: -0.005em;
  color: var(--text); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line);
}
.section__count { font-weight: var(--fw-500); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── .rows ───────────────────────────────────────────────────────────────── */

.rows { list-style: none; }

/* ── .badge ──────────────────────────────────────────────────────────────── */

/* Märket: 18 px, 12 px medium, vanliga bokstäver, radien --r-xs. Tonen är ett par
   (tint + text) som klarar 4.5:1 i båda lägena. warn har mörk text på gult:
   --attention som text på sin tint klarar inte 4.5:1. */
.badge {
  --badge-bg: var(--surface);
  --badge-fg: var(--text-2);
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2);
  height: 18px; padding: 0 var(--space-3);
  font-size: var(--fs-12); font-weight: var(--fw-500); line-height: 18px; letter-spacing: 0; text-transform: none;
  white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums;
  border-radius: var(--r-xs); background: var(--badge-bg); color: var(--badge-fg);
}
.badge .icon { width: 12px; height: 12px; }
.badge--accent { --badge-bg: var(--accent-tint); --badge-fg: var(--accent); }
.badge--ok { --badge-bg: var(--ok-tint); --badge-fg: var(--ok); }
.badge--warn { --badge-bg: var(--attention-tint); --badge-fg: var(--text); }
.badge--danger { --badge-bg: var(--danger-tint); --badge-fg: var(--danger); }
.badge--flag { --badge-bg: var(--flag-tint); --badge-fg: var(--flag-text); }
.badge--dot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--warn.badge--dot::before { background: var(--attention); }

/* ── .counter ────────────────────────────────────────────────────────────── */

.counter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 var(--space-2); margin-left: var(--space-2);
  font-size: var(--fs-12); font-weight: var(--fw-500); line-height: 18px; font-variant-numeric: tabular-nums;
  border-radius: var(--r-full); color: var(--text-3);
}
.counter--accent { background: var(--accent); color: var(--on-accent); font-weight: var(--fw-600); }

/* ── .kbd-group ──────────────────────────────────────────────────────────── */

.kbd-group { display: inline-flex; gap: var(--space-1); vertical-align: middle; }

/* ── .pill ───────────────────────────────────────────────────────────────── */

.pill {
  display: inline-block; font-size: var(--fs-12); font-weight: var(--fw-500); padding: 0 var(--space-3); border-radius: var(--r-xs);
  background: var(--surface); color: var(--text-2); vertical-align: middle; letter-spacing: 0; line-height: 18px;
}
.pill--task { background: var(--surface); }
.pill--wait { background: var(--accent-tint); color: var(--accent); }
.pill--tech { background: var(--accent-tint); color: var(--accent); }
.pill--drafted { background: var(--accent-tint); color: var(--accent); }
.pill--failed { background: var(--danger-tint); color: var(--danger); }

/* ── .empty ──────────────────────────────────────────────────────────────── */

/* Tomma lägen: lugnt och centrerat i listan. Med emptyState() också en ikon i
   --text-3, en rubrik och en handling — en tom vy säger vad man gör härnäst. */
.empty { padding: var(--space-9) var(--space-6); text-align: center; color: var(--text-2); font-size: var(--fs-14); }
.empty--state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); }
.empty__icon { width: 28px; height: 28px; color: var(--text-3); margin-bottom: var(--space-3); }
.empty__title { font-size: var(--fs-15); font-weight: var(--fw-600); color: var(--text); }
.empty__text { max-width: 40ch; font-size: var(--fs-14); color: var(--text-2); line-height: var(--lh-text); }
.empty__action { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* ── .skeleton ───────────────────────────────────────────────────────────── */

/* Laddning: radernas form i grått med en lugn shimmer. reduced motion i base.css
   stoppar den (då står raderna stilla). */
.skeleton { display: grid; }
.skeleton__row { display: flex; align-items: center; gap: var(--space-5); height: var(--row-h); }
.skeleton__dot { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.skeleton__bar { height: 10px; border-radius: var(--r-full); flex: 0 1 62%; }
.skeleton__row:nth-child(3n) .skeleton__bar { flex-basis: 44%; }
.skeleton__row:nth-child(3n+1) .skeleton__bar { flex-basis: 54%; }
.skeleton__dot, .skeleton__bar {
  background: linear-gradient(90deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 300% 100%;
  animation: skeleton-shimmer calc(var(--dur-slow) * 5) var(--ease) infinite;
}
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── .more ───────────────────────────────────────────────────────────────── */

.more { margin-top: var(--space-7); font-size: var(--fs-14); }
/* I telefonen: 44 px att trycka på utan att raden blir högre (luft inåt,
   lika mycket negativ marginal utåt). */
@media (pointer: coarse) {
  .more a { display: inline-block; min-width: var(--hit); padding-block: var(--space-6); margin-block: calc(-1 * var(--space-6)); }
}

/* ── .meta ───────────────────────────────────────────────────────────────── */

.meta, .hint { color: var(--text-2); font-size: var(--fs-13); }
.meta { margin-top: var(--space-8); }

/* ── .stack ──────────────────────────────────────────────────────────────── */

.stack { display: flex; flex-direction: column; gap: var(--space-6); }

/* ── .field ──────────────────────────────────────────────────────────────── */

/* Ett fält: etikett, fältet (utseendet kommer från base.css), hjälptext och fel. */
.field { display: flex; flex-direction: column; gap: var(--space-3); }
.field__label { font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--text-2); }
.field__hint { font-size: var(--fs-13); color: var(--text-2); }
.field__error { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-13); color: var(--danger); }
.field__error .icon { width: 14px; height: 14px; }
.field--error > :is(input, textarea, select) { border-color: var(--danger); }
.field--date input { max-width: 200px; }

/* ── .check ──────────────────────────────────────────────────────────────── */

.check { display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; font-size: var(--fs-14); }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.check:has(input:disabled) { cursor: default; color: var(--text-3); }
@media (pointer: coarse) {
  .check { min-height: var(--hit); }
}

/* ── .inline-form ────────────────────────────────────────────────────────── */

.inline-form { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; margin: var(--space-5) 0; margin-top: var(--space-4); }

/* ── .actions ────────────────────────────────────────────────────────────── */

.actions { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.actions--secondary { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.actions form { display: inline; }

/* ── .linklike ───────────────────────────────────────────────────────────── */

.linklike { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-weight: var(--fw-600); }
/* I telefonen: 44 × 44 att trycka på, utan att texten flyttar sig. */
@media (pointer: coarse) {
  .linklike { min-width: var(--hit); padding-block: var(--space-6); margin-block: calc(-1 * var(--space-6)); }
}

/* ── .edit ───────────────────────────────────────────────────────────────── */

details.edit { margin-top: var(--space-10); border-top: 1px solid var(--line); padding-top: var(--space-6); }
.edit > summary { margin-bottom: var(--space-5); }

/* ── .page-head ──────────────────────────────────────────────────────────── */

/* Överst på projektsidan, direkt under rubriken. */
.page-head + details.edit { margin: 0 0 var(--space-7); border-top: 0; padding-top: 0; }

/* ── .notice ─────────────────────────────────────────────────────────────── */

.notice { padding: var(--space-5) var(--space-6); border-radius: var(--r-md); margin: var(--space-5) 0; background: var(--surface); font-size: var(--fs-14); }
.notice--error { color: var(--danger); background: var(--danger-tint); }

/* ── .card ───────────────────────────────────────────────────────────────── */

.card { padding: var(--space-6) var(--space-7); border: 1px solid var(--line); border-radius: var(--r-lg); margin: var(--space-5) 0; }
.card h3 { font-size: var(--fs-14); margin: var(--space-6) 0 var(--space-3); }
.card h3:first-child { margin-top: 0; }
/* Planen: lugnare ram, luft mellan stegen. Namnet säger accent: en accentkant till
   vänster, som "vald" i listorna, men ingen färgad yta. */
.card--accent { border-color: var(--line-strong); box-shadow: var(--shadow-sm), inset 3px 0 0 var(--selected-edge); }

/* ── .steps ──────────────────────────────────────────────────────────────── */

.steps { padding-left: var(--space-7); margin: var(--space-4) 0; }
.steps li { margin-bottom: var(--space-3); }

/* ── .row ────────────────────────────────────────────────────────────────── */

.row {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-5) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14);
}
.row > span:first-child { flex: 1; min-width: 160px; }
.row__meta { color: var(--text-2); font-size: var(--fs-13); }
/* Det som inte gäller just nu (en återkallad nyckel, ett konto som inte synkar):
   grå text i stället för genomskinlighet, så att raden går att läsa (AA) och
   knappar och fel i den behåller sin färg. */
.row--muted { color: var(--text-2); }
.row--muted .row__meta, .row--muted .muted { color: var(--text-3); }
.row--stack { flex-direction: column; align-items: stretch; gap: var(--space-3); }

/* ── .list-row ───────────────────────────────────────────────────────────── */

/* listRow(): ledande del, titel och underrad, meta, avslutande del. Avdelaren
   ritas med li + li och börjar där texten börjar (--row-inset), som i iOS.
   Ingen linje överst, så rubriken ovanför behöver ingen egen regel. */
.list-rows { list-style: none; }
.list-row {
  --lead-w: 28px;
  --row-pad: var(--space-4);
  --row-inset: var(--row-pad);
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--row-h);
}
.list-row--leading { --row-inset: calc(var(--row-pad) + var(--lead-w) + var(--space-5)); }
.list-row + .list-row::before { content: ""; position: absolute; top: 0; left: var(--row-inset); right: 0; border-top: 1px solid var(--line); }
.list-row__main {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-3) var(--row-pad); border-radius: var(--r-sm);
  color: inherit; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.list-row__main[href]:hover { background: var(--hover); }
.list-row__leading { flex: none; width: var(--lead-w); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.list-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.list-row__title, .list-row__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__title { font-size: var(--fs-14); line-height: var(--lh-row); color: var(--text); }
.list-row__subtitle { font-size: var(--fs-13); line-height: var(--lh-row); color: var(--text-2); }
.list-row__meta { flex: none; font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; }
.list-row__trailing { flex: none; display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-2); }
.list-row.is-selected > .list-row__main { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.list-rows--compact .list-row { min-height: 32px; }
.list-rows--compact .list-row__main { padding-block: var(--space-2); }
.list-rows--comfortable .list-row { min-height: var(--hit); }
@media (pointer: coarse) {
  .list-row { min-height: var(--row-h-touch); }
  .list-row__title { font-size: var(--fs-17); }
  .list-row__subtitle { font-size: var(--fs-15); }
}

/* ── .avatar ─────────────────────────────────────────────────────────────── */

/* Initialer i palettens mörka toner, vit text (--on-avatar) över 4.5:1 i båda lägena. */
.avatar {
  --av: var(--avatar-fallback);
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--av); color: var(--on-avatar);
  font-size: var(--fs-12); font-weight: var(--fw-600); line-height: 1; letter-spacing: 0; user-select: none;
}
.avatar--sm { width: 20px; height: 20px; font-size: var(--fs-11); }
.avatar--lg { width: 40px; height: 40px; font-size: var(--fs-15); }
.avatar--0 { --av: var(--avatar-0); }
.avatar--1 { --av: var(--avatar-1); }
.avatar--2 { --av: var(--avatar-2); }
.avatar--3 { --av: var(--avatar-3); }
.avatar--4 { --av: var(--avatar-4); }
.avatar--5 { --av: var(--avatar-5); }
.avatar--6 { --av: var(--avatar-6); }
.avatar--7 { --av: var(--avatar-7); }

/* ── .keys ───────────────────────────────────────────────────────────────── */

.keys { border-collapse: collapse; margin: var(--space-4) 0 var(--space-5); font-size: var(--fs-14); }
.keys td { padding: var(--space-3) var(--space-7) var(--space-3) 0; vertical-align: top; }
.keys td:first-child { white-space: nowrap; }

/* ── .tag-pill ───────────────────────────────────────────────────────────── */

.tag-pill {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-12); color: var(--text-2); white-space: nowrap;
}
.tag-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--faint)); flex: none; }
.tag-pill--inherited::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc, var(--faint)); }
.tag-pill__by { margin-left: calc(-1 * var(--space-1)); color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-600); }

/* ── .tag-picker ─────────────────────────────────────────────────────────── */

.tag-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── .tag-choice ─────────────────────────────────────────────────────────── */

.tag-choice {
  display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer;
  font-size: var(--fs-13); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4); border-radius: var(--r-full);
  border: 1px solid var(--line); color: var(--text-2); user-select: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.tag-choice::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--faint)); }
.tag-choice:hover { border-color: var(--line-strong); color: var(--text); }
.tag-choice input { position: absolute; opacity: 0; pointer-events: none; }
.tag-choice:has(input:checked) { background: color-mix(in srgb, var(--tc, var(--accent)) 12%, var(--bg)); border-color: color-mix(in srgb, var(--tc, var(--accent)) 45%, var(--bg)); color: var(--text); }
.tag-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag-choice--inherited { cursor: default; border-style: dashed; }

/* ── .chips ──────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-6); }
/* I en ruta sätter rutan luften (gapet i .stack). Står här och inte i shell.css:
   lagret components går före shell, så regeln där vann aldrig. */
.dialog .chips { margin: 0; }

/* ── .chip ───────────────────────────────────────────────────────────────── */

/* Ett filter eller ett snabbval: en riktig knapp (egen bakgrund, font och markör,
   så att button.chip inte får webbläsarens grå knapp). Vald = accentens tint och
   kant, som "vald" i listorna. På pekskärm är träffytan 44 px och pillret ritas
   av ::before (32 px synligt). */
.chip {
  --chip-bg: var(--bg);
  --chip-fg: var(--text-2);
  --chip-edge: var(--line-strong);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 28px; padding: 0 var(--space-5);
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-500); line-height: var(--lh-tight);
  color: var(--chip-fg); background: var(--chip-bg); border: 1px solid var(--chip-edge); border-radius: var(--r-full);
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover { --chip-bg: var(--surface); --chip-fg: var(--text); }
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-current] { --chip-bg: var(--selected-bg); --chip-fg: var(--accent); --chip-edge: var(--selected-edge); }
.chip:disabled { opacity: 0.5; cursor: default; }
.chip kbd { margin-left: var(--space-1); background: transparent; }
.chip .counter { margin-left: 0; }
@media (pointer: coarse) {
  .chip { min-height: var(--hit); background: transparent; border-color: transparent; }
  .chip::before {
    content: ""; position: absolute; inset: var(--space-3) 0; z-index: -1;
    border-radius: inherit; background: var(--chip-bg); border: 1px solid var(--chip-edge);
  }
}

/* ── .segmented ──────────────────────────────────────────────────────────── */

/* Ett segment (Dag/Vecka/Månad, Lista/Rutnät): länkar i en ram, det valda i
   accentens tint. */
.segmented {
  display: inline-flex; gap: var(--space-1); padding: var(--space-1);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg);
}
.segmented__item {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 26px; padding: 0 var(--space-5); border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented__item:hover { color: var(--text); background: var(--hover); }
.segmented__item.is-active, .segmented__item[aria-current] { background: var(--selected-bg); color: var(--accent); font-weight: var(--fw-600); }
.segmented__item .counter { margin-left: 0; }
@media (pointer: coarse) {
  .segmented { padding: 0; gap: 0; }
  .segmented__item { min-height: var(--hit); }
}

/* ── .menu ───────────────────────────────────────────────────────────────── */

/* Menyerna på <details>: menu() och de äldre .file-card__more och .meeting-more
   (mailens Mer är menu() sedan designnatten). Skriptet
   ("Menyerna" i doit.js) sätter data-flip="up"/"left"/"right" när menyn inte ryms.
   Under 600 px är menyn ett ark längst ner med scrim bakom. */
.menu, .file-card__more, .meeting-more { position: relative; display: inline-block; }
.menu > summary, .file-card__more > summary, .meeting-more > summary { list-style: none; }
.menu > summary::-webkit-details-marker, .file-card__more > summary::-webkit-details-marker, .meeting-more > summary::-webkit-details-marker { display: none; }
.menu[open] > summary, .file-card__more[open] > summary, .meeting-more[open] > summary { background-image: linear-gradient(var(--active), var(--active)); --btn-fg: var(--text); }
.menu__chevron { width: 14px; height: 14px; color: var(--text-3); margin-right: calc(-1 * var(--space-2)); }
.file-card__more > summary { padding-inline: var(--space-3); }

.menu__list, .file-card__menu, .meeting-more__menu {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-popover);
  display: grid; min-width: 200px; max-width: min(340px, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-2); background: var(--elevated);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  animation: menu-in var(--dur-fast) var(--ease-out);
}
/* Stängd: uttryckligen borta (details döljer innehållet själv, men granskningen
   och skärmläsare som går på display ska inte se raderna). */
.menu:not([open]) > .menu__list, .file-card__more:not([open]) > .file-card__menu, .meeting-more:not([open]) > .meeting-more__menu { display: none; }
.menu--start > .menu__list { right: auto; left: 0; }
.meeting-more__menu { left: 0; right: auto; min-width: 280px; }
.menu[data-flip~="up"] > .menu__list, .file-card__more[data-flip~="up"] > .file-card__menu, .meeting-more[data-flip~="up"] > .meeting-more__menu { top: auto; bottom: calc(100% + var(--space-2)); }
.menu[data-flip~="left"] > .menu__list, .file-card__more[data-flip~="left"] > .file-card__menu, .meeting-more[data-flip~="left"] > .meeting-more__menu { left: auto; right: 0; }
.menu[data-flip~="right"] > .menu__list, .file-card__more[data-flip~="right"] > .file-card__menu, .meeting-more[data-flip~="right"] > .meeting-more__menu { right: auto; left: 0; }

.menu__item, .file-card__menu a, .meeting-more__menu > a {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  min-height: 32px; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: var(--fs-14); color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
}
.menu__item:hover, .file-card__menu a:hover, .meeting-more__menu > a:hover { background: var(--hover); }
.menu__item:focus-visible, .file-card__menu a:focus-visible, .meeting-more__menu > a:focus-visible { background: var(--hover); outline-offset: -2px; }
.menu__item .icon { width: 16px; height: 16px; color: var(--text-2); }
.menu__label { flex: 1; min-width: 0; }
.menu__item kbd { margin-left: auto; }
.menu__item[aria-current] { background: var(--selected-bg); color: var(--accent); }
.menu__item[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.menu__item--danger, .menu__item--danger .icon { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-tint); }
.menu__form { display: contents; }
.menu__sep { border: 0; border-top: 1px solid var(--line); margin: var(--space-2) calc(-1 * var(--space-2)); }
/* Avbryt (skapas av doit.js, "Menyerna") finns bara i arket i telefonen. */
.menu__cancel { display: none; }

@keyframes menu-in { from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes scrim-in { from { opacity: 0; } }

@media (max-width: 599px) {
  .menu__list, .file-card__menu, .meeting-more__menu,
  .menu[data-flip] > .menu__list, .file-card__more[data-flip] > .file-card__menu, .meeting-more[data-flip] > .meeting-more__menu {
    position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: var(--z-overlay);
    min-width: 0; max-width: none; max-height: 72vh; overflow: auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg);
    animation: sheet-in var(--dur-slow) var(--ease-out);
  }
  .menu[open]::before, .file-card__more[open]::before, .meeting-more[open]::before {
    content: ""; position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1);
    background: var(--scrim); animation: scrim-in var(--dur) var(--ease-out);
  }
  .menu__item, .file-card__menu a, .meeting-more__menu > a { min-height: var(--hit); font-size: var(--fs-17); }
  /* Som ett action sheet i iOS: överst vad arket gäller (menyns namn, t.ex.
     "Status"), sist Avbryt. Rubriken läses inte upp en gång till; menyn bär
     redan namnet. Avdelarna börjar där raderna börjar, 16 px in. */
  .menu__list[aria-label]::before {
    content: attr(aria-label); content: attr(aria-label) / "";
    display: block; min-width: 0; overflow: hidden; padding: var(--space-3) var(--space-4) var(--space-4);
    font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text-2);
    white-space: nowrap; text-overflow: ellipsis;
  }
  .menu__sep { margin-inline: var(--space-4); }
  .menu__cancel {
    display: flex; justify-content: center; width: auto;
    margin: var(--space-2) var(--space-4) 0; border-top: 1px solid var(--line); border-radius: 0;
    font-weight: var(--fw-600); color: var(--accent);
  }
}

/* ── .confirm ────────────────────────────────────────────────────────────── */

/* Bekräftelse på plats (confirmDanger): knappen fäller ut en förklaring och en
   röd knapp. Inget webbläsarfönster; esc stänger (doit.js). */
.confirm { display: inline-block; }
.confirm[open] { display: block; }
.confirm > summary { list-style: none; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm[open] > summary { background-image: linear-gradient(var(--danger-tint), var(--danger-tint)); }
.confirm:not([open]) > .confirm__panel { display: none; }
.confirm__panel {
  display: grid; gap: var(--space-5); max-width: 440px; margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6); border-radius: var(--r-lg);
  background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  animation: menu-in var(--dur) var(--ease-out);
}
.confirm__text { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--fs-14); line-height: var(--lh-text); color: var(--text); }
.confirm__icon { flex: none; width: 16px; height: 16px; margin-top: var(--space-1); color: var(--danger); }
.confirm__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ── .hint ───────────────────────────────────────────────────────────────── */

.hint--error { color: var(--danger); }

/* ── .due ────────────────────────────────────────────────────────────────── */

/* Datumet på en uppgift (Kommande, listorna): ett märke (samma form som .badge). */
.due {
  flex: none;
  color: var(--text-2);
  background: var(--surface);
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: var(--fw-500);
  line-height: 18px;
  padding: 0 var(--space-3);
  border-radius: var(--r-xs);
  font-variant-numeric: tabular-nums;
}
.due--soon { color: var(--accent); background: var(--accent-tint); }
.due--overdue { color: var(--danger); background: var(--danger-tint); }

/* ── .tc ─────────────────────────────────────────────────────────────────── */

/* Taggens färg: en fast färg per tagg (id modulo 10), satt som klass — CSP:n
släpper inte igenom style-attribut. */
.tc-0 { --tc: var(--tag-0); }
.tc-1 { --tc: var(--tag-1); }
.tc-2 { --tc: var(--tag-2); }
.tc-3 { --tc: var(--tag-3); }
.tc-4 { --tc: var(--tag-4); }
.tc-5 { --tc: var(--tag-5); }
.tc-6 { --tc: var(--tag-6); }
.tc-7 { --tc: var(--tag-7); }
.tc-8 { --tc: var(--tag-8); }
.tc-9 { --tc: var(--tag-9); }

/* ── .switch ─────────────────────────────────────────────────────────────── */

/* En strömbrytare. Förvalet är flaggans orange (uppgiftens Flaggad);
   switchControl() ger --accent för allt annat. */
.switch { --switch-on: var(--flag); position: relative; display: inline-flex; align-items: center; gap: var(--space-5); cursor: pointer; font-size: var(--fs-14); }
.switch--accent { --switch-on: var(--accent); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 34px; height: 20px; border-radius: var(--r-full); background: var(--check-ring); position: relative; transition: background var(--dur-fast) var(--ease); flex: none; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease); }
.switch input:checked + .switch__track { background: var(--switch-on); }
.switch input:checked + .switch__track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.switch:has(input:disabled) { cursor: default; color: var(--text-3); }
.switch:has(input:disabled) .switch__track { opacity: 0.5; }
@media (pointer: coarse) {
  .switch { min-height: var(--hit); }
}

/* ── .prose ──────────────────────────────────────────────────────────────── */

/* Kontextfilerna och läget som text, inte kod. */
.prose { font-size: var(--fs-15); line-height: var(--lh-prose); color: var(--text); }
.prose h3 { font-size: var(--fs-13); font-weight: var(--fw-600); margin: var(--space-7) 0 var(--space-2); color: var(--text); }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 var(--space-5); padding-left: var(--space-7); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--faint); }
.prose--card { padding: var(--space-6) var(--space-7); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.prose code { font-size: .9em; padding: 1px var(--space-3); border-radius: var(--r-sm); background: var(--surface); }

/* ── .date-quick ─────────────────────────────────────────────────────────── */

.date-quick { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.date-quick[hidden] { display: none; }
.date-quick__btn {
  display: inline-flex; align-items: center; min-height: 28px;
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-500); padding: 0 var(--space-4); border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text-2); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.date-quick__btn:hover { color: var(--text); background: var(--surface); }
.date-quick__btn--clear { border-color: transparent; color: var(--text-3); font-size: var(--fs-16); line-height: 1; padding: 0 var(--space-4); }
@media (pointer: coarse) {
  .date-quick__btn { min-height: var(--hit); min-width: var(--hit); justify-content: center; }
}

/* ── .ds (stilguiden, /designsystem) ─────────────────────────────────────── */

/* Bara stilguiden använder de här klasserna. Rutornas värden kommer ur
   data-style (--swatch, bredder, radier, skuggor). */
.ds-toc .chips { margin: var(--space-6) 0 0; }
.ds-group { margin: var(--space-8) 0 var(--space-4); font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text-2); }
.ds-swatches { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-5); }
.ds-swatch { display: grid; gap: var(--space-2); }
.ds-swatch__chip {
  height: 48px; border-radius: var(--r-md); background: var(--swatch, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ds-swatch__name { font: var(--fw-500) var(--fs-12)/var(--lh-row) var(--mono); color: var(--text); }
.ds-swatch__value { font: var(--fw-400) var(--fs-11)/var(--lh-row) var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.ds-type { list-style: none; display: grid; gap: var(--space-4); }
.ds-type__row { display: grid; grid-template-columns: 200px 1fr; align-items: baseline; gap: var(--space-6); }
.ds-type__name, .ds-scale__name, .ds-tile__name, .ds-tile__value, .ds-values dt, .ds-values dd, .ds-icons__name { font: var(--fw-400) var(--fs-12)/var(--lh-row) var(--mono); color: var(--text-3); }
.ds-type__sample { color: var(--text); line-height: var(--lh-tight); }
.ds-scale { list-style: none; display: grid; gap: var(--space-3); }
.ds-scale__row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: var(--space-6); }
.ds-scale__bar { display: block; height: 12px; border-radius: var(--r-xs); background: var(--accent); }
.ds-tiles { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ds-tile { display: grid; justify-items: center; gap: var(--space-2); }
.ds-tile__box { width: 72px; height: 72px; background: var(--surface); border: 1px solid var(--line-strong); }
.ds-tile__box--raised { background: var(--elevated); border-color: transparent; border-radius: var(--r-lg); }
.ds-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3) var(--space-8); }
.ds-values__row { display: flex; justify-content: space-between; gap: var(--space-5); border-bottom: 1px solid var(--line); padding: var(--space-3) 0; }
.ds-values dd { color: var(--text); }
.ds-demo { padding: var(--space-7) 0; }
.ds-demo + .ds-demo { border-top: 1px solid var(--line); }
.ds-demo__title { font-size: var(--fs-14); font-weight: var(--fw-600); }
.ds-demo__note { margin-top: var(--space-2); font-size: var(--fs-13); color: var(--text-2); }
.ds-demo__body { margin-top: var(--space-6); }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.ds-row--column { flex-direction: column; align-items: flex-start; }
.ds-row--spread { justify-content: space-between; max-width: 560px; padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.ds-stack { display: grid; gap: var(--space-6); max-width: 420px; }
.ds-icons { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-4); }
.ds-icons__item { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-3); border-radius: var(--r-md); color: var(--text); }
.ds-icons__item .icon { width: 22px; height: 22px; }
/* Framtvingade lägen i stilguiden (hover och fokus syns utan mus). */
.btn.ds-state--hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.btn--primary.ds-state--hover { background-image: none; --btn-bg: var(--accent-hover); }
.chip.ds-state--hover { --chip-bg: var(--surface); --chip-fg: var(--text); }
.segmented__item.ds-state--hover { color: var(--text); background: var(--hover); }
.ds-state--focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 599px) {
  .ds-type__row, .ds-scale__row { grid-template-columns: 1fr; gap: var(--space-2); }
}
}

/* Regler som vyerna inte ska kunna skriva över: de ligger i lagret views,
   och deras specificitet går före vyernas egna radregler. */
@layer views {

/* ── .card ───────────────────────────────────────────────────────────────── */

.card p { margin-bottom: var(--space-4); }

/* ── .section ────────────────────────────────────────────────────────────── */

.section p { margin-bottom: var(--space-4); }
/* Avsnittets rubrik har redan en linje: första raden under den har ingen egen. */
.section__title + ul > li:first-child, .section__title + .hint + ul > li:first-child { border-top: 0; }
.section__title + .hint { margin: var(--space-1) 0 var(--space-3); }

/* ── .prose ──────────────────────────────────────────────────────────────── */

.prose p { margin: 0 0 var(--space-4); }

/* ── Märkenas form (DS-2) ────────────────────────────────────────────────── */

/* Vyernas egna märken får .badge-formen redan nu: 18 px, 12 px medium, vanliga
   bokstäver (inga VERSALER), radien --r-xs. Tonerna står kvar i vyernas filer,
   utom där de låg utanför paren (tint + text). .app (body) ger specificiteten som
   går före vyernas egna regler. När en vy byter till badge() tar den bort sin
   klass här och sina regler i sin fil. Länkar (a.meeting-tag) är inte märken
   utan något man trycker på: de behåller sin form (chip i telefonen). */
.app :is(.pill, .due, .task__claude, .prio, .plan-class, .mailq__kind, .mrow__label, .rsvp, .meeting-tag, .person__tag, .inbox__account, .file-card__kind):not(a) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 18px; padding: 0 var(--space-3);
  font-size: var(--fs-12); font-weight: var(--fw-500); line-height: 18px; letter-spacing: 0; text-transform: none;
  white-space: nowrap; vertical-align: middle; border-radius: var(--r-xs);
}
.app .mailq__kind { background: var(--surface); color: var(--text-2); }
.app .person__tag { border: 0; background: var(--surface); color: var(--text-2); }
.app .inbox__account { background: var(--surface); color: var(--text-2); }
.app .rsvp.is-yes { background: var(--ok-tint); color: var(--ok); }
.app .rsvp.is-no { background: var(--danger-tint); color: var(--danger); }

}