/* ============================================================
   GreenHive — SDÍLENÉ KOMPONENTY NAVÍC (components.css)
   Co NENÍ ve web-kánonu greenhive.css, ale je sdíleno mezi web
   a portály. VÝHRADNĚ z brand tokenů (greenhive.css :root) — žádné
   nové barvy/fonty/radiusy/hex. greenhive.css zůstává web-canon
   (bajtově shodný napříč), tahle vrstva se přidává VEDLE něj.
   Dokumentace + povinné prvky: shared/DESIGN_DOD.md.

   Obsah:
   1) CTA-with-icon — ikona uvnitř .btn-solid / .btn-ghost
   2) .auth-split   — dvousloupcový auth layout (identita | akce)
      + HERO-scale editorial h1 (.h1-l1/.h1-l2 + italic <em>)
      + .auth-card-hex — hexagon akcent zarovnaný na roh karty (konzistentní inset)
   3) .role-seg     — pill přepínač role (Pacient | Lékař); v auth kartě = HLAVIČKA
   4) .auth-step    — two-step login (Google-style: e-mail → heslo)
      + .auth-input-submit (inline arrow button v e-mail poli, krok 1)
      + .auth-email-display / .auth-change, .auth-register-link (text link)
   ============================================================ */

/* 1) CTA-with-icon — inline ikona (klíč apod.) uvnitř pilulkového CTA.
   Dědí barvu textu (bílá na .btn-solid, brand na .btn-ghost). Nemění
   sizing tlačítka (padding/font zůstávají web-canon z greenhive.css). */
.btn-solid svg, .btn-ghost svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 2) ── Dvousloupcový auth layout ─────────────────────────────────────
   LEVÝ = identita (reg-header crown + Fraunces + lead + role přepínač),
   PRAVÝ = akce (login pole / registrace). Vzdušný, hodně whitespace.
   Mobil ≤760px → stack 1 sloupec (stejný breakpoint jako web .portal-split). */
.auth-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  width: 100%; min-height: min(72vh, 680px);
}
@media (max-width: 760px) {
  .auth-split { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); min-height: 0; }
}

/* LEVÝ sloupec — reg-header (sdílený crown+eyebrow+Fraunces token) levo-zarovnaný
   v rámci splitu (web má jeho centrovanou variantu; split = stejné tokeny, jiná osa). */
.auth-intro { display: flex; flex-direction: column; align-items: flex-start; }
.auth-split .reg-header { max-width: none; margin: 0; align-items: flex-start; text-align: left; }
.auth-split .reg-header .feature-crown { margin: 0 auto 0.6rem; align-self: center; }  /* crown vycentrovaný nad nadpisem */
.auth-split .reg-header .subpage-eyebrow { justify-content: flex-start; }
/* HERO-scale editorial headline (reuse .hero h1 treatment z greenhive.css): obří
   Fraunces opsz 144, dvouřádkové staggerování (.h1-l1/.h1-l2) + italický green <em>
   flourish. Dominantní jako hero webu, ne drobný subpage nadpis. */
.auth-split .reg-header .subpage-h1 {
  font-family: var(--font-display); font-weight: 450; font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 0.98; letter-spacing: -0.024em;
  max-width: 13ch; display: flex; flex-direction: column; color: var(--ink);
}
.auth-split .reg-header .subpage-h1 .h1-l1 { display: block; }
.auth-split .reg-header .subpage-h1 .h1-l2 { display: block; margin-left: 1.1em; }
.auth-split .reg-header .subpage-h1 em { font-style: italic; font-weight: 400; color: var(--brand); }
.auth-split .reg-header .subpage-h1::after { margin-left: 0; margin-right: 0; }
@media (max-width: 760px) {
  .auth-split .reg-header .subpage-h1 { font-size: clamp(2.2rem, 9vw, 3rem); max-width: none; }
  .auth-split .reg-header .subpage-h1 .h1-l2 { margin-left: 0; }
}
.auth-split .reg-header .subpage-lead { max-width: 46ch; margin: 0.9rem 0 0; text-align: left; text-align-last: left; }

/* PRAVÝ sloupec — paper akční karta. Chrome (paper bg/border/radius/shadow +
   hexagon akcent v pravém horním rohu) reuse z .portal-card.portal-card--login
   (greenhive.css). Tady jen vyplnění buňky gridu a vnitřní layout panelů. */
.auth-action { margin: 0; width: 100%; max-width: none; }
.auth-panel { display: flex; flex-direction: column; }
.auth-panel[hidden] { display: none; }
/* hexagon akcent karty — zarovnaný na roh KONZISTENTNÍM insetem (top == right,
   symetrický čtvercový odstup; ne náhodné rozdílné clamp hodnoty). Drží corner-rule
   webu (.story-hex/.partner-hex = absolutní top-right). Přebíjí base .portal-login-hex
   clamps vyšším pořadím (components.css za greenhive.css). */
.portal-login-hex.auth-card-hex {
  top: clamp(1.5rem, 2.6vw, 2rem); right: clamp(1.5rem, 2.6vw, 2rem);
  width: clamp(28px, 3vw, 32px); opacity: 0.42;
}
/* role přepínač jako HLAVIČKA auth karty (nahrazuje h2 „Jsem pacient / zájemce").
   Sedí na vrcholu pravé karty, nad role-driven leadem + login krokem; pravý okraj
   nechá místo hexagonu. */
.auth-action .role-seg { margin: clamp(0.7rem, 2vw, 1.15rem) 0 clamp(1.1rem, 2.5vw, 1.5rem); }   /* top vzduch ať hexagon v rohu dýchá */
.auth-action .portal-lead { text-align: justify; }   /* popisek role do bloku */
/* login form uvnitř karty = reuse .portal-login (transparentní v .portal-card).
   Primary CTA „Přihlásit se" vpravo dole = natural-width pilulka (NE full-width). */
.auth-submit { align-self: flex-end; margin-top: 0.3rem; }
@media (max-width: 760px) { .auth-submit { align-self: flex-start; } }
/* heslo: řádek label + jemný odkaz „Zobrazit heslo" (JS toggle input type) */
.auth-pw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.auth-pw-toggle {
  font: inherit; font-size: 0.74rem; font-weight: 600; line-height: 1;
  background: none; border: 0; padding: 0.15rem 0.1rem; cursor: pointer; color: var(--brand);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.auth-pw-toggle:hover { border-bottom-color: var(--accent); }
.auth-pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* jemné sekundární odkazy (Zapomenuté heslo) */
.auth-links { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0.6rem 0 0; font-size: 0.78rem; }
.auth-links a { color: var(--brand); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.auth-links a:hover { border-bottom-color: var(--accent); }
.auth-links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* alternativní cesta „Nemáte účet? → Registrovat se" pod hairline dělítkem */
.auth-alt {
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--gh-light-green) 26%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
}
.auth-alt-q { color: var(--ink-faint); font-size: 0.86rem; }
/* „Registrovat se" = jen zelený TEXT link (ne filled pilulka) → míň bublin, čistší.
   Sekundární cesta; jediné primary v kartě zůstává login submit (key icon). */
.auth-register-link {
  font-size: 0.86rem; font-weight: 600; color: var(--brand); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.auth-register-link:hover { border-bottom-color: var(--accent); }
.auth-register-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ── Two-step login (Google-style) ───────────────────────────────────────────
   Krok 1 = jen E-mail + „Pokračovat" (arrow CTA). Krok 2 = zobrazený e-mail
   se „Změnit" + Heslo + „Přihlásit se" (key icon). Přepínání = client-side JS,
   backend BEZE ZMĚNY (form pořád POST /login s email+password+hidden role).
   Obě pole zůstávají v DOM (krok 1 jen vizuálně skryt), aby se e-mail odeslal. */
/* krok two-step loginu = flex column (zrcadlí gap .portal-login) — jinak je .auth-step
   block a `align-self:flex-end` na .auth-submit NEFUNGUJE (CTA by seděla vlevo,
   DoD chce primary CTA vpravo dole). Oprava platí i pro care portál (stejný markup). */
.auth-step { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-step[hidden] { display: none; }
/* zobrazený e-mail v kroku 2 + jemný odkaz „Změnit" (návrat na krok 1) */
.auth-email-display {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 0.2rem; padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--gh-light-green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gh-light-green) 24%, transparent);
  border-radius: 12px;
}
.auth-email-display .auth-email-val { font-size: 0.9rem; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.auth-change {
  font: inherit; font-size: 0.74rem; font-weight: 600; line-height: 1; flex: none;
  background: none; border: 0; padding: 0.15rem 0.1rem; cursor: pointer; color: var(--brand);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.auth-change:hover { border-bottom-color: var(--accent); }
.auth-change:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* ── Inline submit (Google-style) — kulaté arrow tlačítko ZAPUŠTĚNÉ v e-mail poli
   (krok 1). Nahrazuje samostatnou „Pokračovat" pilulku → míň bublin, čistší. Wrapper
   drží .field input (web token) + brand round button vpravo uvnitř; input dostane
   pravý padding, aby text nešel pod tlačítko. type=button + data-next = JS two-step. */
.auth-input-submit { position: relative; display: block; }
.auth-input-submit input { width: 100%; padding-right: 3.4rem; }
.auth-input-submit-btn {
  position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%);
  width: 36px; height: 36px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--brand);
  border: 1.5px solid var(--brand); border-radius: 999px; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out, ease);
}
.auth-input-submit-btn svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out, ease);
}
.auth-input-submit-btn:hover { background: var(--brand); color: var(--gh-white); }
.auth-input-submit-btn:hover svg { transform: translateX(2px); }
.auth-input-submit-btn:active { transform: translateY(-50%) scale(0.95); }
.auth-input-submit-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .auth-input-submit-btn, .auth-input-submit-btn svg { transition: none; } }

/* 3) ── Role přepínač (Pacient | Lékař) ──────────────────────────────
   ČISTÝ tab přepínač (NE heavy filled pill). Aktivní = JEMNÝ světle-zelený
   chip (light-green ~14% fill + ~30% hairline) + brand-zelený text/ikona —
   harmonizuje s .auth-email-display chip v téže kartě, min „bublina". Neaktivní
   = ztlumený mid-gray text/ikona, průhledný (ikona dědí barvu přes currentColor).
   Fixed-width: grid 1fr 1fr + width:100% → kontejner = celá šířka karty, oba
   segmenty přesně půlka nezávisle na délce textu/aktivním stavu; přepnutí
   Pacient↔Lékář NIC neposouvá. JS přepíná pravý panel. */
.role-seg {
  display: grid; grid-template-columns: 1fr 1fr; width: 100%;   /* PEVNÁ šířka = celá šířka karty; oba segmenty přesně půlka, nezávisle na délce textu/aktivním stavu → Pacient↔Lékář NIC neposune */
  gap: 0.4rem; padding: 0;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  background: transparent; border: 0;   /* žádný rámeček kolem přepínače */
}
.role-seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font: inherit; font-size: 0.96rem; font-weight: 600; line-height: 1;
  padding: 0.5rem 1.05rem; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--gh-mid-gray); cursor: pointer;   /* ztlumený neaktivní */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.role-seg-btn .role-ic { width: 1.5rem; height: 1.5rem; flex: none; }   /* ikona dědí color (stroke=currentColor) */
.role-seg-btn.is-active {   /* jemný lime chip + brand text/ikona — čistý, ne těžký fill */
  background: color-mix(in srgb, var(--gh-light-green) 14%, transparent);
  border-color: color-mix(in srgb, var(--gh-light-green) 30%, transparent);
  color: var(--brand);
}
.role-seg-btn:hover:not(.is-active) { color: var(--ink-faint); }   /* jemné zvýraznění při hoveru */
.role-seg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .role-seg-btn { transition: none; } }

/* ── SVĚTLÉ pozadí portálů (paper + jemný zelený accent v rozích) — NE heavy hero
   gradient. Vzdušné, hodně bílého (paper #FBFCF9); jen subtilní zelený nádech dole-
   vpravo + limetkový nahoře-vpravo přes světlý wash (white→6% dark-green). Ladí na
   canon .page-bg vyšší specificitou (žádný !important). ── */
