/* timeline: Tidslinjen och löftena: /tidslinje och /tidslinje/loften, och
   händelselistan (eventList) på projektets och uppgiftens sidor. Ägare: vyn
   "tidslinjen".

   Raden: tid (44 px, tabulära siffror, högerställd) · sortikon (16) · rubrik
   och underrad · ämnena som chips. Avdelaren börjar där texten börjar.
   Från 1100 px står ämnena i en egen kolumn till höger, som Linears
   egenskaper. I telefonen: ikon · text · tid, som Mail i iOS. */

@layer views {

/* ── .tl (sidan) ─────────────────────────────────────────────────────────── */

.tl {
  --tl-time: 44px;
  --tl-icon: 16px;
  --tl-gap: var(--space-5);
  --tl-pad: var(--space-4);
  --tl-line: 20px;
  --tl-inset: calc(var(--tl-pad) + var(--tl-time) + var(--tl-gap) + var(--tl-icon) + var(--tl-gap));
  --tl-props: 264px;
  --tl-wide: 1040px;
}
/* Flikarna Händelser | Löften står bredvid titeln; filtren under. */
.tl .page-head__row { flex-wrap: wrap; }
.tl .page-sub a { color: var(--accent); }
.tl-filter { margin: 0 0 var(--space-4); }
.tl-back { margin: 0 0 var(--space-4); font-size: var(--fs-13); }
.tl-back a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent); text-decoration: none; }
.tl-back .icon { width: 14px; height: 14px; }
.tl-older { display: flex; justify-content: center; margin-top: var(--space-8); }
/* Dagarnas rubriker, raderna och löftena linjerar med titeln och filtren:
   radens luft (för markeringen) ligger utanför spalten. */
.tl .timeline { margin-inline: calc(-1 * var(--tl-pad)); }
.tl .commitments { margin-left: calc(-1 * var(--cm-pad)); }
.tl-keys { margin-top: var(--space-8); text-align: center; font-size: var(--fs-12); color: var(--text-3); }
/* Bred skärm: tidslinjen använder bredden — ämnena får en egen kolumn. En
   vyjustering av huvudytans bredd, bara på sidorna som har .tl. */
@media (min-width: 1100px) {
  .main:has(> .tl:not(.tl--empty)) { max-width: var(--tl-wide); }
  /* Löftena: dina och andras sida vid sida, så att flikarna har samma bredd. */
  .tl-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0 var(--space-9); align-items: start; margin-top: var(--space-8); }
  .tl-columns > .section { margin-top: 0; }
}
@media (max-width: 600px) {
  .tl .page-head__actions { flex: 1 0 100%; }
  .tl .tl-tabs { display: flex; width: 100%; }
  .tl .tl-tabs .segmented__item { flex: 1; }
  /* Filtren på en rad som går att svepa, utan att sidan blir bredare. */
  .tl-filter {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -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);
  }
  .tl-filter::after { content: ""; flex: none; width: 1px; }
  .tl-filter::-webkit-scrollbar { display: none; }
}

/* ── .timeline (dagarna) ─────────────────────────────────────────────────── */

.timeline {
  --tl-time: 44px;
  --tl-icon: 16px;
  --tl-gap: var(--space-5);
  --tl-pad: var(--space-4);
  --tl-line: 20px;
  --tl-inset: calc(var(--tl-pad) + var(--tl-time) + var(--tl-gap) + var(--tl-icon) + var(--tl-gap));
}
.timeline__group + .timeline__group, .timeline--upcoming + .timeline { margin-top: var(--space-6); }
/* Dagens rubrik: i textfärg, med antalet. "Fredag 30 oktober" — versalen
   kommer ur mallen, månaden med liten bokstav. Sticky bara på /tidslinje:
   på projektets och uppgiftens sida är sidhuvudet redan sticky. */
.tl .timeline__day { position: sticky; top: var(--titlebar-h, 0px); z-index: var(--z-sticky); }
.timeline__day {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin: 0; padding: var(--space-4) var(--tl-pad);
  font-size: var(--fs-13); font-weight: var(--fw-600); line-height: var(--tl-line); color: var(--text);
  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);
}
.timeline__count { font-weight: var(--fw-400); color: var(--text-3); font-variant-numeric: tabular-nums; }
.timeline__list { list-style: none; }

