/* Styl D: Anthropic frontend-design. Everything is scoped to html[data-vrstva="d"].
   Direction: a bound ledger for a private client. Ink-blue on cool stone, brass for what is due.
   Two families with clear jobs: Baskerville for what is read as a headline or a date, Optima for
   everything you operate. The memorable thing is the date column: a dated margin rule runs down
   the whole list like the margin of a ledger. Everything else stays quiet: sentence case labels,
   hairlines instead of shadows, radius that follows importance (4 px content, 6 px controls). */

/* ---------- palette ---------- */
html[data-vrstva="d"]:root {
  --ground-l: #E7EBEF; --ground-d: #0D1218;
  --paper-l: #FAFBFC;  --paper-d: #141B24;
  --accent-l: #1E3A5F;      --accent-d: #9DBDE6;
  --accent-deep-l: #142A47; --accent-deep-d: #BDD5F1;
  --accent-wash-l: #DCE5F0; --accent-wash-d: #182638;
  --accent-fill-l: #1E3A5F;       --accent-fill-d: #2F5584;
  --accent-fill-hover-l: #142A47; --accent-fill-hover-d: #28476F;
  --on-accent-l: #FFFFFF; --on-accent-d: #F2F7FD;
  --ink: #121A24; --ink-2: #3F4B59; --ink-3: #566373;
  --rule: #CBD3DB; --rule-2: #D9DFE5; --border-hover: #A9B5C1; --scrollbar: #B4BEC9;
  --amber: #7A5512; --amber-wash: #F1E7D0;
  --shadow: 18 26 36;
  --serif: "Baskerville", "Iowan Old Style", "Palatino", "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", Georgia, serif;  /* Windows and Android get their nearest serif */
  --sans: "Optima", "Avenir Next", "Candara", "Segoe UI", -apple-system, system-ui, sans-serif;
  --num: var(--serif);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
html[data-vrstva="d"][data-mode="dark"]:root {
  --ink: #E8EDF3; --ink-2: #B4BFCC; --ink-3: #8797A9;
  --rule: #26313E; --rule-2: #1E2833; --border-hover: #3A4858; --scrollbar: #3A4858;
  --amber: #E0B062; --amber-wash: #2B2313;
  --shadow: 0 0 0;
}
@media (prefers-color-scheme: dark) {
  html[data-vrstva="d"]:root:not([data-mode="light"]) {
    --ink: #E8EDF3; --ink-2: #B4BFCC; --ink-3: #8797A9;
    --rule: #26313E; --rule-2: #1E2833; --border-hover: #3A4858; --scrollbar: #3A4858;
    --amber: #E0B062; --amber-wash: #2B2313;
    --shadow: 0 0 0;
  }
}

/* ---------- type ---------- */
html[data-vrstva="d"] body { font-size: 16px; line-height: 1.5; font-feature-settings: "kern", "liga", "lnum"; }
html[data-vrstva="d"] .brand h1 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: .01em; }
html[data-vrstva="d"] .owner-name { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: 0; }
html[data-vrstva="d"] .today { font-size: 15px; }
html[data-vrstva="d"] .summary { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.22; letter-spacing: -.005em; }
html[data-vrstva="d"] .summary .d { font-size: 1em; letter-spacing: 0; }
html[data-vrstva="d"] .summary em { font-style: italic; }
html[data-vrstva="d"] .col-head h2,
html[data-vrstva="d"] .bcol-h h2,
html[data-vrstva="d"] .paper-dialog h3,
html[data-vrstva="d"] .login-card h1,
html[data-vrstva="d"] .kal-title,
html[data-vrstva="d"] .usetreno-hlavni { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
html[data-vrstva="d"] .col-head h2,
html[data-vrstva="d"] .bcol-h h2 { font-size: 22px; }
html[data-vrstva="d"] .kal-title { font-size: 24px; }
html[data-vrstva="d"] .sheet h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.18; letter-spacing: -.005em; }
html[data-vrstva="d"] .paper-dialog h3 { font-size: 26px; }
html[data-vrstva="d"] .empty strong { font-family: var(--serif); font-weight: 400; font-size: 23px; }
/* labels: sentence case, a hairline under them carries the structure */
html[data-vrstva="d"] .group-h,
html[data-vrstva="d"] .sheet h4,
html[data-vrstva="d"] .sm h5,
html[data-vrstva="d"] .bcol-sub,
html[data-vrstva="d"] .recent-h { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-2); font-size: 18px; }
html[data-vrstva="d"] .group-h,
html[data-vrstva="d"] .sheet h4,
html[data-vrstva="d"] .sm h5,
html[data-vrstva="d"] .bcol-sub { padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
html[data-vrstva="d"] .sheet h4 { margin-top: 34px; }
html[data-vrstva="d"] .recent-h { font-size: 17px; }
html[data-vrstva="d"] .group-h span,
html[data-vrstva="d"] .bcol-sub span { font-family: var(--sans); font-style: normal; font-size: 15px; color: var(--ink-3); }
html[data-vrstva="d"] .dnes-tag { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
html[data-vrstva="d"] .edit label,
html[data-vrstva="d"] .msg-field,
html[data-vrstva="d"] .co-s-tim legend { font-size: 14px; font-weight: 400; color: var(--ink-2); }
html[data-vrstva="d"] .btn { font-weight: 600; letter-spacing: .01em; }
html[data-vrstva="d"] .maj-tri b { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
html[data-vrstva="d"] .maj-tri .maj-cisty b { font-size: 30px; }

/* ---------- header and ask ---------- */
html[data-vrstva="d"] .top { background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom-color: var(--rule); }
html[data-vrstva="d"] .switch { border-radius: 8px; background: var(--rule-2); box-shadow: inset 0 0 0 1px var(--rule); }
html[data-vrstva="d"] .switch button { border-radius: 6px; }
html[data-vrstva="d"] .switch button[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); }
html[data-vrstva="d"] .icon-btn { border-radius: 8px; }
html[data-vrstva="d"] .ask { border-radius: 8px; border-color: var(--border-hover); border-bottom: 2px solid var(--accent); box-shadow: 0 10px 30px -14px rgb(var(--shadow) / .3); }
html[data-vrstva="d"] .ask input { font-size: 18px; }
html[data-vrstva="d"] .ask-go,
html[data-vrstva="d"] .ask-mic { border-radius: 6px; }
html[data-vrstva="d"] .ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
html[data-vrstva="d"] .answer { border-radius: 4px; border-left: 3px solid var(--accent); }
html[data-vrstva="d"] .answer-a { font-family: var(--serif); font-size: 21px; line-height: 1.4; }
html[data-vrstva="d"] .answer-src button { border-radius: 4px; }
@media (max-width: 640px) { html[data-vrstva="d"] .ask { border-radius: 8px; } }

/* ---------- areas: the active tab is underlined in ink-blue ---------- */
html[data-vrstva="d"] .areas { gap: 6px 26px; }
html[data-vrstva="d"] .areas button { font-size: 16px; }
html[data-vrstva="d"] .areas button[aria-pressed="true"] { font-weight: 700; }
html[data-vrstva="d"] .areas button[aria-pressed="true"]::after { background: var(--accent); height: 3px; }
html[data-vrstva="d"] .tick { width: 4px; height: 15px; border-radius: 1px; }

/* ---------- the date margin: one rule runs down the list ---------- */
html[data-vrstva="d"] .group { margin-top: 34px; }
html[data-vrstva="d"] .row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; padding: 14px 6px 14px 0; border-bottom: 0;
  background-color: transparent; background-image: linear-gradient(var(--border-hover), var(--border-hover));
  background-repeat: no-repeat; background-size: 1px 100%; background-position: 84px 0; }
html[data-vrstva="d"] .row:hover { background-color: color-mix(in srgb, var(--paper) 80%, transparent);
  background-image: linear-gradient(var(--accent), var(--accent)); }
html[data-vrstva="d"] .row + .row { border-top: 1px solid transparent; }
html[data-vrstva="d"] .row-t p { font-size: 17px; }
html[data-vrstva="d"] .date b { font-family: var(--serif); font-weight: 400; font-size: 42px; letter-spacing: -.01em; line-height: .95; }
html[data-vrstva="d"] .date i { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; margin-top: 7px; color: var(--ink-2); }
html[data-vrstva="d"] .row.arrived .date b { color: var(--ink-3); }
html[data-vrstva="d"] .row.settle { animation: settle .9s var(--ease); }
html[data-vrstva="d"] .state { border-radius: 4px; font-weight: 600; font-size: 13px; padding: 4px 9px; }
html[data-vrstva="d"] .state.wait { background: var(--amber-wash); box-shadow: inset 2px 0 0 var(--amber); }
html[data-vrstva="d"] .state.in { border-radius: 4px; }
html[data-vrstva="d"] .term { grid-template-columns: 64px minmax(0, 1fr); }
html[data-vrstva="d"] .term .date b { font-size: 36px; }
@media (max-width: 640px) {
  html[data-vrstva="d"] .row { grid-template-columns: 50px minmax(0, 1fr); gap: 14px 20px; background-position: 59px 0; }
  html[data-vrstva="d"] .date b { font-size: 34px; }
  html[data-vrstva="d"] .term { grid-template-columns: 50px minmax(0, 1fr); }
  html[data-vrstva="d"] .term .date b { font-size: 30px; }
}

/* ---------- surfaces: hairline content, 4 px; controls, 6 px ---------- */
html[data-vrstva="d"] .dnes { border-radius: 4px; background: var(--paper); }
html[data-vrstva="d"] .dnes.is-akce { border-left: 3px solid var(--accent); }
html[data-vrstva="d"] .dnes.is-po { border-color: var(--red); border-left: 3px solid var(--red); }
html[data-vrstva="d"] .dnes.is-po .dnes-head, html[data-vrstva="d"] .dnes-po .dnes-tag { color: var(--red); }
/* a card is a thing waiting for a decision: the left edge says so */
html[data-vrstva="d"] .card { border-radius: 4px; box-shadow: none; border-left: 3px solid var(--accent); padding: 18px 20px 14px; }
html[data-vrstva="d"] .card-when b { font-family: var(--serif); font-size: 38px; }
html[data-vrstva="d"] .card-veta { font-family: var(--serif); font-size: 19px; line-height: 1.38; }
html[data-vrstva="d"] .cite { border-radius: 3px; background: var(--ground); box-shadow: inset 2px 0 0 var(--border-hover); }
html[data-vrstva="d"] .question { border-radius: 3px; border-left: 3px solid var(--amber); }
html[data-vrstva="d"] .working { border-radius: 4px; }
html[data-vrstva="d"] .working.err { border-left: 3px solid var(--red); }
html[data-vrstva="d"] .login-card { border-radius: 6px; }
html[data-vrstva="d"] .drop { border-radius: 4px; border-width: 1px; }
html[data-vrstva="d"] .btn { border-radius: 6px; }
html[data-vrstva="d"] .field { border-radius: 6px; }
html[data-vrstva="d"] .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
html[data-vrstva="d"] .tag { border-radius: 4px; }
html[data-vrstva="d"] .style-swatch { border-radius: 6px; }
html[data-vrstva="d"] .shot { border-radius: 4px; }
html[data-vrstva="d"] .paper-list li button { padding: 11px 2px; }
html[data-vrstva="d"] .toast { border-radius: 6px; }
html[data-vrstva="d"] .seal { border-radius: 50%; }
html[data-vrstva="d"] .doc-text,
html[data-vrstva="d"] .report { border-radius: 4px; }
html[data-vrstva="d"] .hero img { border-radius: 4px; }

/* ---------- windows: flat edge, one hairline ---------- */
html[data-vrstva="d"] .sheet { border-radius: 0; box-shadow: -1px 0 0 var(--border-hover), -30px 0 60px -30px rgb(var(--shadow) / .35); }
html[data-vrstva="d"] .sheet-body { padding: 6px 44px 64px; }
html[data-vrstva="d"] .paper-dialog,
html[data-vrstva="d"] .sm-dialog { border-radius: 6px; box-shadow: 0 0 0 1px var(--border-hover), 0 30px 70px -24px rgb(var(--shadow) / .45); }
html[data-vrstva="d"] dialog:focus-visible,
html[data-vrstva="d"] .sheet:focus-visible { outline: none; }
html[data-vrstva="d"] .sheet-back,
html[data-vrstva="d"] .drawer-back { background: rgb(var(--shadow) / .3); }
@media (max-width: 640px) {
  html[data-vrstva="d"] .sheet-body { padding: 6px 18px 56px; }
  html[data-vrstva="d"] .sheet h3 { font-size: 26px; }
}
@media (max-width: 600px) { html[data-vrstva="d"] .sm-dialog { border-radius: 0; } }

/* ---------- contract, assets, calendar ---------- */
html[data-vrstva="d"] .sm,
html[data-vrstva="d"] .brief,
html[data-vrstva="d"] .maj-po,
html[data-vrstva="d"] .usetreno-blok,
html[data-vrstva="d"] .kal-day,
html[data-vrstva="d"] .kal-wd { border-radius: 4px; }
html[data-vrstva="d"] .maj-tri > div { border-radius: 4px; background: var(--paper); }
html[data-vrstva="d"] .maj-tri .maj-cisty { background: var(--accent-wash); border-color: var(--accent); border-left-width: 3px; }
html[data-vrstva="d"] .maj-navrh { border-radius: 4px; }
html[data-vrstva="d"] .maj-stack { border-radius: 2px; }
html[data-vrstva="d"] .sm-bar .sm-track,
html[data-vrstva="d"] .sm-bar .sm-track i { border-radius: 2px; }
html[data-vrstva="d"] .kal-seg { border-radius: 6px; }
html[data-vrstva="d"] .kal-ev { border-radius: 3px; }
html[data-vrstva="d"] .kal-n { border-radius: 4px; }
html[data-vrstva="d"] .kal-cell.today .kal-n { background: var(--accent-fill); }
html[data-vrstva="d"] .kal-wd.today h6::after { content: " - dnes"; }
html[data-vrstva="d"] .uklid-stav { border-radius: 4px; }

/* ---------- motion: only what answers a touch, short and ease-out ---------- */
html[data-vrstva="d"] .switch button,
html[data-vrstva="d"] .row,
html[data-vrstva="d"] .btn { transition-duration: .18s; }
html[data-vrstva="d"] .card.enter,
html[data-vrstva="d"] .working,
html[data-vrstva="d"] .answer { animation-duration: .28s; }
html[data-vrstva="d"] .sheet { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) { html[data-vrstva="d"] *, html[data-vrstva="d"] *::before, html[data-vrstva="d"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }