/* ============================================================================
   Rumb — components.css
   Concept "Namiar na morzu" (art-direction.md, 2026-09-28). Classes and
   behaviour are the contract in design/build-plan.md §2.7 — plugins reuse
   these, never redefine; this file only changed VALUES and a handful of new
   rules (chart grid, corner labels, compass rose, duotone filter, seat dot)
   needed to carry the old light "Rumb" theme into the new dark one.
   ========================================================================== */

/* chart-grid background: hairlines every 96 px, edge to edge (art-direction §5) */
.chart-grid {
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center top;
}
.band-2.chart-grid {
  background-image:
    linear-gradient(rgba(6, 19, 31, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 19, 31, .07) 1px, transparent 1px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body); font-feature-settings: "kern"; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, .display { font-family: var(--font-heading); font-weight: var(--weight-display); color: var(--color-text-heading); margin: 0; text-wrap: balance; }
h2 { font-variation-settings: "opsz" 96; }
h3, h4 { font-variation-settings: "opsz" 20; }
h1 { font-size: var(--step-5); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 96; }
h1 em { font-style: normal; font-weight: 800; color: var(--signal); }
h2 { font-size: var(--step-4); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--step-1); line-height: var(--leading-heading); }
h4 { font-size: var(--step-0); line-height: var(--leading-heading); }
p { margin: 0; }
p + p, .wp-block-paragraph + .wp-block-paragraph { margin-block-start: var(--space-4); }
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--border-2) solid var(--color-focus-ring); outline-offset: 2px; }
.band-strong :focus-visible { outline-color: var(--color-focus-ring-on-strong); }
/* browsers default <fieldset> to min-width: min-content, which stops a
   wrapping filter-chips row from ever shrinking below the sum of its chips
   and overflows narrow phones by a few px — reset it like any other block. */
fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
/* rumb-grafik's own filter fieldsets (lektorzy, grafik) set display:inline-flex
   with no wrap in their block style.css, so a fieldset with 6 poziom chips
   never breaks onto a second line on a phone; patched here rather than in
   the plugin (not our file) — !important because that inline style block is
   printed after ours and matches it on specificity. */
.rumb-grafik__lektorzy-filters fieldset,
.rumb-grafik__filters fieldset {
  flex-wrap: wrap !important;
  row-gap: var(--space-2) !important;
}
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-margin); }
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); line-height: var(--leading-small); }
.eyebrow b { color: var(--signal); font-weight: 600; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--step--1); line-height: var(--leading-small); }
.lead { font-size: var(--step-1); line-height: var(--leading-heading); max-width: 34ch; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.lbl { font-size: var(--step--1); color: var(--color-text-muted); line-height: var(--leading-small); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-gutter); row-gap: var(--space-8); }
/* below 64rem every column is full width (single-column stack); at ≥64rem
   each spans its own fraction of the 12-column grid — full set 2..10 so any
   block (theme or plugin) can lay out N-across without inventing a class. */
.col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { grid-column: span 12; }
@media (min-width: 64rem) {
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
}
section { padding-block: var(--space-section); }
.band { background: var(--color-band); border-block: var(--border-1) solid var(--hair-strong); }
.band-strong { background: var(--color-band-strong); color: var(--color-text-on-strong); border-block-start: var(--border-1) solid var(--hair-strong); }
.band-strong h2, .band-strong h3 { color: var(--color-text-on-strong); }
.band-strong .muted { color: var(--color-text-muted-on-strong); }
.band-strong a { color: var(--color-text-on-strong); }
/* the ONE light section (art-direction §7, "Tak wygląda lekcja") — every
   colour role is re-pointed at the foam/ink pair inside this scope, so every
   shared component (figure, fact, btn, eyebrow…) just works without a
   parallel set of classes. */
.band-2 {
  --color-background: var(--foam);
  --color-surface: var(--foam);
  --color-surface-2: #DCE9EE;
  --color-text: var(--ink);
  --color-text-heading: var(--ink);
  --color-text-muted: var(--ink-2);
  --color-border: var(--ink);
  --hair-strong: var(--ink);
  --color-ink: var(--ink);
  --color-link: var(--ink);
  --color-link-hover: var(--ink-2);
  background: var(--foam);
  color: var(--ink);
}
.band-2.chart-grid { background-color: var(--foam); }
.band-2 .btn-primary, .band-2 .btn-ink { background: var(--ink); color: var(--signal); border-color: var(--ink); }
.band-2 .btn-primary:hover, .band-2 .btn-ink:hover { background: #0d2438; }
.band-2 .btn-tertiary { color: var(--ink); }
.band-2 .btn-tertiary:hover { color: var(--ink-2); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-block-end: var(--space-8); }
.section-head h2 { font-size: var(--step-3); }
svg { width: var(--icon-md); height: var(--icon-md); flex: none; }

/* skip link + visually hidden (utility, used by header + honeypot fields) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -999px; left: 0; z-index: 100; background: var(--color-ink); color: #fff; padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-md) 0; font-weight: var(--weight-ui); text-decoration: none; }
.skip-link:focus { top: 0; }
/* honeypot — visually hidden, not display:none, so bots that skip hidden inputs still fill it in */
.rumb-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-lg); padding-inline: var(--space-6); border-radius: var(--radius-md); border: var(--border-1) solid transparent; font: var(--weight-ui) var(--step-0)/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
.btn svg { width: var(--icon-md); height: var(--icon-md); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--color-primary-hover); }
.btn-primary:active, .btn-primary.is-active { background: var(--color-primary-active); transform: translateY(1px); }
.btn-ink { background: var(--color-ink); color: var(--color-on-primary); }
.btn-ink:hover, .btn-ink.is-hover { background: var(--color-ink-hover); }
.btn-ink:active { background: var(--color-primary-active); }
.btn-secondary { background: transparent; color: var(--color-text); border: var(--border-1) solid var(--hair-strong); }
.btn-secondary:hover, .btn-secondary.is-hover { border-color: var(--signal); color: var(--signal); }
.btn-secondary:active, .btn-secondary.is-active { background: var(--brand-100); }
.btn-tertiary { background: transparent; color: var(--color-link); padding-inline: var(--space-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; white-space: normal; text-align: start; font-family: var(--font-heading); font-weight: 700; }
.btn-tertiary:hover, .btn-tertiary.is-hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
.btn-inverse { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-inverse:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.band-strong .btn-inverse { color: var(--color-on-primary); }
.btn-on-strong { background: transparent; color: var(--color-text-on-strong); border-color: var(--hair-strong); }
.btn-on-strong:hover { background: var(--sea-3); border-color: var(--signal); color: var(--signal); }
.btn.is-focus { outline: var(--border-2) solid var(--color-focus-ring); outline-offset: 2px; }
.btn:disabled, .btn.is-disabled { background: color-mix(in oklch, var(--color-text) 12%, transparent); color: color-mix(in oklch, var(--color-text) 38%, var(--color-surface)); border-color: transparent; cursor: not-allowed; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: var(--icon-md); height: var(--icon-md); border-radius: var(--radius-full); border: 2px solid rgb(255 255 255 / .35); border-top-color: var(--color-on-primary); animation: rumb-spin 700ms linear infinite; }
@keyframes rumb-spin { to { transform: rotate(360deg); } }
/* a handful of button/link labels ("Wszystkie grupy tego kursu w grafiku") are
   longer than 320–414 px phones can hold on one line; buttons stay nowrap at
   normal widths (compact, predictable height) but are allowed to wrap here
   rather than overflow the viewport. Header .mobile-actions buttons never
   reach this — they go icon-only first, see the 23.5rem rule above. */
@media (max-width: 26rem) { .btn { white-space: normal; text-align: center; } }
.btn-md { min-height: var(--control-md); padding-inline: var(--space-5); }
.btn-sm { min-height: var(--control-sm); padding-inline: var(--space-4); font-size: var(--step--1); }
.btn-xl { min-height: var(--control-xl); padding-inline: var(--space-8); font-size: var(--step-1); }
.btn-block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn.is-loading::after { animation: none; } }

/* ---------- header ---------- */
.site-header { background: var(--color-background); border-block-end: var(--border-1) solid var(--hair-strong); position: relative; z-index: var(--z-header); }
.util-row { background: var(--color-band); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: var(--leading-small); border-block-end: var(--border-1) solid var(--hair-strong); }
.util-row .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-md); }
.util-row .places { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util-actions { display: flex; align-items: center; gap: var(--space-4); }
.util-actions a.tel { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; text-decoration: none; color: var(--color-text); white-space: nowrap; }
.main-row .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--control-xl); padding-block: var(--space-2); }
.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text-heading); }
.logo-mark { width: 2rem; height: 2rem; color: var(--signal); }
.logo .word { font-family: var(--font-heading); font-weight: 800; font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em; }
.logo .tag { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); line-height: var(--leading-small); margin-block-start: 2px; }
.nav { display: none; gap: var(--space-1); position: relative; }
.nav a, .nav button.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: 0; text-decoration: none; color: var(--color-text); font-weight: var(--weight-ui); background: none; border: 0; border-block-end: 1.5px solid transparent; font: inherit; cursor: pointer; }
.nav a:hover, .nav button.nav-toggle:hover { border-color: var(--signal); color: var(--color-text); background: none; }
.nav a.is-current { border-color: var(--signal); }
.nav > a:first-child { color: var(--signal); font-weight: 600; }
.nav svg { width: var(--icon-sm); height: var(--icon-sm); }
.nav-item { position: relative; }
.nav-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 18rem; background: var(--color-surface); border: var(--border-1) solid var(--hair-strong); padding: var(--space-2); z-index: var(--z-dropdown); list-style: none; margin: var(--space-1) 0 0; }
.nav-item.is-open .nav-submenu { display: block; }
.nav-submenu li a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.mobile-actions { display: flex; gap: var(--space-2); }
.mobile-actions .btn { padding-inline: var(--space-3); }
/* ≤ 23.5rem (376px, covers 320/360 px phones): the logo + two labelled
   buttons no longer fit in one row (measured: 214px of buttons + 119px logo
   on a 288px content box at 320 px) — buttons go icon-only; the label stays
   for screen readers via .visually-hidden. Both remain real <a>/<button>
   with a native accessible name (link text / aria-label), so nothing here
   removes their name, only its visible rendering. */
