/* calendar: Kalendern — sidhuvudet med verktygsraden, rutnätet (dag och vecka),
   månaden, listan (telefonen, utan JS och vy=lista), uppgifterna med datum,
   dagens sammanfattning, mötessidan och formulären för nytt möte och flytta.
   Används av /kalender och /kalender/:id (och prickarna .cal-c* och .cal-dot
   på Idag). Ägare: vyn "kalendern".

   Lokala mått: --cal-chrome är höjden över och under rutnätet på datorn
   (sidans luft + sidhuvudet), så att rutnätet och månaden ryms i fönstret
   utan att sidan rullar. Timmen är 48 px (HOUR_PX i views/calendar.js). */

@layer views {

/* ── Kontofärgerna och pricken ───────────────────────────────────────────── */

.cal-c0 { --c: var(--tag-8); }
.cal-c1 { --c: var(--tag-1); }
.cal-c2 { --c: var(--tag-2); }
.cal-c3 { --c: var(--tag-3); }
.cal-c4 { --c: var(--tag-4); }
.cal-c5 { --c: var(--tag-5); }
.cal-c6 { --c: var(--tag-7); }

.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); flex: none; }

/* ── .cal (sidan) ────────────────────────────────────────────────────────── */

.cal {
  --cal-chrome: 160px;
  /* Det som tonas ner (andra månaders dagar, helgerna): något mörkare än
     sidan i båda lägena. I mörkt läge betyder ljusare upphöjt, så där är
     ytan nedsänkt i stället för --surface. */
  --cal-dim: var(--surface);
  --cal-dim-soft: color-mix(in srgb, var(--surface) 50%, var(--bg));
}
@media (prefers-color-scheme: dark) {
  /* --scrim (svart 50 % i mörkt läge) inblandat i sidans färg: en halvgenomskinlig
     yta ovanpå --bg som blir ungefär 25 % respektive 12 % mörkare. */
  .cal {
    --cal-dim: color-mix(in srgb, var(--scrim) 50%, var(--bg));
    --cal-dim-soft: color-mix(in srgb, var(--scrim) 25%, var(--bg));
  }
}
/* Rutnätet och månaden fyller fönstret: sidan själv rullar inte på datorn. */
@media (min-width: 860px) {
  .main:has(> .cal--vecka, > .cal--dag, > .cal--manad) { padding-bottom: var(--space-8); }
}

/* Sidhuvudet: rubriken (veckan, dagen, månaden) och verktygsraden på samma
   rad; perioden och kontona på raden under. Det står still (rutnätet rullar
   själv); i telefonen tonar den kompakta raden ("Vecka 43") in överst när
   rubriken har rullat bort, som på de andra sidorna. */
.cal .page-head { margin-bottom: var(--space-6); }
.cal .page-head--sticky { position: static; margin: 0 0 var(--space-6); padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cal .page-head--sticky.is-stuck { box-shadow: none; }
.cal .page-head__row { flex-wrap: wrap; row-gap: var(--space-4); }
.cal .page-head__meta { margin-top: 0; }
.cal .page-sub { margin-top: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 860px) {
  .cal .page-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-6); row-gap: var(--space-3); }
  .cal .page-head__row { grid-column: 1 / -1; }
  .cal .page-sub { grid-column: 1; }
  .cal .page-head__meta { grid-column: 2; }
  .cal--manad .page-head__meta { grid-column: 1 / -1; }
}

/* ── .cal-top (verktygsraden: bläddra, vyn, nytt möte) ───────────────────── */

.cal-top { display: flex; align-items: center; gap: var(--space-5); }
.cal-range { display: inline-flex; align-items: center; gap: var(--space-1); }
.cal-range__today.is-muted { --btn-fg: var(--text-3); }
.cal-new { margin-left: var(--space-2); }

@media (max-width: 859px) {
  /* Telefonen: rubriken, perioden, vyn och kontona under varandra. */
  .cal .page-head { display: flex; flex-direction: column; }
  .cal .page-head__row { display: contents; }
  .cal .page-sub { order: 1; margin-top: var(--space-1); }
  .cal .page-head__actions { order: 2; display: block; margin-top: var(--space-5); }
  .cal .page-head__meta { order: 3; }
  .cal-top { display: block; }
  .cal-views { display: flex; width: 100%; }
  .cal-views__item { flex: 1; }
  /* Bläddringen och nytt möte ligger vid tummen, ovanför bottenmenyn. */
  .cal-range {
    position: fixed; z-index: var(--z-sticky); left: 50%; translate: -50% 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-5));
    padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--r-full);
    background: color-mix(in srgb, var(--elevated) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--shadow-md);
    view-transition-name: cal-range;
  }
  .cal-range .btn { min-height: var(--hit); min-width: var(--hit); border-radius: var(--r-full); }
  .cal-range__today { padding: 0 var(--space-6); }
  .cal-new {
    position: fixed; z-index: var(--z-sticky); right: var(--gutter); margin: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-5));
    width: 50px; height: 50px; min-height: 50px; padding: 0; border-radius: 50%;
    font-size: 0; box-shadow: var(--shadow-md);
    view-transition-name: cal-new;
  }
  .cal-new .icon { width: 24px; height: 24px; }
  /* Det sista i listan hamnar inte under knapparna. */
  .cal { padding-bottom: calc(var(--hit) + var(--space-9)); }
}

