/* today: Idag (/idag): listan med dagens uppgifter, Behöver dig, Väntar på,
   och dagen — nästa möte, mötena, morgonbriefen, löftena, Pågår nu och I går.
   Briefens text (.brief) delas med kalendern, mötet och projekten.
   Ägare: vyn "idag".

   Upplägget (todayPage i src/views/calendar.js):
   .today > .today__main (Att göra, Behöver dig, Väntar på)
          + .today__side (nästa möte, Möten, briefen, Löften, Pågår nu, I går)
   En spalt under 1100 px: briefen och nästa möte först, sedan listan och
   resten av dagen (.today__side är display: contents och ordningen sätts med
   order). Från 1100 px: två spalter, dagen till höger. Uppgifterna står först
   i HTML:en, så att j och ⇥ börjar i listan. */

@layer views {

/* ── .brief ──────────────────────────────────────────────────────────────── */

/* Planerarens markdown (briefHtml): punkter, fetstil, rubriker. Rubrikerna i
   vanliga bokstäver (märken och rubriker skrivs aldrig med VERSALER). */
.brief { font-size: var(--fs-15); line-height: var(--lh-text); }
.brief h3 { font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text-2); margin: var(--space-6) 0 var(--space-2); }
.brief h3:first-child { margin-top: 0; }
.brief p { margin: 0 0 var(--space-4); }
.brief p:last-child, .brief ul:last-child { margin-bottom: 0; }
.brief ul { margin: 0 0 var(--space-4); padding-left: var(--space-7); }
.brief li { margin: var(--space-1) 0; }
.brief li::marker { color: var(--text-3); }

/* ── .today (upplägget) ──────────────────────────────────────────────────── */

.today {
  --today-gap: var(--space-9);
  display: flex; flex-direction: column; gap: var(--today-gap);
}
/* Komponenternas .section har en egen marginal ovanför; här sätter
   upplägget luften. */
.today .section { margin-top: 0; }
.today__main { display: flex; flex-direction: column; gap: var(--today-gap); min-width: 0; }
.today__side { display: contents; }
.today-brief { order: -2; }
.today-next { order: -1; }

@media (min-width: 1100px) {
  /* Bredden används med avsikt: listan till vänster, dagen i en egen spalt
     (som egenskapskolumnen i Linear), i stället för en smal kolumn. */
  .main:has(> .today) { max-width: 1200px; }
  .today {
    --today-side: 300px;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--today-side);
    align-items: start; column-gap: var(--space-10);
  }
  .today__side { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
  .today-brief, .today-next { order: 0; }
  /* Ingen dag att visa (inga möten, ingen brief, inga löften): en spalt i
     läsbar bredd, inte en tom högerspalt. */
  .main:has(> .today--single) { max-width: var(--content-w); }
  .today--single { grid-template-columns: minmax(0, 1fr); }
}
/* Ett lågt fönster (Mac-fönstret med Claude-panelen öppen, ungefär 310 px):
   listan först, briefen och nästa möte efter den. */
@media (max-width: 1099px) and (max-height: 520px) {
  .today-brief, .today-next { order: 0; }
}
@media (min-width: 1280px) {
  .today { --today-side: 340px; column-gap: var(--space-11); }
}

/* ── .today-capture (listans inmatning, med dagens datum) ────────────────── */

/* Inmatningen är listans (list.css); här bara läget: överst i listan, 24 px
   till första gruppen. */
.today-capture .capture { margin-bottom: 0; }
.today-capture { margin-bottom: calc(var(--space-8) - var(--today-gap)); }

/* Raderna hamnar inte under det fasta sidhuvudet (datorn) eller
   bottenmenyn (telefonen) när j flyttar markeringen. */
.today [data-row] { scroll-margin-block: calc(var(--today-stick) + var(--space-9)) var(--space-12); }
@media (max-width: 859px) {
  .today [data-row] { scroll-margin-block: calc(var(--today-stick) + var(--space-9)) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-12)); }
}

/* ── Sticky rubriker ─────────────────────────────────────────────────────── */

/* Försenat, Idag, Flaggat och avsnitten står kvar under sidhuvudet medan man
   rullar genom dem (som listorna i iOS). --today-stick är höjden på skalets
   fasta sidhuvud med titel och underrubrik (uppmätt: 77 px på datorn) och på
   telefonens kompakta titelrad (44 px + safe area). Ändras sidhuvudet: mät
   om. */