@media (max-width: 23.5rem) {
  .mobile-actions { gap: var(--space-1); }
  .mobile-actions .btn { padding-inline: var(--space-2); gap: 0; }
  .mobile-actions .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@media (max-width: 74.98rem) { .logo .tag { display: none; } .main-row .wrap { gap: var(--space-3); } }
@media (min-width: 75rem) { .nav { display: flex; } .mobile-actions { display: none; } }
@media (max-width: 74.98rem) { .util-row { display: none; } }

/* mobile menu dialog (N-02) */
.menu-dialog { border: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; background: var(--color-surface); }
.menu-dialog::backdrop { background: var(--color-scrim); }
.menu-dialog .wrap { padding-block: var(--space-6); }
.menu-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--space-6); }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--step-1); }
.menu-list > li > a, .menu-list summary { display: block; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-heading); font-weight: var(--weight-ui); cursor: pointer; border-block-end: var(--border-1) solid var(--hair-strong); }
.menu-list > li:first-child > a { color: var(--signal); }
.menu-list details ul { list-style: none; padding-inline-start: var(--space-4); margin: 0 0 var(--space-2); font-size: var(--step-0); }
.menu-list details ul li a { display: block; padding: var(--space-2); color: var(--color-text); font-weight: 400; }

/* ---------- hero: the instrument in the centre of the field ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--space-section-hero) var(--space-12); text-align: center; }
.hero-corner { position: absolute; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.hero-corner.c1 { left: var(--space-margin); top: 18px; }
.hero-corner.c2 { right: var(--space-margin); top: 18px; text-align: right; }
.hero-corner.c3 { left: var(--space-margin); bottom: 18px; }
.hero-corner.c4 { right: var(--space-margin); bottom: 18px; text-align: right; }
.hero-head { position: relative; z-index: 2; max-width: 46rem; margin-inline: auto; }
.hero-head .eyebrow { display: block; margin-block-end: var(--space-5); }
.hero-head h1 { max-width: none; }
.hero .lead { max-width: 46ch; margin-inline: auto; margin-block-start: var(--space-4); position: relative; z-index: 2; }
.hero .lead b { color: var(--color-text-heading); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); }
.proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--step--1); line-height: var(--leading-small); }
.proof svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-ink); }
.proof b { color: var(--color-text-heading); font-weight: var(--weight-ui); }
.hero-below { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-8); margin-block-start: var(--space-8); position: relative; z-index: 2; }
.hero-below .proof { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.hero-below .proof b { font-family: var(--font-body); }

/* compass rose (SVG, art-direction §6) behind the instrument card — the
   signature element ("Rumb" = a bearing on a compass). Kept clear of the
   hero text: it sits low, mostly behind the card, per the known defect fix
   ("keep lines away from text") — the fix here is the *position* (centred
   under the card, not crossing the subtitle) rather than a line removed. */