/* viewport-fill: footer na spodek, žádný mrtvý zelený void pod řídkým obsahem */
body{min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* ── b2b register wizard (2026-07-02) ─────────────────────────────────────────
   Sdílené utility b2b registračního wizardu (b2b.greenhive.cz /register,
   gh_portal_intake/templates/register_partner.html). VÝHRADNĚ brand tokeny.
   ADITIVNÍ: šířka karty a 4-krokový progress jsou OPT-IN modifikátory
   (.wizard-card--wide, .wiz-progress--4) — canon .wizard-card (720px) a
   3-krokový .wiz-progress (care register_patient.html) zůstávají BEZE ZMĚNY. ── */
/* širší wizard karta (~960px) — b2b nese 3-dlaždicový výběr v kroku 1 (layout-only;
   width:100% přebíjí .feature-card.is-wide width:min(680px,100%) z canon CSS) */
.feature-card.wizard-card.wizard-card--wide{width:100%;max-width:min(960px,100%)}
/* 4 kroky (web-canon .wiz-progress má repeat(3,1fr)) — opt-in, care 3-krok nedotčen */
.wiz-progress.wiz-progress--4{grid-template-columns:repeat(4,1fr)}
/* krok 1 — výběrové dlaždice (radio semantika: skryté radio + label karta) */
.ptype-q{font-size:.85rem;font-weight:600;color:var(--ink);margin:0 0 .15rem}
.ptype-q .req-star{color:var(--brand)}
.ptype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.ptype-tile{position:relative;display:flex;flex-direction:column;gap:.45rem;height:100%;
  padding:1.4rem 1.2rem 1.2rem;cursor:pointer;
  background:var(--card-bg-field);border:var(--card-line);border-radius:var(--radius-card);
  transition:border-color .2s ease,background .2s ease}
.ptype-tile .ptype-t{font-family:var(--font-display);font-weight:450;font-size:1.12rem;line-height:1.2;color:var(--ink);letter-spacing:-.01em;padding-right:2.6rem}
.ptype-tile .ptype-d{font-size:.82rem;line-height:1.55;color:var(--ink-faint)}
.ptype-tile:hover{border-color:color-mix(in srgb,var(--gh-light-green) 45%,transparent)}
/* selected stav dle vzoru .role-seg-btn.is-active: jemný lime chip + hairline + brand text */
.ptype-tile.is-active{background:color-mix(in srgb,var(--gh-light-green) 14%,transparent);
  border-color:color-mix(in srgb,var(--gh-light-green) 55%,transparent)}
.ptype-tile.is-active .ptype-t{color:var(--brand)}
.ptype-tile.is-active .story-hex{opacity:1}
.ptype-tile:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.ptype-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
/* sub-výběr kind pro technical track — reuse .role-seg-btn pill (výše v tomto souboru) */
.ksub-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.ksub-seg .role-seg-btn{position:relative;border-color:color-mix(in srgb,var(--gh-light-green) 26%,transparent)}
.ksub-seg .role-seg-btn:focus-within{outline:2px solid var(--brand);outline-offset:2px}
/* checkbox reset uvnitř .field (canon `.partner-form .field input` je natáhne na width:100%/44px);
   zrcadlí canon fix `.partner-form .radio-row input[type=radio]` (greenhive.css) pro checkboxy */
.pi-group .consent input[type="checkbox"]{width:19px;height:19px;min-height:0;padding:0;border:0;background:none;box-shadow:none;-webkit-appearance:auto;appearance:auto;accent-color:var(--brand);flex:none;margin:2px 0 0}
/* canon `.partner-form .consent{grid-column:1/-1}` by roztáhl každý checkbox přes obě
   kolony .pi-group → vrátit auto (2 sloupce dle care-app.css) */
.partner-form .pi-group .consent{grid-column:auto}
/* hidden gate: canon `.field{display:grid}` přebíjí [hidden] UA default */
.partner-form .field[hidden]{display:none}
@media (max-width:760px){.ptype-grid{grid-template-columns:1fr}}
@media (max-width:560px){.ksub-seg{grid-template-columns:1fr}}

/* ── ÚKOL 1 (RUN B, 2026-07-06): symetrie dlaždic typu partnera + PEVNÝ hexagon ─
   Reportováno: hexagon „nesedí" u karty Lékárna, dlaždice nesymetrické/nepřehledné.
   Příčiny: (a) base .story-hex (greenhive.css) má FLUIDNÍ clamp top/right/width →
   pozice i velikost skáče a u 1řádkového titulku „Lékárna" koliduje s popiskem;
   (b) titulky mají různý počet řádků (1 vs 2) → popisky napříč kartami začínají
   na jiné ose → asymetrie. Fixy (VÝHRADNĚ brand tokeny, fonty beze změny —
   jen pozice/rezerva výšky/rytmus): */
/* (1) hexagon na PEVNÉ pozici a velikosti, symetrický čtvercový inset (top==right),
       zarovnaný k hornímu okraji obsahu → drží corner-rule bez skákání/kolize */
.ptype-tile .story-hex{top:0.9rem;right:0.9rem;width:26px;height:26px;opacity:.45}
.ptype-tile.is-active .story-hex{opacity:1}
/* (2) titulek rezervuje výšku 2 řádků → popisky všech karet začínají na STEJNÉ
       ose a nikdy nevystoupají do zóny hexagonu (řeší kolizi i asymetrii) */
.ptype-tile .ptype-t{min-height:2.4em}
/* (3) jednotný odstup titulek↔popisek napříč kartami (nezávislý na délce titulku) */
.ptype-tile .ptype-d{margin-top:0}
/* (4) RB-1: úzké 3sloupcové pásmo 761–1023px — nejdelší titulek (CZ i EN) se láme
       na 3 řádky → rezerva 3 řádků, ať popisky drží STEJNOU osu i zde (od 1024px
       stačí 2 řádky, pod 761px grid stackuje = osa napříč kartami neplatí) */
@media (min-width:761px) and (max-width:1023px){.ptype-tile .ptype-t{min-height:3.6em}}

/* ── portál: kompaktní stránka + equal-height wizard kroky (2026-07-02) ───────
   CLAUDE.md „Portály": formulářová/wizard karta se na desktopu (~1440×900) vejde
   do viewportu BEZ rolování a drží JEDNOTNOU výšku přes kroky (žádné poskakování).
   OPT-IN modifikátory (.care-wrap--compact na <main>, .wizard-card--compact na
   kartě, wrapper .wiz-steps) — canon .reg-header/.wizard-card/.wiz-step (web,
   care) zůstávají BEZE ZMĚNY. Výhradně brand tokeny; ŽÁDNÉ zmenšování fontů
   (jen rytmus/spacing), inputy drží --ctrl-h/44px touch target. */

/* hustší portálový shell — modifikátor na <main class="care-wrap"> řídí celou stránku */
.care-wrap--compact{padding:clamp(0.8rem,1.4vw,1.1rem) 0 0.75rem}
/* kompaktní hlavička: crown+eyebrow+H1+lead ZŮSTÁVAJÍ (DoD §2), jen těsnější rytmus;
   širší kontejner → lead se neláme do zbytečných řádků */
.care-wrap--compact .reg-header{max-width:900px}
.care-wrap--compact .reg-header .feature-crown{width:clamp(32px,2.6vw,36px);margin-bottom:0.15rem}
.care-wrap--compact .reg-header .subpage-eyebrow{margin-bottom:0.4rem}
.care-wrap--compact .reg-header .subpage-h1{font-size:clamp(1.7rem,3vw,2.3rem)}
.care-wrap--compact .reg-header .subpage-h1::after{margin-top:0.55rem}
.care-wrap--compact .reg-header .subpage-lead{font-size:clamp(0.92rem,1.1vw,1rem);margin-top:0.55rem;max-width:72ch;line-height:1.5}
/* kompaktní wizard karta — těsnější vnitřní rytmus, fonty beze změny */
.feature-card.wizard-card.wizard-card--compact{margin-top:0.65rem;
  padding:1rem clamp(1.3rem,2.6vw,2rem)}
.wizard-card--compact .wiz-progress{margin-bottom:0.85rem}
.wizard-card--compact .wiz-step{gap:0.85rem}
.wizard-card--compact .wiz-2up{gap:0.85rem 1.1rem}
.wizard-card--compact .wiz-nav{margin-top:0.85rem}
.wizard-card--compact .field textarea{min-height:64px}
.wizard-card--compact .ptype-grid{gap:0.8rem}
.wizard-card--compact .ptype-tile{padding:0.85rem 1rem 0.8rem}
.wizard-card--compact #rg-ksub{margin-top:0.1rem}
/* EQUAL-HEIGHT kroky: všechny .wiz-step sdílí JEDNU grid buňku → výška karty =
   nejvyšší krok, kratší kroky zarovnané nahoru, .wiz-nav sedí stabilně dole.
   CSS-first (žádný JS hack): skryté kroky visibility:hidden (mimo interakci,
   focus i AT), display zachován kvůli výpočtu výšky. Mobil ≤760px = přirozená
   výška (stack + scroll OK). */
.wiz-steps{display:grid}
.wiz-steps .wiz-step{grid-area:1/1;align-content:start}
.wiz-steps .wiz-step[hidden]{display:grid;visibility:hidden}
@media (max-width:760px){.wiz-steps .wiz-step[hidden]{display:none}}

/* kompaktní auth-split (b2b login): bez velkého min-height → karta se vejde do
   ~1440×900 bez rolování; care portál (bez modifikátoru) BEZE ZMĚNY */
.auth-split--compact{min-height:min(56vh,520px)}

/* ── b2b portálové stránky (login/activate/dashboard/notice) — drobné utility ── */
/* karta s hexagon akcentem v pravém horním rohu (corner rule) — kotva pro .story-hex */
.card-hexed{position:relative}
/* úzká centrovaná akční karta (login/activate/notice/thankyou) — FOCUS MODE v3:
   hlavička žije UVNITŘ karty (.card-head + .reg-header--in-card), hexagon roh
   akcent tu NENÍ (živý etalon 9.153 ho v kartě s .card-head nemá — roh patří
   CZ/EN přepínači) */
.portal-card--login.auth-card-narrow{width:min(520px,100%);margin:clamp(1.2rem,2.4vw,1.8rem) auto 0}
/* serverová chybová hláška v auth kartě — funkční tón (.form-status.is-error canon),
   viditelná v obou krocích two-step loginu */
.auth-server-error{margin:0 0 0.35rem}
/* statická varianta .auth-email-display (activate: „Účet: e-mail" bez tlačítka Změnit) */
.auth-email-display--static{justify-content:flex-start}
/* kv výpis přes celou šířku karty (dashboard „Váš účet"; .feature-card centruje) */
.kv-list{width:100%;text-align:left}
.kv .form-status{margin:0}
/* CZ/EN přepínač v .care-top — komponenta .lang/.lang-btn/.lang-sep je CANON
   (greenhive.css, vč. 44px touch targetu a active underline). Tady jen specificity
   fix: care-app `.care-top .right a` by přebil canon barvy lang-btn. */
.care-top .right a.lang-btn{color:var(--gh-mid-gray)}
.care-top .right a.lang-btn.active{color:var(--brand)}

/* ── FOCUS MODE v3 — „VŠE V KARTĚ" (CEO 2. 7. 2026 večer; NAHRAZUJE v2) ───────
   Zdroj: ŽIVÝ web greenhive.cz/registrace/ 9.153 = index_v6.html (ověřeno curl,
   pravidla bajtově shodná) — .card-head / .reg-header--in-card VERBATIM.
   Na stránce NENÍ globální header/footer ani toolbar (v2 .focus-toolbar ZRUŠEN,
   9.153 ho nemá). V KARTĚ odshora: .card-head (logo vlevo = JEDINÝ návrat na
   https://www.greenhive.cz, CZ/EN přepínač vpravo) → .reg-header--in-card
   (kompaktní crown ~36px + eyebrow + Fraunces H1) → formulář/obsah. MIMO kartu
   jen krátká * poznámka (.focus-note). ŽÁDNÉ textové „Zpět na úvod / Zpět na…"
   odkazy (CEO 2. 7. večer: „zpět na úvod tam být nemá"). Portál renderuje
   server-side (globální shell se ve focus režimu vůbec nevypíše), webové
   body.focus-mode display-přepínání tu není potřeba. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.card-head .focus-logo img { height: 28px; width: auto; display: block; }
.reg-header--in-card { text-align: center; margin-bottom: clamp(0.7rem, 1.6vw, 1.1rem); }
.reg-header--in-card .feature-crown { width: 36px; margin: 0 auto 0.4rem; }
.reg-header--in-card .subpage-eyebrow { margin-bottom: 0.45rem; }
.reg-header--in-card .subpage-h1 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin: 0 0 0.35rem; }
/* portál: přepínač = <a href="/lang/..."> (server-side, vzor care) — canon .lang-btn
   je element-agnostický, jen shodit anchor podtržení (živý web má <button>) */
.card-head a.lang-btn{text-decoration:none}
/* specificity fix: kompaktní shell (.care-wrap--compact .reg-header …, 3 třídy) by
   přebil in-card variantu (2 třídy) — STEJNÉ verbatim hodnoty, vyšší specificita */
.care-wrap--compact .reg-header--in-card .feature-crown{width:36px;margin:0 auto 0.4rem}
.care-wrap--compact .reg-header--in-card .subpage-eyebrow{margin-bottom:0.45rem}
.care-wrap--compact .reg-header--in-card .subpage-h1{font-size:clamp(1.45rem,2.6vw,1.95rem);margin:0 0 0.35rem}
/* krátká poznámka s hvězdičkou POD kartou — jediný obsah mimo kartu */
.focus-note{display:block;max-width:70ch;margin:1.1rem auto 0;color:var(--ink-soft);font-size:0.8rem;line-height:1.6;text-align:center}
.focus-note a{color:var(--brand)}
/* FOCUS stránky (login/registrace/aktivace/notice) = jediná karta + krátká
   *poznámka, BEZ globálního headeru/footeru. Obsahovou skupinu (karta +
   .focus-note) vystředit DEAD CENTER viewportu na OBOU osách: min-height:100dvh
   (respektuje mobilní browser-chrome) + flex column, align/justify center.
   Pro obsah VYŠŠÍ než viewport (mobil / delší register): main s min-height
   (ne fixní height) naroste na výšku obsahu, justify-center pak nemá co
   rozdělovat → obsah teče odshora a STRÁNKA scrolluje (žádný clip nahoře).
   Drží „fit 1440×900" z 39f8ed2 — výplň se NEPŘIDÁVÁ (padding-top zůstává
   původní, padding-bottom 0.75rem dědí z --compact); min-height=viewport +
   box-sizing:border-box → documentElement.scrollHeight zůstává ≤ 900 i na
   nejvyšším stavu (login krok 2 + chyba). Horizontální centrování karty (base
   .care-wrap margin:0 auto + align-items) beze změny. */
.care-wrap--focus{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding-top:clamp(1.2rem,3vw,2.4rem);
}

/* ── CARE F1 — .portal-nav (2026-07-02, PORTALY_CARE_F1_DESIGN.md §1) ─────────
   Druhý řádek pod .care-top — horizontální textová navigace pacienta (Domů ·
   Vzdělávání · Moje léčba · Dokumenty · Podpora). Vizuální jazyk = CANON
   .faq-tabs (greenhive.css 1120–1124), hodnoty VERBATIM: font-size .92rem/600,
   padding .7rem .9rem, radius 8px 8px 0 0, margin-bottom:-1px přes hairline,
   hover lime wash 8 %, aktivní = --brand text + 2px --accent underline.
   Pozadí řádku = --card-bg-header-solid → s .care-top opticky JEDEN blok
   (hairline mezi nimi shodit :has; footer má totéž pozadí → symetrie drží).
   Mobil ≤760px: horizontal scroll + edge-fade vpravo + 44px touch targety.
   Sdílené — b2b portál později reuse. Markup: shared/partials/_portal_nav.html. */
.portal-nav { background: var(--card-bg-header-solid); border-bottom: 1px solid var(--line); position: relative; }
.portal-nav-inner { width: min(1080px, 92vw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.portal-nav-link { display: inline-flex; align-items: center; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.7rem 0.9rem; margin-bottom: -1px; cursor: pointer; border-radius: 8px 8px 0 0; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.portal-nav-link:hover { color: var(--ink); background: color-mix(in srgb, var(--gh-light-green) 8%, transparent); }
.portal-nav-link[aria-current="page"] { color: var(--brand); border-bottom-color: var(--accent); }
.portal-nav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* .care-top hairline shodit, když hned následuje nav → jeden optický blok */
.care-top:has(+ .portal-nav) { border-bottom: 0; }
@media (max-width: 760px) {
  .portal-nav-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .portal-nav-inner::-webkit-scrollbar { display: none; }
  /* 44px touch target; -1px margin shodit (overflow kontejner by 1px přesah ořízl) */
  .portal-nav-link { min-height: 44px; flex: none; margin-bottom: 0; }
  /* edge-fade vpravo — signál „je toho víc" */
  .portal-nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 2.2rem; pointer-events: none; background: linear-gradient(90deg, transparent, var(--card-bg-header-solid)); }
}

/* ── b2b register UX1 — login odkaz ve .wiz-nav (NÁVRH, 2026-07-02 CEO večer) ──
   „Už máte partnerský účet? Přihlásit se" se stěhuje ZPOD karty DO spodního
   řádku wizardu: [‹ Zpět · 1/4 vlevo] [login odkaz CENTROVANĚ] [Pokračovat
   vpravo]. Decentní styl = zrcadlí .focus-note (0.8rem, --ink-soft, --brand
   odkaz). OPT-IN modifikátor .wiz-nav--login — canon .wiz-nav (web, care)
   BEZE ZMĚNY. Grid 1fr|auto|1fr → odkaz sedí ve STŘEDU karty stabilně napříč
   kroky (nezávisle na šířce Zpět/Pokračovat/Odeslat). Mobil ≤640px (breakpoint
   canon .wiz-nav): řádek se nevejde (CZ text ~35 znaků + count + tlačítko)
   → odkaz SPADNE pod řádek na vlastní centrovaný řádek — NESKRÝVÁ se (je to
   jediná cesta na přihlášení, focus-note verze se ruší). */
.wiz-nav--login{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.wiz-nav-side{display:inline-flex;align-items:center;gap:1rem;min-width:0}
.wiz-nav-side--end{justify-content:flex-end}
.wiz-login{font-size:0.8rem;line-height:1.5;color:var(--ink-soft);text-align:center}
.wiz-login a{color:var(--brand)}
@media (max-width:640px){
  .wiz-nav--login{grid-template-columns:1fr auto;row-gap:0.55rem}
  .wiz-nav--login .wiz-nav-side--end{grid-column:2;grid-row:1}
  .wiz-nav--login .wiz-login{grid-column:1/-1;grid-row:2}
}

/* ── CARE F2 — vzdělávací centrum (2026-07-02, PORTALY_CARE_F1_DESIGN.md §2) ──
   Komponenty edukační vrstvy: karta článku, čtecí sloupec detailu, draft banner,
   patička citací, prev/next navigace, slovníček. VÝHRADNĚ brand tokeny; hodnoty
   odvozené VERBATIM z canon vzorů greenhive.css: .subpage-soon (1024 — chip
   barvy), .faq-item (1116–1118 — hairline/typo slovníčku), .spec-foot/.quality-
   foot (564/577 — --ink-note patička), .subpage-faqlink (1112–1114 — arrow link),
   .tile-paper/.tile-hex (382/1040 — paper karta + corner rule). */

/* karta článku — modifikátor na .tile-paper: equal-height flex column, meta řádek
   „~X min čtení", bottom-pinned arrow link (margin-top:auto → CTA dole, DoD §2).
   position:relative = kotva pro .tile-hex (hexagon akcent vpravo nahoře). */
.edu-card { position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.4rem 1.6rem; height: 100%; }
.edu-card .label { color: var(--brand); padding-right: 2.6rem; }   /* eyebrow kategorie; pravý odstup = místo hexagonu */
.edu-card-title { font-family: var(--font-display); font-weight: 450; font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.edu-card-anno { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.edu-card-meta { color: var(--ink-faint); font-size: 0.78rem; }
.edu-card .subpage-faqlink { margin: auto 0 0; padding-top: 0.7rem; }   /* bottom-pinned CTA (equal-height karty) */

/* čtecí sloupec detailu článku — max ~70ch centrovaný (klidná čtecí míra u dlouhého
   textu; ambient pozadí doplní šířku). Mezititulky = canon .legal-h (markup),
   tady jen rytmus těla. */
.article { width: min(70ch, 100%); margin: 0 auto; }
.article p { color: var(--ink-soft); margin: 0 0 1rem; }
.article ul { margin: 0 0 1.1rem 1.25rem; color: var(--ink-soft); display: grid; gap: 0.35rem; }
.article .legal-h:first-child { margin-top: 0.4rem; }
.article .subpage-faqlink { margin: 0 0 1rem; }
/* infobox („Kdy kontaktovat lékaře") — paper karta .tile-paper inline v textu */
.article-infobox { padding: 1.1rem 1.3rem 1rem; margin: 1.4rem 0; }
.article-infobox-title { display: block; font-weight: 700; font-size: 0.92rem; color: var(--brand); margin-bottom: 0.45rem; }
.article-infobox ul { margin-bottom: 0.2rem; }
/* patička citací legislativy — menší písmo, --ink-note (vzor .spec-foot/.quality-foot) */
.article-cites { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-note); font-size: 0.8rem; line-height: 1.6; }
.article-cites-title { display: block; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.4rem; }
.article-cites ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; color: var(--ink-note); }

/* draft banner — signatura „NÁVRH — ke schválení lékař+právník" NAHOŘE i DOLE
   detailu + globální disclaimer indexu. Nepřehlédnutelný, funkční tón; barvy
   VERBATIM ze .subpage-soon (lime 18% wash + 45% hairline + --brand text),
   ale block-level pruh místo drobné pilulky. */
.draft-banner { display: block; width: 100%; margin: 1.1rem auto; padding: 0.65rem 1.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--brand); background: color-mix(in srgb, var(--gh-light-green) 18%, var(--gh-white)); border: 1px solid color-mix(in srgb, var(--gh-light-green) 45%, transparent); border-radius: 12px; }
/* varianta „K PRÁVNÍMU OVĚŘENÍ" (články se sporným právním výkladem) — silnější
   brand hairline, jinak stejná rodina (nezavádět nové barvy mimo paletu) */
.draft-banner--legal { border-color: color-mix(in srgb, var(--gh-dark-green) 45%, transparent); }

/* prev/next navigace detailu — dva textové arrow linky (vzor .subpage-faqlink),
   šířka čtecího sloupce; mobil ≤560px stack pod sebou */
.article-nav { display: flex; justify-content: space-between; gap: 1rem; width: min(70ch, 100%); margin: 2.2rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.article-nav .subpage-faqlink { margin: 0; }
.article-nav-next { margin-left: auto; text-align: right; }
@media (max-width: 560px) { .article-nav { flex-direction: column; } .article-nav-next { margin-left: 0; text-align: left; } }
/* „← Zpět na Vzdělávání" pod nav — v ose čtecího sloupce */
.article-back { width: min(70ch, 100%); margin: 1.2rem auto 0; }

/* slovníček pojmů — definiční seznam ve vizuálu canon .faq-item (hairline top
   border var(--line), termín 700/1rem, definice --ink-soft 0.94rem/64ch) */
.gloss { width: min(70ch, 100%); margin: 1.6rem auto 0; }
.gloss-item { border-top: 1px solid var(--line); padding: 1rem 0 0.9rem; }
.gloss-item dt { font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 0.3rem; }
.gloss-item dd { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; max-width: 64ch; }

/* ── CARE F3 — Podpora: FAQ harmonika + support split (2026-07-02,
   PORTALY_CARE_F1_DESIGN.md §3+§5) ─────────────────────────────────────────
   Nativni <details>/<summary> accordion ve vizualu canon .faq-item
   (greenhive.css 1116–1118: hairline top border var(--line), otazka 700/1rem,
   hover lime wash 7 %, radius 10px). Vic polozek smi byt otevreno naraz
   (zadne exclusive chovani — zdravotni edukace). Klavesnice/screen reader
   zdarma (nativni element); summary:focus-visible resi canon (105). */
.faq-acc { margin-top: 0.4rem; }
.faq-acc-item { border-top: 1px solid var(--line); border-radius: 10px; }
.faq-acc-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0.45rem 0.95rem; font-weight: 700; font-size: 1rem; color: var(--ink); transition: background 0.3s ease; border-radius: 10px; }
.faq-acc-item summary::-webkit-details-marker { display: none; }
.faq-acc-item summary:hover { background: color-mix(in srgb, var(--gh-light-green) 7%, transparent); }
/* chevron — rotace pri otevreni; prefers-reduced-motion → bez animace */
.faq-acc-chev { flex: none; width: 14px; height: 14px; stroke: var(--brand); stroke-width: 2; fill: none; transition: transform 0.25s var(--ease-out); }
.faq-acc-item[open] > summary .faq-acc-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .faq-acc-chev { transition: none; } }
.faq-acc-a { padding: 0.1rem 0.45rem 1.05rem; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; max-width: 64ch; }
.faq-acc-a p { margin: 0 0 0.4rem; }
.faq-acc-a .faq-draft-note { margin: 0.35rem 0 0; }

/* support layout — desktop FAQ ~7/12 | kontaktni karta ~5/12, stack ≤760px
   (stejny breakpoint jako .auth-split / web .portal-split) */
.support-split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; margin-top: 1rem; }
@media (max-width: 760px) { .support-split { grid-template-columns: 1fr; } }
.support-split .faq-h { margin-top: 0.4rem; }
/* canon `section { padding: clamp(4rem,9vw,8rem) 0 }` (greenhive.css 376) je WEB
   section-rytmus — uvnitr portaloveho splitu ho nulujeme, jinak FAQ sloupec
   startuje ~130px pod kartou (sloupce musi zacinat zarovnane, align-items:start) */
.support-split section { padding: 0; }
/* kontaktni karta — .tile-paper + hexagon akcent; SLA chip = canon .badge s lime
   .dot; pole = canon .field/.consent; submit = .btn-solid natural-width vpravo
   dole (align-self:flex-end, NIKDY full-width stretch — DoD) */
.support-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.6rem; }
.support-card .badge { align-self: flex-start; }
.support-card form { display: flex; flex-direction: column; gap: 1rem; }
.support-card .btn-solid { align-self: flex-end; }
.support-card .errlist { margin: 0; max-width: none; }
/* select v support karte — deklarace VERBATIM z canon .partner-form .field select
   (greenhive.css 655 + 712: brand chevron, --ctrl-h vyska, radius 10px);
   canon selektor je scoped na .partner-form, portal karta ho proto zrcadli tady */