/* ── .cal-accounts (kontona som filter) ──────────────────────────────────── */

.cal-accounts { margin: 0; }
.cal-chip .cal-dot { width: 7px; height: 7px; }
@media (max-width: 859px) {
  .cal .page-head__meta { margin-top: var(--space-3); }
  .cal-accounts {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    /* Raden fortsätter: den högra kanten tonar ut. */
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-9)), transparent);
    mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-9)), transparent);
  }
  /* Luften efter det sista chipet (padding-inline räknas inte alltid i rullningen). */
  .cal-accounts::after { content: ""; flex: none; width: 1px; }
  .cal-accounts::-webkit-scrollbar { display: none; }
  .cal-accounts .chip { flex: none; }
}

/* ── .cal-notice (ingen kalender kopplad) ────────────────────────────────── */

.cal-notice {
  display: flex; align-items: flex-start; gap: var(--space-4); max-width: var(--content-w);
  margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-text);
}
.cal-notice .icon { flex: none; width: 18px; height: 18px; margin-top: var(--space-1); color: var(--text-3); }

/* ── .cal-grid (vecka och dag) ───────────────────────────────────────────── */

.cal-grid {
  --head: 44px;
  --hour: 48px; /* = HOUR_PX i views/calendar.js */
  display: grid; position: relative;
  /* Lågt fönster (Doit.app med Claude-panelen öppen): rutnätet krymper hellre än att sidan rullar. */
  max-height: calc(100dvh - var(--cal-chrome)); min-height: 200px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
}
/* Kolumnerna krymper i stället för att rulla i sidled (Mac-fönstret 920 px). */
.cal-grid--week { grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.cal-grid--day { --head: 0px; grid-template-columns: 52px minmax(0, 1fr); }
.cal-grid--day .cal-grid__corner, .cal-grid--day .cal-grid__head { display: none; }

.cal-grid__corner, .cal-grid__head { position: sticky; top: 0; z-index: calc(var(--z-raised) + 3); height: var(--head); background: var(--bg); border-bottom: 1px solid var(--line); }
.cal-grid__corner { left: 0; z-index: var(--z-sticky); }
.cal-grid__head {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 0 var(--space-5);
  border-left: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: var(--fs-13);
  transition: background-color var(--dur-fast) var(--ease);
}
.cal-grid__head:hover { background: var(--hover); }
.cal-grid__weekday { font-weight: var(--fw-500); }
.cal-grid__num { font-size: var(--fs-17); font-weight: var(--fw-600); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.cal-grid__head.is-today { color: var(--accent); }
.cal-grid__head.is-today .cal-grid__num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 var(--space-3); border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: var(--fs-14); }
@container (max-width: 110px) {
  .cal-grid__head { gap: var(--space-2); }
}

/* Heldagsraden: mötena först, sedan uppgifterna, högst tre rader per dag och
   sedan "N till" (dagen). Ingen inre rullning — inget göms. */
.cal-grid__label, .cal-grid__allday { position: sticky; top: var(--head); z-index: calc(var(--z-raised) + 2); background: var(--bg); border-bottom: 1px solid var(--line); }
.cal-grid__label { left: 0; z-index: calc(var(--z-raised) + 3); display: flex; align-items: flex-start; justify-content: flex-end; padding: var(--space-4) var(--space-4) 0 0; font-size: var(--fs-11); color: var(--text-3); }
.cal-grid__allday { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2); border-left: 1px solid var(--line); }
.cal-grid__allday > * { flex-shrink: 0; }
.cal-grid__more { align-self: flex-start; padding: var(--space-1) var(--space-3); border-radius: var(--r-xs); font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.cal-grid__more:hover { color: var(--accent); background: var(--hover); }

.cal-grid__hours { position: sticky; left: 0; z-index: calc(var(--z-raised) + 1); background: var(--bg); }
.cal-grid__hours span { position: absolute; right: var(--space-4); transform: translateY(-50%); font-size: var(--fs-11); color: var(--text-3); font-variant-numeric: tabular-nums; }
.cal-grid__hours span.is-hidden { visibility: hidden; }
/* Två klasser, så att den går före .cal-grid__hours span. */
.cal-grid__hours .cal-grid__nowlabel { color: var(--danger); font-weight: var(--fw-700); background: var(--bg); padding: 0 var(--space-1); }

.cal-grid__day {
  position: relative; min-width: 0; border-left: 1px solid var(--line);
  /* Hel timme: linje; halvtimme: svagare. */
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% var(--hour);
  background-position: 0 0, 0 calc(var(--hour) / 2);
}
/* Ett klick på tom yta blir ett möte bara när ett konto kan boka. */
.cal:has([data-new-meeting]) .cal-grid__day, .cal:has([data-new-meeting]) .cal-month__cell { cursor: cell; }
.cal-grid__day.is-weekend, .cal-grid__allday.is-weekend { background-color: var(--cal-dim-soft); }
.cal-grid__day.is-today, .cal-grid__allday.is-today { background-color: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
/* Nu-linjen går under mötena (de är ogenomskinliga), så att den inte stryker över texten. */
.cal-grid__now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 0; pointer-events: none; }
.cal-grid__now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.cal-grid__ghost { position: absolute; left: 3px; right: 3px; z-index: var(--z-sticky); border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); box-shadow: var(--shadow-md); border: 1.5px dashed var(--accent); pointer-events: none; font-size: var(--fs-11); color: var(--accent); font-weight: var(--fw-600); padding: var(--space-1) var(--space-3); font-variant-numeric: tabular-nums; }