/* Known defect fixed here: a rose line used to cross the hero subtitle. The
   fix is a mask, not just a position — whatever the card/text height turns
   out to be (Polish line-wrap varies), the rose's own top third always fades
   to nothing, so no ring or bearing label can ever land on the text above
   the card. */
.rose { position: absolute; left: 50%; top: 74%; width: min(980px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; color: var(--signal); mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, black 58%, black 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, black 58%, black 100%); }
.rose svg { width: 100%; height: 100%; display: block; }
.rose .needle { transform-origin: 500px 500px; animation: rumb-rose-swing 2.6s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes rumb-rose-swing { from { transform: rotate(-30deg); } to { transform: rotate(150deg); } }
@media (prefers-reduced-motion: reduce) { .rose .needle { animation: none; } }
@media (max-width: 47.98rem) { .rose { width: 150vw; top: 70%; } }

/* the level-test card = instrument face (rumb/test-start's own wrapper,
   class "test-card rumb-poziom-hero__card" — build-plan.md §2.7 contract) */
.test-card { position: relative; z-index: 2; width: min(46rem, 100%); margin: var(--space-8) auto 0; background: var(--color-surface); border: var(--border-1) solid var(--hair-strong); padding: 0; display: grid; gap: 0; text-align: left; }
.test-card::before, .test-card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--signal); z-index: 3; }
.test-card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.test-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.test-card .card-top { padding: var(--space-4) var(--space-5); margin: 0; border-block-end: var(--border-1) solid var(--hair-strong); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); line-height: var(--leading-small); }
.test-card .card-top b { color: var(--color-text-heading); font-weight: 600; }
.ticks { display: flex; gap: var(--space-1); align-items: flex-end; height: var(--space-4); padding: var(--space-3) var(--space-5) 0; margin: 0; }
.tick { flex: 1 1 0; height: var(--space-2); border-radius: 0; background: var(--hair-strong); }
.tick.tick-block { height: var(--space-4); }
.tick.is-done { background: var(--signal); }
.question { padding: var(--space-8) var(--space-5) var(--space-2); margin: 0; font-family: var(--font-heading); font-size: var(--step-2); line-height: var(--leading-heading); color: var(--color-text-heading); font-weight: 600; font-variation-settings: "opsz" 40; }
.question .gap { display: inline-block; min-width: 3.5ch; border-block-end: var(--border-2) solid var(--signal); margin-inline: 0.15em; }
.tiles { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding: 0 var(--space-5); margin: 0; }
@media (min-width: 30rem) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg); padding: var(--space-2) var(--space-3); border: var(--border-1) solid var(--hair-strong); border-radius: 0; background: var(--color-surface); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile-key { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: 0; border: var(--border-1) solid var(--hair-strong); font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); color: var(--signal); background: var(--color-surface); flex: none; }
.tile-text { flex: 1; font-weight: 500; }
.tile > svg { opacity: 0; color: var(--signal); }
.tile:hover, .tile.is-hover { background: var(--color-surface-2); border-color: var(--signal); }
.tile:has(input:checked), .tile.is-selected { background: var(--color-selected-bg); border: var(--border-2) solid var(--color-selected-border); padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px); }
.tile:has(input:checked) .tile-key, .tile.is-selected .tile-key { background: var(--signal); border-color: var(--signal); color: var(--color-on-primary); }
.tile:has(input:checked) > svg, .tile.is-selected > svg { opacity: 1; }
.tile:has(input:focus-visible), .tile.is-focus { outline: var(--border-2) solid var(--color-focus-ring); outline-offset: 2px; }
.tile.tile-idk { grid-column: 1 / -1; border-style: dashed; }
.tile.tile-idk .tile-key { color: var(--color-text-muted); border-style: dashed; }
.tile.tile-idk .tile-text { color: var(--color-text-muted); font-weight: 400; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); margin: 0; }
.rumb-poziom-hero__error { padding-inline: var(--space-5); }
kbd { font: var(--font-mono); font-size: var(--step--1); padding: 0 var(--space-1); border: var(--border-1) solid var(--color-border); border-block-end-width: var(--border-2); border-radius: 0; background: var(--color-surface-2); color: var(--color-text-muted); }
@media (max-width: 56.24rem) {
  .hero-corner { font-size: 10px; }
  .hero-corner.c4 { display: none; }
  .hero-corner.c3 { bottom: 12px; }
  .hero { padding-block-start: 56px; }
}