.support-card .field select { background: var(--card-bg-field); border: var(--card-line); border-radius: 10px; color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; padding: 0.85rem 1rem; min-height: 44px; width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23016938' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; height: var(--ctrl-h); padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.support-card .field select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }

/* ── 3D dvouhexagon WebGL motiv — portálová konfigurace (2026-07-02) ──────────
   Partial shared/partials/_hex_motif.html (kanon = index_v6.html hexA/hexB;
   živý vzor = greenhive.cz/najit-lekare/). Base styl canvasu (#hex-canvas:
   fixed inset 0, z-index -1, pointer-events none) = CANON greenhive.css —
   tady JEN portálová konfigurace, kterou čte init skript partialu:
   - opacity 0.3 = ZMĚŘENÁ subpage hodnota živého webu (body.routed #hex-canvas,
     headless 2026-07-02) — subtle behind content, legibility first;
   - --hex-motif-x/-y = střed páru ve frakcích viewportu (0.89/0.25 = živá
     subpage pose při scroll 0: tx = hw·0.78, ty = hh·0.5);
   - --hex-motif-scale = scale páru (1.3 = canon „hero wow" hodnota). */
.hex-motif { opacity: 0.3; --hex-motif-x: 0.89; --hex-motif-y: 0.25; --hex-motif-scale: 1.3; }

/* ============================================================
   CARE APP SHELL — prostorový systém INTERNÍ portálové appky
   (2026-07-02, PORTALY_CARE_REDESIGN_NAVRH.md §4 — SCHVÁLENO CEO,
   fáze R1). Prostor + hierarchie z wireframu (gh_care_portal/
   content_src/care_ui_wireframe.html), brand jemnost z živého
   greenhive.cz. Content = hrdina, UI ustupuje.

   ADDITIVNÍ modifikátory — canon .page-bg / .tile-paper /
   .reg-header / .draft-banner (web + veřejné/auth portálové
   stránky) zůstávají BEZE ZMĚNY. VÝHRADNĚ brand tokeny
   (--gh-white = paper #FBFCF9 — ŽÁDNÁ čistá #FFFFFF/#000000).
   Partial pozadí: shared/partials/_page_bg_app.html.
   ============================================================ */

/* 8pt spacing scale (wireframe rytmus) — card pad = --sp-3, sekce = --sp-5 */
:root {
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px; --sp-5: 48px; --sp-6: 64px;
  /* app karta: OPAKNÍ paper s ~4% lime nádechem (nikdy čistá bílá), BEZ blur —
     čitelný figure-ground na světlém app wash (wireframe: bílá karta na šedé;
     brand překlad: lime-tónovaný paper na paper wash + stín nese hloubku) */
  --card-bg-app: color-mix(in srgb, var(--gh-light-green) 4%, var(--gh-white));
  /* měkký DVOJITÝ brand-tónovaný stín (wireframe --shadow „0 1px 3px + 0 4px 14px"
     s černou → tady --gh-dark-green mix, žádná cizí barva ani čistá #000) */
  --card-shadow-app:
    0 1px 3px color-mix(in srgb, var(--gh-dark-green) 10%, transparent),
    0 6px 22px color-mix(in srgb, var(--gh-dark-green) 7%, transparent);
}

/* ── .page-bg--app — světlé APP pozadí interních stránek ─────────────────────
   Paper wash (white → 3% dark-green) + 2 jemné radiální brand akcenty (~5% mix:
   lime nahoře-vpravo, dark-green dole-vlevo). Hexagon watermarky na šepot dodává
   partial (_page_bg_app.html = .ambient-hexes + .watermarks, canon opacity
   0.05–0.22). Veřejné/auth stránky drží canon .page-bg (web gradient) 1:1. */
.page-bg.page-bg--app {
  background:
    radial-gradient(ellipse 62% 48% at 86% 6%,
      color-mix(in srgb, var(--gh-light-green) 6%, transparent), transparent 68%),
    radial-gradient(ellipse 70% 55% at 6% 96%,
      color-mix(in srgb, var(--gh-dark-green) 5%, transparent), transparent 70%),
    linear-gradient(180deg, var(--wash-top),
      color-mix(in srgb, var(--gh-dark-green) 3%, var(--gh-white)));
}

/* ── .tile-paper--app — jednotná app karta ───────────────────────────────────
   Opaque --card-bg-app + --card-shadow-app, hairline --card-line + radius 16
   dědí z canon .tile-paper; blur PRYČ (opaque karta ho nepotřebuje — výkon +
   ostrost). Flex column + height:100% = equal-height v gridu, .app-actions
   s margin-top:auto přišpendlí CTA dolů (DoD §2). position:relative = kotva
   pro .tile-hex hexagon akcent vpravo nahoře (corner rule). */
.tile-paper.tile-paper--app {
  position: relative;
  display: flex; flex-direction: column; gap: 0.55rem;
  height: 100%; padding: var(--sp-3);
  background: var(--card-bg-app);
  box-shadow: var(--card-shadow-app);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* řádek akcí karty — CTA dole (margin-top:auto v flex column kartě), natural-width
   pilulka .btn-solid/.btn-ghost + tichý text link (.subpage-faqlink) vedle sebe */
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: auto; padding-top: var(--sp-2); }
.app-actions .subpage-faqlink { margin: 0; }

/* ── .reg-header--app — kompaktní LEVÁ app hlavička ──────────────────────────
   Interní stránky appky (SCHVÁLENÁ odchylka CEO 2026-07-02 od centrovaného
   .reg-header pravidla — platí JEN pro interní app stránky; login/marketing
   zůstávají centrované). Drží třídy .reg-header + .feature-crown (smoke) i
   brand prvky (crown + lime-dot eyebrow + Fraunces H1) — jen kompaktní levá
   osa: crown 22px + eyebrow V JEDNOM ŘÁDKU (grid auto|1fr, stávající markup
   _reg_header.html beze změny), H1 pod nimi, lead vlevo (NE justified, 62ch).
   Brand underline H1 (::after) se v app hlavičce NEkreslí — kompaktní hlavička
   nemá být druhé hero; brand nesou crown + eyebrow dot. */
.reg-header.reg-header--app {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; justify-items: start; column-gap: 0.6rem;
  max-width: none; margin: 0; text-align: left;
}
.reg-header--app .feature-crown { width: 22px; margin: 0; }
.reg-header--app .subpage-eyebrow { margin: 0; }
.reg-header--app .subpage-h1 {
  grid-column: 1 / -1; max-width: none;
  font-size: clamp(1.6rem, 2.6vw, 1.95rem);
  margin-top: var(--sp-1);
}
.reg-header--app .subpage-h1::after { display: none; }
.reg-header--app .subpage-lead {
  grid-column: 1 / -1; max-width: 62ch;
  margin: 0.6rem 0 0; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.55;
  text-align: left; text-align-last: left;
}
/* 1řádkový sub se stavem účtu (chip = canon .subpage-soon, tady bez spodního odsazení) */
.reg-header--app .app-sub {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.45rem 0.7rem; margin-top: 0.6rem;
  color: var(--ink-faint); font-size: 0.9rem;
}
.reg-header--app .subpage-soon { margin: 0; }

/* ── .care-wrap--app — obsah-first rytmus interní stránky ────────────────────
   Těsnější main padding (canon clamp(2rem,5vw,4rem) je web/hero ceremonie;
   app = --sp-4 nahoře) + sekce rytmus --sp-5 pro levé H2 (.faq-h). */
.care-wrap--app { padding: var(--sp-4) 0 var(--sp-5); }
.care-wrap--app .faq-h { margin: var(--sp-5) 0 var(--sp-2); }
.care-wrap--app .reg-header + * { margin-top: var(--sp-3); }

/* ── .draft-banner--slim — kompaktní draft signatura ─────────────────────────
   Barvy VERBATIM z .draft-banner (dědí — lime 18% wash + 45% hairline + --brand
   text); jen šířka OBSAHU (fit-content, pilulka jako canon .subpage-soon) místo
   full-width slabu → přestává soupeřit s H1 jako druhé hero, zůstává
   nepřehlédnutelný v ose obsahu. */
.draft-banner.draft-banner--slim {
  width: fit-content; max-width: 100%;
  margin: var(--sp-2) 0; padding: 0.4rem 0.95rem;
  font-size: 0.72rem; letter-spacing: 0.12em;
  text-align: left; border-radius: 999px;
}

/* ── .app-chip — SENTENCE-CASE stavový chip (fáze R2, CEO 2026-07-02: chip
   klidnější/Apple, sentence-case; uppercase eyebrow brand zůstává) ───────────
   Modifikátor na canon .subpage-soon — BARVY VERBATIM dědí (lime 18% wash +
   45% hairline + --brand text, pilulka 999px). Mění jen typografii:
   text-transform none + tracking/velikost sentence-case (0.12em tracking je
   uppercase konvence — na sentence-case textu dělá mezery; 0.72rem uppercase
   ≈ 0.78rem sentence opticky). Použití: stav účtu v .reg-header--app .app-sub. */
.subpage-soon.app-chip {
  text-transform: none; letter-spacing: 0.02em;
  font-size: 0.78rem; font-weight: 600;
}

/* ── CARE APP SHELL — fáze R3 (edu + podstránky do app shellu, 2026-07-02) ────
   ADDITIVNÍ: jen .care-wrap--app kontext + 2 nové třídy. Canon beze změny. */
/* čtecí prvky VLEVO V OSE obsahu — app hlavička je levá (CEO-schválená odchylka),
   centrovaný 70ch sloupec by ztratil zákryt s osou; šířka min(70ch,100%) drží */
.care-wrap--app .article,
.care-wrap--app .article-nav,
.care-wrap--app .article-back,
.care-wrap--app .gloss { margin-left: 0; margin-right: 0; }
/* Podpora: .faq-h uvnitř splitu drží těsný rytmus vedle karty (obecný app rytmus
   H2 = --sp-5 platí pro sekce v hlavní ose, ne uvnitř splitu) */
.care-wrap--app .support-split .faq-h { margin-top: 0.4rem; }
/* .text-btn — TICHÝ text-button: form submit vizuálně jako textový link (barvy =
   brand token, hover podtržení — vzor .subpage-faqlink). Použití: „Odvolat"
   souhlas (destruktivní mikro-akce nemá soupeřit s obsahem jako pilulka). */
.text-btn { background: none; border: 0; padding: 0.35rem 0.2rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--brand); cursor: pointer; }
.text-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* .danger-zone — nevratné akce (smazání účtu) DOLE, oddělené od denního obsahu:
   hairline top + Fraunces mini-nadpis + vysvětlující věta + canon .btn-ghost
   (od R4a s modifikátorem .btn-ghost--danger — sankcionovaná --danger terakota,
   viz níže + BRAND_COLORS.md); ochranu dál nese primárně oddělení + vysvětlení
   + confirm dialog, barva je jen decentní akcent. */