@media (max-width: 859px) {
  .cal-grid--week { display: none; }
  /* Dagen i telefonen: rutnätet rullar i sig självt, så att rubriken och
     vyn står kvar och nu-linjen syns direkt. */
  .cal-grid--day { max-height: max(320px, calc(100dvh - 340px)); }
  /* 92 px per timme: ett möte på en halvtimme blir 44 px att träffa. */
  .cal-grid--day { --hour: 92px; }
  .cal-grid--day .cal-ev--short { justify-content: flex-start; padding-top: var(--space-2); }
}

/* ── .cal-ev (ett möte i rutnätet) ───────────────────────────────────────── */

.cal-ev {
  position: absolute; display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-radius: var(--r-sm); overflow: hidden; text-decoration: none;
  background: color-mix(in srgb, var(--c) 14%, var(--bg)); color: var(--text);
  font-size: var(--fs-12); line-height: var(--lh-row);
  z-index: var(--z-raised);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-user-drag: none; user-select: none;
}
/* Kontots färg som en rak kant till vänster. */
.cal-ev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 24%, var(--bg)); z-index: calc(var(--z-raised) + 2); box-shadow: var(--shadow-sm); }
.cal-ev:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; z-index: calc(var(--z-raised) + 2); }
.cal-ev--compact { position: relative; min-height: 22px; justify-content: center; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4); }
.cal-ev__title { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; font-weight: var(--fw-600); }
.cal-ev__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Medel (54–70 min): tiden först och rubriken på två rader. Längre: tiden över två rader rubrik. */
.cal-ev--medium .cal-ev__text, .cal-ev--tall .cal-ev__text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Tiden först på raden: mindre, grå och lättare än rubriken. */
.cal-ev__text > .cal-ev__time { font-weight: var(--fw-500); }
.cal-ev--short { justify-content: center; padding-top: 0; padding-bottom: 0; }
.cal-ev__icon { width: 11px; height: 11px; flex: none; align-self: center; color: var(--c); }
.cal-ev__time { color: var(--text-2); font-size: var(--fs-11); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev__prep { display: inline-block; flex: none; align-self: center; width: 6px; height: 6px; margin-left: var(--space-3); border-radius: 50%; background: var(--ok); }
/* Pågår: en ram i kontots färg. Passerat: svagare yta och grå text (läsbar). */
.cal-ev.is-live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.cal-ev.is-past { background: color-mix(in srgb, var(--c) 7%, var(--bg)); }
.cal-ev.is-past::before { background: color-mix(in srgb, var(--c) 50%, var(--bg)); }
.cal-ev.is-past .cal-ev__title { color: var(--text-2); }
.cal-ev.is-cancelled .cal-ev__text { text-decoration: line-through; }
/* Pekskärm: heldagsmötena är 44 px höga, och ett kort möte i dagen får 44 px
   att träffa (::after) utan att se längre ut än det är. */
@media (pointer: coarse) {
  .cal-ev--compact { min-height: var(--hit); }
  .cal-grid--day .cal-ev:not(.cal-ev--compact) { overflow: visible; }
  .cal-grid--day .cal-ev:not(.cal-ev--compact)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--hit)); translate: 0 -50%; }
  .cal-grid--day .cal-ev__text { overflow: hidden; }
}
/* Smala kolumner (Mac-fönstret): rubriken får platsen — ikonen, pricken och tiden på raden går bort. */
.cal-grid--week .cal-grid__day { container-type: inline-size; }
@container (max-width: 100px) {
  .cal-ev__icon, .cal-ev--short .cal-ev__prep { display: none; }
  .cal-ev { padding-left: var(--space-3); padding-right: var(--space-2); }
}
/* Ett smalt block (smal kolumn, eller möten bredvid varandra): i ett kort
   block står bara rubriken, eftersom rutnätet redan visar tiden. */
