/* Styl F: built with the design-taste-frontend skill (taste-skill), for comparison with A.
   Design read: redesign (overhaul of looks only) of a private assistant for affluent clients,
   trust-first and calm. Dials: VARIANCE 5, MOTION 3, DENSITY 3.
   Palette: "cold luxury" (silver-grey, smoke, one desaturated steel blue). No serif, no small caps,
   no pure black or white. Shape rule: buttons and chips are pills, containers 16px, fields 12px.
   Everything is scoped to html[data-vrstva="f"]. */

/* ---------- tokens ---------- */
html[data-vrstva="f"]:root {
  --ground-l: #E8EAEC; --ground-d: #0F1114;
  --paper-l: #F6F7F8;  --paper-d: #171A1E;
  --accent-l: #2B4A7A;      --accent-d: #93B2E6;
  --accent-deep-l: #1E3659; --accent-deep-d: #B4CBF0;
  --accent-wash-l: #DDE3EC; --accent-wash-d: #1B2433;
  --accent-fill-l: #2B4A7A;       --accent-fill-d: #3B5D9A;
  --accent-fill-hover-l: #1E3659; --accent-fill-hover-d: #486DB0;
  --on-accent-l: #F6F7F8; --on-accent-d: #F1F5FC;
  --ink: #16191D; --ink-2: #464C55; --ink-3: #5F6670;
  --rule: #D3D7DC; --rule-2: #DEE1E5; --border-hover: #B5BBC3;
  --shadow: 27 34 48;
  --num: var(--sans);
  --sans: -apple-system, "SF Pro Text", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
html[data-vrstva="f"][data-mode="dark"]:root {
  --ink: #E9ECEF; --ink-2: #B3BAC3; --ink-3: #8C949E;
  --rule: #272B31; --rule-2: #1F2328; --border-hover: #40464E;
  --shadow: 0 0 0;
}
@media (prefers-color-scheme: dark) {
  html[data-vrstva="f"]:root:not([data-mode="light"]) {
    --ink: #E9ECEF; --ink-2: #B3BAC3; --ink-3: #8C949E;
    --rule: #272B31; --rule-2: #1F2328; --border-hover: #40464E;
    --shadow: 0 0 0;
  }
}

/* ---------- typography: one sans family, weight and colour carry hierarchy ---------- */
html[data-vrstva="f"] body { font-feature-settings: "kern", "liga", "tnum"; }
html[data-vrstva="f"] .brand h1 { font-weight: 600; letter-spacing: -.02em; }
html[data-vrstva="f"] .summary { font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.18; letter-spacing: -.03em; color: var(--ink-2); }
html[data-vrstva="f"] .summary em { font-weight: 600; color: var(--ink); }
html[data-vrstva="f"] .summary .d { font-family: var(--sans); font-weight: 600; font-size: 1em; letter-spacing: -.03em; }
html[data-vrstva="f"] .date b,
html[data-vrstva="f"] .card-when b,
html[data-vrstva="f"] .maj-tri b,
html[data-vrstva="f"] .term .date b { font-family: var(--sans); font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; }
html[data-vrstva="f"] .date b { font-size: 40px; }
html[data-vrstva="f"] .term .date b { font-size: 32px; }
html[data-vrstva="f"] .card-when b { font-size: 38px; }
html[data-vrstva="f"] .maj-tri b { font-weight: 400; font-size: 24px; }
/* labels: plain sentence case, no tracking */
html[data-vrstva="f"] .group-h,
html[data-vrstva="f"] .sheet h4,
html[data-vrstva="f"] .sm h5,
html[data-vrstva="f"] .recent-h,
html[data-vrstva="f"] .bcol-sub,
html[data-vrstva="f"] .dnes-tag,
html[data-vrstva="f"] .date i,
html[data-vrstva="f"] .brow .date i { text-transform: none; letter-spacing: 0; font-weight: 500; }
html[data-vrstva="f"] .group-h,
html[data-vrstva="f"] .sheet h4,
html[data-vrstva="f"] .sm h5,
html[data-vrstva="f"] .bcol-sub { font-size: 14px; color: var(--ink-3); }
html[data-vrstva="f"] .recent-h { font-size: 14px; }
html[data-vrstva="f"] .date i { font-size: 13px; margin-top: 4px; }
html[data-vrstva="f"] .col-head h2,
html[data-vrstva="f"] .bcol-h h2,
html[data-vrstva="f"] .sheet h3,
html[data-vrstva="f"] .paper-dialog h3,
html[data-vrstva="f"] .kal-title { font-weight: 600; letter-spacing: -.02em; }

/* ---------- layout: asymmetric, wider main column, more air ---------- */
@media (min-width: 1081px) {
  html[data-vrstva="f"] .grid { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 80px; row-gap: 56px; margin-top: 56px; }
}
@media (max-width: 1080px) {
  html[data-vrstva="f"] .grid { gap: 44px; margin-top: 36px; }
}
html[data-vrstva="f"] .group { margin-top: 36px; }
html[data-vrstva="f"] .papers-col { row-gap: 56px; }
html[data-vrstva="f"] .areas { gap: 6px 26px; margin-top: 32px; }
html[data-vrstva="f"] .areas button[aria-pressed="true"]::after { height: 1px; }

/* ---------- surfaces: rows on hairlines, cards only where elevation means something ---------- */
html[data-vrstva="f"] .dnes:not(.is-akce):not(.is-po) { border: 0; background: var(--paper); border-radius: 16px; }
html[data-vrstva="f"] .answer,
html[data-vrstva="f"] .working,
html[data-vrstva="f"] .login-card { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgb(var(--shadow) / .05), 0 18px 40px -24px rgb(var(--shadow) / .3); }
html[data-vrstva="f"] .card { border: 0; border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 1px 2px rgb(var(--shadow) / .05), 0 22px 44px -26px rgb(var(--shadow) / .34); }
html[data-vrstva="f"] .queue { gap: 16px; }
html[data-vrstva="f"] .cite,
html[data-vrstva="f"] .maj-tri > div,
html[data-vrstva="f"] .maj-po,
html[data-vrstva="f"] .kal-day,
html[data-vrstva="f"] .usetreno-blok,
html[data-vrstva="f"] .brief,
html[data-vrstva="f"] .sm { border: 0; border-radius: 12px; background: var(--ground); }
html[data-vrstva="f"] .sm-dialog .sm { background: transparent; }
html[data-vrstva="f"] .brief-h { background: transparent; }
html[data-vrstva="f"] .maj-tri .maj-cisty,
html[data-vrstva="f"] .maj-navrh { background: var(--accent-wash); border-radius: 12px; }
html[data-vrstva="f"] .drop { border-radius: 16px; background: transparent; }
html[data-vrstva="f"] .row { padding: 18px 8px 18px 0; grid-template-columns: 68px minmax(0, 1fr) auto; column-gap: 24px; border-bottom-color: var(--rule); }
html[data-vrstva="f"] .row:hover { background: none; }
html[data-vrstva="f"] .row .row-t { transition: transform .22s var(--ease); }
html[data-vrstva="f"] .row:hover .row-t { transform: translateX(3px); }
html[data-vrstva="f"] .row-t p { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
html[data-vrstva="f"] .group-h { padding-bottom: 6px; }

/* ---------- controls: pills and 12px fields ---------- */
html[data-vrstva="f"] .btn { border-radius: 999px; padding: 10px 20px; font-weight: 500; }
html[data-vrstva="f"] .btn.primary { font-weight: 600; }
html[data-vrstva="f"] .btn:active { transform: translateY(1px) scale(.985); }
html[data-vrstva="f"] .btn.ghost { border-color: var(--border-hover); }
html[data-vrstva="f"] .ask { border: 0; border-radius: 999px; box-shadow: 0 1px 2px rgb(var(--shadow) / .06), 0 20px 40px -24px rgb(var(--shadow) / .35); padding-left: 22px; }
html[data-vrstva="f"] .ask-mic { border-radius: 999px; }
html[data-vrstva="f"] .ask-go { border-radius: 999px; }
html[data-vrstva="f"] .kal-seg { border-radius: 999px; }
html[data-vrstva="f"] .state { font-weight: 500; }
html[data-vrstva="f"] input:not([type="checkbox"]):not([type="radio"]),
html[data-vrstva="f"] select,
html[data-vrstva="f"] textarea { border-radius: 12px; }

/* ---------- windows ---------- */
html[data-vrstva="f"] dialog:focus-visible,
html[data-vrstva="f"] .sheet:focus-visible,
html[data-vrstva="f"] .viewer:focus-visible { outline: none; }
html[data-vrstva="f"] .sheet { border-radius: 20px 0 0 20px; box-shadow: 0 30px 80px -24px rgb(var(--shadow) / .42); }
html[data-vrstva="f"] .sheet-body { padding: 10px 44px 72px; }
html[data-vrstva="f"] .paper-dialog,
html[data-vrstva="f"] .sm-dialog { border-radius: 20px; box-shadow: 0 30px 80px -24px rgb(var(--shadow) / .42); }
html[data-vrstva="f"] .sheet-back { background: rgb(var(--shadow) / .3); }
@media (max-width: 640px) {
  html[data-vrstva="f"] .sheet { border-radius: 0; }
  html[data-vrstva="f"] .sheet-body { padding-inline: 22px; }
  html[data-vrstva="f"] .date b { font-size: 34px; }
  html[data-vrstva="f"] .row { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; }
  html[data-vrstva="f"] .summary { font-size: 26px; }
}
@media (max-width: 600px) { html[data-vrstva="f"] .sm-dialog { border-radius: 0; } }

/* ---------- calendar ---------- */
html[data-vrstva="f"] .kal-wd { border: 0; background: var(--ground); border-radius: 12px; }
html[data-vrstva="f"] .kal-wd.hl { background: var(--accent-wash); }
html[data-vrstva="f"] .kal-wd.today { background: var(--accent-wash); }

/* ---------- motion: short ease-out, honours reduced motion ---------- */
html[data-vrstva="f"] .card.enter,
html[data-vrstva="f"] .working,
html[data-vrstva="f"] .answer { animation-duration: .3s; }
html[data-vrstva="f"] .sheet { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  html[data-vrstva="f"] *, html[data-vrstva="f"] *::before, html[data-vrstva="f"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html[data-vrstva="f"] .row:hover .row-t { transform: none; }
}
html[data-vrstva="f"] .kal-seg { border: 0; background: var(--ground); padding: 3px; gap: 2px; }
html[data-vrstva="f"] .kal-seg button { border-radius: 999px; }