.today { --today-stick: 77px; }
@media (max-width: 859px) {
  .today { --today-stick: calc(env(safe-area-inset-top) + 44px); }
}
/* Doit.app: sidhuvudet står under fönstrets remsa (mac.css, --titlebar-h). */
body.mac-unified .today { --today-stick: calc(var(--titlebar-h) + 77px); }
.today-group__title--h2, .today .section__title, .today-brief__title {
  position: sticky; top: var(--today-stick); z-index: var(--z-raised);
  background: var(--bg);
}

/* ── .today-group (Försenat, Idag, Flaggat; grupperna i Behöver dig) ───── */

.today-group + .today-group { margin-top: var(--space-7); }
.today-group__title {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: var(--fs-13); font-weight: var(--fw-600); line-height: var(--lh-tight); color: var(--text);
}
/* h2 i Att göra: samma form som avsnittens rubriker (.section__title). */
.today-group__title--h2 { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
/* h3 i Behöver dig: en lugnare underrubrik. */
.today-group__title--h3 { color: var(--text-2); margin: var(--space-2) 0 var(--space-2); }
.today-group__title--danger { color: var(--danger); }
.today-group__title--flag { color: var(--flag-text); }
.today-group__title--ok { color: var(--ok); }
.today-group__count { font-weight: var(--fw-500); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Uppgiftsraderna är listans (list.css). På Idag är "Ej planerad — ↩
   planerar" brus (dagen planeras, inte uppgiften), och märket "idag" står
   redan i rubriken. */
.today .task[data-ready="none"] .task__next { display: none; }
.today-group--today .task .due:not(.due--overdue) { display: none; }

/* ── .today-later (Till i morgon på raden) ───────────────────────────────── */

/* Syns vid hover, när raden är markerad eller har fokus (⇥ når knappen
   efter raden) — som Linears radhandlingar. Ligger ovanpå radens högerkant,
   så att inget hoppar. Dold med visibility, inte bara opacity: en osynlig
   knapp ska inte gå att trycka på eller läsas. Den står mitt på första
   textraden, där datummärket står, och är högre än märket — så att den
   täcker det helt i stället för att en remsa av det röda sticker upp när
   titeln har två rader (slutgranskningen 2026-10-20; att uppgiften är sen
   säger gruppen Försenat). */
.today-later__btn {
  position: absolute; right: var(--space-3); top: calc(var(--task-py) + var(--task-line) / 2); translate: 0 -50%;
  background: var(--elevated); box-shadow: var(--shadow-xs);
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.task:hover .today-later__btn, .task.is-selected .today-later__btn, .task:focus-within .today-later__btn {
  visibility: visible; opacity: 1; transition: opacity var(--dur-fast) var(--ease);
}
/* Det som ligger under knappen (datum, projekt, tagg) tonar ut mot radens
   bakgrund i stället för att klippas mitt i ett märke: en kort toning till
   vänster om knappen, i radens ton (hover eller markering) ovanpå --bg. */
.today-later__btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: var(--space-9);
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg));
}
.task:hover .today-later__btn::before { background: linear-gradient(to right, transparent, var(--hover)), linear-gradient(to right, transparent, var(--bg)); }
.task.is-selected .today-later__btn::before { background: linear-gradient(to right, transparent, var(--accent-tint)), linear-gradient(to right, transparent, var(--bg)); }
.task.task--closed .today-later { display: none; }
/* Pekskärm: ingen hover och inga tangenter — telefonen sätter datum på
   uppgiften (svep åt vänster är ett förslag). .task form är display:
   contents i list.css, därav .task före. */
@media (hover: none), (pointer: coarse) {
  .task .today-later { display: none; }
}

/* ── .today-next (nästa möte eller det som pågår) ────────────────────────── */

.today-next {
  position: relative; display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: background-color var(--dur-fast) var(--ease);
}
/* Kontots färg som en kant till vänster: dekor (UI-del), aldrig text. */
.today-next::before { content: ""; position: absolute; left: var(--space-4); top: var(--space-5); bottom: var(--space-5); width: 3px; border-radius: var(--r-full); background: var(--c); }
.today-next:hover { background: var(--hover); }
.today-next.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.today-next__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); color: inherit; text-decoration: none; }
/* Hela rutan är klickbar (stretched link); Anslut ligger ovanpå. */
.today-next__main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.today-next__main:focus-visible { outline: none; }
.today-next__main:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.today-next__label { font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--text-2); font-variant-numeric: tabular-nums; }
.today-next.is-now .today-next__label { color: var(--text); }
.today-next.is-now .today-next__label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-3); border-radius: 50%; background: var(--c); vertical-align: 1px; }
.today-next__title { font-size: var(--fs-17); font-weight: var(--fw-600); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.today-next__meta { font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; }
.today-next__join { position: relative; z-index: var(--z-raised); flex: none; }

/* ── .today-meetings (Möten) ─────────────────────────────────────────────── */

/* listRow(): starttiden över sluttiden i en smal kolumn (som listan i
   Apples Kalender), titeln får brytas på två rader. */
.today-meetings .list-row { --lead-w: 40px; --row-pad: var(--space-3); margin-inline: calc(-1 * var(--space-3)); }
/* Raden går ut i marginalen (hover), avdelaren slutar vid spaltens kant. */
.today-meetings .list-row + .list-row::before { right: var(--space-3); }
.today-meetings .list-row__leading { justify-content: flex-start; align-self: flex-start; }
.today-meetings .list-row__main { align-items: flex-start; }
.today-meetings .list-row__title { white-space: normal; display: flex; align-items: baseline; gap: var(--space-3); }
.today-meetings .list-row__title .cal-dot { flex: none; translate: 0 -1px; }
.today-meeting__time { display: flex; flex-direction: column; font-size: var(--fs-13); line-height: var(--lh-row); color: var(--text-2); font-variant-numeric: tabular-nums; }
.today-meeting__end { color: var(--text-3); }
.today-meeting__prep { flex: none; font-size: var(--fs-12); color: var(--text-3); }
.today-meetings .list-row__trailing .btn--icon .icon { width: 16px; height: 16px; }
/* Heldagarna överst, med en hårfin linje mot mötena med tid. */
.today-allday { padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.today-allday .list-row__main { align-items: center; }
/* Passerade möten: gråare text, inte genomskinlighet (AA i båda lägena). */
.today-meeting.is-past .list-row__title { color: var(--text-2); }
.today-meeting.is-past .today-meeting__time, .today-meeting.is-past .today-meeting__end { color: var(--text-3); }

.today-past { margin-top: var(--space-3); }
.today-past > summary { font-size: var(--fs-13); padding: var(--space-3) var(--space-3); margin-inline: calc(-1 * var(--space-3)); border-radius: var(--r-sm); }
.today-past > summary:hover { background: var(--hover); }
.today-past[open] > summary { margin-bottom: var(--space-2); }

/* ── .today-brief (morgonbriefen) ────────────────────────────────────────── */

.today-brief__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.today-brief__by { font-weight: var(--fw-400); color: var(--text-3); font-variant-numeric: tabular-nums; }
.today-brief__text { max-width: 68ch; }
/* En lång brief i en spalt: tre rader och "Visa hela" (fungerar utan JS). */
.today-brief--long .today-brief__text {
  max-height: calc(3 * var(--lh-text) * 1em); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, currentColor 55%, transparent);
  mask-image: linear-gradient(to bottom, currentColor 55%, transparent);
}
.today-brief--long:has(.today-brief__more[open]) .today-brief__text { max-height: none; -webkit-mask-image: none; mask-image: none; }
/* Ihopfälld: ingen luft mellan punkterna, så att klippet hamnar mellan två
   rader — inte mitt i den tredje (luften förskjuter annars raderna). */
@media (max-width: 1099px) {
  .today-brief--long:not(:has(.today-brief__more[open])) .today-brief__text :is(p, ul, li) { margin-block: 0; }
}
.today-brief__more > summary { display: inline-flex; align-items: center; min-height: 28px; margin-top: var(--space-2); font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--accent); }
.today-brief__more > summary:hover { color: var(--accent-hover); }
.today-brief__hide, .today-brief__more[open] .today-brief__show { display: none; }
.today-brief__more[open] .today-brief__hide { display: inline; }
@media (pointer: coarse) {
  /* 44 px att trycka på, men luften under texten räknas in i avståndet till
     nästa del (annars står nästa möte längre ifrån briefen än listan från
     nästa möte). */
  .today-brief__more > summary { min-height: var(--hit); margin-bottom: calc(-1 * var(--space-5)); }
}
@media (min-width: 1100px) {
  /* I spalten till höger står briefen hel. */
  .today-brief--long .today-brief__text { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .today-brief__more { display: none; }
  .today-brief .brief { font-size: var(--fs-14); }
}
@media (max-width: 600px) {
  .today-brief .brief { font-size: var(--fs-17); }
}
.today-brief--empty { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-13); color: var(--text-2); }
.today-brief--empty .icon { flex: none; width: 16px; height: 16px; color: var(--text-3); }

/* ── .today-rows (Behöver dig, Löften) ───────────────────────────────────── */

/* listRow() med handlingar. Raderna linjerar med uppgiftsraderna (list.css:
   raden går 8 px ut i marginalen, bocken 19 px, texten börjar på samma x),
   och ikonen står där bocken står. Titeln och skälet får brytas — de ska
   läsas helt. */
.today-rows .list-row { margin-inline: calc(-1 * var(--space-4)); }
.today-rows .list-row + .list-row::before { right: var(--space-4); }
.today-rows .list-row--leading { --row-pad: var(--space-2); --lead-w: 19px; }
.today-rows .list-row__leading { align-self: flex-start; height: calc(var(--lh-row) * 1em); }
.today-rows .list-row__leading .icon { width: 18px; height: 18px; }
.today-rows .list-row__main { align-items: flex-start; }
.today-rows .list-row__title, .today-rows .list-row__subtitle { white-space: normal; overflow-wrap: anywhere; }
/* Högerkanten linjerar med uppgiftsraderna: 8 px in från radens kant, alltså
   i spaltens kant (förut 4 px, då stack datumet ut i telefonens marginal). */
.today-rows .list-row__main, .today-rows .list-row__trailing { padding-right: var(--space-4); }
.today-row .list-row__trailing { gap: var(--space-2); }
.today-row__line { display: block; }
.today-reply { display: block; color: var(--ok); font-weight: var(--fw-500); }
.today-act { display: contents; }
.today-due { color: var(--text-3); font-size: var(--fs-13); font-variant-numeric: tabular-nums; white-space: nowrap; }
.today-due.is-late { color: var(--danger); font-weight: var(--fw-500); }
.today-questions .list-row__leading { color: var(--accent); }
.today-questions .list-row__main { align-items: center; }
.today-replied .list-row__leading { color: var(--ok); }
.today-questions .list-row__meta .icon { width: 14px; height: 14px; color: var(--text-3); }
/* I telefonen står handlingarna under texten, i tumhöjd och 44 px höga. */
@media (max-width: 600px) {
  .today-row:not(.today-promise):not(.today-questions) { flex-wrap: wrap; }
  .today-row:not(.today-promise):not(.today-questions) .list-row__trailing { flex-basis: 100%; padding: 0 var(--space-4) var(--space-4) calc(var(--space-2) + 19px + var(--space-5)); }
}
/* Löftena i spalten: Hållet som en bock till höger. */
.today-promise .list-row__title { white-space: normal; }

/* ── .today-fold (Pågår nu, I går) ───────────────────────────────────────── */

/* Grundens chevron (summary utan klass) står först; rubriken som avsnittens. */
.today-fold > summary {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--line);
}
.today-fold[open] > summary { margin-bottom: var(--space-4); }
@media (pointer: coarse) {
  .today-fold > summary { min-height: var(--hit); align-items: center; padding-top: var(--space-3); }
}
.today-topics .list-row__title { font-weight: var(--fw-500); }

/* ── Småtext ─────────────────────────────────────────────────────────────── */

.today-quiet { font-size: var(--fs-13); color: var(--text-2); padding: var(--space-3) 0; }
.today-more { margin-top: var(--space-3); }
/* Länkknappen linjerar med texten ovanför (knappens utfyllnad ut i marginalen). */
.today-more .btn--ghost { margin-left: calc(-1 * var(--space-4)); }

/* Rörelsen: avbockningen är listans (list.css), vybytet skalets (View
   Transitions). Ingen egen inanimation här — sidan ritas om efter varje
   handling (refresh()), och då hade allt tonat in igen. */
}