.cal-grid__day > .cal-ev { container-type: inline-size; }
@container (max-width: 120px) {
  .cal-ev--short .cal-ev__time, .cal-ev--short .cal-ev__icon { display: none; }
}
.cal-ev.is-movable { cursor: grab; }
.cal-ev.is-dragging { cursor: grabbing; z-index: calc(var(--z-sticky) + 1); opacity: .92; box-shadow: var(--shadow-lg); }
.cal-ev__resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.cal-ev.is-movable:hover .cal-ev__resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; margin-left: calc(-1 * var(--space-4)); border-radius: var(--r-xs); background: color-mix(in srgb, var(--c) 70%, transparent); }

/* ── .cal-task (en uppgift med datum i rutnätet och månaden) ─────────────── */

.cal-task { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 22px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--r-sm); font-size: var(--fs-12); line-height: var(--lh-row); transition: opacity var(--dur) var(--ease); }
.cal-task:hover { background: var(--hover); }
.cal-task__form { display: contents; }
/* Bocken: samma ring som i listorna, 14 px synligt och 28 px att träffa. */
.cal-task__check { position: relative; flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 1.5px solid var(--check-ring); border-radius: 50%; background: transparent; color: transparent; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.cal-task__check::after { content: ""; position: absolute; inset: -7px; }
.cal-task__tick { width: 10px; height: 10px; stroke-width: 3.5; }
.cal-task__check:hover { border-color: var(--ok); color: var(--ok); }
.cal-task.is-flagged .cal-task__check { border-color: var(--flag); }
.cal-task.is-overdue .cal-task__check { border-color: var(--danger); }
.cal-task__title { flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-task__title:hover { color: var(--accent); }
.cal-task__late { flex: none; color: var(--danger); font-size: var(--fs-11); font-weight: var(--fw-600); font-variant-numeric: tabular-nums; }
/* Avbockad på plats (doit.js): bocken fylls och raden tonar. */
.cal-task.is-done .cal-task__check { border-color: var(--ok); background: var(--ok); color: var(--on-accent); animation: cal-check var(--dur) var(--ease-spring); }
.cal-task.is-done .cal-task__title { color: var(--text-2); text-decoration: line-through; }
.cal-task.is-done .cal-task__late { display: none; }
@keyframes cal-check { from { transform: scale(.6); } to { transform: scale(1); } }
/* I smala kolumner (Mac-fönstret): försenat syns som röd ring, datumet i title. */
@container (max-width: 120px) {
  .cal-task__late { display: none; }
}
.cal-grid__allday, .cal-month__cell { container-type: inline-size; }

/* ── .cal-month (månaden) ────────────────────────────────────────────────── */

.cal-month {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr));
  height: calc(100dvh - var(--cal-chrome)); min-height: 480px;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg);
}
.cal-month__head { padding: var(--space-4) var(--space-5); font-size: var(--fs-12); font-weight: var(--fw-600); color: var(--text-2); }
.cal-month__cell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; min-height: 0; overflow: hidden; padding: var(--space-2) var(--space-3) var(--space-1); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
/* Raderna krymper inte (de lade sig på varandra i Mac-fönstret); det som inte ryms klipps längst ner. */
.cal-month__cell > * { flex-shrink: 0; }
.cal-month__cell:nth-child(7n + 1) { border-left: 0; }
.cal-month__cell.is-weekend { background: var(--cal-dim-soft); }
.cal-month__cell.is-outside { background: var(--cal-dim); }
.cal-month__cell.is-outside .cal-month__date { color: var(--text-3); }
.cal-month__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 24px; }
.cal-month__date { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--space-3); border-radius: var(--r-full); font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.cal-month__date:hover { background: var(--hover); }
.cal-month__cell.is-today .cal-month__date { background: var(--accent); color: var(--on-accent); }
.cal-month__ev { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 18px; padding: 0 var(--space-2); border-radius: var(--r-xs); font-size: var(--fs-12); color: var(--text); text-decoration: none; }
.cal-month__ev:hover { background: color-mix(in srgb, var(--c) 14%, var(--bg)); }
.cal-month__time { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cal-month__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-month__more, .cal-month__tasks { display: flex; align-items: center; gap: var(--space-2); min-height: 18px; padding: 0 var(--space-2); border-radius: var(--r-xs); font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.cal-month__more, .cal-month__tasks { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-month__more:hover, .cal-month__tasks:hover { background: var(--hover); color: var(--accent); }
.cal-month__tasks .icon { flex: none; }
.cal-month__tasks .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.cal-month__tasks.is-overdue { color: var(--danger); }
/* Texten i en flexrad får ellipsen i ett eget element ("9 uppgif…", inte "9 uppgifte"). */
.cal-month__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Smal ruta (Mac-fönstret): bara mötets rubrik, tiden står på mötet. */
@container (max-width: 140px) {
  .cal-month__time { display: none; }
  .cal-month__ev { gap: var(--space-2); }
}
@media (max-width: 859px) {
  .cal-month { display: none; }
}

/* Hur mycket som hände (tidslinjen): en grå stapel, längre för fler. */
.cal-activity { display: inline-block; height: 4px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--text-3) 45%, transparent); }
.cal-activity--1 { width: 6px; }
.cal-activity--2 { width: 12px; }
.cal-activity--3 { width: 20px; }
.cal-activity--4 { width: 28px; }

/* ── .cal-mobile, .cal-fallback, .cal-list (listan) ──────────────────────── */

/* Listan i stället för rutnätet: i telefonen (vecka och månad) och utan JS. */
.cal-mobile, .cal-fallback { display: none; }
@media (max-width: 859px) {
  .cal-mobile { display: block; }
}
/* Utan JavaScript står rutnätets lägen inte på plats (data-style): listan i stället. */
@media (scripting: none) {
  .cal-grid, .cal-month { display: none; }
  .cal-mobile, .cal-fallback { display: block; max-width: var(--content-w); }
  .cal .cal-daywrap { grid-template-columns: minmax(0, 1fr); max-width: var(--content-w); margin-bottom: var(--space-8); }
  /* Dagens uppgifter står i reservlistan. */
  .cal .cal-daywrap__grid, .cal .cal-daytasks { display: none; }
  .cal .cal-dayside { max-height: none; }
}
.cal-list { max-width: var(--content-w); }
/* Listan är en läsbar spalt: på bred skärm står hela sidan (rubriken,
   verktygsraden och listan) i samma spalt, vänsterställd som sidramen. */
@media (min-width: 1100px) {
  .cal--lista { max-width: var(--content-w); }
  .cal--lista .cal-list { max-width: none; }
}

/* ── .cal-agenda (dagarna i listan) ──────────────────────────────────────── */

.cal-agenda { display: flex; flex-direction: column; gap: var(--space-8); }
.cal-agenda__day { scroll-margin-top: var(--space-11); }
/* Dagens rubrik är sticky, så att man alltid ser vilken dag raderna hör till. */
.cal-agenda__date {
  position: sticky; top: var(--titlebar-h, 0px); z-index: var(--z-sticky);
  display: flex; align-items: baseline; gap: var(--space-4);
  margin: 0 calc(-1 * var(--space-4)); padding: var(--space-4);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
  font-size: var(--fs-15); line-height: var(--lh-tight); font-weight: var(--fw-600); color: var(--text);
}
.cal-agenda__rel { color: var(--text); }
.cal-agenda__day.is-today .cal-agenda__rel { color: var(--accent); }
.cal-agenda__full { display: inline-block; color: var(--text-2); font-weight: var(--fw-500); font-variant-numeric: tabular-nums; }
.cal-agenda__date > .cal-agenda__full:first-child { color: var(--text); font-weight: var(--fw-600); }
.cal-agenda__date > .cal-agenda__full:first-child::first-letter { text-transform: uppercase; }
.cal-agenda__day.is-past .cal-agenda__date > .cal-agenda__full:first-child { color: var(--text-2); }
.cal-agenda__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
/* Avdelaren börjar där texten börjar (efter tiden). */
.cal-agenda__list > li + li { background: linear-gradient(var(--line), var(--line)) no-repeat 72px 0 / calc(100% - 72px) 1px; }
.cal-agenda__list > li.cal-now + li, .cal-agenda__list > li + li.cal-now { background: none; }
.cal-agenda__tasks { margin-top: var(--space-2); }
.cal-agenda__none { margin: var(--space-4) 0 0; color: var(--text-3); font-size: var(--fs-14); }
/* Vidare till nästa period, sist i listan. */
.cal-agenda__next { margin: 0; }
.cal-agenda__next a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--row-h); font-size: var(--fs-14); font-weight: var(--fw-500); text-decoration: none; }
.cal-agenda__next .icon { width: 14px; height: 14px; }
@media (pointer: coarse) {
  .cal-agenda__next a { min-height: var(--hit); font-size: var(--fs-17); }
}
@media (max-width: 859px) {
  /* Under den kompakta titelraden (shell.css: luft, 17 px text, luft). */
  .cal-agenda__date { top: calc(env(safe-area-inset-top) + 2 * var(--space-5) + var(--fs-17) * var(--lh-tight)); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-4) var(--gutter); font-size: var(--fs-17); }
}

