/* ============================================================
   LASI — JAETTU MATERIAALI  (3.9.2026, viety tuotantoon jono #152)
   Ladataan fonts.css → app.css → dashboard.css → lasi-tausta.css JÄLKEEN.
   Variantti (tässä tiedostossa, A) päättää kehyksen.

   Opetus 1.9.2026: ilme ei synny yhden paneelin ylikirjoituksesta. Tämä
   tiedosto osuu JAETTUUN sanastoon, jota kaikki 13 näkymää käyttävät:
   pinnat, chipit, kentät, napit, navi, otsikot, palkit, vierityspalkit.

   Materiaali (DESIGN.md § 3):
   - kortti on levyä tummempi, ILMAN reunaviivaa: sävyero + yläreunan kiilto
   - kolme syvyystasoa: kortti / nostettu / upotettu
   - tilachipit täytettyjä, tummalla tekstillä: teal = hoidettu, amber = sinua
   - data on muotoja: pillerpalkki, rengas
   - ei backdrop-filteriä: tausta on jo pehmeä, joten läpikuultava pinta
     lukee huurrelasina ilman suodatinta
   ============================================================ */

:root {
  --d-bg: #100D0A;                             /* landingin --bg, oli #0C0A08 */

  /* 2.0 (3.9. Simon toinen palaute): levy on huoneesta erottuva SAVULASI,
     ei toinen musta pinta. Referenssin levy on huonetta vaaleampi; meillä
     lämmin harmaa lasi, jonka läpi valo näkyy. Kortit ovat levyä tummempia,
     joten hierarkia syntyy sävyerosta ilman viivoja. */
  /* 2.1: lasi on neutraalia, hieman viileää harmaata, ei ruskeaa (Simo 3.9.:
     "ei mitään ruskeahkoa"). Teksti pysyy landingin kermana. */
  --l-sheet:   rgba(112,108,124,0.26);         /* kelluva levy ja kisko: savulasi */
  --l-card:    rgba(10,9,13,0.52);             /* kortti: levyä tummempi */
  --l-card-2:  rgba(245,240,232,0.07);         /* nostettu: aktiivinen navi, chipit, hover */
  --l-inset:   rgba(0,0,0,0.24);               /* upotettu: kentät, kalenterisolu, palkin ura */
  --l-gloss:   rgba(255,255,255,0.10);         /* yläreunan kiilto */
  --l-edge:    rgba(255,255,255,0.07);         /* levyn hiusreuna */
  --l-solid:   #1A1820;                        /* kelluvat paneelit joiden alla on sisältöä */
  --l-shadow:       0 30px 80px -40px rgba(0,0,0,0.85);
  --l-sheet-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px var(--l-edge), 0 40px 100px -40px rgba(0,0,0,0.9);
  --l-card-shadow:  inset 0 1px 0 var(--l-gloss), inset 0 0 0 1px rgba(255,255,255,0.045), 0 16px 40px -28px rgba(0,0,0,0.8);

  --l-chip-teal-ink:  #082220;
  --l-chip-amber-ink: #2A1806;
  --l-chip-rose-ink:  #2A0A16;

  --ink-3: #9C9385;                            /* oli #837B6E; savulasi on vaaleampi pohja, 10,5 px eyebrow ≥ 4,5:1 */

  /* Vanhat tokenit ohjataan uuteen materiaaliin, jotta ne ~30 sääntöä
     joita tämä tiedosto ei nimeä erikseen seuraavat perässä. */
  --d-surface: var(--l-card);
  --d-raised:  var(--l-card-2);
  --d-hair:    rgba(245,240,232,0.06);
  --d-hair-2:  rgba(245,240,232,0.12);
  --d-modal:   var(--l-solid);

  --r-panel: 20px;
  --r-sheet: 28px;

  /* Variantti täyttää nämä. Oletus = B:n editoriaalinen ääni. */
  --l-head: var(--body);
  --l-num: var(--display);
  --l-num-w: 200;
  --l-num-size: clamp(44px, 5vw, 64px);
  --l-shell-h: calc(100vh - 150px);
}

* { scrollbar-width: thin; scrollbar-color: var(--d-hair-2) transparent; }

body { background: var(--d-bg); }
/* Rasteri + rae + mesh pois: lasi ei ole mittalaite. Elävä tausta on .lasi-bg. */
.app::before, .app::after { display: none; }
.app { position: relative; z-index: 1; }

/* ---------------- Pinnat: kortti ilman reunaa ---------------- */
.panel, .stat, .statusline, .firstweek, .my-kpi, .council-block.is-reco,
.draft-card, .hav, .k-item.pending, .sm-col, .chat-lista, .memory-view, .j-filter {
  background: var(--l-card);
  border-color: transparent;
  box-shadow: var(--l-card-shadow);
}
.panel, .statusline, .firstweek, .stat { border-radius: var(--r-panel); padding: 20px; }
.stat::after, .firstweek::before { display: none; }
.council-block.is-reco { border-left-color: var(--act-line); }
.hav.uusi { border-left-color: transparent; background: rgba(246,169,97,0.07); }
.sm-col-new { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(245,240,232,0.22), var(--l-card-shadow); }
.sm-col-new .sm-col-label { color: var(--ink); }
.j-filter.is-on { background: var(--l-card-2); border-color: transparent; }

/* Upotetut solut ja rivit */
/* Kalenteri kuten referenssin päivänauha: pyöristetyt laatat, tämä päivä
   vaalea laatta tummalla numerolla. */