.danger-zone { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.danger-zone h2 { font-family: var(--font-display); font-weight: 450; font-size: 1.1rem; color: var(--ink); margin: 0; }
.danger-zone p { margin: 0 0 0.4rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; max-width: 62ch; }

/* ============================================================
   R4a — SANKCIONOVANÁ DANGER BARVA (CEO 2026-07-02)
   --danger #A5503C = klidná terakota (regulované zdravotní
   prostředí: chybové/nevratné stavy čitelné, ne alarmující;
   WCAG AA ~5.3:1 na paper #FBFCF9). Zdroj pravdy =
   assets/brand/BRAND_COLORS.md („Funkční danger tón").
   Užití VÝHRADNĚ text/border/outline akcent, NIKDY výplňová
   plocha. Stará #A8412E = ZAKÁZANÁ pro nový kód.
   ============================================================ */
:root { --danger: #A5503C; }
/* .btn-ghost--danger — destruktivní CTA (smazání účtu v .danger-zone):
   canon .btn-ghost sizing/tvar 1:1 (pilulka 999px, padding 1rem 1.9rem
   web-exact — modifikátor NEmění sizing, jen barvy), text + rám = --danger.
   Hover = jemný 8% terakotový wash (ŽÁDNÁ plná výplň — danger nemá řvát),
   canon translateY(-2px) motion dědí. */
.btn-ghost.btn-ghost--danger { color: var(--danger); border-color: var(--danger); }
.btn-ghost.btn-ghost--danger:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--danger) 18%, transparent);
}
.btn-ghost.btn-ghost--danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 3px; }

/* ============================================================
   CARE APP v2 — WIREFRAME 1:1 (CEO 2026-07-02)
   Zdroj pravdy = gh_care_portal/content_src/CARE_WIREFRAME_SPEC_ADDENDUM.md
   + north star care_ui_wireframe.html. Rozhodnutí CEO: app shell
   po přihlášení = rozložení, vzhled, BARVY a vše 100 % jako
   wireframe (vědomá CEO-schválená výjimka z web-brand kánonu —
   viz DESIGN_DOD.md „CARE APP v2 výjimka"). Login/registrace/
   veřejný web drží brand beze změny (addendum §0).

   VŠE scoped pod `.care-v2` (třída na <body>) + prefix `cv2-` —
   tokeny i komponenty ODDĚLENÉ od web-brand tokenů, žádný zásah
   do canon :root ani R1–R4 app-shell sekcí (produkce na nich
   běží; v2 žije VEDLE, produkční build je vymění ve fázích).
   Hodnoty VERBATIM z wireframu. Dvě známé odchylky addendum vs
   wireframe (addendum §2 side 220px / main 1080px vs wireframe
   224px / 1060px) → drží se ZMĚŘENÝ wireframe (north star).
   ============================================================ */

.care-v2 {
  /* tokeny (addendum §1, verbatim) */
  --cv2-bg:          #F7F8F6;  /* pozadí app shellu (paper) */
  --cv2-card:        #FFFFFF;  /* karty (CEO výjimka: čistá bílá JEN v app shellu) */
  --cv2-accent:      #2E5D43;  /* GreenHive zelená app shellu (CEO výjimka) */
  --cv2-accent-soft: #E8F0EB;  /* aktivní nav, ghost btn, chip, thumb, avatar */
  --cv2-text:        #1D1D1F;  /* primární text */
  --cv2-sub:         #6E6E73;  /* sekundární text */
  --cv2-line:        #E8E8E5;  /* linky, borders tabulek */
  --cv2-ok:          #3E7A5A;
  --cv2-warn:        #B8862E;
  --cv2-err:         #A5503C;  /* = sankcionovaná terakota --danger */
  /* F2-2b: světlý terakotový wash (mockup v2 --danger-soft #F6ECE9) — ODVOZENÝ
     z tokenů color-mixem (BRAND_COLORS: mezitóny jen přes color-mix, žádný nový
     raw hex); 11 % err na kartě ≈ #F5ECEA (delta ≤1/kanál vs mockup) */
  --cv2-err-soft:    color-mix(in srgb, var(--cv2-err) 11%, var(--cv2-card));
  --cv2-shadow-pop:  0 8px 28px rgba(0,0,0,.14);   /* elevated popover (účet-dropdown) */
  --cv2-lock:        #7A6BB0;  /* legacy wireframe fialová — F2 RESKIN (CEO 2026-07-02, CARE_F2_DOCTOR_DESIGN_BRIEF §1): tier nese TEXT, ne barva; tokeny drženy jen jako rezerva, ŽÁDNÉ živé pravidlo je nepoužívá */
  --cv2-lock-soft:   #ECE8F5;
  --cv2-r:           16px;
  --cv2-shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04);
  /* base (addendum §1): systémový sans, 15px, 1.45 — přebíjí web body/html rem */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cv2-text);
  background: var(--cv2-bg);
}

/* ── Topbar (addendum §2; bez role-switche a WIREFRAME badge — §0) ─────────── */
.care-v2 .cv2-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: var(--cv2-card);
  border-bottom: 1px solid var(--cv2-line);
  position: sticky; top: 0; z-index: 10;
}
/* V2LOGO (CEO 2026-07-04, NAHRAZUJE V2F1 reskladaný lockup): topbar logo =
   OFICIÁLNÍ plný asset greenhive_logo.svg (identický s headerem živého
   greenhive.cz, md5 6d3f64de…) JAK JE — žádný recolor, žádný filter, žádné
   skládání mark+text. „Care" = ODDĚLENÝ portálový dodatek ZA assetem
   (.cv2-logo-care), do assetu se nekreslí.
   Metriky (canvas-scan assetu, viewBox 519.13×108.77 — změřeno, ne odhad):
   - img 24px (šířka auto ≈ 114.5px, poměr 4.773:1); topbar 57px drží —
     avatar 32px zůstává nejvyšší prvek řádku.
   - wordmark baseline = 26.77u nad spodní hranou assetu → při 24px je to
     5.91px; flex align-items:baseline posadí text baseline na SPODNÍ hranu
     img (Chrome syntetizuje baseline z border edge, negativní margin
     neposune — změřeno pixel-scanem) → span dostává relative top -5.91px,
     čímž „Care" baseline sedí přesně na baseline wordmarku (ověřeno
     renderem: delta ≤ 0.5px).
   - „Care" 17px/400 --cv2-sub: cap-height wordmarku 55.25u × 24/108.77
     ≈ 12.19px; systémový sans cap ≈ 0.7175em → 12.19/0.7175 ≈ 17px
     (shodou okolností = původní wireframe 17px).
   - gap 8px = 8pt scale (interní mezera mark↔wordmark v assetu ≈ 4.85px
     při 24px; oddělený dodatek drží větší odstup). */
.care-v2 .cv2-logo { display: inline-flex; align-items: baseline; gap: 8px; height: 24px; text-decoration: none; }
/* height 24px = img: bez ní by descent „Care" nafoukl box (~26.3px) a flex
   centrování topbaru posadilo logo 1.25px vysoko vůči avataru (změřeno). */