/* ---------- rows / lists (chart-table style, art-direction §7 "tabela-mapa") ---------- */
.rows { list-style: none; margin: 0; padding: 0; background: transparent; border-block-start: var(--border-1) solid var(--hair-strong); }
.rows > li + li { border-block-start: var(--border-1) solid var(--hair-strong); }
.rows > li:last-child { border-block-end: var(--border-1) solid var(--hair-strong); }
.row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-6); padding: var(--space-4) 0; text-decoration: none; color: inherit; transition: background-color var(--dur-2) var(--ease-standard); }
.row:hover { background: linear-gradient(90deg, rgba(127, 227, 255, .05), transparent); }
.row .t { font-family: var(--font-heading); font-weight: 700; font-size: var(--step-1); line-height: var(--leading-heading); color: var(--color-text-heading); }
.row .d { color: var(--color-text-muted); grid-column: 1; }
.row .price { grid-column: 1; grid-row: 3; text-align: left; margin-block-start: var(--space-2); font-weight: var(--weight-ui); display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.row .price small { display: block; color: var(--color-text-muted); font-weight: 400; font-size: var(--step--1); }
.row .price svg { color: var(--signal); }
@media (min-width: 64rem) { .row { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr) auto; } .row .d { grid-column: 2; } .row .price { grid-column: 3; grid-row: 1; margin: 0; text-align: right; } }

/* groups table — chart table, level codes in mono/signal, hairline rows */
.table-wrap { background: transparent; border-radius: 0; box-shadow: none; overflow-x: auto; }
table.groups { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.groups th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); padding: var(--space-3) var(--space-4); border-block-end: var(--border-1) solid var(--hair-strong); background: transparent; position: sticky; top: 0; }
table.groups td { padding: var(--space-4); border-block-end: var(--border-1) solid var(--hair-strong); vertical-align: middle; }
table.groups tr:last-child td { border-block-end: var(--border-1) solid var(--hair-strong); }
table.groups tr.is-closed td { color: var(--color-text-muted); }
table.groups tr.is-closed .g { color: var(--color-text-muted); }
table.groups .g { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-heading); }
table.groups .g small { display: block; font-family: var(--font-mono); color: var(--color-text-muted); font-weight: 400; font-size: 12px; margin-block-start: 2px; }
table.groups .lvl { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-10); height: var(--space-8); padding-inline: var(--space-2); border-radius: 0; background: transparent; color: var(--signal); font-family: var(--font-mono); font-weight: 600; font-size: var(--step-1); margin-inline-end: var(--space-2); }
table.groups tr.is-closed .lvl { color: var(--color-text-muted); }
table.groups tr.lvl-head th { background: var(--color-surface-2); color: var(--signal); }
@media (max-width: 63.98rem) {
  table.groups thead { display: none; }
  table.groups tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-4); border-block-end: var(--border-1) solid var(--color-border); }
  table.groups td { display: block; padding: 0; border: 0; }
  table.groups td.c-g { grid-column: 1 / -1; }
  table.groups td.c-seat { grid-column: 1 / -1; }
  table.groups td.c-act { grid-column: 1 / -1; }
  table.groups td[data-l]::before { content: attr(data-l) " "; color: var(--color-text-muted); font-size: var(--step--1); }
}
.seat { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--weight-ui); white-space: normal; }
.states .seat { white-space: normal; }
.seat svg { width: var(--icon-sm); height: var(--icon-sm); }
.seat-open { color: var(--seat-open); }
.seat-few { color: var(--seat-few); }
.seat-full { color: var(--seat-full); }
.seat-running { color: var(--seat-running); }
.seat-closed { color: var(--seat-closed); font-weight: 400; }
.seat a { font-weight: 400; }

/* ---------- lesson rows & key numbers ---------- */
figure { margin: 0; }
.photo { border-radius: 0; overflow: hidden; background: var(--color-surface-2); border: var(--border-1) solid var(--hair-strong); position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
.photo.r43 { aspect-ratio: var(--img-row-ratio); }
.photo.r45 { aspect-ratio: var(--img-portrait-ratio); }
.photo.r45 img { object-position: var(--img-portrait-position); }
.photo.r32 { aspect-ratio: var(--img-header-ratio); }
.photo.r169 { aspect-ratio: 16 / 9; }
figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-block-start: var(--space-2); line-height: var(--leading-small); }
.fact h3 { font-size: var(--step-3); line-height: var(--leading-display); margin-block-end: var(--space-3); }
.fact p { max-width: var(--measure-prose); }
.keynums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-block-start: var(--space-12); padding-block-start: var(--space-8); border-block-start: var(--border-1) solid var(--color-border); }
.keynums .display { font-size: var(--step-6); line-height: 1; color: var(--color-text-heading); font-variant-numeric: lining-nums; font-weight: 800; }
.keynums .display small { font-size: var(--step-2); }
.keynums p { color: var(--color-text-muted); margin-block-start: var(--space-2); font-size: var(--step--1); line-height: var(--leading-small); }
@media (max-width: 40rem) { .keynums { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* ---------- cards (hairline plates, no shadow — art-direction §5) ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards.cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: block; background: var(--color-surface); border: var(--border-1) solid var(--hair-strong); border-radius: 0; padding: var(--space-4); text-decoration: none; color: inherit; position: relative; transition: border-color var(--dur-3) var(--ease-standard); }
.card:hover { border-color: var(--signal); }
.card .photo { border-radius: 0; margin-block-end: var(--space-4); margin-inline: calc(-1 * var(--space-4)); margin-block-start: calc(-1 * var(--space-4)); width: calc(100% + 2 * var(--space-4)); border-inline: 0; border-block-start: 0; }
.card h3 { font-size: var(--step-1); }
.card .who { color: var(--signal); font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-block: var(--space-2) var(--space-3); line-height: var(--leading-small); }
.card .quote { font-size: var(--step--1); line-height: var(--leading-body); color: var(--color-text-muted); }
.card .quote::before { content: "„"; } .card .quote::after { content: "”"; }
.quote { font-family: var(--font-heading); font-style: normal; font-weight: 600; font-size: var(--step-2); line-height: var(--leading-heading); color: var(--color-text-heading); }
.quote::before { content: "„"; } .quote::after { content: "”"; }
.quote-cite { display: block; margin-block-start: var(--space-3); font-family: var(--font-mono); font-style: normal; font-size: 12px; color: var(--color-text-muted); }
/* teacher/staff plates: numbered like chart plates (art-direction §7 "tablice na mapie") */
.cards-teach, .rumb-grafik__lektorzy-grid { counter-reset: rumb-plate; }
.cards-teach .card, .rumb-grafik__lektorzy-grid .card { counter-increment: rumb-plate; }
.cards-teach .card::after, .rumb-grafik__lektorzy-grid .card::after {
  content: counter(rumb-plate, decimal-leading-zero);
  position: absolute; right: var(--space-4); top: var(--space-4);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--signal);
}

/* ---------- strong band / contact ---------- */
.contact .grid { align-items: center; }
.contact h2 { font-size: var(--step-4); max-width: 18ch; }
.contact .lead { color: var(--color-text-muted-on-strong); }
.channels { display: grid; gap: var(--space-3); }
/* flex + wrap, not a rigid 3-column grid: at some in-between widths (e.g.
   1280px container) three btn-xl labels including a phone number don't fit
   on one row — this lets them wrap instead of overflowing the page. */
