/* projects: Projekten — projektlistan (/projekt), projektsidan (/projekt/:id:
   läget, uppgifterna, förslagen, Skriv till Claude, kontext, teknik, ändra) och
   taggsidan (/tagg/:id). Dessutom tre klasser som andra sidor lånar:
   .context-editor (profilen, taggens kontext), .context-preview (filerna,
   taggens kontext) och .sources/.source (insamlarens körningar i
   Inställningar), och .tag-link (taggarna i Inställningar).
   Ägare: vyn "projekten". Designnatten 2026-10-20: omskriven. */

@layer views {

/* ── Sidans bredd ────────────────────────────────────────────────────────── */

/* Projektsidan använder bredden på stora skärmar: en kolumn för kontexten,
   tekniken och egenskaperna bredvid uppgifterna (som i Linear). Själva
   kolumnerna styrs av behållarens bredd (@container nedan), inte av fönstret,
   så att Mac-fönstret (920) och 1100–1260 behåller en läsbar spalt. */
@media (min-width: 1100px) {
  .main:has(> .project-layout) { max-width: 1180px; }
  /* Listan får plats för namnet och nästa uppgift i var sin kolumn. */
  .main:has(> .projects-page) { max-width: 1000px; }
}

/* ── .projects (listan) ──────────────────────────────────────────────────── */

.projects { list-style: none; margin: 0; }
.projects-page > .projects { margin-bottom: var(--space-4); }
/* Plusknappen i Nytt projekt (inmatningens knapp, 24 px) får 44 px att
   trycka på i telefonen utan att den syns större. */
@media (pointer: coarse) {
  .project-new .capture__button::after { content: ""; position: absolute; inset: -10px; }
}

/* En rad: ring · namn · nästa uppgift · taggar, prio, flaggor · antal.
   Kolumnerna har fasta bredder till höger, så att prio och antal linjerar
   från rad till rad (Linear). 36 px på datorn. */
.project__link {
  --ring: 16px;
  --meta-cols: 6.5rem 4.5rem 2.25rem;
  position: relative;
  display: grid; align-items: center; column-gap: var(--space-5);
  grid-template-columns: var(--ring) minmax(0, 1.25fr) minmax(0, 1fr) auto 2rem;
  min-height: var(--row-h); padding: var(--space-2) var(--space-4); margin-inline: calc(-1 * var(--space-4));
  border-radius: var(--r-sm); color: var(--text); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
/* Namnet står först i koden (skärmläsaren läser namnet före framsteget);
   ringen ritas ändå i första kolumnen. */
.project__link > .pring { grid-column: 1; grid-row: 1; }
.project__head { grid-column: 2; grid-row: 1; }
/* Avdelaren börjar där texten börjar (som i iOS), ingen linje överst. */
.project + .project > .project__link::before {
  content: ""; position: absolute; top: 0; right: var(--space-4);
  left: calc(var(--space-4) + var(--ring) + var(--space-5));
  border-top: 1px solid var(--line);
}
.project__link:hover { background: var(--hover); }
.project__link.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.project__link:is(:hover, .is-selected)::before,
.project:has(> .project__link:is(:hover, .is-selected)) + .project > .project__link::before { border-color: transparent; }

.project__head { display: flex; align-items: center; min-width: 0; }
.project__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-14); font-weight: var(--fw-500); line-height: var(--lh-row);
}
.project__next {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-row);
}
.project__meta { display: grid; grid-template-columns: var(--meta-cols); column-gap: var(--space-4); align-items: center; }
.project__tags { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.project__tag {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0;
  color: var(--text-2); font-size: var(--fs-12);
}
.project__tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.project__tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project__tag-more { color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.project__prio { display: flex; }
.project__flagged {
  display: inline-flex; align-items: center; gap: var(--space-1); justify-self: end;
  color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums;
}
/* Flaggan är en ikon (UI-del, 3:1) i flaggans ton; siffran är grå text. */
.project__flagged .icon { width: 12px; height: 12px; color: var(--flag); fill: currentColor; }
.project__count { justify-self: end; color: var(--text-3); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }

/* Tekniska projekt: sista kolumnen är datumet ("19 okt"). */
.projects--tech .project__link { grid-template-columns: var(--ring) minmax(0, 1.25fr) minmax(0, 1fr) auto 3.5rem; }
.project__when { white-space: nowrap; font-size: var(--fs-12); }

/* Pausat, i vila och avslutat: namnet grått, raden står kvar. */
.project:is(.project--paused, .project--resting, .project--closed) .project__name { color: var(--text-2); }

/* Smal spalt (Mac-fönstret, telefonen, taggsidan): två rader — namnet och
   antalet, sedan nästa uppgift och märkena — i stället för kolumner som
   kortar namnen till ingenting. Styrs av spaltens bredd, inte fönstrets. */
.projects-page, .tag-page { container-type: inline-size; }
@container (max-width: 719px) {
  .project__link {
    grid-template-columns: var(--ring) minmax(0, 1fr) auto;
    grid-template-areas: "ring head count" ". next meta";
    row-gap: var(--space-1); padding-block: var(--space-3);
  }
  .projects--tech .project__link { grid-template-columns: var(--ring) minmax(0, 1fr) auto; }
  .project__link > .pring { grid-area: ring; }
  .project__head { grid-area: head; }
  .project__next { grid-area: next; }
  .project__meta { grid-area: meta; display: flex; justify-content: flex-end; gap: var(--space-4); }
  .project__meta > :empty { display: none; }
  .project__count { grid-area: count; }
  /* Bara prickarna; namnet står kvar för skärmläsaren (och som title). */
  .project__tag-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Telefonen: iOS-storlekar och raden minst 48 px (64 med två rader). */
@media (max-width: 599px) {
  .project__link { --ring: 20px; min-height: var(--row-h-touch); padding-block: var(--space-5); }
  .project__next { font-size: var(--fs-14); }
  .project__count { font-size: var(--fs-15); }
  /* Namnet får brytas; pricken "Claude väntar" följer sista ordet. */
  .project__head { display: block; }
  .project__name { display: inline; font-size: var(--fs-17); white-space: normal; overflow-wrap: anywhere; }
  .project__head .attn { vertical-align: middle; }
}

/* ── .pring (framstegsringen) ────────────────────────────────────────────── */

/* Som i Things: en ring, och en tårtbit inuti som fylls med klara av alla i
   åttondelar. Ringen är en UI-del (--check-ring, 3:1). */
.pring {
  --pring-fill: var(--text-3);
  --pring-p: 0%;
  flex: none; box-sizing: border-box;
  width: var(--ring, 16px); height: var(--ring, 16px); padding: 2px; border-radius: 50%;
  border: 1.5px solid var(--check-ring);
  background: conic-gradient(var(--pring-fill) var(--pring-p), transparent 0) content-box;
}
.pring--1 { --pring-p: 12.5%; }
.pring--2 { --pring-p: 25%; }
.pring--3 { --pring-p: 37.5%; }
.pring--4 { --pring-p: 50%; }
.pring--5 { --pring-p: 62.5%; }
.pring--6 { --pring-p: 75%; }
.pring--7 { --pring-p: 87.5%; }
.pring--8 { --pring-p: 100%; }
.pring--on_hold, .pring--dropped { border-style: dashed; }
.pring--done { --pring-fill: var(--ok); border-color: var(--ok); }

/* ── .project-group (Tekniska projekt) ───────────────────────────────────── */

/* Fällbar (data-remember sparar läget), stängd som förval: de flesta av
   projekten står redan i listan ovanför. */
.project-group { margin-top: var(--space-10); }
.project-group__summary {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--row-h); padding-bottom: var(--space-1); border-bottom: 1px solid var(--line);
  font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text); cursor: pointer; list-style: none;
}
.project-group__summary::-webkit-details-marker { display: none; }
.project-group__chevron { width: 14px; height: 14px; color: var(--text-3); transition: rotate var(--dur) var(--ease); }
.project-group[open] .project-group__chevron { rotate: 90deg; }
.project-group__hint { margin: var(--space-3) 0 var(--space-2); color: var(--text-2); font-size: var(--fs-13); }
@media (pointer: coarse) {
  .project-group__summary { min-height: var(--hit); }
}

/* ── Projektsidan: sidhuvudet ────────────────────────────────────────────── */

/* Handlingarna står bredvid titeln på datorn och bryts under den i telefonen. */
.page-head__row:has(> .project-title) { flex-wrap: wrap; row-gap: var(--space-4); }
/* Titeln tar sin bredd först: ryms inte handlingarna bredvid (Mac-fönstret
   920 px) går de ner på en egen rad i stället för att titeln bryts. */
.page-head__row > .project-title { flex-basis: auto; }
.project-progress { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-2); }
.project-progress .pring { --ring: 14px; }
/* Claude Code öppnar terminalen på Macen: inget att trycka på i telefonen. */
@media (hover: none) and (pointer: coarse) {
  .project-terminal { display: none; }
}
.project-terminal .attn { margin-left: var(--space-2); }
.project-members { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-2); }
.project-members .avatar + .avatar { margin-left: calc(-1 * var(--space-3)); box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 599px) {
  .page-head__row:has(> .project-title) > .page-head__actions { width: 100%; }
}