.care-v2 .cv2-logo img { height: 24px; width: auto; display: block; }
.care-v2 .cv2-logo-care { font-weight: 400; font-size: 17px; line-height: 1; color: var(--cv2-sub); position: relative; top: -5.91px; }
.care-v2 .cv2-avatar {
  width: 32px; height: 32px; border-radius: 50%; margin-left: auto;
  background: var(--cv2-accent-soft); color: var(--cv2-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
/* V2F1: generický fallback avataru (kontext bez jména — view-as/preview):
   line ikona osoby místo iniciál, barvy dědí z .cv2-avatar */
.care-v2 .cv2-avatar svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* hamburger pro mobilní off-canvas (addendum §4 — desktop skrytý) */
.care-v2 .cv2-menu-btn { display: none; }
/* V2FIX (CEO 2026-07-03): CZ/EN přepínač + Odhlásit v topbaru — R4 care-top je
   měl, wireframe topbar jen avatar → doplněno decentně dle v2 systému (tlumený
   systémový sans vedle avataru). Markup = canon .lang/.lang-btn/.lang-sep
   (greenhive.css: 44px touch target, active underline ::after) v portálové
   <a href="/lang/.."> variantě; tady JEN v2 typografie/barvy scoped .care-v2.
   Mark/logo NETKNUTÉ (žádný filter/recolor). */
/* margin -6px 0 = precedens .cv2-menu-btn: 44px touch target .lang-btn NEZVÝŠÍ
   topbar (drží wireframe 57px = 12+32+12+1) */
.care-v2 .cv2-top-actions { margin: -6px 0 -6px auto; display: inline-flex; align-items: center; gap: 10px; }
.care-v2 .cv2-top-actions ~ .cv2-avatar { margin-left: 0; }
.care-v2 .cv2-top-actions .lang-btn {
  font-family: inherit; font-size: 12px; text-decoration: none;
  color: var(--cv2-sub);
}
.care-v2 .cv2-top-actions .lang-btn:hover { color: var(--cv2-text); }
.care-v2 .cv2-top-actions .lang-btn.active { color: var(--cv2-accent); }
.care-v2 .cv2-top-actions .lang-btn.active::after { background: var(--cv2-accent); }
.care-v2 .cv2-top-actions .lang-btn:focus-visible { outline-color: var(--cv2-accent); }
.care-v2 .cv2-top-actions .lang-sep { color: var(--cv2-sub); font-size: 0.75rem; }
.care-v2 .cv2-logout {
  font-size: 13px; font-weight: 500; color: var(--cv2-sub); text-decoration: none;
  padding: 10px 2px; /* výška touch targetu v řádku topbaru */
}
.care-v2 .cv2-logout:hover { color: var(--cv2-accent); text-decoration: underline; }
.care-v2 .cv2-logout:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; border-radius: 4px; }
/* logout line ikona (styl sidebar ikon) — desktop skrytá, mobil ≤560 nahradí text
   (na 390/360 se jinak lockup+CZ/EN+Odhlásit+avatar nevejdou; aria-label drží) */
.care-v2 .cv2-logout svg {
  display: none; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Shell + sidebar ────────────────────────────────────────────────────────
   min-height = 100vh - topbar (57px = 12+32+12+1, změřeno na wireframu bez
   demo tier-banneru). Side 224px = wireframe verbatim. */
.care-v2 .cv2-shell { display: flex; min-height: calc(100vh - 57px); }
.care-v2 .cv2-side { width: 224px; padding: 20px 12px; flex-shrink: 0; }
.care-v2 .cv2-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--cv2-sub); text-decoration: none;
  font-weight: 500; font-size: 14px; margin-bottom: 2px; cursor: pointer;
}
.care-v2 .cv2-side a.on { background: var(--cv2-accent-soft); color: var(--cv2-accent); font-weight: 600; }
/* line ikony místo emoji (addendum §2: „nahradit jednoduchými line ikonami
   stejné velikosti" + firemní no-emoji pravidlo) — 17px ≈ emoji glyf v 14px řádku */
.care-v2 .cv2-side a svg, .care-v2 .cv2-locked svg {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.care-v2 .cv2-locked {
  display: flex; align-items: center; gap: 6px;
  opacity: .5; font-size: 11px; margin: 14px 14px 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.care-v2 .cv2-locked svg { width: 12px; height: 12px; }
.care-v2 .cv2-side a.cv2-lockitem { opacity: .5; }

/* ── ZANOŘENÁ NAVIGACE (.cv2-navgrp / .cv2-subnav) — KONSOLIDACE NAV 2026-07-07
   Promoted VERBATIM ze schváleného mocku (gh_shopfloor/mock_nav_backoffice.html,
   sign-off Michal 2026-07-07). Minimální nested idiom konzistentní s cv2:
   · rodič = běžná .cv2-side položka + chevron .cv2-caret vpravo (rotace 90° při open),
   · děti = odsazený blok s hairline „rail" vlevo (--cv2-line), BEZ ikon
     (hierarchii nese odsazení, ne druhá sada ikon),
   · aktivní dítě = plný aktivní stav (accent-soft výplň + accent, jako .on),
   · rodič aktivní cesty = .has-on → accent text + 600 BEZ výplně (výplň nese
     dítě — jedna výplň v sidebar = jedno „tady jsem"). ── */
.care-v2 .cv2-side .cv2-navgrp{margin-bottom:2px}
.care-v2 .cv2-side .cv2-navgrp>a .cv2-caret{margin-left:auto;width:15px;height:15px;
  transition:transform .12s;transform:rotate(0deg)}
.care-v2 .cv2-side .cv2-navgrp.open>a .cv2-caret{transform:rotate(90deg)}
.care-v2 .cv2-side .cv2-navgrp.has-on>a{color:var(--cv2-accent);font-weight:600}
.care-v2 .cv2-subnav{display:none;margin:2px 0 8px 21px;padding-left:10px;
  border-left:1px solid var(--cv2-line,#e8e8e5)}
.care-v2 .cv2-navgrp.open .cv2-subnav{display:block}
.care-v2 .cv2-subnav a{display:flex;align-items:center;padding:8px 12px;border-radius:10px;
  color:var(--cv2-sub,#6e6e73);text-decoration:none;font-weight:500;font-size:13.5px;
  margin-bottom:1px;cursor:pointer}
.care-v2 .cv2-subnav a.on{background:var(--cv2-accent-soft);color:var(--cv2-accent);font-weight:600}
@media (prefers-reduced-motion:reduce){.care-v2 .cv2-side .cv2-navgrp>a .cv2-caret{transition:none}}

/* ── Main + typografie (addendum §2) ────────────────────────────────────────
   max-width 1060px = wireframe verbatim. h2 malé 15/600 — NE serif hero. */
.care-v2 .cv2-main { flex: 1; min-width: 0; padding: 26px 30px; max-width: 1060px; }  /* min-width:0 = flex item smí shrinknout → vnitřní overflow-x:auto tabulky klipuje (kontakty 390) */
.care-v2 .cv2-main h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; line-height: 1.45; }
/* V2F2: h1 řádek se stavovým chipem vpravo (sentence-case „Registrace aktivní")
   — wireframe h1 chip nemá; drží CEO-schválený R2 stav účtu u pozdravu.
   Wrapper nese h1 margin (4px k .sub), h1 uvnitř margin 0. */
.care-v2 .cv2-h1row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.care-v2 .cv2-h1row h1 { margin: 0; }
.care-v2 .cv2-sub { color: var(--cv2-sub); margin: 0 0 20px; }
.care-v2 .cv2-main h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; line-height: 1.45; }

/* ── Karta + gridy (addendum §3 — kompaktní, padding 20, ne víc) ───────────── */
.care-v2 .cv2-card {
  background: var(--cv2-card); border-radius: var(--cv2-r);
  box-shadow: var(--cv2-shadow); padding: 20px; margin-bottom: 16px;
}
.care-v2 .cv2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.care-v2 .cv2-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.care-v2 .cv2-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* karta jako odkaz (edu index — celá karta je click target): text bez podtržení,
   barvy dědí; wireframe karty jsou <div>, vizuál musí zůstat identický */
.care-v2 a.cv2-card { color: inherit; text-decoration: none; }
.care-v2 a.cv2-card:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; }

/* ── Tlačítka (addendum §3) — v kartě „další krok" přesně 1× solid + 1× ghost ─ */
.care-v2 .cv2-btn {
  display: inline-block; background: var(--cv2-accent); color: #FFFFFF;
  border: 0; border-radius: 10px; padding: 10px 18px;
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.45;
  cursor: pointer; text-decoration: none;
}
.care-v2 .cv2-btn.ghost { background: var(--cv2-accent-soft); color: var(--cv2-accent); }
.care-v2 .cv2-btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.care-v2 .cv2-btn:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; }

/* ── Pilulky / chips (addendum §3, sentence-case drží dřívější rozhodnutí) ── */
.care-v2 .cv2-pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 3px 10px; }
.care-v2 .cv2-pill.ok   { background: #E7F1EB; color: var(--cv2-ok); }
.care-v2 .cv2-pill.warn { background: #F6EEDD; color: var(--cv2-warn); }
.care-v2 .cv2-pill.err  { background: #F5E7E3; color: var(--cv2-err); }
.care-v2 .cv2-pill.mut  { background: var(--cv2-bg); color: var(--cv2-sub); }
/* F2 RESKIN (CEO brief §1): .lock pill = brandová zelená — chemotyp/§5b štítky,
   aktivní filtr/protokol pill, aktivní pozvánka. Třída .lock v markup ZŮSTÁVÁ
   (sémantický marker + JS toggle), mění se jen hodnoty na accent.
   AA: #2E5D43 na #E8F0EB ≈ 6,5:1. Stavové ok/warn/err/mut beze změny. */
.care-v2 .cv2-pill.lock { background: var(--cv2-accent-soft); color: var(--cv2-accent); }

/* ── KPI / tabulka / bar / steps / thumb (addendum §3) ─────────────────────── */
.care-v2 .cv2-kpi .n { font-size: 26px; font-weight: 700; }
.care-v2 .cv2-kpi .l { font-size: 12.5px; color: var(--cv2-sub); }
.care-v2 .cv2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.care-v2 .cv2-table th { color: var(--cv2-sub); font-weight: 600; font-size: 12.5px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cv2-line); }
.care-v2 .cv2-table td { padding: 10px; border-bottom: 1px solid var(--cv2-line); }
.care-v2 .cv2-table tr:last-child td { border-bottom: 0; }
/* Promoted 2026-07-16 (mobile-overflow audit): canonical horizontal-scroll wrapper
   for .cv2-table on narrow viewports — was independently reinvented 3x (sales_kontakty
   inline style, sales_analyza local .tblwrap, backoffice_sales local .cv2-tblwrap) and
   missing entirely on one table (sales.html #dealbody). One source now; wrap any
   .cv2-table that can outgrow its card in <div class="cv2-tblwrap">. */
.care-v2 .cv2-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.care-v2 .cv2-steps { display: flex; gap: 0; margin: 14px 0 6px; }
.care-v2 .cv2-step { flex: 1; text-align: center; font-size: 12px; color: var(--cv2-sub); }
.care-v2 .cv2-step::before { content: ""; display: block; height: 4px; background: var(--cv2-line); margin-bottom: 6px; border-radius: 2px; }
.care-v2 .cv2-step.done::before { background: var(--cv2-accent); }
.care-v2 .cv2-step.done { color: var(--cv2-accent); font-weight: 600; }
.care-v2 .cv2-thumb { background: var(--cv2-accent-soft); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--cv2-accent); }
.care-v2 .cv2-thumb svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* sekční H2 v ose stránky (edu index — wireframe sekce nemá, drží h2 15/600
   + 8pt rytmus: karta nese mb 16 (wireframe verbatim) + 8 = 24px nad titulkem,
   12px pod; první sekce bez horního odsazení) */
.care-v2 .cv2-main h2.cv2-sech { margin: 8px 0 12px; }
.care-v2 .cv2-main h2.cv2-sech:first-of-type { margin-top: 0; }

/* ── Pomocné (wireframe verbatim) ──────────────────────────────────────────── */
.care-v2 .cv2-muted { color: var(--cv2-sub); font-size: 13px; margin: 0; }
.care-v2 .cv2-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.care-v2 .cv2-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.care-v2 .cv2-note { font-size: 12px; color: var(--cv2-sub); border-left: 3px solid var(--cv2-accent-soft); padding: 4px 10px; margin: 10px 0 0; }
/* F2 RESKIN: law nota v brandové zelené (fialová byla wireframe tier akcent;
   tier info nese text — CEO brief §1). Accent na accent-soft ≈ 6,5:1 AA
   (řeší i dřívější #5A4F85). Nota je cross-zone (patient_edu §5b nota) —
   jeden brand, změna nahlášena. */
.care-v2 .cv2-note.law { border-left-color: var(--cv2-accent); background: var(--cv2-accent-soft); border-radius: 0 8px 8px 0; color: var(--cv2-accent); }
.care-v2 .cv2-faq { border-bottom: 1px solid var(--cv2-line); padding: 12px 0; cursor: pointer; }
.care-v2 .cv2-faq:last-child { border-bottom: 0; }
.care-v2 .cv2-faq b { font-weight: 600; }

/* ── Draft-banner v app shellu (addendum §3: „zachovat, slim varianta, barvy
   verbatim") — REUSE canon .draft-banner/.draft-banner--slim (lime wash +
   --brand text z web-kánonu, regulatorně povinná signatura). Tady jen usazení
   do 8pt rytmu app shellu; super-admin ribbon = canon .draft-banner full-width
   POD topbarem (slot = místo demo tier-banneru, addendum §0). */
.care-v2 .draft-banner--slim { margin: 0 0 16px; }
.care-v2 .cv2-ribbon-slot .draft-banner { margin: 0; border-radius: 0; }

/* ── V2F1: slim JEDNOŘÁDKOVÝ disclaimer dole (rozhodnutí CEO — ne boxový
   .care-foot; text „není výdejní místo léčiv" = reuse i18n footer_legal,
   do potvrzení právníkem blok A2). Tlumený, mimo shell v document flow. ── */
.care-v2 .cv2-foot { font-size: 12px; color: var(--cv2-sub); text-align: center; padding: 16px 24px 20px; }

/* ── V2F3: edukační čtecí komponenty pod v2 shellem — REUSE canon markup
   (.article / .gloss / .article-cites / .article-nav / .subpage-faqlink),
   scoped v2 look: osa VLEVO, systémový sans (žádný Fraunces v app shellu,
   addendum §1), barvy z --cv2-* tokenů. Canon mimo .care-v2 beze změny. ── */
.care-v2 .article, .care-v2 .article-nav, .care-v2 .article-back,
.care-v2 .gloss { margin-left: 0; margin-right: 0; }
.care-v2 .article p, .care-v2 .article ul { color: var(--cv2-text); }
.care-v2 .article .legal-h { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--cv2-text); margin: 20px 0 8px; }
.care-v2 .article-infobox { background: var(--cv2-card); border: 0; border-radius: var(--cv2-r); box-shadow: var(--cv2-shadow); }
.care-v2 .article-infobox-title { color: var(--cv2-accent); }
.care-v2 .article-cites { border-top-color: var(--cv2-line); color: var(--cv2-sub); }
.care-v2 .article-cites ul { color: var(--cv2-sub); }
.care-v2 .article-cites-title { color: var(--cv2-accent); }
.care-v2 .article-nav { border-top-color: var(--cv2-line); }
.care-v2 .gloss-item { border-top-color: var(--cv2-line); }
.care-v2 .gloss-item dt { color: var(--cv2-text); }
.care-v2 .gloss-item dd { color: var(--cv2-sub); }
.care-v2 .subpage-faqlink a { color: var(--cv2-accent); }
.care-v2 .faq-draft-note { color: var(--cv2-sub); }