@media (min-width: 40rem) { .channels { display: flex; flex-wrap: wrap; justify-content: flex-start; } }
.places { display: grid; gap: var(--space-4); margin-block-start: var(--space-8); font-size: var(--step--1); line-height: var(--leading-small); padding-block-start: var(--space-6); border-block-start: var(--border-1) solid var(--hair-strong); }
@media (min-width: 40rem) { .places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.places b { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--color-text-on-strong); }
.places span { color: var(--color-text-muted-on-strong); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-md); padding-inline: var(--space-4); border-radius: 0; border: var(--border-1) solid var(--hair-strong); background: var(--color-surface); color: var(--color-text); font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .02em; cursor: pointer; }
.chip:hover { border-color: var(--signal); background: var(--color-surface-2); }
.chip.is-active { background: rgba(127, 227, 255, .12); border-color: var(--signal); color: var(--signal); font-weight: 500; }
.chip svg { width: var(--icon-sm); height: var(--icon-sm); }
.chip .x { margin-inline-end: calc(-1 * var(--space-2)); }
.chip.is-focus { outline: var(--border-2) solid var(--color-focus-ring); outline-offset: 2px; }

/* ---------- calendar ---------- */
.cal { background: var(--color-surface); border: var(--border-1) solid var(--hair-strong); border-radius: 0; padding: var(--space-5); display: grid; gap: var(--space-4); max-width: 30rem; }
.cal-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; color: var(--color-text-heading); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.days .dn { font-size: var(--step--1); color: var(--color-text-muted); padding-block: var(--space-1); }
.day { display: flex; align-items: center; justify-content: center; height: var(--control-md); border-radius: 0; border: var(--border-1) solid transparent; background: transparent; font: inherit; color: var(--color-text); cursor: pointer; }
.day:hover { background: var(--color-surface-2); border-color: var(--signal); }
.day.is-today { border-color: var(--mist); }
.day.is-selected { background: var(--signal); color: var(--color-on-primary); font-weight: 600; }
.day[aria-disabled="true"], .day.is-closed { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: var(--hair-strong); cursor: not-allowed; }
.day[aria-disabled="true"]:hover, .day.is-closed:hover { background: transparent; border-color: transparent; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.slot { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--control-lg); border-radius: 0; border: var(--border-1) solid var(--hair-strong); background: var(--color-surface); color: var(--color-text); font: 500 var(--step-0)/1 var(--font-mono); cursor: pointer; }
.slot:hover { border-color: var(--signal); color: var(--signal); }
.slot.is-selected { background: var(--signal); border-color: var(--signal); color: var(--color-on-primary); }
.slot.is-selected svg { width: var(--icon-sm); height: var(--icon-sm); }
.slot.is-focus { outline: var(--border-2) solid var(--color-focus-ring); outline-offset: 2px; }

/* ---------- steps ---------- */
.steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; counter-reset: s; font-family: var(--font-mono); }
.steps li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--color-text-muted); }
.steps li::before { counter-increment: s; content: counter(s); display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); border: var(--border-1) solid var(--hair-strong); font-weight: 500; }
.steps li.is-done { color: var(--color-text); }
.steps li.is-done::before { content: "✓"; background: var(--signal); border-color: var(--signal); color: var(--color-on-primary); }
.steps li.is-current { color: var(--color-text-heading); font-weight: 600; }
.steps li.is-current::before { border: var(--border-2) solid var(--signal); color: var(--signal); }