/* Ett möte i listan: tiden, kontots färg som kant, rubriken och en rad under. */
.cal-row {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-7);
  min-height: var(--row-h); padding: var(--space-4) var(--space-4) var(--space-4) 0; border-radius: var(--r-md);
  color: var(--text); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.cal-row::before { content: ""; position: absolute; left: 61px; top: var(--space-4); bottom: var(--space-4); width: 3px; border-radius: var(--r-xs); background: var(--c); }
.cal-row:hover { background: var(--hover); }
.cal-row__time { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-14); font-weight: var(--fw-600); font-variant-numeric: tabular-nums; }
.cal-row__end { font-size: var(--fs-12); font-weight: var(--fw-400); color: var(--text-3); }
.cal-row--allday .cal-row__time { font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--text-2); }
.cal-row__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cal-row__title { overflow-wrap: anywhere; }
.cal-row__meta { font-size: var(--fs-13); color: var(--text-2); overflow-wrap: anywhere; }
.cal-row__prep { color: var(--ok); font-weight: var(--fw-500); }
.cal-row.is-past .cal-row__title, .cal-row.is-past .cal-row__time { color: var(--text-2); }
.cal-row.is-past::before { background: color-mix(in srgb, var(--c) 45%, var(--bg)); }
@media (max-width: 859px) {
  .cal-row { min-height: 52px; font-size: var(--fs-17); }
  .cal-row__time { font-size: var(--fs-15); }
}

/* Nu i dagens lista: en röd linje mellan det som varit och det som kommer. */
.cal-now { display: flex; align-items: center; gap: var(--space-4); height: 18px; }
.cal-now__label { flex: none; width: 52px; text-align: right; font-size: var(--fs-11); font-weight: var(--fw-700); color: var(--danger); font-variant-numeric: tabular-nums; }
.cal-now::after { content: ""; flex: 1; height: 2px; margin-left: var(--space-3); border-radius: var(--r-xs); background: var(--danger); }

/* ── .cal-daywrap och .cal-dayline (dagen: rutnätet och allt som hände) ──── */

/* En dags kolumn behöver mindre bredd än uppgiftsraderna: lika delar på
   bred skärm, och i Mac-fönstret får spalten med uppgifterna mest. */
.cal-daywrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 1099px) {
  .cal-daywrap { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr); gap: var(--space-5); }
}
/* Spalten bredvid rutnätet: dagens uppgifter överst, sedan Dagen. Rullar i sig själv. */
.cal-dayside {
  min-width: 0; max-height: calc(100dvh - var(--cal-chrome)); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
}
.cal-daytasks { padding: var(--space-5) var(--space-6) var(--space-4); box-shadow: 0 1px 0 var(--line); }
.cal-daytasks__title { margin: 0 0 var(--space-3); font-size: var(--fs-17); }
.cal-daytasks__count { margin-left: var(--space-1); color: var(--text-3); font-weight: var(--fw-500); font-variant-numeric: tabular-nums; }
.cal-dayline { min-width: 0; padding: 0 var(--space-6) var(--space-6); }
.cal-dayline__head {
  position: sticky; top: 0; z-index: var(--z-raised);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-6)); padding: var(--space-5) var(--space-6);
  background: var(--bg); box-shadow: 0 1px 0 var(--line);
}
.cal-dayline__title { font-size: var(--fs-17); margin: 0; }
.cal-dayline__count { margin-left: var(--space-1); color: var(--text-3); font-weight: var(--fw-500); font-variant-numeric: tabular-nums; }
.cal-dayline__detail { margin-top: var(--space-6); }
.cal-dayline__search input { width: 100%; }
.cal-dayline__filters { margin: var(--space-5) 0 var(--space-3); }
.cal-dayline__list { list-style: none; margin: 0; padding: 0; }
@media (max-width: 859px) {
  .cal-daywrap { grid-template-columns: minmax(0, 1fr); }
  .cal-dayside { max-height: none; overflow: visible; border: 0; border-radius: 0; }
  .cal-daytasks { padding: var(--space-6) 0 var(--space-4); box-shadow: none; }
  .cal-dayline { padding-inline: 0; }
  .cal-dayline__head { position: static; margin: 0; padding: var(--space-6) 0 var(--space-4); box-shadow: none; }
}