/* ── V2F4a: zbylé interní stránky pod v2 shellem — scoped v2 look pro REUSE
   canon komponent (faq-acc harmonika, .field/.consent, .danger-zone,
   .text-btn, .form-status); canon MIMO .care-v2 beze změny. ── */
.care-v2 .cv2-table a { color: var(--cv2-accent); font-weight: 600; text-decoration: none; }
.care-v2 .cv2-table a:hover { text-decoration: underline; }
.care-v2 .text-btn { color: var(--cv2-accent); font-family: inherit; font-size: 13px; }
.care-v2 .text-btn:focus-visible { outline-color: var(--cv2-accent); }
.care-v2 .faq-acc-item { border-top-color: var(--cv2-line); }
.care-v2 .faq-acc-item summary { font-size: 14px; font-weight: 600; color: var(--cv2-text); }
.care-v2 .faq-acc-item summary:hover { background: var(--cv2-bg); }
.care-v2 .faq-acc-chev { stroke: var(--cv2-accent); }
.care-v2 .faq-acc-a { color: var(--cv2-sub); font-size: 13px; }
.care-v2 .field label { color: var(--cv2-sub); font-family: inherit; }
.care-v2 .field input, .care-v2 .field textarea,
.care-v2 .support-card .field select {
  background-color: var(--cv2-bg); border: 1px solid var(--cv2-line);
  color: var(--cv2-text); font-family: inherit;
}
/* select chevron v akcentu v2 (#2E5D43) — jinak data-URI verbatim canon */
.care-v2 .support-card .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232E5D43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.care-v2 .field input:focus-visible, .care-v2 .field textarea:focus-visible,
.care-v2 .support-card .field select:focus-visible { outline: 2px solid var(--cv2-accent); }
.care-v2 .consent { color: var(--cv2-sub); }
.care-v2 .consent input { accent-color: var(--cv2-accent); }
.care-v2 .form-status.is-success { color: var(--cv2-ok); }
.care-v2 .danger-zone { border-top-color: var(--cv2-line); }
.care-v2 .danger-zone h2 { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--cv2-text); }
.care-v2 .danger-zone p { color: var(--cv2-sub); font-size: 13px; }
/* destruktivní akce ve v2 rytmu: cv2 tlačítko s barvami wireframe pill.err
   (bg #F5E7E3 verbatim + sankcionovaná terakota --cv2-err = --danger) */
.care-v2 .cv2-btn.danger { background: #F5E7E3; color: var(--cv2-err); }
.care-v2 .cv2-btn.danger:focus-visible { outline: 2px solid var(--cv2-err); }

/* ── Responsive (addendum §4, mobil ≤760px) — sidebar skrytý, náhrada =
   off-canvas TÝŽ sidebar (IA identická, jen prezentace; hamburger v topbaru) ── */
@media (max-width: 760px) {
  .care-v2 .cv2-side { display: none; }
  .care-v2 .cv2-main { padding: 18px; }
  .care-v2 .cv2-grid2, .care-v2 .cv2-grid3, .care-v2 .cv2-grid4 { grid-template-columns: 1fr; }
  .care-v2 .cv2-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: -6px 0; padding: 0;
    background: none; border: 0; border-radius: 10px;
    color: var(--cv2-text); cursor: pointer;
  }
  .care-v2 .cv2-menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .care-v2 .cv2-side.open {
    display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    width: min(280px, 80vw); background: var(--cv2-card);
    box-shadow: var(--cv2-shadow); overflow-y: auto;
  }
  .care-v2 .cv2-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(29,29,31,.32); border: 0; padding: 0; cursor: pointer; }
  .care-v2 .cv2-scrim[hidden] { display: none; }
  /* V2FIX: kompaktní topbar na telefonu — vejde se hamburger + lockup + CZ/EN
     + Odhlásit + avatar na 390px (vzor canon mobile .lang kompakce v greenhive.css) */
  .care-v2 .cv2-topbar { padding: 12px 14px; gap: 10px; }
  .care-v2 .cv2-top-actions { gap: 7px; }
  .care-v2 .cv2-top-actions .lang-btn { padding: 0.55rem 0.3rem; }
  .care-v2 .cv2-top-actions .lang-btn.active::after { left: 0.3rem; right: 0.3rem; }
  .care-v2 .cv2-top-actions .lang-sep { margin: 0 -2px; }
}
@media (max-width: 560px) {
  /* V2FIX: Odhlásit = jen line ikona (text se na úzkém telefonu nevejde;
     aria-label + title sémantiku drží markup) */
  .care-v2 .cv2-logout span { display: none; }
  .care-v2 .cv2-logout svg { display: block; }
  .care-v2 .cv2-logout { padding: 10px 4px; }
  /* V2LOGO: užší boční padding — na 360px se jinak lang přepínač dotkl
     „Care" (změřeno gap -0.7px; s 10px paddingem +8px rezerva). Logo asset
     se NIKDY nezmenšuje/nedeformuje — prostor se bere z paddingu. */
  .care-v2 .cv2-topbar { padding: 12px 10px; }
}

/* ── F2-0 doctor tier — RESKIN do GreenHive ZELENÉ (CEO 2026-07-02,
   CARE_F2_DOCTOR_DESIGN_BRIEF.md §1 — NAHRAZUJE dřívější fialový dodatek A/1:
   tier info nese TEXT „ODBORNÁ / LÉKAŘSKÁ VRSTVA … (§5b)", ne barvu).
   - Aktivní nav lékaře = base .cv2-side a.on (accent-soft/accent, jako
     pacient) — .doc override ODSTRANĚN, třída .doc v markup zůstává (marker).
   - Tier ribbon = NEUTRÁLNÍ paper pruh (pokračování topbaru: card bg + sub
     text + hairline dole) — vizuálně ODLIŠNÝ od stavových ribbonů: SA view-as
     = zelený lime-wash .draft-banner (uppercase), demo = amber
     .cv2-demo-ribbon, impersonace = zelený pruh se jménem NAD amber.
     AA: #6E6E73 na #FFFFFF ≈ 5,0:1 (řeší dřívější nahlášenou odchylku
     fialové 3,9:1). Additivní, scoped .care-v2 — canon web i b2b nedotčené.
   Mobil dědí: .cv2-side.doc = týž element .cv2-side (off-canvas beze změny). */
.care-v2 .cv2-tier-doc {
  padding: 8px 24px; font-size: 12.5px; font-weight: 600;
  background: var(--cv2-card); color: var(--cv2-sub);
  border-bottom: 1px solid var(--cv2-line);
}

/* ── F2-1c Pacienti — seznam + detail (CARE_F2_DOCTOR_BRIEF.md §3.2) ────────
   Wireframe d-patients/d-patient VERBATIM doplňky; additivní, scoped .care-v2
   (pacientská zóna, canon web i b2b nedotčené).
   - .cv2-btn.doc: F2 RESKIN (CEO brief §1) — fialové overridy ODSTRANĚNY,
     odborné akce (eRecept, pozvánka, Detail ghost) dědí zelené base .cv2-btn
     / .cv2-btn.ghost (accent); .doc v markup zůstává jen jako sémantický
     marker odborné akce.
   - [aria-disabled] = inertní CTA (eRecept do F2-3): opacity .5 (precedens
     .cv2-lockitem), žádný pointer.
   - .cv2-back = „← Zpět na pacienty" (wireframe <a class="muted">: 13px --sub,
     bez podtržení; hover ztmavení, focus ring).
   - .cv2-mono = pozvánkový kód (strojový identifikátor, tabulární čtení). */
.care-v2 .cv2-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.care-v2 .cv2-back { font-size: 13px; color: var(--cv2-sub); text-decoration: none; }
.care-v2 .cv2-back:hover { color: var(--cv2-text); }
.care-v2 .cv2-back:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; border-radius: 4px; }
.care-v2 .cv2-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* ── F2-3 Nástroje — kalkulačka / checker / eRecept (CARE_F2_DOCTOR_BRIEF.md
   §3.4, wireframe d-tools) — additivní, scoped .care-v2; canon web, b2b i
   pacientská zóna nedotčené.
   - button.cv2-pill = interaktivní pill přepínač protokolu (wireframe .row:
     .pill.lock aktivní / .pill.mut ostatní jako <span> — tady button
     s aria-pressed): shodit UA chrome, vizuál pilulky VERBATIM dědí
     z .cv2-pill; focus ring currentColor (lock/mut si nese barvu sám).
   - .cv2-note ul = stop-pravidla uvnitř .cv2-note.law (odrážky ve 12px notě).
   - .cv2-note.warn = „bez shody" checker stav: zrcadlí .cv2-note.law pattern
     (border-left --cv2-warn + pill.warn wash #F6EEDD verbatim); text #7A5A1E
     = ztmavený warn (vzor law #5A4F85 vs --cv2-lock), na #F6EEDD ≈ 5,6:1 AA
     (pill.warn #B8862E by měl jen ~2,9:1 — známá nahlášená odchylka).
   - .cv2-ixrow = řádek výsledku checkeru (spread jméno→risk pill + nota):
     rytmus .cv2-table td (padding 10px, hairline --cv2-line, poslední bez).
   - .cv2-refs = reference: tlumené 13px odkazy s podtržením (rozlišitelnost
     bez barvy — a11y), hover ztmavení.
   - .field[hidden]/.consent[hidden] = JS skrývané ovládací prvky (den THC /
     checkbox na Rapid): author display grid/flex na .field/.consent přebíjí
     UA [hidden] pravidlo → explicitní display:none (specificita 0-2-0). */
.care-v2 button.cv2-pill { border: 0; font-family: inherit; cursor: pointer; }
.care-v2 button.cv2-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.care-v2 .cv2-note ul { margin: 4px 0 0; padding-left: 16px; }
.care-v2 .cv2-note.warn { border-left-color: var(--cv2-warn); background: #F6EEDD; border-radius: 0 8px 8px 0; color: #7A5A1E; }
.care-v2 .cv2-ixrow { padding: 10px 0; border-bottom: 1px solid var(--cv2-line); }
.care-v2 .cv2-ixrow:last-child { border-bottom: 0; }
.care-v2 .cv2-refs { list-style: none; margin: 0; padding: 0; }
.care-v2 .cv2-refs li { margin: 4px 0; }
.care-v2 .cv2-refs a { color: var(--cv2-sub); font-size: 13px; text-decoration: underline; }
.care-v2 .cv2-refs a:hover { color: var(--cv2-text); }
.care-v2 .field[hidden], .care-v2 .consent[hidden] { display: none; }

/* ── F2-2/DEMO — DEMO ribbon + odborný katalog (radar/bar/terp chips) ────────
   DEMO vrstva UI (SCHVÁLENO CEO 2026-07-04): additivní, scoped .care-v2 —
   canon web, b2b i ostatní portály nedotčené.
   - .cv2-demo-ribbon = nezaměnitelný pruh DEMO účtu POD topbarem (nad SA/tier
     ribbony), vzor .cv2-tier-doc (padding 8px 24px, 12.5px/600) v amber/warn
     tónu: wash #F6EEDD (pill.warn verbatim) + text #7A5A1E = ztmavený warn
     (PRECEDENS .cv2-note.warn: na #F6EEDD ≈ 5,6:1 AA; --cv2-warn text by měl
     jen ~2,9:1 — vědomá a11y odchylka od návrhu „--cv2-warn text").
   - .cv2-radar = terpen spider detailu (F2-2b PŘESTAVBA dle mockupu v2,
     care_product_detail_fable_mockup_v2.html — hodnoty verbatim, barvy cv2
     tokeny): mřížka 4 soustředné šestiúhelníky + osy --cv2-line; PŘEKRYTÉ
     profily šarží — .r-a = hlavní šarže A (plná --cv2-accent, fill 12 %,
     tečky vrcholů .dot-a), .r-b = srovnávací B (čárkovaná terakota --cv2-err,
     fill 8 %, dasharray 5 4); popisky os 12px --cv2-sub, dominantní terpen
     šarže A .t-dom (600, --cv2-text). Default render Jinja (A+B), přepínání
     šarží překresluje vanilla JS (žádný network/form/storage).
   (Pův. .cv2-terp chips + .cv2-bar stacked bar detailu ZRUŠENY přestavbou —
    hodnoty nesou .cv2-stats + .cv2-terprow tabulka níže; pravidla odstraněna.) */
.care-v2 .cv2-demo-ribbon {
  padding: 8px 24px; font-size: 12.5px; font-weight: 600;
  background: #F6EEDD; color: #7A5A1E;
}
.care-v2 .cv2-radar { display: block; max-width: 100%; }
.care-v2 .cv2-radar .grid { fill: none; stroke: var(--cv2-line); stroke-width: 1; }
.care-v2 .cv2-radar .r-a {
  fill: color-mix(in srgb, var(--cv2-accent) 12%, transparent);
  stroke: var(--cv2-accent); stroke-width: 2; stroke-linejoin: round;
}
.care-v2 .cv2-radar .r-b {
  fill: color-mix(in srgb, var(--cv2-err) 8%, transparent);
  stroke: var(--cv2-err); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round;
}
.care-v2 .cv2-radar .dot-a { fill: var(--cv2-accent); }
.care-v2 .cv2-radar text { fill: var(--cv2-sub); font-size: 12px; }
.care-v2 .cv2-radar text.t-dom { fill: var(--cv2-text); font-weight: 600; }

/* ── OBLAST A — .cv2-spark (aktivita mini-graf, wireframe .spark verbatim) ───
   Sloupcový mini-graf (čisté CSS/HTML, žádný JS): flex align-end, výška 60px,
   sloupce 14px radius 3px nahoře; výška sloupce = inline style height:% z dat.
   Base = zelená (wireframe d-home verbatim: accent-soft / .hi accent).
   F2 RESKIN (CEO brief §1): fialový .doc override ODSTRANĚN — lékařská zóna
   dědí zelenou base (= návrat k wireframe verbatim, dřívější vědomá fialová
   odchylka zrušena); .doc v markup zůstává jen jako marker zóny.
   Additivní, scoped .care-v2 — canon web, b2b nedotčené. */
.care-v2 .cv2-spark { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.care-v2 .cv2-spark i { display: block; width: 14px; background: var(--cv2-accent-soft); border-radius: 3px 3px 0 0; }
.care-v2 .cv2-spark i.hi { background: var(--cv2-accent); }

/* ── DEMO ENCYKLOPEDIE (rovina B katalogu) + obrázky katalogu (2026-07-04) ───
   Additivní, scoped .care-v2 — canon web/b2b nedotčené. Obsah = seed
   encyclopedia_data.py (compliance: „tradičně uváděno" + evidence grade
   s citací; grades TEXTOVĚ v .cv2-pill ok/warn/err — no-emoji pravidlo,
   zelená zóna po F2 RESKINU, žádná fialová).
   - a.cv2-pill = pill jako odkaz: shozené podtržení + focus ring
     currentColor (parita s button.cv2-pill). Generická CDS primitiva;
     pův. uživatel .cv2-tabs (záložky Katalog|Encyklopedie) ZRUŠEN — CEO:
     Encyklopedie = samostatná položka lékařského sidebaru (2026-07-04),
     pravidlo drženo pro budoucí pill-linky.
   - .cv2-photo = produktová/odrůdová fotka v kartě (140px cover, radius 10;
     vlastní GH foto, v demu ILUSTRATIVNĚ + DEMO caption); --hero = větší
     varianta na kartě odrůdy (260px, radius 12).
   - .cv2-thumb-img = foto thumb 48px cover (radius 12 = vzor .cv2-thumb);
     --lg = 72px (hlavička detailu, treatment „moje šarže").
   - .cv2-terp-icon = terpen SVG ikona (48px přehled; --sm 28px v chip
     odkazech, --lg 96px na kartě terpenu). Vlastní GH assety
     static/terpen-ikony/ (viewBox 48).
   - .cv2-terplink = chip odkaz s ikonou (karta odrůdy → karta terpenu).
     (Pův. .cv2-terp a chips detailu zrušeny F2-2b přestavbou — provázání na
      encyklopedii nese .cv2-terprow .t-name a v terp tabulce.)
   - .cv2-enclink = tichý text odkaz do encyklopedie (13px accent, vzor
     .cv2-back typografie). */
.care-v2 a.cv2-pill { text-decoration: none; }
.care-v2 a.cv2-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.care-v2 .cv2-photo { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: 10px; }
.care-v2 .cv2-photo--hero { height: 260px; border-radius: 12px; }
.care-v2 .cv2-thumb-img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.care-v2 .cv2-thumb-img--lg { width: 72px; height: 72px; }
.care-v2 .cv2-terp-icon { display: block; width: 48px; height: 48px; flex-shrink: 0; }
.care-v2 .cv2-terp-icon--sm { width: 28px; height: 28px; }
.care-v2 .cv2-terp-icon--lg { width: 96px; height: 96px; }
.care-v2 .cv2-terplink {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cv2-bg); border-radius: 10px; padding: 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--cv2-text); text-decoration: none;
}
.care-v2 .cv2-terplink:hover { background: var(--cv2-accent-soft); color: var(--cv2-accent); }
.care-v2 .cv2-terplink:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; }
.care-v2 .cv2-enclink { font-size: 13px; font-weight: 600; color: var(--cv2-accent); text-decoration: none; }
.care-v2 .cv2-enclink:hover { text-decoration: underline; }
.care-v2 .cv2-enclink:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; border-radius: 4px; }

/* ── F2-2b — detail produktu dle NORTH STAR mockupu v2 (2026-07-04,
   content_src/care_product_detail_fable_mockup_v2.html — hodnoty VERBATIM,
   barvy přemapované na cv2 tokeny: --accent→--cv2-accent, --accent-soft→
   --cv2-accent-soft, --bg→--cv2-bg, #fff karta→--cv2-card, --danger→--cv2-err,
   --danger-soft→--cv2-err-soft, --text/--text-sec/--line→cv2). Additivní,
   scoped .care-v2 — canon web/b2b/pacientská zóna nedotčené.
   - .cv2-crumb = breadcrumb (Odborný katalog / {name}).
   - .cv2-head + .cv2-chips/.cv2-chip = h1 řádek s DEMO tagem, chemotyp/
     dominance/forma chipy, §5b .cv2-zone-note vpravo.
   - .cv2-batch-chip = interaktivní výběr šarží (vanilla JS, žádný network/
     form/storage): .sel-a = hlavní šarže A (plná accent pilulka + bílý
     swatch), .sel-b = srovnávací B (čárkovaná terakota na --cv2-err-soft),
     .idle = bílá. Role labels „aktuální/předchozí" v .b-role.
   - .cv2-stats/.cv2-stat = klíčová čísla — THC VŽDY PRVNÍ + .primary
     (accent-soft + accent hodnota); .s-compare = inline delta vs B
     („0,4 % #D0139 · −0,1 p. b." — .cmp-b terakota). Single režim
     (.cv2-stats.single) compare řádky skrývá.
   - .cv2-profile-grid = radar+tabulka | pravý sloupec 320px (foto šarže A
     .cv2-lotphoto s .ph-badge, meta list, COA tlačítka per šarže — A plné,
     ostatní .secondary ghost; full-width v úzkém sloupci = mockup verbatim,
     vědomá výjimka z natural-width pilulek kánonu uvnitř .care-v2).
   - .cv2-terprow = inline porovnání terpenů (název|A|B|Δ p. b.; dominantní
     řádek A .dominant accent-soft; hlavička .h-a zeleně / .h-b terakotou;
     .t-name a = decentní odkaz na encyklopedickou kartu terpenu).
     .cv2-terptable.single skrývá B/Δ sloupce.
   - .cv2-repro/.cv2-compliance = repro nota + compliance text (mockup znění,
     i18n cat_repro_*/cat_detail_note). */
