:root {
  --gutter: calc(var(--app-space-4) + var(--app-space-1));
  --maxw: 1120px;
  --rhythm: calc(var(--app-space-6) * 2);
  --control-edge: color-mix(in srgb, var(--void) 46%, transparent);
  --focus-hair: color-mix(in srgb, var(--void) 55%, transparent);
  --focus-gap: var(--ground);
  --nav-h: 64px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ground);
}
@media (min-width: 768px) { :root { --gutter: var(--app-space-6); --rhythm: calc(var(--app-space-6) * 3); } }
@media (min-width: 1200px) { :root { --gutter: var(--app-space-7); --rhythm: calc(var(--app-space-6) * 4); } }
@media (min-width: 1600px) { :root { --maxw: 1280px; --rhythm: calc(var(--app-space-6) * 4); } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
.skip-link { position: absolute; left: var(--app-space-3); top: -200px; z-index: 100; padding: var(--app-space-2) var(--app-space-4); border-radius: var(--radius-pill); background: var(--white); color: var(--burgundy); font-weight: 600; }
.skip-link:focus-visible { top: var(--app-space-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: var(--app-body-size); line-height: var(--app-body-line); font-weight: var(--app-body-weight); letter-spacing: var(--app-body-tracking); color: var(--ink); background: var(--ground); }
body { font-optical-sizing: auto; font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
::selection { background: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); }
main { flex: 1; padding-top: calc(var(--app-space-7) * 2); }
a { color: var(--ink); text-underline-offset: 3px; }
button, input { font: inherit; letter-spacing: inherit; }
h1, h2 { color: var(--ink); margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: clamp(var(--app-display-size), 4.4vw, calc(var(--app-display-size) * 1.6)); line-height: var(--app-display-line); font-weight: var(--app-display-weight); letter-spacing: var(--app-display-tracking); }
h2 { font-size: var(--app-headline-size); line-height: var(--app-headline-line); font-weight: var(--app-headline-weight); letter-spacing: var(--app-headline-tracking); margin-bottom: var(--app-space-4); }
p { margin: 0 0 var(--app-space-4); }
strong { font-weight: var(--app-label-weight); }
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.icon { display: inline-flex; width: 24px; height: 24px; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; }

/* Fokus */
summary:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-gap), 0 0 0 6px var(--focus-hair);
}
[data-theme="dark"] { --focus-gap: var(--ground); --focus-hair: transparent; }

