/* Styl B: a second visual layer next to the original (Styl A, style.css), for comparison.
   Everything here is scoped to html[data-vrstva="b"], so without the attribute nothing changes.
   Same markup and behaviour as A, only looks and order differ. Didot stays on the day of the
   month and on big numerals only. */

/* ---------- surfaces: warm paper, one green ---------- */
html[data-vrstva="b"]:root {
  --ground-l: #F3EEE4; --ground-d: #171511;
  --paper-l: #FBF8F1;  --paper-d: #211E19;
  --accent-l: #1F4D3A;      --accent-d: #6CC6A0;
  --accent-deep-l: #173B2C; --accent-deep-d: #8FDABB;
  --accent-wash-l: #E3EAE0; --accent-wash-d: #1A2A21;
  --accent-fill-l: #1F4D3A;       --accent-fill-d: #2E6B4E;
  --accent-fill-hover-l: #173B2C; --accent-fill-hover-d: #24593F;
  --on-accent-l: #FFFFFF; --on-accent-d: #F3FBF7;
  --rule: #E1DACC; --rule-2: #EAE4D8; --border-hover: #CFC7B6;
  --ease: cubic-bezier(.22, .61, .36, 1); /* ease-out, no overshoot */
}
html[data-vrstva="b"][data-mode="dark"]:root {
  --rule: #352F26; --rule-2: #2B261F; --border-hover: #4A4337;
}
@media (prefers-color-scheme: dark) {
  html[data-vrstva="b"]:root:not([data-mode="light"]) {
    --rule: #352F26; --rule-2: #2B261F; --border-hover: #4A4337;
  }
}

