/* Offer Landing Kit — page-specific styles (T1/T4).
 * SHELL INTEGRATION (2026-10-01, PLAN.md "Korekta zakresu" + spec extension):
 * every page here renders INSIDE ~/P/forcepush/brand/web-shell (shell.html/
 * shell.css/shell.js) — the shell already supplies :root tokens, reset,
 * .container, .nav/.footer chrome, .section rhythm, .cta-section/.velvet,
 * buttons (.btn/.cb/.btn-quiet) and cards (.card/.chip). This file holds
 * ONLY what the shell doesn't: page-specific layout + the kit's own
 * interactive bits (legend overlay, lang toggle, feedback widgets,
 * questionnaire/inspiracje/spójność renderers). Every color/font reference
 * below is one of the shell's own live-site vars (--bg-base, --bg-ice,
 * --bg-raised, --fg-base, --fg-muted, --fg-subtle, --accent, --accent-*,
 * --border*, --font-body, --font-facet, --font-mono, --radius-*,
 * --shadow-card) — nothing here invents a new color or typeface.
 * template/css/tokens.css (the old dark Inter/JetBrains/neon-green theme)
 * is DELETED — it predated the rebrand and never shipped (LESSONS.md,
 * 2026-10-01 owner note).
 *
 * 2026-10-01 v4 S0 split (mechanical prep, see docs-v4-contracts.md): this
 * file used to hold everything; it now owns ONLY container/utilities/
 * eyebrow/lang-toggle/
 * back-to-top/tool-header. The questionnaire widget/choice/tile/input/
 * button rules moved to css/questionnaire.css, the feedback bar + its body
 * padding moved to css/feedback.css, and the spójność table/option rules
 * moved to css/spojnosc.css. Also dropped here: the dead legend-overlay
 * block (toggle pill/badge/side panel — the overlay feature itself was
 * removed from bin/build 2026-10-01 v3, this CSS was never cleaned up) and
 * the duplicate `.insp-*` block (css/inspiracje.css already owns these
 * selectors with the real, tightened values — this copy was dead weight,
 * see that file's own note).
 */

/* ---------- shared container (owner fix, 2026-10-01: "Propozycja/Proposal"
   hero read centered on wide screens but "Widget 1 z 4" sections drifted
   left — root cause was NOT .container itself (shell.css's `.container`
   already has margin-inline:auto) but every section-level box constrained
   to a narrower max-width (`.widget`, `.idea-note` below) WITHOUT its own
   margin-inline:auto, so it sat flush-left inside the centered 1120px
   container instead of centering within it. Fixed at the source (added
   margin-inline:auto to those rules) AND this override gives every page
   more generous, responsive side padding on very wide screens (1600/1920)
   than the shell's fixed 24px — shell.css loads first, this file loads
   after it (bin/build's {{head_extra}}), so the override here wins.
   I (inspiracje) and L (legenda) reuse this class as-is, never redefine
   it in their own css files. */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ---------- utilities ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- eyebrow (shell has no .kicker — this is the kit's own small
   uppercase label, same Tomorrow treatment the live site uses for .kicker/
   .nav-links/.cb) ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-facet);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  color: var(--accent);
  margin-bottom: 12px;
}
.section-lede { margin-top: 12px; color: var(--fg-muted); font-size: .95rem; line-height: 1.6; }

/* ---------- lang toggle (PL/EN, D4) — v4 polish: lives IN the shell nav's
   .nav-right slot (bin/build injectLangToggle, partials/lang-toggle.html),
   in flow before the hamburger — never fixed over page content, so it can't
   overlap a title at any width. ---------- */
.lang-toggle {
  display: inline-flex; flex-shrink: 0; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 2px; gap: 2px; background: var(--bg-raised);
}
.lang-toggle button {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  border: none; background: transparent; color: var(--fg-subtle);
  padding: 5px 11px; border-radius: var(--radius-full); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-toggle button.is-active { background: var(--fg-base); color: #fff; }
.lang-toggle button:hover:not(.is-active) { color: var(--fg-base); }
.lang-toggle button:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
/* phones: brand + toggle + hamburger share one 54px row */
@media (max-width: 520px) {
  .nav-right { gap: 8px; }
  .lang-toggle button { padding: 4px 8px; font-size: .6rem; letter-spacing: .08em; }
}
/* narrow phones: the shell's 193px wordmark + toggle + 40px hamburger
   overflow the container below ~385px — scale the wordmark down a touch */
@media (max-width: 385px) {
  .nav-inner { gap: 12px; }
  .nav .brand img { height: 18px; }
}
@media (max-width: 340px) {
  .nav .brand img { height: 16px; }
  .lang-toggle button { padding: 4px 6px; }
}

/* ---------- back to top ---------- */
.back-to-top {
  /* bottom:78px — clears the feedback bar (css/feedback.css; measured
     height ~58px, every page) with a comfortable gap — Round 2 fix. */
  position: fixed; right: 20px; bottom: 78px; width: 44px; height: 44px;
  border-radius: var(--radius-full); background: var(--fg-base); color: #fff;
  display: grid; place-items: center; border: none; cursor: pointer;
  box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, bottom .2s ease; z-index: 60;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- routed-page nav clearance (v4 polish) — ONE rule for every
   route: each <section data-route-view> (js/router.js) starts below the
   shell's fixed nav (shell.css `.nav-inner { height: 54px }` + 1px
   border-bottom). Page headers (.tool-header, .legend-head) only add their
   own breathing room on top of this, never the nav height itself. ---------- */
:root { --offer-nav-h: 55px; }
[data-route-view] { padding-top: var(--offer-nav-h); }
html { scroll-padding-top: calc(var(--offer-nav-h) + 16px); }

/* ---------- shared sub-page header (kwestionariusz/inspiracje/spójność) ---------- */
.tool-header { padding: 32px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.tool-header__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tool-header__back { font-size: .8rem; color: var(--fg-subtle); text-decoration: none; }
.tool-header__back:hover { color: var(--fg-base); text-decoration: underline; }
.tool-header h1 {
  font-family: var(--font-facet); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem); margin-top: 12px; color: var(--fg-base);
}
.tool-header p { margin-top: 10px; color: var(--fg-muted); font-size: 1rem; max-width: 40rem; line-height: 1.6; }

/* crystal hover engine (.bx-wrap/.bstrip) lives in css/crystal.css —
   Round 3, 2026-10-01: restores the real engine Round 2 wrongly deleted;
   owned by builder C (crystal). See that file for the full history. */