.project-note { margin: calc(-1 * var(--space-3)) 0 var(--space-7); color: var(--text-2); font-size: var(--fs-14); white-space: pre-wrap; max-width: 65ch; }

/* Uppgifterna på projektsidan bär alla projektets taggar (ärvda): de står
   redan i sidhuvudet, så raderna visar bara sina egna. */
.project-main .tasks .tag-pill--inherited { display: none; }

/* Ankarna (#andra, #klart, #claude …) hamnar under det sticky sidhuvudet,
   inte bakom det. I telefonen rullar titeln bort; där räcker titelraden. */
.project-layout [id] { scroll-margin-top: 176px; }
@media (max-width: 859px) {
  .project-layout [id] { scroll-margin-top: calc(env(safe-area-inset-top) + 64px); }
}

/* ── .project-layout ─────────────────────────────────────────────────────── */

/* En spalt: uppgifterna, förslagen och Skriv till Claude, sedan kontexten,
   tekniken och Ändra, sist tidslinjen. Från 900 px innehåll: en kolumn på
   288 px till höger, och tidslinjen under uppgifterna. */
.project-layout { container-type: inline-size; }
.project-main > :first-child { margin-top: 0; }
.project-side > .section:first-child { margin-top: var(--space-10); }
@container (min-width: 900px) {
  .project-cols {
    display: grid; column-gap: var(--space-10); align-items: start;
    grid-template-columns: minmax(0, 1fr) 288px;
    grid-template-areas: "main side" "timeline side";
  }
  .project-main { grid-area: main; }
  .project-timeline { grid-area: timeline; }
  .project-side { grid-area: side; }
  .project-side > .section:first-child { margin-top: 0; }
  .project-side .section { margin-top: var(--space-9); }
  .project-side .prose { font-size: var(--fs-14); }
  .project-side details.edit { margin-top: var(--space-9); }
}

/* ── .project-brief (läget) ──────────────────────────────────────────────── */

/* Claudes läge överst, två–tre rader och "Visa hela läget". Ingen ram: en
   hårfin kant till vänster säger att det är ett citat ur källorna. */
.project-brief { margin: 0 0 var(--space-7); padding-left: var(--space-6); border-left: 2px solid var(--line-strong); }
.project-brief__title {
  display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2);
  font-size: var(--fs-12); font-weight: var(--fw-600); color: var(--text-2); line-height: var(--lh-row);
}
.project-brief__title .icon { width: 13px; height: 13px; color: var(--text-3); }
.project-brief__by { font-weight: var(--fw-400); color: var(--text-3); font-variant-numeric: tabular-nums; }
.project-brief__text { font-size: var(--fs-14); line-height: var(--lh-text); color: var(--text-2); }
.project-brief__text h3 { font-size: var(--fs-13); margin: var(--space-4) 0 var(--space-1); }
.project-brief__text ul { margin-bottom: var(--space-3); padding-left: var(--space-6); }
.project-brief__text li { margin-bottom: var(--space-1); }
.project-brief__text p { margin-bottom: var(--space-3); }
.project-brief__text > :last-child { margin-bottom: 0; }
/* Tre rader, sedan tonar texten ut. :has() släpper höjden när details är öppen
   (också utan JS). */
.project-brief--long .project-brief__text {
  max-height: calc(3 * 1.5em); overflow: hidden;
  mask-image: linear-gradient(to bottom, currentColor calc(100% - 1.5em), transparent);
  -webkit-mask-image: linear-gradient(to bottom, currentColor calc(100% - 1.5em), transparent);
}
.project-brief:has(.project-brief__more[open]) .project-brief__text { max-height: none; mask-image: none; -webkit-mask-image: none; }
.project-brief__toggle {
  display: inline-flex; align-items: center; min-height: 28px; margin-top: var(--space-1);
  color: var(--accent); font-size: var(--fs-13); font-weight: var(--fw-500); cursor: pointer; list-style: none;
}
.project-brief__toggle::-webkit-details-marker { display: none; }
.project-brief__toggle:hover { text-decoration: underline; }
.project-brief__more[open] .project-brief__show, .project-brief__more:not([open]) .project-brief__hide { display: none; }
@media (pointer: coarse) {
  .project-brief__toggle { min-height: var(--hit); margin-block: calc(-1 * var(--space-3)) calc(-1 * var(--space-4)); }
}

/* ── .psug (Nästa steg från Claude) ──────────────────────────────────────── */

/* Lugna rader med små knappar, inte kort: uppgifterna är det viktiga. */
.psug { list-style: none; margin: 0 0 var(--space-3); }
.psug__row { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-4) 0; }
.psug__row + .psug__row { border-top: 1px solid var(--line); }
.psug__main { flex: 1; min-width: 0; }
.section .psug__title { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-500); line-height: var(--lh-row); }
.psug__title .badge { margin-left: var(--space-2); }
.section .psug__note { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-text); }
.section .psug__meta { margin: var(--space-1) 0 0; color: var(--text-3); font-size: var(--fs-12); }
.psug__actions { display: flex; gap: var(--space-2); flex: none; }
@media (max-width: 599px) {
  .psug__row { flex-direction: column; gap: var(--space-3); }
}

/* ── .chat (Skriv till Claude) ───────────────────────────────────────────── */

.chat { list-style: none; margin: 0 0 var(--space-6); }
.chat__turn { padding: var(--space-5) 0; }
.chat__turn + .chat__turn { border-top: 1px solid var(--line); }
.section .chat__meta {
  display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1);
  color: var(--text-3); font-size: var(--fs-12);
}
.chat__meta .icon { width: 12px; height: 12px; }
.section .chat__meta--wait { margin-top: var(--space-3); font-style: italic; }
.section .chat__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-14); line-height: var(--lh-text); }
.chat__reply { margin-top: var(--space-4); padding-left: var(--space-6); border-left: 2px solid var(--line-strong); }
.chat__answer { font-size: var(--fs-14); line-height: var(--lh-text); overflow-wrap: anywhere; }
.chat__answer > :last-child { margin-bottom: 0; }
.chat__older { margin-bottom: var(--space-3); }
.chat__older > summary { color: var(--text-2); font-size: var(--fs-13); cursor: pointer; }
.chat__older[open] > summary { margin-bottom: var(--space-2); }
.chat__form { display: grid; gap: var(--space-4); }
.chat__input { resize: none; min-height: 64px; field-sizing: content; max-height: 40vh; }
.chat__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.section .chat__actions .hint { margin: 0; }
@media (max-width: 599px) {
  .chat__actions { flex-direction: column-reverse; align-items: stretch; }
  .chat__actions .btn { width: 100%; }
}

/* ── Kontext och teknik ──────────────────────────────────────────────────── */

/* Ingen ram runt texten (tyst ram): prosan står direkt under rubriken. */
.project-doc > :last-child { margin-bottom: 0; }
.section .project-doc__empty { margin: 0; color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-text); }
.project-edit { margin-top: var(--space-5); }
details.edit.project-edit { border-top: 0; padding-top: 0; }
details.edit.project-edit--props { margin-top: var(--space-10); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.project-edit > summary { color: var(--text-2); font-size: var(--fs-14); }
.project-edit > summary:hover { color: var(--text); }
/* Mappen bara när projektet är tekniskt. */
.project-edit form:not(:has(input[name="technical"]:checked)) .project-edit__folder { display: none; }

.tech-folder { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.tech-folder .icon { width: 16px; height: 16px; color: var(--text-2); }
.tech-folder code { font-size: var(--fs-13); padding: var(--space-1) var(--space-4); border-radius: var(--r-sm); background: var(--surface); overflow-wrap: anywhere; }
.section .tech-folder__hint { margin: var(--space-2) 0 var(--space-5); }

/* ── .prio (prioriteten) ─────────────────────────────────────────────────── */

/* Märket är badge(); här bara prickens form. Texten är grå i alla tre, och
   bara Hög har färg (som Linears prioritet): förut stod tre orange toner bredvid
   flaggan, och Mellan blev i mörkt läge samma gula som "Claude väntar"
   (inventeringen). Mellan är en fylld grå prick, Låg en tom. */
.prio--high::before { background: var(--prio-high); }
.prio--mid::before { background: var(--text-3); }
.prio--low::before { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }

/* ── Taggsidan ───────────────────────────────────────────────────────────── */

.tag-group + .tag-group { margin-top: var(--space-7); }
.tag-group__title {
  display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-5) 0 var(--space-1);
  font-size: var(--fs-14); font-weight: var(--fw-600);
}
.tag-group__title a { color: var(--text); text-decoration: none; }
.tag-group__title a:hover { color: var(--accent); }
.tag-group__count { color: var(--text-3); font-size: var(--fs-13); font-weight: var(--fw-500); }
@media (pointer: coarse) {
  .tag-group__title a { display: inline-flex; align-items: center; min-height: var(--hit); }
}

/* ── Lånas av andra sidor ────────────────────────────────────────────────── */

/* Kontextfilernas redigering (projektet, profilen, taggen). 16 px i telefonen
   så att iPhone inte zoomar in. */
.context-editor { font-family: var(--mono); font-size: var(--fs-13); line-height: var(--lh-text); min-height: 280px; field-sizing: content; }
@media (pointer: coarse) {
  .context-editor { font-size: var(--fs-16); }
}
.context-preview {
  white-space: pre-wrap; font-family: var(--mono); font-size: var(--fs-13); line-height: var(--lh-text);
  background: var(--surface); border-radius: var(--r-lg); padding: var(--space-6); color: var(--text-2);
}

/* Insamlarens körningar i Inställningar (settings.js). */
.sources { list-style: none; }
.source { display: grid; grid-template-columns: 9.5rem 1fr; column-gap: var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--line); font-size: var(--fs-14); }
.source:first-child { border-top: 0; }
.source__meta { color: var(--text-2); font-size: var(--fs-12); padding-top: var(--space-1); white-space: nowrap; }
.source__title { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .source { grid-template-columns: 1fr; }
}

/* Taggarna i Inställningar (tags.js, tagsSection). */
.tag-link { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text); font-weight: var(--fw-600); }
.tag-link::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.tag-link:hover { color: var(--accent); }
}