.care-v2 .cv2-crumb { font-size: 13px; color: var(--cv2-sub); margin-bottom: 16px; }
.care-v2 .cv2-crumb a { color: var(--cv2-sub); text-decoration: none; }
.care-v2 .cv2-crumb a:hover { color: var(--cv2-accent); }
.care-v2 .cv2-crumb a:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; border-radius: 4px; }
.care-v2 .cv2-crumb .sep { margin: 0 8px; color: var(--cv2-line); }
.care-v2 .cv2-crumb .current { color: var(--cv2-text); font-weight: 500; }
/* position:static = neutralizace web-kánonu `header{position:fixed;top:0}`
   (greenhive.css sticky top bar cílí HOLÝ element — sekční <header> v app
   shellu jinak uletí na vršek viewportu přes topbar/ribbony) */
.care-v2 .cv2-head { position: static; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.care-v2 .cv2-head h1 { margin: 0; }
.care-v2 .cv2-strain-tag { font-size: 13px; font-weight: 500; color: var(--cv2-sub); margin-left: 10px; }
.care-v2 .cv2-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.care-v2 .cv2-chip {
  font-size: 12px; font-weight: 500; color: var(--cv2-accent);
  background: var(--cv2-accent-soft); border-radius: 999px; padding: 4px 12px;
}
.care-v2 .cv2-chip.neutral { color: var(--cv2-sub); background: var(--cv2-card); border: 1px solid var(--cv2-line); }
.care-v2 .cv2-zone-note { font-size: 12px; color: var(--cv2-sub); text-align: right; white-space: nowrap; padding-top: 6px; }
.care-v2 .cv2-zone-note .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cv2-accent); margin-right: 6px; vertical-align: 1px; }
.care-v2 .cv2-card--lg { padding: 32px; }
.care-v2 .cv2-card-sub { font-size: 12px; color: var(--cv2-sub); margin-top: 2px; }
.care-v2 .cv2-seclabel {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cv2-sub); margin-bottom: 12px;
}
.care-v2 .cv2-divider { border: none; border-top: 1px solid var(--cv2-line); margin: 28px 0; }
.care-v2 .cv2-batchbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.care-v2 .cv2-batchbar .bb-label { font-size: 12px; font-weight: 600; color: var(--cv2-sub); }
.care-v2 .cv2-batch-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 8px 16px;
  background: var(--cv2-card); border: 1px solid var(--cv2-line); color: var(--cv2-sub);
}
.care-v2 .cv2-batch-chip:hover { border-color: var(--cv2-accent); }
.care-v2 .cv2-batch-chip:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; }
.care-v2 .cv2-batch-chip .swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1.5px solid transparent; }
.care-v2 .cv2-batch-chip.idle .swatch { background: var(--cv2-line); }
.care-v2 .cv2-batch-chip.sel-a { background: var(--cv2-accent); border-color: var(--cv2-accent); color: #FFFFFF; }
.care-v2 .cv2-batch-chip.sel-a .swatch { background: #FFFFFF; }
.care-v2 .cv2-batch-chip.sel-b { background: var(--cv2-err-soft); border: 1.5px dashed var(--cv2-err); color: var(--cv2-err); }
.care-v2 .cv2-batch-chip.sel-b .swatch { background: transparent; border-color: var(--cv2-err); border-style: dashed; }
.care-v2 .cv2-batch-chip .b-role { font-size: 11px; font-weight: 500; opacity: .75; }
.care-v2 .cv2-batch-hint { font-size: 12px; color: var(--cv2-sub); }
.care-v2 .cv2-batch-hint strong { color: var(--cv2-text); font-weight: 600; }
.care-v2 .cv2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.care-v2 .cv2-stat { background: var(--cv2-bg); border-radius: 12px; padding: 16px 20px; }
.care-v2 .cv2-stat.primary { background: var(--cv2-accent-soft); }
.care-v2 .cv2-stat .s-label { font-size: 12px; font-weight: 600; color: var(--cv2-sub); }
.care-v2 .cv2-stat .s-value { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.care-v2 .cv2-stat.primary .s-value { color: var(--cv2-accent); }
.care-v2 .cv2-stat .s-value .s-unit { font-size: 14px; font-weight: 600; color: var(--cv2-sub); margin-left: 2px; }
.care-v2 .cv2-stat .s-compare { font-size: 12px; color: var(--cv2-sub); margin-top: 6px; font-variant-numeric: tabular-nums; }
.care-v2 .cv2-stat .s-compare .cmp-b { color: var(--cv2-err); font-weight: 600; }
.care-v2 .cv2-stat .s-compare .cmp-delta { color: var(--cv2-sub); }
.care-v2 .cv2-stats.single .s-compare { display: none; }
.care-v2 .cv2-profile-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.care-v2 .cv2-legend { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--cv2-sub); }
.care-v2 .cv2-legend .lg { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
/* [hidden] musí vyhrát nad display:inline-flex (single režim skrývá legendu B
   atributem — bez tohoto pravidla autorský display přebije UA [hidden]) */
.care-v2 .cv2-legend .lg[hidden] { display: none; }
.care-v2 .cv2-legend .lg-line { width: 22px; height: 0; border-top: 2.5px solid var(--cv2-accent); border-radius: 2px; }
.care-v2 .cv2-legend .lg-line.dash { border-top-style: dashed; border-top-color: var(--cv2-err); }
.care-v2 .cv2-radar-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.care-v2 .cv2-radar-wrap svg { flex: none; }
.care-v2 .cv2-terptable { flex: 1 1 240px; min-width: 0; margin-top: 8px; }
.care-v2 .cv2-terprow {
  display: grid; grid-template-columns: 1fr 58px 58px 62px; gap: 8px; align-items: center;
  font-size: 12px; padding: 7px 12px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.care-v2 .cv2-terprow.head { color: var(--cv2-sub); font-size: 11px; font-weight: 600; padding-bottom: 4px; padding-top: 0; }
.care-v2 .cv2-terprow.head .h-a { color: var(--cv2-accent); }
.care-v2 .cv2-terprow.head .h-b { color: var(--cv2-err); }
.care-v2 .cv2-terprow:not(.head):nth-child(even) { background: var(--cv2-bg); }
.care-v2 .cv2-terprow .t-name { font-weight: 500; }
.care-v2 .cv2-terprow .t-name a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--cv2-line); text-underline-offset: 2px;
}
.care-v2 .cv2-terprow .t-name a:hover { color: var(--cv2-accent); text-decoration-color: var(--cv2-accent); }
.care-v2 .cv2-terprow .t-name a:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; border-radius: 4px; }
.care-v2 .cv2-terprow .t-a { font-weight: 600; color: var(--cv2-text); text-align: right; }
.care-v2 .cv2-terprow .t-b { color: var(--cv2-sub); text-align: right; }
.care-v2 .cv2-terprow .t-d { color: var(--cv2-sub); text-align: right; font-size: 11px; }
.care-v2 .cv2-terprow.dominant { background: var(--cv2-accent-soft); }
.care-v2 .cv2-terprow.dominant .t-a { color: var(--cv2-accent); }
.care-v2 .cv2-terptable.single .cv2-terprow { grid-template-columns: 1fr 58px; }
.care-v2 .cv2-terptable.single .t-b, .care-v2 .cv2-terptable.single .t-d { display: none; }
.care-v2 .cv2-radar-scale { font-size: 11px; color: var(--cv2-sub); margin-top: 12px; }
.care-v2 .cv2-lotphoto {
  position: relative; border-radius: 12px; overflow: hidden; margin: 0;
  border: 1px solid var(--cv2-line); height: 210px;
}
.care-v2 .cv2-lotphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.care-v2 .cv2-lotphoto .ph-badge {
  position: absolute; top: 12px; left: 12px;
  background: color-mix(in srgb, var(--cv2-card) 90%, transparent);
  border: 1px solid var(--cv2-line); border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--cv2-text); padding: 4px 10px;
}
.care-v2 .cv2-metalist { margin-top: 20px; font-size: 12px; }
.care-v2 .cv2-metalist .m-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cv2-line); }
.care-v2 .cv2-metalist .m-row:last-child { border-bottom: none; }
.care-v2 .cv2-metalist .m-key { color: var(--cv2-sub); }
.care-v2 .cv2-metalist .m-val { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.care-v2 .cv2-coa-group { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.care-v2 .cv2-coa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cv2-accent); color: #FFFFFF; border: 1px solid var(--cv2-accent);
  cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
  border-radius: 10px; padding: 10px 18px; width: 100%; text-decoration: none;
}
.care-v2 .cv2-coa-btn:hover { background: color-mix(in srgb, var(--cv2-accent) 80%, var(--cv2-text)); }
.care-v2 .cv2-coa-btn:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; }
.care-v2 .cv2-coa-btn svg { flex: none; }
.care-v2 .cv2-coa-btn.secondary { background: var(--cv2-card); color: var(--cv2-accent); border: 1px solid var(--cv2-line); }
.care-v2 .cv2-coa-btn.secondary:hover { background: var(--cv2-card); border-color: var(--cv2-accent); }
.care-v2 .cv2-repro {
  background: var(--cv2-accent-soft); border-radius: 12px;
  padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start;
}
.care-v2 .cv2-repro svg { flex: none; margin-top: 1px; }
.care-v2 .cv2-repro .r-title { font-size: 13px; font-weight: 600; color: var(--cv2-accent); }
.care-v2 .cv2-repro p { font-size: 12px; color: var(--cv2-text); margin: 4px 0 0; max-width: 78ch; }
.care-v2 .cv2-compliance { font-size: 11px; color: var(--cv2-sub); margin: 20px 0 0; max-width: 92ch; }
/* responsive: pravý sloupec stackuje pod radar dřív, než by 320px sloupec
   rozdrtil radar+tabulku (sidebar 224 + main padding); telefon = plný stack,
   stats 2×2, hlavička pod sebe (zone-note vlevo, bez nowrap) */