/* Kommande: de tre närmaste, resten bakom Visa alla. */
.timeline__more > summary { list-style: none; }
.timeline__more > summary::-webkit-details-marker { display: none; }
.timeline__toggle {
  display: flex; align-items: center; min-height: 32px; padding: 0 var(--tl-pad) 0 var(--tl-inset);
  font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--accent); cursor: pointer; border-radius: var(--r-sm);
}
.timeline__toggle:hover { background: var(--hover); }
.timeline__toggle-close, .timeline__more[open] .timeline__toggle-open { display: none; }
.timeline__more[open] .timeline__toggle-close { display: inline; }
.timeline__more[open] > summary { order: 2; }
.timeline__more[open] { display: flex; flex-direction: column; }

/* ── .event (raden) ──────────────────────────────────────────────────────── */

.event { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; border-radius: var(--r-sm); transition: background-color var(--dur-fast) var(--ease); }
.event + .event::before { content: ""; position: absolute; top: 0; left: var(--tl-inset); right: 0; border-top: 1px solid var(--line); }
.event:has(> a.event__main):hover { background: var(--hover); }
.event.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.event:hover::before, .event:hover + .event::before,
.event.is-selected::before, .event.is-selected + .event::before { border-color: transparent; }
.event__main {
  flex: 1 1 100%; min-width: 0;
  display: grid; grid-template-columns: var(--tl-time) var(--tl-icon) minmax(0, 1fr) auto;
  grid-template-areas: "time icon body when"; column-gap: var(--tl-gap); align-items: start;
  min-height: var(--row-h); padding: var(--space-4) var(--tl-pad);
  color: inherit; text-decoration: none; border-radius: inherit;
}
.event__time {
  grid-area: time; text-align: right; white-space: nowrap;
  font-size: var(--fs-13); line-height: var(--tl-line); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.event__icon { grid-area: icon; display: flex; align-items: center; height: var(--tl-line); color: var(--text-3); }
.event__icon .kind-icon { width: var(--tl-icon); height: var(--tl-icon); }
.event__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.event__line { display: flex; align-items: baseline; gap: var(--space-4); min-width: 0; }
.event__title { min-width: 0; font-size: var(--fs-14); font-weight: var(--fw-500); line-height: var(--tl-line); color: var(--text); overflow-wrap: anywhere; }
.event__badge { flex: none; align-self: center; }
.event__who { font-weight: var(--fw-500); }
.event__summary {
  font-size: var(--fs-13); line-height: var(--lh-row); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.event__when { grid-area: when; font-size: var(--fs-13); line-height: var(--tl-line); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.event.is-cancelled .event__title { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }

/* Doits egna händelser: en tunn rad i --text-3, utan avdelare emellan. */
.event--quiet .event__main { min-height: 28px; padding-block: var(--space-2); }
.event--quiet .event__title { font-size: var(--fs-13); font-weight: var(--fw-400); color: var(--text-3); }
.event--quiet .event__icon .kind-icon { width: 12px; height: 12px; }
.event--quiet + .event--quiet::before { border-color: transparent; }
/* Projektet efter rubriken på Doits egna rader: lika tyst som raden, kortas först. */
.event__scope {
  flex: 0 1 auto; min-width: 0; max-width: 45%;
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-12); line-height: var(--tl-line); color: var(--text-3);
}
.event__scope-icon { flex: none; width: 12px; height: 12px; }
.event__scope-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ämnena: chips (44 px att trycka på i telefonen), högst tre, långa namn kortas. */
.event__subjects {
  flex: 1 0 100%; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 0 var(--space-4);
  margin-top: calc(-1 * var(--space-2)); padding: 0 var(--tl-pad) var(--space-4) calc(var(--tl-inset) - var(--space-2));
}
/* Ämnena är länkar till projekt och uppgifter, inte filter: grå text med
   ikon (som uppgiftsradens metadata). Chipsformen hör till filtren ovanför. */
.event__chip { --chip-bg: transparent; --chip-edge: transparent; --chip-fg: var(--text-2); min-height: 22px; max-width: 240px; padding: 0 var(--space-2); gap: var(--space-2); font-size: var(--fs-12); border-radius: var(--r-xs); }
.event__chip:hover { --chip-bg: transparent; --chip-fg: var(--accent); }
.event__chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event__chip-icon { flex: none; width: 12px; height: 12px; color: var(--text-3); }
.event__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--text-3)); }
.event__chip--more { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Från 1100 px: ämnena i en egen kolumn till höger (bara på /tidslinje). */
@media (min-width: 1100px) {
  .tl .event { flex-wrap: nowrap; }
  .tl .event__main { flex-basis: 0; }
  .tl .event__subjects {
    flex: 0 0 var(--tl-props); justify-content: flex-end; align-content: flex-start;
    margin-top: 0; padding: var(--space-4) var(--tl-pad) var(--space-4) 0;
  }
}

/* Pekskärm: chipsen har 44 px träffyta men ritas 26 px höga, och raden blir
   inte högre för det (negativ marginal). */
@media (pointer: coarse) {
  .event__chip { min-height: var(--hit); padding: 0 var(--space-2); }
  .event__chip--more { min-width: var(--hit); justify-content: center; }
  .event__chip::before { inset: 9px 0; }
  .event__subjects { gap: 0 var(--space-2); margin-top: calc(-1 * var(--space-5)); padding-bottom: var(--space-1); }
  .timeline__toggle { min-height: var(--hit); }
}

/* Telefonen: ikon · text · tid till höger (som Mail i iOS), rader på minst
   48 px, brödtext 17. */
@media (max-width: 600px) {
  .timeline, .tl { --tl-icon: 20px; --tl-gap: var(--space-5); --tl-pad: 0px; --tl-line: 22px; --tl-inset: calc(var(--tl-icon) + var(--tl-gap)); }
  .timeline__day { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-4) var(--gutter); font-size: var(--fs-15); }
  .tl .timeline__day { top: env(safe-area-inset-top); }
  .event__main {
    grid-template-columns: var(--tl-icon) minmax(0, 1fr) auto;
    grid-template-areas: "icon body time" "icon body when";
    min-height: var(--row-h-touch); padding-block: var(--space-5);
  }
  .event.is-selected { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .event__time { font-size: var(--fs-14); }
  .event__when { font-size: var(--fs-13); text-align: right; }
  .event__title { font-size: var(--fs-17); line-height: var(--tl-line); }
  .event__summary { font-size: var(--fs-15); }
  /* Ämnena på en rad som går att svepa: raden blir aldrig högre än en chiprad. */
  .event__subjects { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .event__subjects::-webkit-scrollbar { display: none; }
  .event__chip { flex: none; max-width: 70vw; }
  .event--quiet .event__main { min-height: var(--hit); padding-block: var(--space-4); }
  .event--quiet .event__title { font-size: var(--fs-15); }
  .event--quiet .event__icon .kind-icon { width: 14px; height: 14px; }
  /* Projektet på en egen rad under rubriken, så att rubriken får hela bredden. */
  .event--quiet .event__line { flex-wrap: wrap; row-gap: 0; }
  .event--quiet .event__scope { flex: 1 0 100%; max-width: 100%; font-size: var(--fs-13); }
  .timeline__toggle { padding-left: var(--tl-inset); }
  /* Kommande är kompakt i telefonen: rubrik och tid, så att dagens rubrik
     syns på första skärmen. Hela mötet finns ett tryck bort. */
  .event--upcoming .event__summary, .event--upcoming .event__subjects { display: none; }
  .event--upcoming .event__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .event--upcoming .event__main { min-height: var(--row-h-touch); padding-block: var(--space-4); }
}

/* Doit.app: pilmarkör på Visa alla, och den markerade raden grå när fönstret
   saknar fokus (som mac.css gör för uppgifternas och mailens rader). */
body.in-mac .timeline__toggle { cursor: default; }
html.mac-inactive body.in-mac :is(.event, .commitment).is-selected { background: var(--active); box-shadow: none; }

/* ── .commitments (löftena) ──────────────────────────────────────────────── */

/* Samma form som uppgiftsraden: bockcirkel · löftet och vem/källan · när ·
   ⋯. x bockar av (igen ångrar), ↩ öppnar källan. */
.commitments { list-style: none; --cm-check: 20px; --cm-hit: 28px; --cm-gap: var(--space-5); --cm-pad: var(--space-4); }
.commitment {
  position: relative; display: grid;
  grid-template-columns: var(--cm-check) minmax(0, 1fr) auto auto; grid-template-areas: "check body due more";
  column-gap: var(--cm-gap); align-items: start;
  min-height: var(--row-h); padding: var(--space-3) var(--space-2) var(--space-3) var(--cm-pad);
  border-radius: var(--r-sm); transition: background-color var(--dur-fast) var(--ease);
}
.commitment + .commitment::before { content: ""; position: absolute; top: 0; left: calc(var(--cm-pad) + var(--cm-check) + var(--cm-gap)); right: 0; border-top: 1px solid var(--line); }
.commitment:hover { background: var(--hover); }
.commitment.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.commitment:hover::before, .commitment:hover + .commitment::before,
.commitment.is-selected::before, .commitment.is-selected + .commitment::before { border-color: transparent; }
.commitment__form { grid-area: check; display: contents; }
.commitment__check, .commitment__mark { grid-area: check; }
/* Knappen är träffytan (--cm-hit: 28 px, 44 på pekskärm) och cirkeln ritas av
   ::before — raden blir inte högre av den större ytan (negativ marginal). */
.commitment__check {
  position: relative; width: var(--cm-hit); height: var(--cm-hit); margin: calc((var(--cm-check) - var(--cm-hit)) / 2);
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-accent);
  display: grid; place-items: center; cursor: pointer;
}
.commitment__check::before {
  content: ""; position: absolute; inset: calc((var(--cm-hit) - var(--cm-check)) / 2); border-radius: 50%;
  border: 1.5px solid var(--check-ring); background: transparent;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur) var(--ease-spring);
}
.commitment__check:hover::before { border-color: var(--ok); background: var(--ok-tint); }
.commitment__check .icon { position: relative; width: 12px; height: 12px; stroke-width: 3; opacity: 0; scale: 0.6; transition: opacity var(--dur) var(--ease-spring), scale var(--dur) var(--ease-spring); }
.commitment.is-kept .commitment__check::before { border-color: var(--ok); background: var(--ok); }
.commitment.is-kept .commitment__check .icon { opacity: 1; scale: 1; }
.commitment__mark { display: grid; place-items: center; width: var(--cm-check); height: var(--cm-check); color: var(--text-3); }
.commitment__mark .icon { width: 14px; height: 14px; }
.commitment__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-1); color: inherit; text-decoration: none; }
.commitment__text { font-size: var(--fs-14); font-weight: var(--fw-500); line-height: var(--lh-row); color: var(--text); overflow-wrap: anywhere; transition: color var(--dur) var(--ease); }
a.commitment__body:hover .commitment__text { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 2px; }
.commitment__meta { font-size: var(--fs-13); line-height: var(--lh-row); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commitment.is-kept .commitment__text, .commitment.is-dropped .commitment__text { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
/* Första radens mitt: texten börjar 2 px ner (body) med radhöjden 1,35. */
.commitment__due { grid-area: due; margin-top: var(--space-2); font-size: var(--fs-13); line-height: var(--lh-row); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.commitment__more { margin-top: calc(-1 * var(--space-1)); }
.commitment__check { margin-top: calc((var(--cm-check) - var(--cm-hit)) / 2 + var(--space-1)); }
.commitment__mark { margin-top: var(--space-1); }
.commitment__due-inline { display: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.commitment__due.is-late, .commitment__due-inline.is-late { color: var(--danger); font-weight: var(--fw-500); }
.commitment.is-dropped .commitment__check { pointer-events: none; }
.commitment__more { grid-area: more; display: flex; }
/* ⋯ är tyst tills raden är aktuell (hover, markerad, fokus) — alltid synlig på pekskärm. */
@media (hover: hover) {
  .commitment__more { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
  .commitment:hover .commitment__more, .commitment.is-selected .commitment__more, .commitment:focus-within .commitment__more { opacity: 1; }
}
@media (pointer: coarse) {
  .commitments { --cm-hit: var(--hit); }
}
@media (max-width: 600px) {
  .commitments { --cm-check: 22px; --cm-pad: 0px; }
  .commitment {
    grid-template-columns: var(--cm-check) minmax(0, 1fr) auto;
    grid-template-areas: "check body more";
    align-items: start; min-height: var(--row-h-touch); padding-block: var(--space-5);
  }
  .commitment__due { display: none; }
  .commitment__due-inline { display: inline; }
  .commitment.is-selected { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4) var(--space-2); }
  .commitment__mark { margin-top: var(--space-1); }
  .commitment__check { margin-top: calc((var(--cm-check) - var(--cm-hit)) / 2 + var(--space-1)); }
  .commitment__text { font-size: var(--fs-17); }
  .commitment__meta { font-size: var(--fs-15); }
  .commitment__more { margin-top: calc(-1 * var(--space-4)); }
}
}