/* WebNav */
.site-header { position: fixed; top: var(--app-space-4); inset-inline: 0; z-index: 50; pointer-events: none; }
.nav-bar { pointer-events: auto; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--app-space-4); padding: 0 var(--app-space-3) 0 var(--app-space-5); background: var(--ground); border: 1px solid var(--control-edge); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); transition: height .2s ease; }
.nav-bar { background: color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter: blur(var(--blur-glass)); transition: height 420ms cubic-bezier(.22, 1, .36, 1), padding 420ms cubic-bezier(.22, 1, .36, 1); }
.site-header.is-compact { --nav-h: 52px; }
.brand { display: inline-flex; align-items: center; min-height: var(--app-tap); font-size: var(--app-headline-size); line-height: var(--app-headline-line); font-weight: var(--app-headline-weight); letter-spacing: var(--app-headline-tracking); color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-desktop { display: none; }
.nav-list, .menu-list { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: var(--app-space-2); }
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: var(--app-tap); padding: 0 var(--app-space-4); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); font-weight: var(--app-caption-weight); letter-spacing: var(--app-body-sm-tracking); color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: var(--radius-pill); }
.nav-link:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: var(--app-space-4); right: var(--app-space-4); bottom: var(--app-space-2); height: 2px; background: var(--ink); }
body:has(:focus-visible) .nav-link[aria-current="page"]::after,
body:has(.notice-warning) .nav-link[aria-current="page"]::after { background: var(--ink); }
.menu-toggle, .menu-close { display: inline-flex; align-items: center; justify-content: center; width: var(--app-tap); height: var(--app-tap); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; }
.menu-toggle:hover, .menu-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.menu-overlay { position: fixed; inset: 0; z-index: 100; background: var(--ground); color: var(--ink); padding: var(--app-space-4) var(--gutter) var(--app-space-6); overflow-y: auto; }
.menu-overlay { background: linear-gradient(155deg, var(--void), var(--cocoa)); animation: menu-reveal 520ms cubic-bezier(.22, 1, .36, 1); }
@keyframes menu-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.menu-close { position: absolute; top: var(--app-space-4); right: var(--gutter); }
.menu-list { padding-top: calc(var(--app-space-7) * 2); display: grid; gap: var(--app-space-2); }
.menu-link { display: flex; align-items: center; min-height: 52px; padding: var(--app-space-2) 0; font-size: var(--app-title-size); line-height: var(--app-title-line); font-weight: var(--app-title-weight); letter-spacing: var(--app-title-tracking); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-link[aria-current="page"] { color: var(--ink); }
body:has(:focus-visible) .menu-link[aria-current="page"],
body:has(.notice-warning) .menu-link[aria-current="page"] { color: var(--ink); }
@media (min-width: 1200px) {
  .nav-desktop { display: block; }
  .menu-toggle { display: none; }
  .nav-bar { padding: 0 var(--app-space-4) 0 var(--app-space-5); }
}

/* Hlavička webu: znak, akcie vpravo (Prihlásiť sa, tlačidlo) a „Tím“ (zdieľané s úvodnou stránkou) */
.brand-mark { height: 36px; width: calc(36px * 1675 / 1631); display: block; }
.brand { min-width: var(--app-tap); }
.nav-actions { display: flex; align-items: center; gap: var(--app-space-2); }
.nav-cta { display: none; align-items: center; min-height: var(--app-tap); padding: 0 var(--app-space-5); border-radius: var(--radius-pill); background: var(--cta-fill); color: var(--on-cta); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); font-weight: var(--app-label-weight); text-decoration: none; white-space: nowrap; }
.nav-cta:hover { transform: translateY(-1px); }
.menu-cta { margin-top: var(--app-space-6); width: 100%; }
@media (min-width: 768px) {
  .nav-cta { display: inline-flex; }
  .menu-cta { width: auto; min-width: 280px; }
}
@media (min-width: 1200px) { .nav-bar { padding-right: var(--app-space-3); } }
.nav-login { display: none; }
.nav-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--ember); }
.nav-team { position: relative; }
.nav-team-menu > summary { list-style: none; cursor: pointer; gap: var(--app-space-2); }
.nav-team-menu > summary::-webkit-details-marker { display: none; }
.nav-team-menu > summary::after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .2s; }
.nav-team-menu[open] > summary { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-team-menu[open] > summary::after { transform: rotate(180deg); }
.nav-team-menu > summary[data-active] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-team-list { position: absolute; top: calc(100% + var(--app-space-2)); right: 0; min-width: 220px; margin: 0; padding: var(--app-space-2); list-style: none; background: var(--white); border: 1px solid var(--control-edge); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: grid; gap: 2px; z-index: 60; }
.nav-team-link { display: flex; align-items: center; min-height: var(--app-tap); padding: 0 var(--app-space-4); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: var(--app-body-sm-size); font-weight: var(--app-caption-weight); white-space: nowrap; }
.nav-team-link:hover, .nav-team-link[aria-current="page"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.menu-group { margin: var(--app-space-6) 0 0; font-size: var(--app-caption-size); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.menu-list-team { padding-top: var(--app-space-2); }
.nav-sub .nav-team-list { left: 0; right: auto; }
.nav-sub-all { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-pill) var(--radius-pill); margin-top: 2px; opacity: .75; }
.menu-sub > summary { list-style: none; cursor: pointer; justify-content: space-between; }
.menu-sub > summary::-webkit-details-marker { display: none; }
.menu-sub > summary::after { content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid currentColor; transition: transform .2s; }
.menu-sub[open] > summary::after { transform: rotate(180deg); }
.menu-sub > summary[data-active] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-sub-list { list-style: none; margin: 0; padding: var(--app-space-2) 0 var(--app-space-3) var(--app-space-4); display: grid; gap: 2px; border-bottom: 1px solid var(--line); }
.menu-sub-link { display: flex; align-items: center; min-height: var(--app-tap); color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: var(--app-caption-weight); }
.menu-sub-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.menu-overlay .menu-cta .btn-arrow { color: currentColor; }
@media (min-width: 1200px) { .nav-login { display: inline-flex; } }

/* Tri šírky stránky a jednotná hlavička stránky (data-layout z presentation.page_layout) */
main[data-layout] { --page-w: var(--maxw); width: min(100% - 2 * var(--gutter), var(--page-w)); margin-inline: auto; }
main[data-layout="read"] { --page-w: 720px; }
main[data-layout="form"] { --page-w: 480px; }
main[data-layout] > :not(.messages) { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; }
main[data-layout] h1 { font-size: clamp(38px, 4.4vw, 56px); line-height: var(--app-display-line); }

/* Tlačidlá */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--app-space-3); min-height: 52px; padding: 0 var(--app-space-6); border: 1.5px solid transparent; border-radius: var(--radius-pill); font-size: var(--app-body-size); line-height: var(--app-label-line); font-weight: var(--app-label-weight); letter-spacing: var(--app-label-tracking); text-decoration: none; cursor: pointer; background: transparent; color: var(--ink); text-align: center; transition: background-color .3s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.btn-primary { min-height: 56px; padding: 0 var(--app-space-2) 0 var(--app-space-6); background: var(--cta-fill); color: var(--on-cta); justify-content: space-between; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-arrow { width: 40px; height: 40px; padding: var(--app-space-2); border-radius: var(--radius-pill); background: var(--on-cta); color: var(--ink); }
.btn-arrow { overflow: hidden; }
.btn-arrow svg { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.btn:active { transform: scale(.975); transition-duration: 120ms; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: var(--ground); }
.btn-outline:hover, .btn-quiet:hover, .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn-quiet { border-color: var(--control-edge); color: var(--ink); padding: 0 var(--app-space-5); }
.btn-ghost { color: var(--ink); padding: 0 var(--app-space-4); margin-left: calc(-1 * var(--app-space-4)); }
.full { width: 100%; }

/* Úvod */
.hero { padding: var(--rhythm) 0; max-width: 760px; }
.hero h1 { margin-bottom: var(--app-space-5); }
.lead { font-size: var(--app-body-size); max-width: 590px; color: var(--ink-muted); margin-bottom: var(--app-space-6); }
.hero .btn-primary { width: 100%; }
.small-note { color: var(--ink-muted); margin-top: var(--app-space-4); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); letter-spacing: var(--app-body-sm-tracking); }
@media (min-width: 768px) {
  .hero .btn-primary { width: auto; min-width: 280px; }
}
@media (min-width: 1200px) {
  .lead { font-size: var(--app-headline-size); line-height: var(--app-headline-line); }
}

/* Pätička */
.site-footer { padding: var(--app-space-6) 0; border-top: 1px solid var(--line); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); color: var(--ink-muted); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--app-space-2) var(--app-space-4); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--app-space-4); margin: 0; padding: 0; list-style: none; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--app-tap); }

