/* outcomes: Vem gör vad (/vem-gor-vad). Ägare: vyn "vem gör vad".

   Siffrorna som rutor, förslagen (Kan bli A) med fältet och knappen i samma
   höjd, veckorna som helbreda andelsstaplar (server-renderad SVG), raderna
   ur listRow() och tabellen per tjänst med högerställda tabulära siffror. */

@layer views {

/* Serierna i diagrammet. Alla klarar 3:1 mot bakgrunden i båda lägena
   (UI-delar): accenten (5.6 / 6.6), turkos (--tag-4: 3.4 / 8.4), bockens
   ring för "du" (--check-ring: 3.8 / 3.8; förut --line-strong, 1.3:1) och
   --danger (5.5 / 5.9). Glipan mellan delarna skiljer dem också i gråskala. */
.app {
  --wgv-claude: var(--accent);
  --wgv-both: var(--tag-4);
  --wgv-you: var(--check-ring);
  --wgv-failed: var(--danger);
}

/* ── .wgv-cols: att göra och underlaget ──────────────────────────────────── */

/* På bred skärm (≥ 1100) får sidan mer bredd, och det man gör (Kan bli A,
   det som inte gick, Claude gör själv) står bredvid underlaget (veckorna,
   per tjänst, rutinerna) i stället för en smal spalt med tomrum. Två
   spalter bara när båda ryms med 400 px; annars en. */
.wgv-cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-11); align-items: start; }
.wgv-col { min-width: 0; }
@media (min-width: 1100px) {
  .main:has(.wgv-cols) { max-width: 1240px; }
  .wgv-cols { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
}

/* ── .wgv-stats: siffrorna överst ────────────────────────────────────────── */

.wgv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.wgv-stat { padding: var(--space-5) var(--space-6); border-radius: var(--r-lg); background: var(--surface); }
.wgv-stat dt { font-size: var(--fs-13); color: var(--text-2); }
.wgv-stat dd { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.wgv-stat__value { font-size: var(--fs-24); line-height: var(--lh-tight); font-weight: var(--fw-600); font-variant-numeric: tabular-nums; color: var(--text); }
.wgv-stat__note { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  /* Tätare i telefonen, så att Kan bli A syns tidigare. */
  .wgv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .wgv-stat { padding: var(--space-4) var(--space-5); }
  .wgv-stat dd { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .wgv-stat__value { font-size: var(--fs-20); }
}

/* ── .wgv-cand: Kan bli A ────────────────────────────────────────────────── */

.wgv-cands { list-style: none; display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.wgv-cand { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: var(--space-4); }
.wgv-cand__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.wgv-cand__title { font-size: var(--fs-15); color: var(--text); }
.wgv-cand__examples { font-size: var(--fs-13); line-height: var(--lh-text); color: var(--text-2); }

/* Samma upplägg i varje kort, hur lång knappens text än är: fältet i full
   bredd och knappen under, i samma höjd (36 px, 44 på pekskärm). Förut
   delade de rad när texten var kort och bröts när den var lång. */
.wgv-trust { display: grid; gap: var(--space-4); justify-items: start; }
.wgv-trust .outcome__desc { width: 100%; min-width: 0; min-height: 36px; font-size: var(--fs-14); }
.wgv-trust .btn { min-height: 36px; max-width: 100%; white-space: normal; text-align: left; }
@media (pointer: coarse) {
  .wgv-trust .outcome__desc, .wgv-trust .btn { min-height: var(--hit); }
  /* 16 px i fältet: under det zoomar iPhone in. */
  .wgv-trust .outcome__desc { font-size: var(--fs-16); }
}
@media (max-width: 600px) {
  .wgv-trust { justify-items: stretch; }
  .wgv-trust .btn { justify-content: center; text-align: center; }
}

/* ── .wgv-weeks: vecka för vecka ─────────────────────────────────────────── */

.wgv-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-5); font-size: var(--fs-13); color: var(--text-2); }
.wgv-legend__item { display: inline-flex; align-items: center; gap: var(--space-3); }
.wgv-key { width: 10px; height: 10px; border-radius: var(--r-xs); background: var(--wgv-claude); }
.wgv-key--both { background: var(--wgv-both); }
.wgv-key--you { background: var(--wgv-you); }
.wgv-key--failed { background: var(--wgv-failed); }

.wgv-weeks { list-style: none; display: grid; }
/* Varje vecka är en länk till stegen den veckan. */
.wgv-week {
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-sm);
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  transition: background-color var(--dur-fast) var(--ease);
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem;
  grid-template-areas: "label bar total" "label counts counts";
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-4);
  font-variant-numeric: tabular-nums;
}
/* Avdelaren på li, inte på länken: länken går ut 8 px på varje sida (för
   markeringen), linjen håller spaltens kant. */