.bk-cell { background: var(--l-inset); border-color: transparent; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.25); min-height: 84px; }
.bk-cell:hover { background: rgba(0,0,0,0.32); border-color: transparent; }
.bk-cell.bk-today { background: rgba(245,240,232,0.88); border-color: transparent; box-shadow: none; }
.bk-cell.bk-today .bk-daynum { color: #17120E; font-weight: 700; }
.bk-cell.bk-today .bk-pill { background: rgba(23,18,14,0.10); color: #17120E; border-left-color: rgba(23,18,14,0.35); }
.bk-cell.bk-today .bk-more { color: rgba(23,18,14,0.6); }
.bk-cell.bk-selected { border-color: transparent; box-shadow: inset 0 0 0 2px var(--act-line); }
.bk-daynum { font-family: var(--l-num); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.bk-weekdays span { font-size: 10.5px; }
.bk-monthlabel { font-size: 16px; }
.bk-pill { background: var(--l-card-2); }
.bk-card { background: var(--l-inset); border-color: transparent; }
.bk-card.bk-site-edge  { border-left-color: var(--data); }
.bk-card.bk-mark-edge  { border-left-color: #EC7FA2; }
.bk-card.bk-owner-edge { border-left-color: var(--amb); }

/* Tilamerkki + kytkin: kortti (A määrittelee bento-sijoituksen ja sisällön) */
#view-overview > .mark-status {
  background: var(--l-card); border-color: transparent; border-radius: var(--r-panel);
  padding: 12px 16px 12px 12px;
  box-shadow: var(--l-card-shadow);
}
/* Kytkin: päällä = vaalea (ei turkoosi), nuppi tumma. Tauolla amber
   (dashboard.css) säilyy: se on huomio. */
.switch input:checked + .track { background: rgba(245,240,232,0.86); }
.switch input:checked + .track::after { background: #17120E; box-shadow: none; }
.switch input:not(:checked) + .track { background: rgba(245,240,232,0.14); }
#view-overview .mark-status .switch.pause input:checked + .track { background: rgba(245,240,232,0.86); }

/* ---------------- Navigaatio ---------------- */
.side { border-right-color: var(--l-edge); }
.side .brand { border-bottom-color: transparent; }
.side-foot { border-top-color: var(--l-edge); }
.navlink { border-radius: var(--r-field); }
.navlink:hover { background: var(--l-card-2); }
.navlink.active { background: var(--l-card-2); border-color: transparent; box-shadow: inset 0 1px 0 var(--l-gloss); }

/* ---------------- Yläpalkki: ei kiinteä, ei viivaa ----------------
   Referenssissä otsikko vierii sisällön mukana. Läpikuultava kiinteä
   palkki ilman backdrop-filteriä näyttäisi sisällön otsikon läpi. */
.topbar { position: static; background: transparent; border-bottom: none; padding: 28px 32px 6px; }
.topbar h1 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; }
.topbar .sub { font-size: 13.5px; margin-top: 6px; }
.view { padding: 22px 32px 40px; }

/* ---------------- Otsikot ja labelit ---------------- */
.panel-head { margin-bottom: 14px; }
.panel-head h3 { font-family: var(--l-head); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.eyebrow { gap: 0; font-size: 10.5px; letter-spacing: 0.14em; }
.eyebrow::before { display: none; }        /* spektriviiva 20 labelin edessä oli koriste */
.journal-note { margin: -4px 0 14px; font-size: 12.5px; }
.note { font-size: 13px; }

/* Työpäiväkirja listana kuten referenssin Challenges: ei pystyviivaa eikä
   solmuja, rivit erottaa hiusviiva, tilachip rivin oikeassa reunassa. */
.journal { padding-left: 0; }
.journal::before, .j-item::before { display: none; }
.j-item { padding: 12px 0; }
.j-head { align-items: center; gap: 10px; margin-bottom: 4px; }
.j-head .j-state { order: 5; margin-left: auto; }
.j-text { font-size: 13.5px; }

/* ---------------- Tunnusluvut: ikonilaatta kuten referenssin KPI:t ----------------
   Laatta on neutraali (ei värillinen ympyrä) ja esiintyy vain kahdessa
   tunnusluvussa dataa merkitsemässä. SLOP-portti 3 tarkistettu. */
.stats { gap: 16px; }
.stat { position: relative; padding: 20px 20px 18px; }
.stat .label { font-size: 11px; letter-spacing: 0.14em; padding-right: 52px; }
.stat .num { font-family: var(--l-num); font-weight: var(--l-num-w); font-size: var(--l-num-size); margin-top: 12px; }
.stat .delta { margin-top: 8px; }
.stat::before {
  content: ""; position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border-radius: var(--r-field);
  background: var(--l-card-2) var(--l-ico) center / 20px 20px no-repeat;
  box-shadow: inset 0 1px 0 var(--l-gloss);
}
.stats .stat:nth-child(1) { --l-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCB4A7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.stats .stat:nth-child(2) { --l-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCB4A7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* ---------------- Napit ja kentät ---------------- */
.btn-ghost, .btn:not(.btn-primary):not(.btn-danger) {
  background: var(--l-card-2); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--l-gloss);
}
.btn-ghost:hover, .btn:not(.btn-primary):not(.btn-danger):hover {
  background: rgba(245,240,232,0.10); border-color: transparent;
}
.btn-primary { box-shadow: 0 12px 30px -14px rgba(236,127,162,0.6); }
.input, .pill-input, textarea, select, .memory-edit, .draft-text {
  background: var(--l-inset); border-color: rgba(245,240,232,0.10);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.35);
}
.empty .empty-icon { background: var(--l-card-2); border-color: transparent; box-shadow: inset 0 1px 0 var(--l-gloss); }

/* ---------------- Chipit: täytetty, tumma teksti ----------------
   Teal = hoidettu / elossa. Amber = odottaa sinua. Sama roolijako kuin
   nykyisessä, vain ääriviiva → täyttö. Kontrasti: teal #34C2AE vs
   #082220 ≈ 7,6:1, amber #F6A961 vs #2A1806 ≈ 8:1. */
/* 2.0: turkoosi vain kahdessa paikassa. (1) live-piste "Mark töissä"
   -pillerissä, (2) hoidettu/ratkennut-chip (referenssin vihreä "Complete").
   Kaikki muu tila on neutraalia vaaleaa, huomio on amberia. Simo 3.9.:
   "Turkoosi on yliedustettuna." Mitattu 1.0:ssa 14 turkoosia pintaa
   ensimmäisellä näytöllä; 2.0:ssa 2. */
.status-pill { background: rgba(245,240,232,0.10); color: var(--ink); border-color: transparent; font-weight: 600; box-shadow: inset 0 1px 0 var(--l-gloss); }
.status-pill .live-dot { background: var(--data); box-shadow: 0 0 10px rgba(52,194,174,0.9); }
.status-pill.paused { background: var(--alert); color: var(--l-chip-amber-ink); border-color: transparent; box-shadow: none; }
.status-pill.paused .live-dot { background: var(--l-chip-amber-ink); box-shadow: none; }

.j-state, .fw-pill, .hav-laji, .hav-ratkennut, .bk-chip, .sm-page {
  border-color: transparent; background: var(--l-card-2); color: var(--ink-2); font-weight: 600;
  box-shadow: inset 0 1px 0 var(--l-gloss);
}
.j-state.is-sent, .hav-ratkennut, .bk-chip.bk-site { background: var(--data); color: var(--l-chip-teal-ink); box-shadow: none; }
.hav-laji.laji-valmennus { background: rgba(245,240,232,0.14); color: var(--ink); }
.j-state.is-pending, .fw-pill.is-now, .hav-laji.laji-eskalaatio { background: var(--alert); color: var(--l-chip-amber-ink); box-shadow: none; }
.j-state.is-failed { background: #EC6FA0; color: var(--l-chip-rose-ink); box-shadow: none; }
.bk-chip.bk-mark { background: #EC7FA2; color: var(--l-chip-rose-ink); box-shadow: none; }
.bk-chip.bk-owner, .fw-pill.is-wait { background: rgba(155,124,240,0.28); color: #E9DDFF; box-shadow: none; }
.bk-summary { color: var(--ink-2); }
/* Asetusten tilamerkit (app.css .badge, mono + ääriviiva) samaan kieleen.
   .navlink .badge (lukumäärä, spektri) on dashboard.css:ssä (0,2,0) ja
   pysyy ennallaan. */
.badge { font-family: var(--body); font-weight: 600; letter-spacing: 0.1em; border-color: transparent; background: var(--l-card-2); color: var(--ink-2); padding: 4px 10px; }
.badge.sage, .badge.warm { background: rgba(245,240,232,0.86); color: #17120E; border-color: transparent; }
.badge.alert, .badge.amber { background: var(--alert); color: var(--l-chip-amber-ink); border-color: transparent; }

/* ---------------- Työmäärä: pillerpalkit (referenssin Activity) ---------------- */
.work-rows { gap: 14px; }
.work-bar { height: 14px; background: var(--l-inset); box-shadow: inset 0 1px 0 rgba(0,0,0,0.30); }
.work-bar i { background: linear-gradient(90deg, rgba(245,240,232,0.55), rgba(245,240,232,0.88)); box-shadow: none; }
.work-bar.is-own i { background: rgba(245,240,232,0.22); }
.work-lead { font-size: 19px; }
.work-sub { font-size: 12.5px; margin: 6px 0 18px; }
.work-hist { font-size: 12.5px; }

/* ---------------- Ensimmäinen viikko: rengas (referenssin Overview) ----------------
   firstweek-view.js lukee "4 / 6" ja asettaa --p. Ilman JS:ää rengas on tyhjä
   ja luku näkyy silti. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.fw-title-row { align-items: center; }
.fw-prog {
  position: relative; display: inline-grid; place-items: center; gap: 3px;
  width: 76px; height: 76px; text-align: center;
  font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-3); line-height: 1; white-space: nowrap;
  transition: --p .8s cubic-bezier(.2,.7,.3,1);
}
/* Rengas on spektriä (teko), ei turkoosia: amber → rose → lila kaaren
   matkalla, loppu vaimea. Sama gradientti kuin päätoiminnossa ja orbissa. */
.fw-prog::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -90deg,
    #F7B36B 0,
    #EC7FA2 calc(var(--p, 0) * 0.5turn),
    #B98BE6 calc(var(--p, 0) * 1turn),
    rgba(245,240,232,0.10) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
.fw-prog b { font-family: var(--l-num); font-weight: 300; font-size: 24px; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.fw-node { background: var(--l-inset); border-color: transparent; box-shadow: inset 0 1px 0 rgba(0,0,0,0.3); }
.fw-step.is-done .fw-node { background: rgba(245,240,232,0.92); border-color: transparent; }
.fw-step.is-done .fw-node i { color: #17120E; }
.fw-step.is-now .fw-node { background: var(--alert); border-color: transparent; box-shadow: none; }
.fw-step.is-now .fw-node i { color: var(--l-chip-amber-ink); }

/* ---------------- Chat ja Neuvosto ---------------- */
.chat-head { border-bottom-color: var(--l-edge); }
.msg.you .bubble { background: var(--l-card-2); border-color: transparent; box-shadow: inset 0 1px 0 var(--l-gloss); }
.suggest-chip { background: var(--l-card-2); border-color: transparent; box-shadow: inset 0 1px 0 var(--l-gloss); }
.suggest-chip:hover { background: rgba(245,240,232,0.10); border-color: transparent; }
.chat-tbtn { background: var(--l-card-2); border-color: transparent; }
.chat-input::before { background: var(--l-solid); border-color: transparent; box-shadow: inset 0 1px 0 var(--l-gloss), var(--l-shadow); }
.chat-input:focus-within::before { border-color: rgba(155,124,240,0.5); box-shadow: 0 0 0 4px rgba(155,124,240,0.10), var(--l-shadow); }
.council-form { background: var(--l-solid); border-color: transparent; box-shadow: inset 0 1px 0 var(--l-gloss), var(--l-shadow); }
.chat-shell, .council-shell { height: var(--l-shell-h); }

/* ---------------- Ikonikiskon vihje (A) ---------------- */
/* .lasi-tip:n JS-luoja (lasi-ui.js kohta 2) EI tullut tuotantoon: kisko
   aukeaa hoverilla ilman vihjettä (ks. LUOVUTUS 2.4). Sääntö jätetty ettei
   se ole enää käytössä; ei haittaa, ei koske mihinkään elementtiin. */
.lasi-tip {
  position: fixed; z-index: 60; transform: translateY(-50%);
  font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--l-solid); padding: 7px 11px; border-radius: 10px; white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--l-gloss), 0 12px 30px -12px rgba(0,0,0,0.9);
  pointer-events: none;
}
@media (max-width: 920px) { .lasi-tip { display: none !important; } }

/* ---------------- Kapea näyttö: navipalkki lasina ---------------- */
@media (max-width: 920px) {
  .side { background: rgba(14,12,18,0.9); border-bottom: 1px solid var(--l-edge); }
  .view { padding: 20px 20px 40px; }
}

/* ============================================================
   A — LASILEVY 2.0  (3.9.2026, Simon toinen palaute, viety tuotantoon)

   Simo: "käytössä on A, sitten kun hiiri viedään palkin ylle vasemmalla,
   aukeaa se kuten B:ssä. [...] Mitä nyt rakensit on liian lähellä vanhaa.
   Halusin näyttävästi paremman designin, en vain hiukan. Turkoosi on
   myös yliedustettuna."

   Mitä muuttui 1.0 → 2.0, ja mistä referenssikuvasta se tulee:
   1. KISKO AUKEAA. 64 px ikonikisko, hoverilla/fokuksella 248 px
      tekstipalkki. Toteutus clip-pathilla, EI width-animaatiolla
      (CLAUDE.md: vain transform/opacity-luokan animaatiot; clip-path
      komposoidaan). Palkki on aina 248 px leveä, leikattu 64 px:iin.
   2. TILANNE NYT ON BENTO kuten referenssi: tilanne (leveä) + Markin
      tila -kortti; kolme pientä korttia rinnan (työmäärä, KPI-pino,
      seuraukset); Ensimmäinen viikko tilalistana (referenssin
      "Challenges") + sivukortit.
   3. KPI-LAATAT: ikoni vasemmalla, luku ja nimi oikealla (referenssin
      108bpm / Heart Rate).
   4. ASKELEET TILALISTANA: rengasikoni + nimi + chip oikealla, ei
      pystyviivaa. Tehty = vaalea kiekko, nyt = amber rengas.
   5. VAALEAMPI SAVULASI: levy on huoneesta erottuva harmaa lasi
      (referenssin levy on huonetta vaaleampi), kortit tummempia.
   6. TURKOOSI POIS: vain hoidettu-chip ja live-piste. Edistymisrengas ja
      päätoiminto ovat spektriä (brändi), huomio on amberia, aktiivinen
      navi violettia. Taustasta teal pois (lasi-tausta.css).

   Kaikki kehyssäännöt ≥ 921 px. Kapea näyttö käyttää dashboard.css:n
   mobiilirakennetta, vain materiaali vaihtuu (yllä).

   Geist-fonttideklaraatiot siirretty fonts.css:ään (luovutus kohta 2.2),
   eivät toistu tässä.
   ============================================================ */

:root {
  --l-head: "Geist", "Inter", system-ui, sans-serif;
  --l-num: "Geist", "Inter", system-ui, sans-serif;
  --l-num-w: 500;
  --l-num-size: 26px;
  --l-shell-h: calc(100vh - 32px - 118px);
}

/* ---- Sans-first. Newsreader jää Markin omaan ääneen:
        .statusline-text, .work-lead, .j-summary, .council-q ---- */
.fw-title, .empty h3, .chat-empty h3, .council-empty h3, .j-empty h3,
.chat-who b, .bk-monthlabel, .council-result-head h3, .voice-card h4, .council-block h4,
.bk-detail-head b, .side .biz b {
  font-family: var(--l-head); font-weight: 600; letter-spacing: -0.02em;
}
.fw-title { font-size: 17px; line-height: 1.25; }
.empty h3, .chat-empty h3, .council-empty h3, .j-empty h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
.my-kpi-arvo, .work-num, .fw-prog b, .stat .num, .j-filter .n {
  font-family: var(--l-num); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.my-kpi-arvo { font-size: 28px; }
.j-filter .n { font-size: 30px; }

@media (min-width: 921px) {
  /* ================= LEVY ================= */
  /* 2.1 (Simo 3.9.): "aukeaa siten että overlappaa sekavasti koko muun osion
     kanssa. Sille pitää tehdä selkeä tila mihin aueta. Ota tilaa pois siis
     oikealtakin jotta sivu on symmetrinen kun tiivistät."
     Levy on symmetrinen molemmissa tiloissa: lepo 96 / 96 (kisko 64 + 16 + 16),
     auki 280 / 280 (kisko 248 + 16 + 16). Kisko ei enää mene levyn päälle.

     ⚠ Tämä on tietoinen poikkeus CLAUDE.md:n "vain transform"-säännöstä:
     margin animoituu 240 ms ja sivu reflowaa sen ajan. Säännön syy on hover-
     lagi listariveillä; tässä on yksi tietoinen siirtymä per navin avaus,
     eikä sisältöä voi kutistaa ilman layoutia. Mitattu 3.9.: ks. RAPORTTI. */
  .app {
    margin: 16px 96px;
    min-height: calc(100vh - 32px);
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--r-sheet);
    background: var(--l-sheet);
    box-shadow: var(--l-sheet-shadow);
    overflow: clip;
    transition: margin .24s cubic-bezier(.2,.7,.2,1);
  }
  body:has(.side:hover) .app, body:has(.side :focus-visible) .app { margin: 16px 280px; }
  @media (prefers-reduced-motion: reduce) { .app { transition: none; } }
  /* Levyn sisältö mukautuu levyn omaan leveyteen, ei ikkunan: kun kisko
     aukeaa, bento pudottaa kolmannen sarakkeen. */
  .main { container-type: inline-size; container-name: levy; }
  /* Lasin kiilto: valo tulee ylhäältä ja oikealta ylhäältä. Yksi kerros,
     ei tekstuuria. app.css:n .app::before oli mesh (fixed, z -1); sama
     pseudo, uusi tehtävä. */
  .app::before {
    content: ""; display: block; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 22%),
      radial-gradient(70% 45% at 100% 0%, rgba(255,255,255,0.045) 0%, transparent 70%);
  }

  /* ================= KISKO, JOKA AUKEAA ================= */
  .side {
    position: fixed; left: 16px; top: 16px; bottom: 16px;
    width: 248px; height: auto; min-height: 0;
    padding: 10px 8px; gap: 2px; z-index: 30;
    border-right: none; border-radius: 32px;
    background: var(--l-sheet);
    box-shadow: var(--l-sheet-shadow);
    overflow-x: hidden;
    clip-path: inset(0 184px 0 0 round 32px);
    transition: clip-path .24s cubic-bezier(.2,.7,.2,1);
  }
  /* :has(:focus-visible), EI :focus-within. Hiiriklikki jättää fokuksen
     navinappiin, ja :focus-within piti kiskon auki näkymänvaihdon jälkeen
     kunnes käyttäjä klikkasi muualle (mitattu 3.9. 2.0 kuvista: kisko auki
     Työpäiväkirjassa). :focus-visible laukeaa vain näppäimistöstä. */
  .side:hover, .side:has(:focus-visible) { clip-path: inset(0 0 0 0 round 28px); }
  @media (prefers-reduced-motion: reduce) { .side { transition: none; } }

  /* Ikoni keskellä 64 px:n kiskoa: 8 (padding) + 13 + 22 = 43 → keskipiste 32.
     Teksti alkaa 8 + 13 + 22 + 24 = 67 px eli leikkauksen (64) ulkopuolella.
     Mitattu 2.0:n ensimmäisestä kuvasta: gap 14 jätti 7 px tekstiä näkyviin.
     Brändin teksti lisäksi läpinäkyvä kiskotilassa: "Ma" pilkotti yhä
     (orbin leveys ei ollut se mitä laskin). Väri on maalia, ei layoutia. */
  .side .brand {
    display: flex; align-items: center; gap: 24px;
    padding: 8px 0 10px 13px; margin-bottom: 0;
    font-family: var(--l-head); font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
    white-space: nowrap; border-bottom: none;
    color: transparent; transition: color .15s ease;
  }
  .side:hover .brand, .side:has(:focus-visible) .brand { color: var(--ink); }
  .side .brand .presence { --p: 22px; width: 22px; height: 22px; flex: none; }

  /* Yrityksen nimi näkyy kun kisko aukeaa. Ensimmäinen versio siirsi sen
     yläkulmaan position: fixedillä, mutta clip-path leikkaa myös fixed-
     lapset ja nimi katosi kokonaan (mitattu 2.0 kuva 1). */
  .side .biz {
    position: static; padding: 0 0 12px 59px; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity .2s ease .06s;
  }
  .side:hover .biz, .side:has(:focus-visible) .biz { opacity: 1; }
  .side .biz b { font-size: 13px; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; }

  .navlink {
    position: relative; justify-content: flex-start; gap: 24px;
    width: 100%; height: 44px; padding: 0 12px 0 13px; margin: 0;
    font-size: 14.5px; white-space: nowrap; color: var(--ink-2);
    border-radius: var(--r-field); background: transparent; box-shadow: none; border-color: transparent;
    transition: color .15s ease;
  }
  .navlink .ic { width: 22px; height: 22px; flex: none; color: var(--ink-3); position: relative; z-index: 1; transition: color .15s ease; }
  .navlink:hover { background: transparent; color: var(--ink); }
  .navlink:hover .ic { color: var(--ink); }
  .navlink.active { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink); font-weight: 500; }
  .navlink.active .ic { color: var(--act-line); filter: drop-shadow(0 0 8px rgba(185,139,230,0.55)); }
  /* Aktiivinen laatta kahtena kerroksena: 48 px laatta kiskotilassa (::after),
     koko rivin laatta avattuna (::before). Leikkaus 64 px:iin leikkaisi
     yhden leveän laatan oikean reunan suoraksi. Vain opacity animoituu. */
  .navlink.active::after {
    content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 44px;
    border-radius: var(--r-field); background: var(--l-card-2);
    box-shadow: inset 0 1px 0 var(--l-gloss); transition: opacity .2s ease;
  }
  .navlink.active::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: auto;
    border-radius: var(--r-field); background: var(--l-card-2);
    box-shadow: inset 0 1px 0 var(--l-gloss); opacity: 0; transition: opacity .2s ease;
  }
  .side:hover .navlink.active::before, .side:has(:focus-visible) .navlink.active::before { opacity: 1; }
  .side:hover .navlink.active::after,  .side:has(:focus-visible) .navlink.active::after  { opacity: 0; }
  .navlink .badge {
    position: absolute; top: 3px; left: 30px; margin: 0; z-index: 1;
    font-size: 9px; padding: 1px 5px; min-width: 16px; text-align: center; line-height: 1.4;
  }
  .side-foot { border-top: none; padding-top: 4px; }

  /* ================= YLÄPALKKI ================= */
  .topbar { padding: 34px 40px 4px; }
  .topbar h1 { font-family: var(--l-head); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; }
  .topbar .sub { font-size: 13.5px; margin-top: 6px; }
  .view { padding: 20px 40px 40px; max-width: 1360px; }
  #view-chat, #view-council { padding: 0; max-width: none; }

  /* ================= TILANNE NYT: BENTO ================= */
  /* Lapset: 1 .mark-status, 2 .firstweek, 3 .statusline, 4 .stats,
     5 panel "Mitä olen tehnyt", 6 "Mitä huomioistani seurasi",
     7 "Mitä tarvitsen sinulta", 8 "Kuinka paljon olen tehnyt työtä". */
  /* ⚠ .active PAKOLLINEN valitsimessa. Ilman sitä #view-overview (1,0,0)
     voittaa .view { display: none } (0,1,0) ja etusivu piirtyy JOKAISEN
     näkymän päälle. Mitattu 3.9. 2.0 kuvista: Työpäiväkirja ja Puhu
     Markille alkoivat etusivun bentolla. */
  #view-overview.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 1fr);
    grid-template-areas:
      "status  status  pause"
      "work    kpi     impact"
      "fw      fw      needs"
      "fw      fw      journal";
    gap: 16px; align-items: stretch;
  }
  #view-overview > * { margin: 0; max-width: none; }
  #view-overview > .statusline { grid-area: status; }
  #view-overview > .stats      { grid-area: kpi; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; }
  #view-overview > .firstweek  { grid-area: fw; }
  #view-overview > .panel:nth-child(5) { grid-area: journal; }
  #view-overview > .panel:nth-child(6) { grid-area: impact; }
  #view-overview > .panel:nth-child(7) { grid-area: needs; }
  #view-overview > .panel:nth-child(8) { grid-area: work; }
  #view-overview.active:has(> .firstweek.hidden) {
    grid-template-areas:
      "status  status  pause"
      "work    kpi     impact"
      "journal journal needs";
  }

  /* Markin tila -kortti: eyebrow, pilleri, kytkin. Sisältö tulee CSS:stä
     koska markupissa on vain pilleri ja kytkin, ja tyhjä 150 px kortti
     kahdella pikkuelementillä luki rikkinäisenä (kierros 1). */
  #view-overview > .mark-status {
    grid-area: pause; margin: 0; max-width: none;
    display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 14px;
    padding: 20px; border-radius: var(--r-panel); border-color: transparent;
    background: var(--l-card); box-shadow: var(--l-card-shadow);
  }
  #view-overview > .mark-status::before {
    content: "Markin tila";
    font-family: var(--body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  #view-overview > .mark-status .status-pill { align-self: flex-start; }
  /* Kytkimen selite tulee sen omasta title-attribuutista (dashboard.html:
     "Keskeytä Mark heti. Hän lakkaa lähettämästä viestejä, mutta kerää ne
     talteen."). Sama teksti joka näkyi vain hoverissa, nyt luettavissa.
     Ilman tätä kortissa oli 100 px tyhjää (2.0 kuva 1, SLOP 15). */
  #view-overview > .mark-status .switch { display: flex; align-items: center; gap: 14px; margin-top: auto; }
  #view-overview > .mark-status .switch::after {
    content: attr(title); order: -1; flex: 1; min-width: 0;
    font-family: var(--body); font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  }
  #view-overview > .mark-status .switch .track { flex: none; }

  /* KPI-laatta: ikoni vasemmalla, luku ja nimi oikealla. */
  .stat {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "ico num" "ico label" "ico delta";
    column-gap: 14px; row-gap: 2px; align-content: center;
    padding: 16px 18px;
  }
  .stat::before { grid-area: ico; position: static; width: 44px; height: 44px; align-self: start; }
  .stat .num { grid-area: num; font-size: 26px; line-height: 1.1; margin: 0; min-height: 0; }
  .stat .num:has(.lk-luku-iso) { min-height: 29px; }
  .stat .label { grid-area: label; padding-right: 0; font-size: 10.5px; }
  .stat .delta { grid-area: delta; margin: 0; font-size: 12.5px; }

  /* Ensimmäinen viikko = referenssin "Challenges": rengasikoni, nimi, chip. */
  .firstweek { padding: 20px 20px 8px; }
  .fw-head { margin-bottom: 4px; }
  .fw-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
  .fw-prog { width: 64px; height: 64px; }
  .fw-prog b { font-size: 20px; }
  .fw-sub { font-size: 13px; margin-top: 6px; max-width: 60ch; }
  .fw-steps { margin-top: 10px; }
  .fw-steps::before { display: none; }
  .fw-step { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; }
  .fw-node {
    width: 36px; height: 36px; margin: 0;
    border: 3px solid rgba(245,240,232,0.14); background: transparent; box-shadow: none;
  }
  .fw-node i { font-size: 12px; }
  .fw-step.is-done .fw-node { background: rgba(245,240,232,0.92); border-color: transparent; }
  .fw-step.is-done .fw-node i { color: #17120E; font-size: 14px; font-weight: 700; }
  .fw-step.is-now  .fw-node { border-color: var(--alert); background: transparent; box-shadow: none; }
  .fw-step.is-now  .fw-node i { color: var(--alert); }
  .fw-step.is-wait .fw-node { border-style: dashed; border-color: rgba(155,124,240,0.6); }
  .fw-step.is-next .fw-node { border-color: rgba(245,240,232,0.30); }
  .fw-step.is-done { opacity: .6; }
  .fw-name { font-size: 14px; }
  .fw-desc { font-size: 13px; margin-top: 3px; }
  .fw-go {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--r-pill);
    background: var(--l-card-2); color: var(--ink-2); box-shadow: inset 0 1px 0 var(--l-gloss);
  }
  .fw-step:hover .fw-go { color: var(--ink); background: rgba(245,240,232,0.12); }
  .fw-step.is-next .fw-go { background: var(--act); color: #1a1109; padding: 8px 14px; }
  .fw-step.is-now .fw-go { color: var(--alert); }

  /* Kolme saraketta ahtautuu kun levyn sisäleveys on alle 1000 px (kisko
     auki 1440 px:ssä = 880 px, tai kapea ikkuna): kaksi saraketta. */
  @container levy (max-width: 1000px) {
    #view-overview.active {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "status  status"
        "pause   kpi"
        "work    impact"
        "fw      fw"
        "journal needs";
    }
    #view-overview.active:has(> .firstweek.hidden) {
      grid-template-areas:
        "status  status"
        "pause   kpi"
        "work    impact"
        "journal needs";
    }
    .view { padding: 20px 28px 36px; }
    .topbar { padding: 30px 28px 4px; }
  }
}

/* ============================================================
   #149 YHTEENSOPIVUUS (3.9.2026, Sepon viesti #143)
   Kolme uutta elementtiä viedään samassa erässä lasin kanssa. Luokat
   päätetty tässä, jotta koodari-frontend käyttää näitä eikä keksi omia.

   1. .btn.hoitaa      "Mark hoitaa" joka kohteella 11 välilehdellä.
                       Rivitoiminto EI saa spektriä (1.9. sääntö: gradientti
                       = näkymän päätoiminto, toistettuna se on koriste).
                       Hiljainen lasipilleri + pieni orb vasemmalla kertoo
                       että tekijä on Mark. Ei turkoosia.
   2. .chat-kesken-rivi Tilarivi chat-headin alle, sama paikka ja muoto kuin
                       .chat-opetus-rivi, mutta neutraali (Mark työskentelee,
                       ei huomio). Sama molemmissa chat-tiloissa; kelluva
                       keskusta pysyy orb + Mark + kenttä + chipit.
   3. Odotuskupla      EI uutta komponenttia: Markin viestikortti (.msg.mark)
                       tekstillä "Otan asian hoitoon." + olemassa oleva
                       .thinking-kaista sen alla. Ei elävää pistettä.
   ============================================================ */
.btn.hoitaa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--l-card-2); border-color: transparent; color: var(--ink);
  box-shadow: inset 0 1px 0 var(--l-gloss);
  font-weight: 600; font-size: 13.5px; padding: 8px 14px 8px 10px;
}
.btn.hoitaa::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: url("orb.svg") center / cover no-repeat;
  box-shadow: 0 0 10px rgba(155,124,240,0.45);
}
.btn.hoitaa:hover { background: rgba(245,240,232,0.11); border-color: transparent; }
.btn.hoitaa:focus-visible { outline: 2px solid var(--act-line); outline-offset: 2px; }
.btn.hoitaa[disabled], .btn.hoitaa[aria-busy="true"] { opacity: .55; }
/* Toimintorivillä oikeaan reunaan: Vahvista/Hylkää/Peru ovat omistajan
   päätös, "Mark hoitaa" on delegointi. Väli erottaa ne. */
.draft-actions .btn.hoitaa, .k-act .btn.hoitaa, .bk-actions .btn.hoitaa { margin-left: auto; }

.chat-kesken-rivi {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--l-edge);
  background: rgba(245,240,232,0.035);
  color: var(--ink-2); font-family: var(--body); font-size: 13px; line-height: 1.5;
  padding: 10px 40px; margin: 0; position: relative; z-index: 4;
}
.chat-kesken-rivi b { color: var(--ink-3); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 4px; }
.chat-kesken-rivi a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(245,240,232,0.25); }
.chat-kesken-rivi a:hover { border-bottom-color: var(--act-line); }
.chat-kesken-rivi a:focus-visible { outline: 2px solid var(--act-line); outline-offset: 2px; border-radius: 3px; }
.chat-kesken-rivi .erotin { color: var(--ink-3); }
@media (max-width: 560px) { .chat-kesken-rivi { padding: 10px 20px; } }

/* ============================================================
   CHAT 2.2 (3.9.2026, Simon neljäs palaute)

   "Lähtöpiste jos mitään chattia ei ole auki olisi, että chat box on
   keskellä ruutua leijailemassa, ja kun klikkaat siitä, se liukuu
   animaatiolla alas siihen paikalle missä se on nyt ja keskustelu voi
   alkaa. Keskellä leijuvan chat boksin yläpuolella voi olla markin logo
   ja teksti 'Mark'. Sitten itse keskustelua tulee hiukan tyylitellä lisää.
   Nyt tämän läpinäkyvyyden [...] takia chatissa tekstaaminen muuttui
   hiukan sekavammaksi."

   Kolme tilaa, body-luokat dashboard.js:stä (siirretty lasi-ui.js:stä):
     chat-kelluu   ei viestejä, ei aktivoitu: orb + "Mark" + kenttä keskellä,
                   chipit kentän alla
     chat-telakka  ei viestejä, kenttä klikattu: kenttä alhaalla, chipit sen
                   yläpuolella
     (ei luokkaa)  viestejä: normaali keskustelu
   Kentän siirto on FLIP: layout vaihtuu heti, käänteinen transform animoi
   0:aan. Vain transform, 420 ms. DOM ja JS-sopimus ennallaan.
   ============================================================ */