/* Formuláre */
.form-layout { padding: var(--app-space-6) 0 var(--rhythm); display: grid; gap: var(--app-space-6); }
.intro { max-width: 520px; }
.intro h1 { margin-bottom: var(--app-space-4); }
.intro p, .narrow-page > p { color: var(--ink-muted); }
.form-panel { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--app-space-5); background: var(--ground); min-width: 0; }
@media (min-width: 768px) { .form-panel { padding: var(--app-space-6); } }
.field { margin-bottom: var(--app-space-5); }
.field label, .delete-label { display: block; font-size: var(--app-label-size); line-height: var(--app-label-line); font-weight: var(--app-label-weight); letter-spacing: var(--app-label-tracking); margin-bottom: var(--app-space-2); }
.field input, .delete-form input { width: 100%; min-height: 52px; padding: 0 var(--app-space-4); border: 1px solid var(--control-edge); border-radius: var(--radius-sm); background: var(--ground); color: var(--ink); font-size: var(--app-body-size); line-height: var(--app-body-line); }
.field input::placeholder, .delete-form input::placeholder { color: var(--ink-muted); }
.field input[aria-invalid="true"], .checkbox-row input[aria-invalid="true"] { border: 1.5px solid var(--burgundy); }
.field-error { margin: var(--app-space-2) 0; color: var(--burgundy); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); }
.optional { color: var(--ink-muted); font-weight: var(--app-body-weight); }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--app-space-3); min-height: var(--app-tap); padding: var(--app-space-2) 0; margin-bottom: var(--app-space-2); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); letter-spacing: var(--app-body-sm-tracking); cursor: pointer; }
.checkbox-row input { appearance: none; position: relative; accent-color: var(--ink); width: 24px; height: 24px; flex: none; margin: 0; cursor: pointer; border: 1px solid var(--control-edge); border-radius: calc(var(--radius-sm) / 3.5); background: var(--ground); }
.checkbox-row input:checked { background: var(--ink); border-color: var(--ink); }
.checkbox-row input:checked::after { content: ""; position: absolute; width: 7px; height: 13px; left: 7px; top: 2px; border: solid var(--ground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox-row a { display: inline; padding-block: var(--app-space-4); line-height: var(--app-body-sm-line); }
@media (forced-colors: active) { .checkbox-row input { appearance: auto; } .checkbox-row input:checked::after { display: none; } }
.form-panel > form > .btn-primary, .form-panel > .btn-primary { margin-top: var(--app-space-4); }
.form-footnote { font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); margin: var(--app-space-5) 0 0; text-align: center; }
.form-footnote a { font-weight: var(--app-label-weight); display: inline-flex; align-items: center; min-height: var(--app-tap); }
.narrow-page { max-width: 480px; margin: var(--app-space-6) auto var(--rhythm); }
.narrow-page h1 { margin-bottom: var(--app-space-4); }
.narrow-page .form-panel { margin-top: var(--app-space-5); }
@media (min-width: 768px) {
  .register-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--app-space-6); }
}
@media (min-width: 1200px) { .register-layout { gap: calc(var(--app-space-7) * 2); } }