.cal-line { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; }
.cal-line + .cal-line { box-shadow: 0 -1px 0 var(--line); }
.cal-line__time { padding-top: var(--space-1); color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.cal-line__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cal-line__meta { color: var(--text-2); font-size: var(--fs-12); overflow-wrap: anywhere; }
.cal-line__title { font-size: var(--fs-14); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.cal-line__title:hover { color: var(--accent); }
.cal-line--doit .cal-line__title { color: var(--text-2); }
.cal-line__summary { color: var(--text-2); font-size: var(--fs-13); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cal-line__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* ── .day-summary (dagen i korthet) ──────────────────────────────────────── */

.day-summary { margin-top: var(--space-5); }
.day-summary__brief { font-size: var(--fs-14); }
.day-summary__brief ul { padding-left: var(--space-7); }
.day-summary__brief li { margin: var(--space-2) 0; }
.day-summary__note { margin: var(--space-2) 0 var(--space-4); color: var(--text-2); font-size: var(--fs-13); }
.day-summary__ask { margin: var(--space-1) 0 var(--space-3); }
.day-summary__h { margin: var(--space-8) 0 var(--space-3); font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text-2); }
.day-summary__sub { margin-left: var(--space-2); font-weight: var(--fw-400); color: var(--text-3); }
.day-summary__more { margin-top: var(--space-6); font-size: var(--fs-13); }

.day-topics, .day-list { list-style: none; margin: 0; padding: 0; }
/* Namnet först och siffrorna bryts under det i stället för att klippa namnet. */
.day-topics li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-5); padding: var(--space-3) 0; font-size: var(--fs-14); }
.day-topics li + li, .day-list li + li { box-shadow: 0 -1px 0 var(--line); }
.day-topics__name { min-width: 0; max-width: 100%; font-weight: var(--fw-600); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.day-topics__name:hover { color: var(--accent); }
.day-topics__counts { color: var(--text-2); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }

.day-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; font-size: var(--fs-14); }
.day-list li a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.day-list li a:hover { color: var(--accent); }
.day-list__time { padding-top: 1px; color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.day-list__done { width: 14px; height: 14px; color: var(--ok); }
.day-list__meta { margin-left: var(--space-2); color: var(--text-3); font-size: var(--fs-12); }
@media (pointer: coarse) {
  .day-topics__name, .day-list li a, .day-summary__more a { display: inline-flex; align-items: center; min-height: var(--hit); }
  /* Korta namn ("TSS") får också 44 px i bredd. */
  .day-topics__name { min-width: var(--hit); }
  .day-topics li, .day-list li { padding-block: 0; }
  /* Dagen detaljerat: rubriken är länken, 44 px hög att träffa. */
  a.cal-line__title { display: flex; align-items: center; min-height: var(--hit); }
  .cal-line { padding-block: var(--space-3); }
}

/* ── Mötessidan ──────────────────────────────────────────────────────────── */

.meeting-page .page-head__meta { gap: var(--space-4) var(--space-5); margin-top: var(--space-5); color: var(--text-2); }
.meeting-when { font-variant-numeric: tabular-nums; }
.meeting-account { display: inline-flex; align-items: center; gap: var(--space-3); }
.meeting-place { overflow-wrap: anywhere; }
.meeting-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); }
@media (pointer: fine) {
  .meeting-tag { min-height: 24px; padding: 0 var(--space-4); font-size: var(--fs-12); }
}
@media (pointer: coarse) {
  .meeting-page .page-head__meta { row-gap: 0; }
}
/* Inställt: grå rubrik och den röda etiketten — ingen genomstrykning. */
.page-title.meeting-title--cancelled { color: var(--text-2); }

/* Knappraden: samma höjd för alla (komponenterna), Ställ in längst till höger. */
.meeting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: calc(-1 * var(--space-2)) 0 var(--space-9); }
.meeting-actions [hidden] { display: none; }
/* "Claude för mötet" behöver JavaScript (biljetten). CSS i stället för hidden
   + skript, så att knappen står kvar efter en omritning (refresh()). */
@media (scripting: none) {
  .meeting-actions [data-needs-js] { display: none; }
}
.meeting-actions .meeting-prepare { display: contents; }
.meeting-actions .meeting-cancel { margin-left: auto; }
.meeting-actions .meeting-cancel[open] { flex-basis: 100%; margin-left: 0; }
.meeting-cancel .confirm__actions { flex-direction: column; align-items: flex-start; }
.meeting-cancel__note { width: 100%; }
.meeting-cancel__note textarea { min-height: 64px; }
@media (max-width: 859px) {
  .meeting-actions .meeting-cancel { margin-left: 0; }
  /* Pågår: Anslut över hela bredden vid tummen, ovanför bottenmenyn. */
  .meeting-actions--live > .btn--primary {
    position: fixed; z-index: var(--z-sticky); left: var(--gutter); right: var(--gutter);
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-5));
    box-shadow: var(--shadow-md);
  }
  .meeting-page--live { padding-bottom: calc(var(--hit) + var(--space-9)); }
}

.meeting-notes { display: flex; flex-direction: column; gap: var(--space-6); }
.meeting-note__title { margin: 0 0 var(--space-3); font-size: var(--fs-15); font-weight: var(--fw-600); }