@media (min-width: 921px) {
  /* ---- Viestit lasin päällä: Markin viesti saa kortin ---- */
  .chat-body { padding: 28px 40px 24px; gap: 22px; }
  .msg.mark { padding-left: 0; }
  .msg.mark::before { display: none; }              /* kaista siirtyy kortin sisään */
  .msg.mark .who { margin: 0 0 8px 24px; }
  .msg.mark .bubble {
    position: relative;
    background: rgba(10,9,13,0.62); border-radius: var(--r-panel);
    padding: 18px 26px 18px 34px; box-shadow: var(--l-card-shadow);
    font-size: 16px; line-height: 1.6;
  }
  .msg.mark .bubble::before {
    content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 2px;
    border-radius: var(--r-xs); background: var(--act); box-shadow: 0 0 12px rgba(185,139,230,0.5);
  }
  .msg.you .bubble {
    background: rgba(245,240,232,0.13); border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); font-size: 15px;
  }
  .thinking { padding-left: 34px; }

  /* ---- Kelluva aloitus ---- */
  .chat { position: relative; }
  body.chat-kelluu .chat-body { display: grid; place-items: center; overflow: hidden; }
  /* auth-supabase.js piilottaa #chatEmptyn hidden-attribuutilla tai inline
     display:nonella. Kelluvassa ja telakoidussa tilassa se pakotetaan
     näkyviin, koska tila päätellään viesteistä eikä tästä lipusta. */
  body.chat-kelluu .chat-empty, body.chat-telakka .chat-empty { display: grid !important; }
  body.chat-kelluu .chat-empty {
    grid-template-rows: auto auto 128px auto; justify-items: center; align-content: center;
    row-gap: 0; max-width: none; width: 100%; padding: 0; margin: 0; text-align: center;
  }
  /* width/height eksplisiittisesti: grid-itemiksi blokitettu .presence
     kutistui 0 × 0:aan (mitattu 3.9.), koska sen leveys ei seurannut --p:tä
     justify-items: centerin alla. Sama korjaus kuin kiskon brändiorbissa. */
  body.chat-kelluu .chat-empty .presence-xl { grid-row: 1; --p: 76px; width: 76px; height: 76px; margin: 0 0 20px; justify-self: center; }
  body.chat-kelluu .chat-empty::before {
    content: "Mark"; grid-row: 2;
    font-family: var(--l-head); font-weight: 600; font-size: 26px; letter-spacing: -0.02em;
    line-height: 1; color: var(--ink);
  }
  body.chat-kelluu .chat-empty h3, body.chat-kelluu .chat-empty p { display: none; }
  body.chat-kelluu .chat-empty .chat-suggest { grid-row: 4; margin: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; }
  body.chat-kelluu .chat-empty .chat-suggest .suggest-chip { width: auto; max-width: none; }
  body.chat-kelluu .chat-input {
    position: absolute; left: 50%; top: var(--kelluu-top, 50%);
    transform: translateX(-50%); width: min(860px, 100%); margin: 0; z-index: 3;
  }
  body.chat-kelluu .chat-liitteet { position: absolute; left: 50%; top: calc(var(--kelluu-top, 50%) - 60px); transform: translateX(-50%); }
  .chat-input.liukuu { transition: transform .42s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  @media (prefers-reduced-motion: reduce) { .chat-input.liukuu { transition: none; } }

  /* ---- Telakka ilman viestejä: chipit alhaalla kentän yläpuolella ---- */
  body.chat-telakka .chat-empty {
    grid-template-columns: minmax(0, 1fr); margin: auto 0 0; padding: 0;
    max-width: 780px; width: 100%; text-align: left;
  }
  body.chat-telakka .chat-empty .presence-xl, body.chat-telakka .chat-empty h3, body.chat-telakka .chat-empty p { display: none; }
  body.chat-telakka .chat-empty .chat-suggest { margin: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  body.chat-telakka .chat-empty .chat-suggest .suggest-chip { width: auto; max-width: none; }
}