/* ────────────────────────────────────────────────────────────────────────── CARE PORTÁL app-shell — JEDINÁ care-specifická vrstva NAD sdíleným greenhive.css (kanonický brand). Web nemá dashboard/app-shell; tady jen to, co brand lib nepokrývá. VÝHRADNĚ z BRAND tokenů — žádné nové barvy/ fonty/radiusy. Brand komponenty (header/footer/karty/tlačítka/.field/ .reg-header/.page-bg) = greenhive.css, NE zde. ────────────────────────── */ .care-top{display:flex;align-items:center;justify-content:space-between; padding:.9rem clamp(16px,5vw,40px);background:var(--card-bg-header-solid); border-bottom:1px solid color-mix(in srgb,var(--gh-light-green) 30%,transparent)} .care-top .logo img{height:30px;width:auto;display:block} .care-top .right{display:flex;align-items:center;gap:1.1rem;font-size:.85rem} .care-top .right a{color:var(--ink-faint);text-decoration:none} .care-top .right a:hover{color:var(--brand)} .care-wrap{width:min(1080px,92vw);margin:0 auto;padding:clamp(2rem,5vw,4rem) 0 5rem;position:relative;z-index:1} .care-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:1.4rem;align-items:stretch} /* CARE F1: 4-up varianta (rychlé odkazy na dashboardu) — užší minmax, ať se 4 dlaždice vejdou do 1080px kontejneru bez osiřelé dlaždice na druhém řádku; mobil stack drží */ .care-grid--4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .care-grid .feature-card{width:100%;max-width:none;height:100%} /* CTA dole, tlačítka NATURAL-width pilulky (NE full-width stretch) — přesný web .btn sizing */ .feature-card .stack{margin-top:auto;width:100%;align-items:center} /* CTA-with-icon (ikona uvnitř .btn-solid/.btn-ghost) = shared/components.css (canon) */ .care-top .right .key-link{display:inline-flex;align-items:center;gap:.38rem} .care-top .right .key-link svg{width:16px;height:16px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .care-foot{border-top:1px solid var(--line);background:var(--card-bg-header-solid); padding:1.8rem clamp(16px,5vw,40px);color:var(--ink-faint);font-size:.82rem; display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;position:relative;z-index:1} .kv{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0; border-bottom:1px solid color-mix(in srgb,var(--gh-light-green) 18%,transparent)} .kv:last-child{border-bottom:0} .kv .k{color:var(--ink-faint)} .badge-soon{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--gh-light-green) 22%,transparent); border-radius:999px;padding:.25rem .7rem} .care-form{display:grid;gap:1rem;max-width:760px;margin:1.2rem auto 0; background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:var(--card-line);border-radius:var(--radius-card);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--card-shadow)} .care-2up{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media (max-width:560px){.care-2up{grid-template-columns:1fr}} .errlist{list-style:none;margin:.4rem 0 0;padding:0;max-width:760px;margin-left:auto;margin-right:auto} /* R4a: chybový text = sankcionovaná --danger terakota (components.css :root, BRAND_COLORS.md „Funkční danger tón"); stará ad-hoc červená zakázaná */ .errlist li{color:var(--danger);font-size:.85rem;margin:.2rem 0} .feature-card h2,.care-card-title{font-family:var(--font-display);font-weight:450; font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--ink);margin:.2rem 0;letter-spacing:-.01em} .stack{display:flex;flex-direction:column;gap:.7rem;align-items:center;width:100%} /* R3: nowrap + shrink labelu — dlouhý label (čl. 9 souhlas) se láme UVNITŘ, akce (Odvolat) drží vpravo na řádku; wrap posílal button vlevo pod label */ .row-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:nowrap} .row-between .k{min-width:0;flex:1 1 auto} .row-between form{flex:0 0 auto} .mt2{margin-top:1.4rem} /* ── care-role-login (FOCUS v3): rozcestník + register retrofit — CARE-ONLY layout glue nad sdílenými komponentami (.ptype-tile/.card-head/.focus-note/.wiz-steps = shared components.css; sem jen to, co je care-specifické). Jen brand tokeny. ── */ /* rozcestník: střední karta — .auth-card-narrow (520px) je pro 2 dlaždice těsná, wizard --wide (960px) zbytečně velká; stejný margin rytmus jako auth-card-narrow */ .portal-card--login.gate-card{width:min(720px,100%);margin:clamp(1.2rem,2.4vw,1.8rem) auto 0} /* 2 role dlaždice vedle sebe (b2b canon .ptype-grid = 3-up); mobil ≤760px stack řeší canon media na .ptype-grid; dvojitá třída = vyšší specificita než canon (components.css se linkuje až ZA care-app.css) */ .ptype-grid.ptype-grid--2{grid-template-columns:1fr 1fr} /* mobil stack: dvojitá třída přebíjí i canon media (.ptype-grid, 0-1-0) → vlastní media */ @media (max-width:760px){.ptype-grid.ptype-grid--2{grid-template-columns:1fr}} /* dlaždice jako PŘÍMÝ odkaz (b2b má