@media (max-width: 1100px) {
  .care-v2 .cv2-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .care-v2 .cv2-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .care-v2 .cv2-head { flex-direction: column; gap: 10px; }
  .care-v2 .cv2-zone-note { text-align: left; white-space: normal; padding-top: 0; }
  .care-v2 .cv2-card--lg { padding: 20px; }
  .care-v2 .cv2-radar-wrap svg { margin: 0 auto; }
}

/* ── PB-1 — pacientský profil VLASTNÍ vydané šarže + tisk (2026-07-04).
   Reuse lékařské F2-2b detail karty SCOPED na jednu vydanou šarži (UST-27
   „již léčený pacient"); additivní, scoped .care-v2 — canon i lékařská
   zóna nedotčené.
   - .cv2-stat.verify = 4. slot klíčových čísel: MÍSTO 4. metriky odznak
     „Laboratorně ověřená šarže" (canon .cv2-pill.ok) + malá nota .v-note
     (COA drží lékař — pacient raw PDF nedostává). Flex column, pill nahoře.
   - .cv2-print-btn = tiskové CTA v pravém sloupci profilu: modifikátor na
     .cv2-btn.ghost — full-width v úzkém 320px sloupci (týž precedens jako
     .cv2-coa-btn = vědomá výjimka z natural-width uvnitř .care-v2);
     zároveň JEDINÝ hook pro skrytí v tisku.
   - .cv2-print-footer = tisková patička (pprof_print_footer + DEMO kontext):
     na obrazovce display:none, existuje JEN na papíře.
   - @media print (scoped .care-v2): chrome pryč (topbar, VŠECHNY ribbony —
     demo/SA/tier, sidebar+scrim+hamburger, foot, back link, print button),
     karta plná šířka na bílé (shell block, main bez limitu/paddingu),
     stíny pryč (karta jen hairline --cv2-line), foto malé ~120px; radar +
     terp tabulka + meta + compliance zůstávají. Pozn.: #FFFFFF je uvnitř
     .care-v2 sankcionované (DoD „CARE APP v2 výjimka" — karta #FFFFFF). */
.care-v2 .cv2-stat.verify { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.care-v2 .cv2-stat.verify .v-note { font-size: 11px; color: var(--cv2-sub); line-height: 1.45; }
.care-v2 .cv2-print-btn { display: block; width: 100%; text-align: center; margin-top: 20px; }
.care-v2 .cv2-print-footer { display: none; }
@media print {
  body.care-v2 { background: #FFFFFF; }
  .care-v2 .cv2-topbar, .care-v2 .cv2-demo-ribbon, .care-v2 .cv2-ribbon-slot,
  .care-v2 .cv2-tier-doc, .care-v2 .cv2-side, .care-v2 .cv2-scrim,
  .care-v2 .cv2-menu-btn, .care-v2 .cv2-foot, .care-v2 .cv2-back,
  .care-v2 .cv2-print-btn { display: none !important; }
  .care-v2 .cv2-shell { display: block; }
  .care-v2 .cv2-main { max-width: none; padding: 0; }
  .care-v2 .cv2-card { box-shadow: none; border: 1px solid var(--cv2-line); }
  /* PB-1 (CEO): tisk profilu = ČISTÁ 1 STRANA. Radar blok se nezalamuje
     (break-inside) a celý obsah se KOMPRIMUJE, aby se hlavička + profilová
     karta + compliance vešly na jednu A4 (proto menší spacing/radar/foto
     a 2sloupcový grid i v tisku). */
  .care-v2 .cv2-radar-wrap, .care-v2 .cv2-stats,
  .care-v2 .cv2-meta-list { break-inside: avoid; page-break-inside: avoid; }
  .care-v2 .cv2-card { padding: 14px 18px; margin-bottom: 10px; }
  .care-v2 .cv2-card + .cv2-card { margin-top: 10px; }
  .care-v2 h1 { font-size: 18px; margin-bottom: 2px; }
  .care-v2 .cv2-stats { gap: 8px; margin-top: 10px; }
  .care-v2 .cv2-stat { padding: 8px 12px; }
  .care-v2 .cv2-stat .s-value { font-size: 18px; }
  .care-v2 .cv2-divider { margin: 12px 0; }
  .care-v2 .cv2-profile-grid { grid-template-columns: 1fr 200px; gap: 16px; }
  .care-v2 .cv2-radar-wrap svg { width: 220px; height: auto; }
  .care-v2 .cv2-terprow { padding: 3px 8px; }
  .care-v2 .cv2-lotphoto { height: 90px; max-width: 140px; }
  .care-v2 .cv2-meta-list .m-row { padding: 4px 0; }
  .care-v2 .cv2-note.law { padding: 6px 10px; margin-top: 8px; }
  .care-v2 .cv2-print-footer {
    display: block; margin-top: 16px; padding-top: 8px;
    border-top: 1px solid var(--cv2-line);
    font-size: 11px; color: var(--cv2-sub);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SALES UI KOLO 2 — tři CDS idiomy (sign-off Michal 2026-07-07, mock v14).
   Cross-portál: platí pro všechny portály (sales teď, ostatní až přijde kolo).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (1) ÚČET-DROPDOWN v topbaru ────────────────────────────────────────────
   PRAVIDLO (rozšířeno Michal 2026-07-18, jednotné menu napříč portály):
   identita a akce účtu VŽDY v dropdownu pod avatarem v topbaru, NIKDY v obsahu
   stránky. 3 sekce: identita (.cv2-acct-info: .nm jméno · .em e-mail · .meta
   role) · akce (Nastavení účtu → /ucet, Přihlásit jiný účet) · superadmin
   Ukončit náhled + oddělovač + Odhlásit se (.danger) dole. Kanonický markup =
   partials/_acct_menu.html. Iniciály avataru ze JMÉNA, fallback e-mail.
   Avatar = tlačítko (.cv2-avatar[type=button]); menu = paper karta.
   A11y: aria-haspopup/expanded, Esc zavře, klik-mimo zavře (řeší JS stránky). */
.care-v2 .cv2-acct { position: relative; margin-left: auto; }
.care-v2 .cv2-acct > .cv2-avatar { margin-left: 0; border: 0; cursor: pointer; }
.care-v2 .cv2-acct > .cv2-avatar:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; }
.care-v2 .cv2-acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 248px;
  background: var(--cv2-card); border: 1px solid var(--cv2-line); border-radius: 14px;
  box-shadow: var(--cv2-shadow-pop); padding: 8px;
}
.care-v2 .cv2-acct-menu[hidden] { display: none; }
.care-v2 .cv2-acct-info { padding: 10px 12px 12px; border-bottom: 1px solid var(--cv2-line); margin-bottom: 6px; }
.care-v2 .cv2-acct-info .nm { font-weight: 700; font-size: 14.5px; color: var(--cv2-text); }
.care-v2 .cv2-acct-info .nm:empty { display: none; }
.care-v2 .cv2-acct-info .em { font-weight: 600; font-size: 14px; color: var(--cv2-text); word-break: break-all; }
.care-v2 .cv2-acct-info .nm + .em { font-weight: 500; font-size: 13px; color: var(--cv2-sub); margin-top: 2px; }
.care-v2 .cv2-acct-info .nm:empty + .em { font-weight: 600; font-size: 14px; color: var(--cv2-text); margin-top: 0; }
.care-v2 .cv2-acct-info .meta { font-size: 12.5px; color: var(--cv2-sub); margin-top: 4px; line-height: 1.5; }
.care-v2 .cv2-acct-menu a, .care-v2 .cv2-acct-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 0; border-radius: 9px; background: none; text-align: left;
  color: var(--cv2-text); text-decoration: none; font: inherit; font-size: 14px; cursor: pointer;
}
.care-v2 .cv2-acct-menu a:hover, .care-v2 .cv2-acct-menu button:hover { background: var(--cv2-accent-soft); color: var(--cv2-accent); }
.care-v2 .cv2-acct-menu a:focus-visible, .care-v2 .cv2-acct-menu button:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: -2px; }
.care-v2 .cv2-acct-menu a svg, .care-v2 .cv2-acct-menu button svg {
  width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.care-v2 .cv2-acct-menu .danger:hover { background: #F5E7E3; color: var(--cv2-err); }
.care-v2 .cv2-acct-sep { height: 1px; background: var(--cv2-line); margin: 6px 4px; }
/* v2 (Michal 19.7.): jazykový segment v účtovém menu — inline CS · EN · IT;
   topbar switcher se ruší (login stránky = výjimka, patička login karty) */
.care-v2 .cv2-acct-lang { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 12px; }
.care-v2 .cv2-acct-lang .lbl { font-size: 12px; font-weight: 600; color: var(--cv2-sub); }
.care-v2 .cv2-lang-seg { display: inline-flex; align-items: center; gap: 2px; }
.care-v2 .cv2-lang-seg button, .care-v2 .cv2-lang-seg a { appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none;
  color: var(--cv2-sub); padding: 4px 7px; border-radius: 7px; min-height: 0; }
.care-v2 .cv2-lang-seg button:hover, .care-v2 .cv2-lang-seg a:hover { color: var(--cv2-text); background: var(--cv2-bg); }
.care-v2 .cv2-lang-seg button.on, .care-v2 .cv2-lang-seg a.on { color: var(--cv2-accent); background: var(--cv2-accent-soft); }
.care-v2 .cv2-lang-seg .sep { color: var(--cv2-line); font-size: 11px; }

/* ── ÚČET — /ucet stránka (jednotné účtové menu, Michal 2026-07-18) ──────────
   Nastavení účtu (zobrazované jméno / změna hesla / jazyk) — sdílený vzhled
   polí napříč portály (sales, backoffice, care). Karta = běžná .cv2-card. */
.care-v2 .cv2-acct-form { display: grid; gap: 12px; max-width: 460px; }
.care-v2 .cv2-acct-form label { font-size: 13px; font-weight: 600; color: var(--cv2-sub); display: grid; gap: 6px; }
.care-v2 .cv2-acct-form input {
  font: inherit; font-size: 15px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--cv2-line); border-radius: 10px; background: var(--cv2-card);
  color: var(--cv2-text); width: 100%; box-sizing: border-box;
}
.care-v2 .cv2-acct-form input:focus { outline: none; border-color: var(--cv2-accent); box-shadow: 0 0 0 3px var(--cv2-accent-soft); }
.care-v2 .cv2-acct-form .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.care-v2 .cv2-form-msg { font-size: 13.5px; margin-top: 8px; }
.care-v2 .cv2-form-msg.ok { color: var(--cv2-ok); }
.care-v2 .cv2-form-msg.err { color: var(--cv2-err); }
.care-v2 .cv2-form-msg:empty { display: none; }

/* ── (2) WIZARD TABY — záložky uvnitř obrazovky = UNDERLINE aktivní ──────────
   PRAVIDLO: obecné záložky (víc řezů TÉHOŽ obsahu) = underline aktivní (idiom
   registrace), NE pilulky (ty jsou pro disjunktní volby/filtry), NE stohované
   sekce. Sidebar zůstává navigací MEZI obrazovkami. */
.care-v2 .wiz-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cv2-line); margin: 0 0 18px; }
.care-v2 .wiz-tabs button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 11px 14px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--cv2-sub); cursor: pointer; min-height: 44px;
}
.care-v2 .wiz-tabs button:hover { color: var(--cv2-text); }
.care-v2 .wiz-tabs button.on { color: var(--cv2-accent); border-bottom-color: var(--cv2-accent); }
.care-v2 .wiz-tabs button:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; border-radius: 6px; }

/* ── (3) PROCESS FLOW — LINEÁRNÍ STAVOVÉ KROKY = karty se šipkami ─────────────
   PRAVIDLO (Michal 2026-07-07): JEN pro LINEÁRNÍ stavový postup — sledování
   objednávky (potvrzeno → baleno → expedováno) a interní výrobní obrazovky.
   NIKDY interní VÝROBNÍ fáze vůči obchodníkovi: proces je nelineární (CLEAN se
   vrací na sklad bez balení, balení je samostatná větev) → fáze lžou o pořadí/
   čase a odhalují know-how. Karty stavů vedle sebe + šipky, volitelný rozklik
   detailu pod tokem. Mobil: vertikálně (šipky dolů). */
.care-v2 .flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 0 8px; }
.care-v2 .flow-step {
  flex: 1 1 0; min-width: 160px; background: var(--cv2-card); border: 1.5px solid var(--cv2-line);
  border-radius: 14px; padding: 16px; cursor: pointer; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, box-shadow .12s;
}
.care-v2 .flow-step:hover { border-color: var(--cv2-accent-soft); }
.care-v2 .flow-step.on { border-color: var(--cv2-accent); box-shadow: 0 0 0 3px var(--cv2-accent-soft); }
.care-v2 .flow-step:focus-visible { outline: 2px solid var(--cv2-accent); outline-offset: 2px; }
.care-v2 .flow-step .ph { font-size: 13px; font-weight: 600; color: var(--cv2-sub); }
.care-v2 .flow-step.on .ph { color: var(--cv2-accent); }
.care-v2 .flow-step .kg { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cv2-text); }
.care-v2 .flow-step .kg .u { font-size: 14px; color: var(--cv2-sub); font-weight: 600; }
.care-v2 .flow-step .lots { font-size: 12.5px; color: var(--cv2-sub); }
.care-v2 .flow-arrow { flex: 0 0 auto; align-self: center; display: flex; align-items: center; padding: 0 6px; }
.care-v2 .flow-arrow svg { width: 24px; height: 24px; fill: none; stroke: var(--cv2-sub); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
@media (max-width: 700px) {
  .care-v2 .flow { flex-direction: column; }
  .care-v2 .flow-step { min-width: 0; }
  .care-v2 .flow-arrow { transform: rotate(90deg); padding: 4px 0; }
}