.wgv-weeks > li + li { border-top: 1px solid var(--line); }
.wgv-week:hover { background: var(--hover); }
.wgv-week.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.wgv-week__label { grid-area: label; display: flex; flex-direction: column; align-self: start; }
.wgv-week__num { font-size: var(--fs-14); font-weight: var(--fw-600); color: var(--text); }
.wgv-week__note { font-size: var(--fs-12); color: var(--text-3); }
.wgv-week.is-current .wgv-week__note { color: var(--text-2); }
.wgv-week__total { grid-area: total; text-align: right; font-size: var(--fs-13); color: var(--text-2); }
.wgv-week__counts { grid-area: counts; font-size: var(--fs-12); color: var(--text-3); }

/* Stapeln: hela bredden, rundade ändar via ramen. */
.wgv-bar { grid-area: bar; display: block; height: 10px; border-radius: var(--r-full); overflow: hidden; background: var(--surface); }
.wgv-bar svg { display: block; width: 100%; height: 100%; }
.wgv-bar__claude { fill: var(--wgv-claude); }
.wgv-bar__both { fill: var(--wgv-both); }
.wgv-bar__you { fill: var(--wgv-you); }
.wgv-bar__failed { fill: var(--wgv-failed); }
.wgv-bar { transform-origin: left center; animation: wgv-grow var(--dur) var(--ease-out) both; }
@keyframes wgv-grow { from { transform: scaleX(0.6); opacity: 0; } }
@media (max-width: 600px) {
  .wgv-week { grid-template-columns: 4.5rem minmax(0, 1fr) 3.5rem; column-gap: var(--space-5); }
}

/* Stegen den valda veckan, under diagrammet. */
.wgv-steps { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); scroll-margin-top: var(--space-12); }
.wgv-steps__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.wgv-steps__title { font-size: var(--fs-15); font-weight: var(--fw-600); }
.wgv-steps .wgv-key { display: inline-block; }

/* ── Raderna (listRow) ───────────────────────────────────────────────────── */

.wgv-rows { margin-top: var(--space-3); }
.wgv-failed-icon { color: var(--danger); }
.wgv-line { display: block; }
.wgv-note { color: var(--danger); }
.wgv-meta { margin-top: var(--space-1); font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Raderna här bär hela meningar (uppgiften, steget, anteckningen): de får
   brytas i stället för att kortas, och i telefonen står meta under texten. */
.wgv-rows .list-row__title, .wgv-rows .list-row__subtitle { white-space: normal; overflow: visible; }
.wgv-rows .list-row__meta { max-width: 40%; text-align: right; }
/* Flera rader: ikonen och märket står vid första raden, som i iOS Mail. */
.wgv-rows .list-row__main { align-items: flex-start; }
.wgv-rows .list-row__leading { min-height: calc(var(--fs-14) * 1.35); }
.wgv-rows .confirm { flex: none; }
/* confirmDanger() i radens slut: öppen tar förklaringen en egen rad under
   texten, i radens bredd. Annars trycks texten ihop till en smal spalt och
   panelen går utanför skärmen i telefonen. */
.wgv-rows .list-row:has(> .list-row__trailing .confirm[open]) { flex-wrap: wrap; }
.wgv-rows .list-row__trailing:has(.confirm[open]) { flex-basis: 100%; padding: 0 var(--row-pad) var(--space-5) var(--row-inset); }
.wgv-rows .list-row__trailing .confirm[open] { width: 100%; }
@media (max-width: 600px) {
  .wgv-rows .list-row__main { flex-wrap: wrap; row-gap: var(--space-1); }
  .wgv-rows .list-row__meta { flex-basis: 100%; max-width: none; text-align: left; padding-left: calc(var(--lead-w) + var(--space-5)); }
  .wgv-rows .list-row:not(.list-row--leading) .list-row__meta { padding-left: 0; }
}

/* ── .outcome__table: per tjänst ─────────────────────────────────────────── */

.wgv-table-wrap { overflow-x: auto; }
.outcome__table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.outcome__table th, .outcome__table td { text-align: left; padding: var(--space-4) var(--space-5); vertical-align: top; }
.outcome__table tbody tr + tr > * { border-top: 1px solid var(--line); }
.outcome__table thead th { color: var(--text-2); font-weight: var(--fw-500); font-size: var(--fs-13); border-bottom: 1px solid var(--line); }
.outcome__table tbody th { font-weight: var(--fw-500); color: var(--text); }
.outcome__table th:first-child, .outcome__table td:first-child { padding-left: 0; }
.outcome__table .is-num { text-align: right; }
.wgv-zero { color: var(--text-3); }
.wgv-sub { display: block; font-size: var(--fs-12); color: var(--text-3); }
.outcome__table .wgv-host { color: var(--text-2); font-weight: var(--fw-400); }
@media (max-width: 600px) {
  .outcome__table th, .outcome__table td { padding: var(--space-4) var(--space-3); }
}
}