.meeting-promises { list-style: none; margin: 0; padding: 0; }
.meeting-promise { display: flex; align-items: center; gap: var(--space-5); min-height: 48px; padding: var(--space-4) 0; }
.meeting-promise + .meeting-promise { box-shadow: 0 -1px 0 var(--line); }
.meeting-promise__body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.meeting-promise__text { overflow-wrap: anywhere; }
.meeting-promise__meta { color: var(--text-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.meeting-promise.is-late .meeting-promise__due { color: var(--danger); font-weight: var(--fw-500); }
.meeting-promise__done { flex: none; }

.meeting-brief__by { margin-top: var(--space-5); }
.meeting-brief__state { color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-text); }

/* Underlaget: korten krymper med sidan (förut 443 px bred i telefonen). */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.doc-list > li { min-width: 0; }

/* Mötets dokument ur mailen: en rad per fil, namnet är länken. */
.meeting-docs { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-1); }
.meeting-doc { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-4); row-gap: 0; min-height: var(--hit); padding: var(--space-2) 0; box-shadow: 0 1px 0 var(--line); }
.meeting-doc__link { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; font-weight: var(--fw-500); color: var(--text); text-decoration: none; }
.meeting-doc__link:hover .meeting-doc__name { text-decoration: underline; }
.meeting-doc__link .icon { flex: none; width: 16px; height: 16px; color: var(--text-2); }
.meeting-doc__name { overflow-wrap: anywhere; }
.meeting-doc__meta { color: var(--text-2); font-size: var(--fs-13); }

/* Uppgiftsraden till mötet: ett eget, ramlöst fält med egen fokusmarkering. */
.meeting-task {
  display: flex; align-items: center; gap: var(--space-4); min-height: var(--hit); margin-top: var(--space-4);
  padding: 0 var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--text-3);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.meeting-task:focus-within { border-style: solid; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent); }
.meeting-task .icon { flex: none; width: 16px; height: 16px; }
.meeting-task input { flex: 1; min-width: 0; min-height: 40px; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-14); color: var(--text); }
.meeting-task input:focus { outline: none; box-shadow: none; }
@media (max-width: 859px) {
  .meeting-task input { font-size: var(--fs-16); }
}
@media (pointer: coarse) {
  .meeting-task input { min-height: var(--hit); }
}

/* Deltagarna: avatar, namn och adress, svaret till höger i flödet. */
.people { list-style: none; margin: 0; padding: 0; }
.person { display: flex; align-items: center; gap: var(--space-5); min-height: 48px; padding: var(--space-3) 0; }
.person + .person { background: linear-gradient(var(--line), var(--line)) no-repeat 32px 0 / calc(100% - 32px) 1px; }
.person__body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.person__name { font-weight: var(--fw-500); overflow-wrap: anywhere; }
.person__name .badge { margin-left: var(--space-2); }
.person__meta { color: var(--text-2); font-size: var(--fs-13); overflow-wrap: anywhere; }
.person__rsvp { flex: none; }

.meeting-background { margin: var(--space-9) 0; padding-top: var(--space-5); box-shadow: 0 -1px 0 var(--line); }
.meeting-background > summary { color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-500); cursor: pointer; }
.meeting-background h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text-2); }
.meeting-invite { max-height: 22rem; overflow: auto; color: var(--text-2); font-size: var(--fs-14); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Nytt möte, ändra och flytta ─────────────────────────────────────────── */

.meeting-page .meeting-form { max-width: 36rem; }
.meeting-form__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); }
.meeting-form__attendees { position: relative; }
@media (max-width: 600px) {
  .meeting-form__row { grid-template-columns: 1fr 1fr; }
  .meeting-form__row .field:first-child { grid-column: 1 / -1; }
}

.meeting-dialog { margin: auto; inset: 0; width: min(34rem, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--elevated); color: var(--text); box-shadow: var(--shadow-lg); }
.meeting-dialog[open] { animation: cal-dialog-in var(--dur-slow) var(--ease-out); }
.meeting-dialog::backdrop { background: var(--scrim); }
.meeting-dialog__title { margin: 0 0 var(--space-6); font-size: var(--fs-17); }
@keyframes cal-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Deltagare: förslag när man skriver (doit.js skapar listan). */
.suggest { position: absolute; left: 0; right: 0; top: 64px; z-index: var(--z-popover); list-style: none; margin: 0; padding: var(--space-2); max-height: 16rem; overflow-y: auto; background: var(--elevated); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.suggest__item { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--r-md); font-size: var(--fs-14); cursor: pointer; }
.suggest__item.is-active, .suggest__item:hover { background: var(--selected-bg); }
.suggest__name { font-weight: var(--fw-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__email { color: var(--text-2); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lediga tider (doit.js skapar raderna). */
.meeting-avail { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font-size: var(--fs-13); }
.avail__scale { display: flex; justify-content: space-between; margin-left: 8.5rem; color: var(--text-3); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.avail__row { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-4); align-items: center; margin-top: var(--space-3); }
.avail__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avail__bar { position: relative; height: 14px; padding-left: var(--space-3); border-radius: var(--r-xs); background: color-mix(in srgb, var(--ok) 14%, var(--bg)); font-size: var(--fs-11); line-height: 14px; color: var(--text-2); }
.avail__row.is-hidden .avail__bar { background: var(--bg); border: 1px dashed var(--line); }
.avail__busy { position: absolute; top: 0; bottom: 0; border-radius: var(--r-xs); background: color-mix(in srgb, var(--danger) 55%, var(--bg)); }
.avail__free { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); color: var(--text-2); }
.avail__slot { font-variant-numeric: tabular-nums; }
}