/* ---------- form ---------- */
.form { display: grid; gap: var(--space-5); max-width: var(--container-form); }
.field { display: grid; gap: var(--space-1); }
.field label { font-weight: var(--weight-ui); font-size: var(--step--1); line-height: var(--leading-small); color: var(--color-text-heading); }
.field .hint { font-size: var(--step--1); color: var(--color-text-muted); line-height: var(--leading-small); }
.input, select.input, textarea.input { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg); padding-inline: var(--space-4); border: var(--border-1) solid var(--color-border-strong); border-radius: 0; background: var(--color-surface); color: var(--color-text); font: inherit; width: 100%; }
textarea.input { min-height: calc(var(--control-lg) * 2); padding-block: var(--space-3); }
.input::placeholder { color: var(--color-text-muted); }
.input:focus-visible, .input.is-focus { outline: var(--border-2) solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--signal); }
.field.is-error .input { border: var(--border-2) solid var(--error); }
.field.is-error .msg { display: flex; gap: var(--space-1); align-items: center; color: var(--error-text); font-size: var(--step--1); font-weight: var(--weight-ui); line-height: var(--leading-small); }
.field.is-valid .input { border-color: var(--success); }
.field.is-valid .msg { display: flex; gap: var(--space-1); align-items: center; color: var(--success-text); font-size: var(--step--1); line-height: var(--leading-small); }
.field .msg svg { width: var(--icon-sm); height: var(--icon-sm); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--step--1); line-height: var(--leading-body); }
.check input { width: var(--icon-md); height: var(--icon-md); margin: 0.2em 0 0; accent-color: var(--signal); }
.form-note { font-size: var(--step--1); color: var(--color-text-muted); line-height: var(--leading-small); }
.error-summary { border: var(--border-2) solid var(--error); background: var(--error-bg); border-radius: 0; padding: var(--space-4) var(--space-5); margin-block-end: var(--space-5); }
.error-summary p { font-weight: var(--weight-ui); color: var(--error-text); margin-block-end: var(--space-2); }
.error-summary ul { margin: 0; padding-inline-start: var(--space-5); }
.error-summary a { color: var(--error-text); }

/* ---------- alerts ---------- */
.alerts { display: grid; gap: var(--space-3); max-width: var(--container-form); }
.alert { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: 0; border-inline-start: var(--border-4) solid; background: var(--color-surface); }
.alert b { display: block; }
.alert-success { border-color: var(--success); background: var(--success-bg); color: var(--success-text); }
.alert-warning { border-color: var(--warning); background: var(--warning-bg); color: var(--warning-text); }
.alert-error { border-color: var(--error); background: var(--error-bg); color: var(--error-text); }
.alert-info { border-color: var(--info); background: var(--info-bg); color: var(--info-text); }
.alert p { color: var(--color-text); font-size: var(--step--1); line-height: var(--leading-small); }

/* ---------- footer: monospace strip, hairline dividers (art-direction §7) ---------- */
.site-footer { background: var(--color-band-strong); color: var(--color-text-muted-on-strong); padding-block: var(--space-12) var(--space-8); font-size: var(--step--1); line-height: var(--leading-small); border-block-start: var(--border-1) solid var(--hair-strong); }
.site-footer a { color: var(--color-text-on-strong); }
.site-footer h3 { color: var(--color-text-on-strong); font-size: 12px; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; font-weight: 400; margin-block-end: var(--space-4); }
/* .btn-secondary is foam-on-transparent (§2.7) — reads fine on the dark
   footer band already (same field colour), no override needed any more. */
.site-footer .btn-secondary { color: var(--color-text-on-strong); border-color: var(--hair-strong); }
.site-footer .btn-secondary:hover { border-color: var(--signal); color: var(--signal); }
.site-footer .input { background: var(--color-surface); color: var(--color-text); }
.footer-cols { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-10); padding-block-start: var(--space-6); border-block-start: var(--border-1) solid var(--hair-strong); font-family: var(--font-mono); }
.footer-credibility { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-8); padding-block-start: var(--space-6); border-block-start: var(--border-1) solid var(--hair-strong); font-family: var(--font-mono); }

/* home: sections butt against each other and against the header — the
   block-flow gaps (main 24px, 32px between sections) left stray strips
   above and below the hero. Sections own their spacing. */
.home main.wp-block-group { margin-block-start: 0; }
.home .wp-block-post-content > * { margin-block: 0; }

/* ---------- duotone (art-direction §5: "dwuton w tonach morza") ----------
   Applied through an inline SVG filter (in parts/header.html, once per page)
   rather than re-exporting every photo in the media library — same visual
   result, no PHP/image-pipeline change. Shadows → sea, mid → teal, light →
   foam-turquoise, exactly the three stops in art-direction.md §5. */
.photo img, .tc-photo img { filter: url(#rumb-duotone); }
@media (forced-colors: active) { .photo img, .tc-photo img { filter: none; } }