/* Obrazovky */
.page-content { padding: var(--app-space-6) 0 var(--rhythm); }
.prose { max-width: 72ch; }
.page-content h1 { margin-bottom: var(--app-space-5); }
.profile-grid { display: grid; gap: var(--app-space-5); margin-top: var(--app-space-5); }
@media (min-width: 768px) { .profile-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.details { margin: 0; }
.details div { border-bottom: 1px solid var(--line); padding: var(--app-space-3) 0; }
.details div:last-child { border: 0; }
.details dt { font-size: var(--app-caption-size); line-height: var(--app-caption-line); font-weight: var(--app-caption-weight); letter-spacing: var(--app-caption-tracking); color: var(--ink-muted); }
.details dd { margin: var(--app-space-1) 0 0; font-weight: var(--app-label-weight); overflow-wrap: anywhere; }
.spaced { margin-top: var(--app-space-3); }
.danger-zone { border-top: 1px solid var(--line); margin-top: var(--rhythm); padding-top: var(--app-space-6); max-width: 650px; }
.danger-zone h2 { margin-bottom: var(--app-space-3); }
.delete-form { display: grid; gap: var(--app-space-3); }
.delete-form input { max-width: 100%; }
.delete-label { margin-bottom: 0; }
@media (min-width: 768px) { .delete-form input { max-width: 320px; } .delete-form .btn { justify-self: start; } }

/* Tím */
.filters { display: flex; flex-wrap: wrap; gap: var(--app-space-2); margin: var(--app-space-6) 0 var(--app-space-4); }
.filters a { display: inline-flex; align-items: center; gap: var(--app-space-2); min-height: 52px; padding: 0 var(--app-space-5); border: 1px solid var(--control-edge); border-radius: var(--radius-pill); color: var(--ink); font-weight: var(--app-label-weight); font-size: var(--app-label-size); line-height: var(--app-label-line); letter-spacing: var(--app-label-tracking); text-decoration: none; }
.filters a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.filters a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.person-row { padding: var(--app-space-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--app-space-4); }
.person-row > div { min-width: 0; }
.person-row h2 { margin: 0 0 var(--app-space-1); }
.person-row p { margin: 0; color: var(--ink-muted); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); overflow-wrap: anywhere; }
.person-row .btn { width: 100%; }
@media (min-width: 768px) {
  .person-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--app-space-5); }
  .person-row .btn { width: auto; }
}
.empty { padding: var(--app-space-6) 0; color: var(--ink-muted); }

/* Hlášky */
.messages { display: grid; gap: var(--app-space-3); margin-bottom: var(--app-space-5); }
.notice { display: flex; align-items: flex-start; gap: var(--app-space-3); padding: var(--app-space-4); background: var(--ground); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-sm); }
.notice p { margin: 0; font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); letter-spacing: var(--app-body-sm-tracking); overflow-wrap: anywhere; }
.notice-success { border-left-color: var(--canopy); }
.notice-info { border-left-color: color-mix(in srgb, var(--void) 40%, transparent); }
.notice-warning { border-left-color: var(--ember); }
.notice-error { border-left-color: var(--burgundy); }

@media (hover: hover) {
  .btn-primary:hover .btn-arrow svg { transform: translateX(2px); }
  .field input:hover, .delete-form input:hover { border-color: color-mix(in srgb, var(--void) 64%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn-primary:hover, .btn-primary:hover .btn-arrow svg, .btn:active { transform: none; }
}

/* Moje rozbory v profile (R4) */
.analyses-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-space-3); }
.analyses-head h2 { margin: 0; }
.analyses-rows { list-style: none; margin: var(--app-space-4) 0 0; padding: 0; }
.analyses-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-space-3); min-height: 56px; padding: var(--app-space-3) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.analyses-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.analyses-date { font-size: var(--app-body-sm-size); font-variant-numeric: tabular-nums; }
.analyses-pills { display: flex; flex-wrap: wrap; gap: var(--app-space-2); }
.analyses-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--app-space-3); border: 1px solid var(--control-edge); border-radius: var(--radius-pill); font-size: var(--app-caption-size); font-weight: var(--app-label-weight); white-space: nowrap; }
.analyses-pill.is-hotovy, .analyses-pill.is-opinion { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.analyses-pill.is-rozpracovany { border-style: dashed; }
.analyses-empty { display: grid; justify-items: start; gap: var(--app-space-3); margin-top: var(--app-space-4); }
.analyses-empty .icon svg { width: 28px; height: 28px; }
.analyses-empty p { margin: 0; }