/* ---------- typography ---------- */
html[data-vrstva="b"] .brand h1,
html[data-vrstva="b"] .col-head h2,
html[data-vrstva="b"] .bcol-h h2,
html[data-vrstva="b"] .sheet h3,
html[data-vrstva="b"] .paper-dialog h3,
html[data-vrstva="b"] .login-card h1,
html[data-vrstva="b"] .kal-title { font-weight: 500; }
html[data-vrstva="b"] .maj-tri b { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
/* labels in sentence case instead of small caps with tracking */
html[data-vrstva="b"] .group-h,
html[data-vrstva="b"] .sheet h4,
html[data-vrstva="b"] .sm h5,
html[data-vrstva="b"] .recent-h,
html[data-vrstva="b"] .bcol-sub,
html[data-vrstva="b"] .dnes-tag,
html[data-vrstva="b"] .date i,
html[data-vrstva="b"] .brow .date i { text-transform: none; letter-spacing: 0; font-weight: 500; }
html[data-vrstva="b"] .group-h,
html[data-vrstva="b"] .sheet h4,
html[data-vrstva="b"] .sm h5,
html[data-vrstva="b"] .bcol-sub { font-size: 14px; }
html[data-vrstva="b"] .recent-h { font-size: 13px; }
html[data-vrstva="b"] .edit label,
html[data-vrstva="b"] .msg-field,
html[data-vrstva="b"] .co-s-tim legend { font-weight: 500; }

/* ---------- cards and panels: no outline, separated by surface and gap ---------- */
html[data-vrstva="b"] .card,
html[data-vrstva="b"] .answer,
html[data-vrstva="b"] .working,
html[data-vrstva="b"] .login-card { border: 0; box-shadow: none; }
html[data-vrstva="b"] .card { border-radius: 14px; padding: 14px 16px 12px; }
html[data-vrstva="b"] .working.err { border: 0; }
html[data-vrstva="b"] .dnes:not(.is-akce):not(.is-po) { border: 0; background: var(--paper); }
html[data-vrstva="b"] .queue { gap: 12px; }
html[data-vrstva="b"] .drop { border-width: 1px; background: transparent; }
html[data-vrstva="b"] .maj-tri > div { border: 0; background: var(--ground); }
html[data-vrstva="b"] .maj-tri .maj-cisty { background: var(--accent-wash); }
html[data-vrstva="b"] .maj-po,
html[data-vrstva="b"] .kal-day,
html[data-vrstva="b"] .usetreno-blok,
html[data-vrstva="b"] .brief,
html[data-vrstva="b"] .sm { border: 0; background: var(--ground); }
html[data-vrstva="b"] .sm-dialog .sm { background: transparent; }
html[data-vrstva="b"] .brief-h { background: transparent; }
html[data-vrstva="b"] .cite { background: var(--ground); }

/* ---------- density: train rows ---------- */
/* Same three cells as A, but the text block dissolves into the grid so the state sits on the
   metadata line, on the phone too. */
html[data-vrstva="b"] .row { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 1px; align-items: center; padding: 9px 8px 9px 0; }
html[data-vrstva="b"] .row-t { display: contents; }
html[data-vrstva="b"] .row .date { grid-column: 1; grid-row: 1 / span 2; }
html[data-vrstva="b"] .row .row-t p { grid-column: 2 / -1; grid-row: 1; font-size: 16px; line-height: 1.3; align-self: end; }
html[data-vrstva="b"] .row .meta { grid-column: 2; grid-row: 2; margin-top: 0; font-size: 13.5px; align-self: start; }
html[data-vrstva="b"] .row .state { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; padding: 2px 9px; font-size: 12.5px; }
html[data-vrstva="b"] .row .state svg { width: 13px; height: 13px; }
html[data-vrstva="b"] .date b { font-size: 34px; }
html[data-vrstva="b"] .date i { margin-top: 3px; font-size: 12px; }
html[data-vrstva="b"] .group { margin-top: 22px; }
html[data-vrstva="b"] .term .date b { font-size: 30px; }
@media (max-width: 640px) {
  html[data-vrstva="b"] .row { grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; }
  html[data-vrstva="b"] .row .state { grid-column: 3; margin-top: 0; }
  html[data-vrstva="b"] .date b { font-size: 30px; }
}

/* ---------- density: proposal card ---------- */
html[data-vrstva="b"] .card-top { font-size: 13px; }
html[data-vrstva="b"] .card-when { margin: 6px 0 2px; }
html[data-vrstva="b"] .card-when b { font-size: 30px; }
html[data-vrstva="b"] .card-veta { font-size: 16.5px; line-height: 1.35; }
html[data-vrstva="b"] .card-doc { margin-top: 3px; font-size: 13.5px; }
/* the quote is folded to one line, the verdict under it stays */
html[data-vrstva="b"] .cite { margin-top: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.4; }
html[data-vrstva="b"] .cite q { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-vrstva="b"] .cite small { margin-top: 2px; font-size: 12px; }
html[data-vrstva="b"] .card > .actions { flex-wrap: nowrap; gap: 6px; margin-top: 10px; }
html[data-vrstva="b"] .card > .actions .btn { min-height: 36px; padding: 6px 12px; font-size: 14px; white-space: nowrap; }
html[data-vrstva="b"] .card > .actions .btn.quiet { padding-inline: 8px; }
html[data-vrstva="b"] .card > .card-doc[style] { margin-top: 6px !important; font-size: 12.5px; }
html[data-vrstva="b"] .question { margin-top: 10px; padding: 9px 12px; }

/* ---------- windows: one radius, one shadow, no green outline ---------- */
html[data-vrstva="b"] dialog:focus-visible,
html[data-vrstva="b"] .sheet:focus-visible,
html[data-vrstva="b"] .viewer:focus-visible { outline: none; }
html[data-vrstva="b"] .sheet,
html[data-vrstva="b"] .paper-dialog,
html[data-vrstva="b"] .sm-dialog,
html[data-vrstva="b"] body.drawer-open .papers-col { box-shadow: 0 24px 70px -20px rgb(var(--shadow) / .35); }
html[data-vrstva="b"] .sheet { border-radius: 18px 0 0 18px; }
html[data-vrstva="b"] .paper-dialog,
html[data-vrstva="b"] .sm-dialog { border-radius: 18px; }
@media (max-width: 600px) {
  html[data-vrstva="b"] .sm-dialog { border-radius: 0; }
}
@media (max-width: 640px) {
  html[data-vrstva="b"] .sheet { border-radius: 0; }
}

/* ---------- paper detail: terms above the form ---------- */
/* The sheet body becomes a column so CSS order can lift the terms block above the facts list. */
html[data-vrstva="b"] .sheet-body:has(> .facts) { display: flex; flex-direction: column; align-items: stretch; }
html[data-vrstva="b"] .sheet-body:has(> .facts) > .btn,
html[data-vrstva="b"] .sheet-body:has(> .facts) > .dismiss { align-self: flex-start; }
html[data-vrstva="b"] .sheet-body > .facts ~ * { order: 3; }
html[data-vrstva="b"] .sheet-body > .facts { order: 2; }
html[data-vrstva="b"] .sheet-body > .terms,
html[data-vrstva="b"] .sheet-body > h4:has(+ .terms) { order: 1; }
html[data-vrstva="b"] .sheet-body > .facts ~ .danger-zone { order: 4; }
html[data-vrstva="b"] .sheet-body > h4:has(+ .terms) { margin-top: 24px; }

/* ---------- calendar week: empty days as one thin line ---------- */
html[data-vrstva="b"] .kal-wd { border: 0; background: var(--ground); }
html[data-vrstva="b"] .kal-wd.hl { background: var(--accent-wash); }
html[data-vrstva="b"] .kal-wd.kal-nic { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px; background: none; border-radius: 0; border-bottom: 1px solid var(--rule-2); }
html[data-vrstva="b"] .kal-wd.kal-nic h6 { margin: 0; font-weight: 500; color: var(--ink-2); }
html[data-vrstva="b"] .kal-wd.kal-nic h6 span { min-width: 0; font-size: 0; }
html[data-vrstva="b"] .kal-wd.kal-nic h6 span::before { content: attr(data-k); font-size: 15px; }
html[data-vrstva="b"] .kal-wd.kal-nic .kal-none { text-transform: lowercase; }
/* today: the date in green, no full card */
html[data-vrstva="b"] .kal-wd.today { background: none; padding-inline: 2px; }
html[data-vrstva="b"] .kal-wd.today h6 { color: var(--accent); font-weight: 600; }
html[data-vrstva="b"] .kal-wd.today.kal-nic { padding-block: 4px; }

/* ---------- motion: ease-out, 180 to 260 ms; seal and settle keep their own curves ---------- */
html[data-vrstva="b"] .switch button { transition-duration: .18s; }
html[data-vrstva="b"] .card.enter,
html[data-vrstva="b"] .working,
html[data-vrstva="b"] .answer { animation-duration: .26s; }
html[data-vrstva="b"] .sheet-back,
html[data-vrstva="b"] .drawer-back { animation-duration: .2s; }
html[data-vrstva="b"] .sheet { animation-duration: .26s; }
html[data-vrstva="b"] body[data-layout] .papers-col,
html[data-vrstva="b"] body.drawer-open .papers-col { transition-duration: .26s; }
html[data-vrstva="b"] body:not(.drawer-open)[data-layout] .papers-col { transition: transform .26s var(--ease), visibility 0s .26s; }
html[data-vrstva="b"] .toast { transition-duration: .22s; }
html[data-vrstva="b"] .row { transition-duration: .18s; }
html[data-vrstva="b"] .seal { animation: press .42s cubic-bezier(.16, 1, .3, 1) both; }
html[data-vrstva="b"] .card.sealed { animation: leave .5s .62s cubic-bezier(.16, 1, .3, 1) forwards; }
html[data-vrstva="b"] .row.settle,
html[data-vrstva="b"] .brow.settle { animation: settle .9s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { html[data-vrstva="b"] *, html[data-vrstva="b"] *::before, html[data-vrstva="b"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }