/* ============================================================
   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)}
/* bez globálního headeru posadit obsah výš — živý web: body.focus-mode
   .subpage-inner{padding-top:clamp(1.2rem,3vw,2.4rem)}; pořadí za --compact → vyhrává */
.care-wrap--focus{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; }