/* ============================================================================
   LANDING v3  ·  and the button scale the product design introduced
   ----------------------------------------------------------------------------
   Appended rather than woven in: everything above this line is the v2
   editorial system, which other screens still use. The two coexist while the
   screens are rebuilt one at a time, and this block is deleted from the top
   down as each old rule stops being referenced.
   ========================================================================= */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-btn);
  background: var(--primary); color: var(--primary-ink);
  font-weight: 600; font-size: var(--t-sm);
  box-shadow: var(--shadow-1);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover { background: var(--primary-lit); }
.btn-primary:active { transform: translateY(1px); }
.btn-lg { padding: 15px 26px; font-size: var(--t-body); border-radius: 12px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 22px; border-radius: 12px;
  border: 1px solid var(--line-2); color: var(--ink);
  font-weight: 600; font-size: var(--t-body);
  background: var(--lift);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-ghost:hover { border-color: var(--line-3); background: var(--lift-2); }

/* ── Page ────────────────────────────────────────────────────────────────── */
.lp3 { padding: 0 0 var(--s8); }
.lp3-sec { padding: var(--s7) var(--gutter) 0; max-width: 1280px; margin-inline: auto; }
.lp3-h2 { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--track-tight); }

.lp3-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lp3-hero {
  padding: var(--s7) var(--gutter) var(--s6);
  max-width: 1280px; margin-inline: auto;
}
.lp3-brand { display: flex; align-items: center; gap: 12px; }
.lp3-word { font-size: 30px; font-weight: 800; letter-spacing: -.045em; }
.lp3-word-sm { font-size: 19px; }
.lp3-brand-sm { gap: 9px; flex-wrap: wrap; }
.lp3-tagline { color: var(--ink-3); font-size: var(--t-sm); margin-left: 4px; }

.lp3-h1 {
  margin-top: var(--s6);
  font-size: var(--t-hero); font-weight: 800;
  letter-spacing: var(--track-tight); line-height: 1.06;
  max-width: 18ch;
}
.lp3-sub {
  margin-top: var(--s5);
  font-size: var(--t-read); color: var(--ink-2); max-width: 52ch; line-height: 1.6;
}
.lp3-cta { display: flex; gap: var(--s3); margin-top: var(--s6); flex-wrap: wrap; }

/* ── Destination tiles ───────────────────────────────────────────────────── */
.lp3-tiles {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.lp3-tile {
  display: block; border-radius: var(--r-card); overflow: hidden;
  background: var(--lift); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lp3-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.lp3-tile-img { display: block; height: 118px; }
.lp3-tile-body { display: block; padding: 14px 16px 16px; }
.lp3-tile-name { display: block; font-weight: 700; letter-spacing: -.02em; }
.lp3-tile-n { display: block; margin-top: 3px; font-size: var(--t-xs); color: var(--ink-3); }

/* ── Topic chips ─────────────────────────────────────────────────────────── */
.lp3-chips { display: flex; flex-wrap: wrap; gap: var(--s3); }
.lp3-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-chip);
  background: var(--lift); border: 1px solid var(--line);
  font-weight: 600; font-size: var(--t-sm);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lp3-chip:hover { border-color: var(--line-3); transform: translateY(-2px); }
.lp3-chip-n {
  min-width: 22px; text-align: center;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--lift-2); color: var(--ink-3);
  font-size: var(--t-xs); font-weight: 700;
}

/* ── Feature bands ───────────────────────────────────────────────────────── */
.lp3-band {
  margin: var(--s8) auto 0; max-width: 1280px;
  padding: var(--s6) var(--gutter);
}
.lp3-band-soft {
  background: var(--lift); border-block: 1px solid var(--line);
  border-radius: var(--r-panel); max-width: 1180px;
  padding: var(--s6) clamp(20px, 4vw, 48px);
}
.lp3-feats {
  display: grid; gap: var(--s5); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.lp3-feats-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp3-feat-i {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--lift-2); color: var(--primary);
  border: 1px solid var(--line);
}
.lp3-feat-t { margin-top: 14px; font-size: var(--t-body); font-weight: 700; letter-spacing: -.02em; }
.lp3-feat-d { margin-top: 6px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }

/* ── Join ────────────────────────────────────────────────────────────────── */
.lp3-join {
  margin-top: var(--s7);
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-panel);
  background: var(--lift); border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: grid; gap: var(--s5);
}
.lp3-join-d { margin-top: 12px; color: var(--ink-2); max-width: 56ch; line-height: 1.6; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.lp3-foot {
  margin-top: var(--s8); padding: var(--s5) var(--gutter);
  max-width: 1280px; margin-inline: auto;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s5); flex-wrap: wrap;
}
.lp3-foot-nav { display: flex; gap: var(--s5); flex-wrap: wrap; }

@media (max-width: 640px) {
  .lp3-h1 { font-size: clamp(30px, 9vw, 42px); }
  .lp3-cta { flex-direction: column; align-items: stretch; }
  .lp3-cta .btn-primary, .lp3-cta .btn-ghost { justify-content: center; }
  .lp3-foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   PERSON CARD  ·  CROSSROADS v3
   ========================================================================= */

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.pc-av {
  flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: #fff; font-weight: 700; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
/* Anonymity is a state with a look of its own — not a face, and not a blank. */
.pc-av.is-anon {
  background: var(--lift-2); color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.pc {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--lift); box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.pc:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }

.pc-main {
  display: flex; gap: 14px; align-items: flex-start;
  width: 100%; padding: 16px 16px 14px;
}
.pc-body { flex: 1; min-width: 0; }

.pc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-name { font-weight: 700; letter-spacing: -.02em; }

/* The badge says WHY this person is in the set. Never a percentage. */
.pc-badge {
  margin-left: auto;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  background: var(--lift-2); color: var(--ink-2); border: 1px solid var(--line);
}
.pc-badge.is-best { background: rgba(109,74,240,.10); color: var(--primary); border-color: rgba(109,74,240,.22); }
.pc-badge.is-counter { background: var(--warn-dim); color: var(--warn); border-color: rgba(224,164,88,.28); }

.pc-route { margin-top: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.pc-meta { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); }
.pc-quote {
  margin-top: 10px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-tags { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.pc-repeat {
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600;
  background: var(--lift-2); color: var(--ink-2); border: 1px solid var(--line);
}
.pc-repeat.is-yes   { color: var(--ok);     border-color: rgba(46,158,118,.28);  background: var(--ok-dim); }
.pc-repeat.is-mixed { color: var(--warn);   border-color: rgba(224,164,88,.28);  background: var(--warn-dim); }
.pc-repeat.is-no    { color: var(--danger); border-color: rgba(210,69,59,.26);   background: var(--danger-dim); }

.pc-acts { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.pc-act {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; color: var(--ink-3);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pc-act:hover { background: var(--lift-2); color: var(--ink); border-color: var(--line); }
.pc-act.is-on { color: var(--primary); background: rgba(109,74,240,.10); border-color: rgba(109,74,240,.22); }

/* ── Crossroads header, tabs, list ───────────────────────────────────────── */
.xr-head { padding-top: var(--s5); max-width: 760px; }
.xr-title { margin-top: 14px; font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--track-tight); }
.xr-said { margin-top: 12px; font-size: var(--t-read); color: var(--ink-2); }
.xr-read { margin-top: 8px; font-size: var(--t-xs); color: var(--ink-3); }

.xr-bar {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s5); flex-wrap: wrap;
}
.xr-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.xr-tab {
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--lift);
  transition: all var(--dur) var(--ease);
}
.xr-tab:hover { border-color: var(--line-2); color: var(--ink); }
.xr-tab.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.xr-count { margin-left: auto; font-size: var(--t-xs); color: var(--ink-3); }

.xr-list { display: grid; gap: var(--s3); margin-top: var(--s4); max-width: 760px; }
.xr-sec { margin-top: var(--s8); }

@media (max-width: 640px) {
  .pc-main { padding-bottom: 52px; }
  .pc-badge { margin-left: 0; }
}

/* A point placed on a country rather than a city is drawn as the coarser fact
   it is — hollow and lighter — so the map never reads as more precise than the
   record behind it. See placePoint() in web/app/data/geo.js. */
.map-label.is-coarse { opacity: .68; font-style: italic; }

/* ── Country highlight on the map ─────────────────────────────────────────
   The land is drawn as one dot path per country so a single class toggle can
   light one up. The highlight is APPROXIMATE — see countryAt() in geo.js —
   which is why it is a soft glow rather than a crisp filled border: the shape
   should not read as a claim about where a frontier runs. */
.map { position: relative; }

.map-dot { transition: fill var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.map-dot.is-hot { fill: var(--primary); opacity: 1; }

.map-hover {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(14px, -50%);
  max-width: 260px; padding: 10px 12px;
  border-radius: var(--r-card);
  background: var(--lift); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3);
  display: grid; gap: 2px;
}
.map-hover[hidden] { display: none; }
.map-hover-n { font-size: var(--t-sm); font-weight: 700; letter-spacing: -.02em; }
.map-hover-en { font-size: var(--t-xs); color: var(--ink-3); }
.map-hover-l { margin-top: 4px; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.45; }
.map-hover-c { margin-top: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--primary); }
/* An empty country is stated, not hidden. Most of the world is empty here. */
.map-hover-c.is-none { color: var(--ink-3); font-weight: 500; font-style: italic; }

/* ── Language picker ──────────────────────────────────────────────────────
   Offers the locales that are complete, and states how many of the world's
   languages that is. See the note in web/app/i18n.js. */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--lift);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-btn:hover { border-color: var(--line-3); color: var(--ink); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 250px; padding: 6px;
  border-radius: var(--r-card);
  background: var(--lift); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3);
}
.lang-menu[hidden] { display: none; }
.lang-opt {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; padding: 9px 10px; border-radius: 9px;
  transition: background var(--dur) var(--ease);
}
.lang-opt:hover { background: var(--lift-2); }
.lang-opt.is-on { background: rgba(109,74,240,.10); color: var(--primary); }
.lang-opt b { font-size: var(--t-sm); font-weight: 600; }
.lang-opt span { font-size: var(--t-xs); color: var(--ink-3); }
.lang-opt.is-on span { color: var(--primary); opacity: .75; }
.lang-note {
  margin: 6px 4px 2px; padding-top: 8px; border-top: 1px solid var(--line);
  display: grid; gap: 3px;
}
.lang-note b { font-size: var(--t-xs); color: var(--ink-2); }
.lang-note i { font-size: var(--t-xs); color: var(--ink-3); font-style: normal; line-height: 1.45; }

@media (max-width: 720px) { .lang-btn span { display: none; } }

/* ── THE GLOBE, AND THE COUNTRY IT OPENS ──────────────────────────────────
   Orthographic, drag to turn, press a country to open it. The country
   highlight is a glow rather than a filled shape on purpose: the assignment is
   approximate (countryAt in geo.js) and a crisp edge would read as a border it
   is not.

   The panel sits BESIDE the globe on a wide screen and BELOW it on a narrow
   one, and the globe does not shrink to make room — a sphere you cannot read
   is not a selector. */

.globe {
  display: grid;
  grid-template-columns: min(560px, 100%) minmax(280px, 380px);
  gap: var(--s6);
  align-items: start;
  justify-content: center;
}
/* Nothing selected: the globe keeps the middle rather than sliding left. */
.globe:has(.globe-panel[hidden]) { grid-template-columns: min(560px, 100%); }

.globe-stage { position: relative; width: 100%; }

/* THE ASPECT RATIO IS LOAD-BEARING. An <svg> sized `width:100%; height:auto`
   has no intrinsic width, so inside a grid column whose minimum is 0 it
   resolves to zero and the globe silently disappears — laid out, hit-testable
   at no coordinates, and invisible. Declaring the square it actually is gives
   it a size of its own to fall back on. */
.globe-svg {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  cursor: grab; touch-action: none; user-select: none;
}
.globe-svg.is-turning { cursor: grabbing; }

.globe-ocean { stroke: var(--line-2); stroke-width: 1; }

.globe-dot { fill: var(--map-land); opacity: .62; transition: fill 160ms var(--ease); }
.globe-dot.is-hot { fill: var(--primary); opacity: 1; }
/* The open country stays lit after the cursor has left it, or the panel would
   describe a place nothing on the globe points at. */
.globe-dot.is-picked { fill: var(--primary); opacity: .95; }

.globe-arcs { pointer-events: none; }
.globe-arc { fill: none; stroke: var(--primary); opacity: .55; stroke-linecap: round; }
.globe-arc.is-return { stroke: var(--path-return); stroke-dasharray: 3 5; }

.globe-node { cursor: pointer; }
.globe-halo { fill: var(--blue); opacity: .16; }
.globe-core { fill: var(--blue); }
.globe-node.is-origin .globe-halo, .globe-node.is-origin .globe-core { fill: var(--violet); }
.globe-node:hover .globe-halo { opacity: .3; }

/* ── Cities of the open country ──────────────────────────────────────────
   Three states, and they are three different claims:
     plain      a city that exists
     capital    a ring, and the only one with a note attached
     recorded   somebody actually recorded a decision here
   The third never borrows the styling of the first two. */
.globe-cities { pointer-events: auto; }
.globe-city { cursor: pointer; }
.globe-city-dot { fill: var(--ink-2); opacity: .85; }
.globe-city-ring { fill: none; stroke: var(--primary); stroke-width: 1.4; opacity: .8; }
.globe-city.is-capital .globe-city-dot { fill: var(--primary); opacity: 1; }
.globe-city.is-recorded .globe-city-dot { fill: var(--blue); opacity: 1; }
.globe-city:hover .globe-city-dot { fill: var(--primary-lit); }
.globe-city-t {
  font-size: 10.5px; font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--void); stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}

.globe-hover { transform: translate(16px, -50%); }
.map-hover-cap { display: block; font-size: var(--t-xs); color: var(--ink-2); }
.map-hover-go { display: block; margin-top: 6px; font-size: var(--t-tag);
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--primary); }
.globe-hint { grid-column: 1 / -1; margin-top: var(--s4); font-size: var(--t-xs); color: var(--ink-3); }

/* ── The country panel ────────────────────────────────────────────────── */

.globe-panel {
  background: var(--lift); border: 1px solid var(--line);
  border-radius: var(--r-panel); box-shadow: var(--shadow-2);
  padding: var(--s5); align-self: start;
}
.gp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.gp-name { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--track-tight); line-height: 1.1; }
.gp-en { margin-top: 4px; font-size: var(--t-sm); color: var(--ink-3); }
.gp-close {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.gp-close:hover { background: var(--wash-2); color: var(--ink); }

.gp-langs { margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-2); }

.gp-cap { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.gp-cap-k {
  font-size: var(--t-tag); letter-spacing: var(--track-tag);
  text-transform: uppercase; color: var(--primary);
}
.gp-cap-n { margin-top: 8px; font-size: var(--t-md); font-weight: 700; }
.gp-alt { margin-left: 8px; font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); }
.gp-cap-note { margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.gp-cap-note.is-absent { color: var(--ink-3); font-style: italic; }

.gp-cities-k {
  margin-top: var(--s5); font-size: var(--t-tag); letter-spacing: var(--track-tag);
  text-transform: uppercase; color: var(--ink-3);
}
.gp-cities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.gp-city {
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  border-radius: var(--r-chip); padding: 5px 10px; font: inherit;
  font-size: var(--t-xs); cursor: pointer;
}
.gp-city:hover { border-color: var(--primary); color: var(--primary); }
/* A city with a record gets a filled marker, never just a different shade —
   the difference has to survive a colourblind reader and a printout. */
.gp-city.is-recorded { border-color: var(--blue); color: var(--blue); font-weight: 700; }
.gp-city.is-recorded::before { content: "● "; font-size: 9px; vertical-align: 1px; }

.gp-limit { margin: var(--s4) 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); }

.gp-rec { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.gp-rec b { font-weight: 800; }
.gp-rec-c { margin-top: 8px; font-size: var(--t-xs); color: var(--ink-2); }
.gp-rec-none b { display: block; color: var(--ink-2); }
.gp-rec-none p { margin: 8px 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); }

@media (max-width: 980px) {
  .globe, .globe:has(.globe-panel[hidden]) { grid-template-columns: min(560px, 100%); }
  .globe-panel { width: 100%; }
}


/* ── THE ARRIVAL ──────────────────────────────────────────────────────────
   Three things on screen: the mark, the globe, the field.

   The layering is the whole mechanic. The destination surface is real DOM at
   the bottom; the canvas sits ON TOP and erases itself inside the country's
   outline, so what appears through the hole is the interface itself rather
   than a picture of it. The country is a window, not a wipe.                */

.arrival {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--void);
  --greet: clamp(44px, 9vw, 104px);
}

.arr-under { position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; padding: var(--gutter); }

.arr-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  transition: opacity 220ms var(--ease); }

/* THE ONLY THING THAT NEVER MOVES. The globe turns, the country opens, the
   interface arrives — and the mark stands still through all of it. */
.arr-mark {
  position: absolute; z-index: 4; top: 26px; left: 28px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; letter-spacing: -.045em; color: var(--ink);
  pointer-events: none;
}

/* ── the field ────────────────────────────────────────────────────────── */
.arr-shell {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: 13%; width: min(460px, calc(100% - 48px));
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.arr-shell.is-gone { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; }

.arr-field {
  display: flex; align-items: center; gap: 12px;
  background: var(--bar-solid); border: 1px solid var(--line-2);
  border-radius: var(--r-panel); padding: 0 16px; box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
}
.arr-field:focus-within { border-color: var(--primary); }
.arr-input {
  flex: 1; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 17px; padding: 15px 0; outline: none;
}
.arr-input::placeholder { color: var(--ink-4); }
.arr-field kbd {
  font-size: 11px; color: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 2px 7px;
}

.arr-sugg {
  margin-top: 8px; background: var(--bar-solid); border: 1px solid var(--line-2);
  border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden;
  backdrop-filter: blur(14px);
}
.arr-opt {
  display: flex; width: 100%; align-items: center; gap: 12px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: 15px; padding: 11px 14px; cursor: pointer;
}
.arr-opt:last-child { border-bottom: 0; }
.arr-opt:hover, .arr-opt[aria-selected="true"] { background: var(--wash-2); }

/* THE FLAG IS A COLUMN OF LIGHT, NOT A RECTANGLE IN A DROPDOWN. */
.arr-flag { width: 3px; height: 22px; border-radius: 2px; flex: none; }
.arr-opt-n { font-weight: 600; }
.arr-opt-w { color: var(--ink-3); font-size: 13px; }
.arr-opt-k {
  margin-left: auto; font-size: var(--t-tag); letter-spacing: var(--track-tag);
  text-transform: uppercase; color: var(--ink-4);
}

.arr-hint { margin: 14px 0 0; text-align: center; font-size: var(--t-xs); color: var(--ink-3); }
.arr-hint b { color: var(--ink-2); font-weight: 500; }

/* ── the welcome ──────────────────────────────────────────────────────────
   Legible THROUGH the aperture before the aperture has finished opening, so
   the first readable thing in the new place is its own language. */
.arr-greet {
  position: absolute; z-index: 2; inset: 0;
  display: grid; place-content: center; justify-items: center;
  pointer-events: none; text-align: center;
}
.arr-greet-w {
  display: block; font-size: var(--greet); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
  opacity: 0;
}
.arr-greet-w.is-in {
  animation: arr-rise 600ms cubic-bezier(.32,.72,0,1) forwards;
}
@keyframes arr-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.arr-greet-p {
  display: block; margin-top: 14px; font-size: var(--t-sm);
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-3);
}

/* Once the sequence is done the greeting shrinks and docks, rather than fading
   out. The moment leaves a residue instead of dissolving. */
.arrival[data-state="done"] .arr-greet {
  place-content: start; justify-items: start;
  padding: 88px 0 0 28px;
  transition: padding 700ms cubic-bezier(.32,.72,0,1);
}
.arrival[data-state="done"] .arr-greet-w {
  font-size: calc(var(--greet) * .28);
  transition: font-size 700ms cubic-bezier(.32,.72,0,1);
}
.arrival[data-state="done"] .arr-greet-p { margin-top: 4px; font-size: var(--t-xs); }

/* ── what the aperture opens onto ─────────────────────────────────────── */
.arr-panel {
  max-width: 560px; text-align: left;
  animation: arr-panel-in 520ms 240ms cubic-bezier(.32,.72,0,1) backwards;
}
@keyframes arr-panel-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; } }
.arr-panel-k {
  font-size: var(--t-tag); letter-spacing: var(--track-tag);
  text-transform: uppercase; color: var(--primary);
}
.arr-panel-n { margin: 10px 0 0; font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--track-tight); }
.arr-panel-en { margin-top: 4px; color: var(--ink-3); font-size: var(--t-sm); }
.arr-panel-note { margin: 18px 0 0; font-size: var(--t-read); line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.arr-panel-has, .arr-panel-none {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
}
.arr-panel-has b, .arr-panel-none b { font-weight: 800; }
.arr-panel-none b { display: block; color: var(--ink-2); }
.arr-panel-none p { margin: 8px 0 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 48ch; }
.arr-panel-cities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.arr-city {
  font-size: var(--t-xs); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-chip); padding: 4px 9px;
}
.arr-city.is-cap { color: var(--primary); border-color: var(--primary); font-weight: 600; }

/* ── mobile is a different design, not a smaller one ──────────────────── */
@media (max-width: 700px) {
  /* The globe sits high so the keyboard does not eat it, and the field is
     within thumb reach at the bottom with its suggestions opening UPWARD. */
  .arr-mark { top: 18px; left: 18px; font-size: 16px; }
  .arr-shell { bottom: 24px; width: calc(100% - 32px); display: flex; flex-direction: column-reverse; }
  .arr-sugg { margin: 0 0 8px; max-height: 46vh; overflow-y: auto; }
  .arr-hint { order: 3; margin: 0 0 12px; }
  .arr-greet { place-content: center; padding: 0 20px; }
  .arr-greet-w { font-size: 15vw; }
  .arrival[data-state="done"] .arr-greet { padding: 66px 0 0 18px; }
  .arr-under { align-items: end; padding-bottom: 30vh; }
  .arr-panel-n { font-size: var(--t-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .arr-greet-w.is-in { animation: none; opacity: 1; }
  .arr-panel { animation: none; }
  .arrival[data-state="done"] .arr-greet,
  .arrival[data-state="done"] .arr-greet-w { transition: none; }
}

/* ============================================================================
   THE v3 SHELL  ·  desktop header, phone navigation, shared primitives
   ----------------------------------------------------------------------------
   Everything below belongs to the application shell and to the small set of
   primitives the approved MVP screens will all reach for. It lives in
   product.css because product.css is loaded last, which is the only reason
   these rules can sit on top of the v2 editorial system in system.css without
   raising specificity or reaching for !important. NOT ONE v2 RULE WAS DELETED:
   twelve screens still render on them.

   BREAKPOINTS. The repository has accumulated six (980 · 900 · 760 · 720 · 700
   · 640) and this is not the task that unifies them. New v3 work uses two, and
   both are widths the shell already used, so nothing below fights an existing
   query:

       <= 900px   PHONE / COMPACT — the desktop nav row gives way to the
                  bottom bar. The same width system.css already used to
                  restructure the top bar.
       >  900px   DESKTOP — the header carries the navigation.
   ============================================================================ */

/* ── SHARED BUTTONS ───────────────────────────────────────────────────────
   .btn-primary and .btn-ghost already existed above. What they lacked was a
   focus ring, a disabled state and a floor under their height — all three of
   which the later screens need and none of which is a redesign. The third
   variant, .btn-quiet, is the text action the forms and the story reader will
   want; it is defined here so it cannot be reinvented three times.

   None of the three signals its state by colour alone: primary carries fill,
   ghost carries a border, quiet carries an underline, and disabled drops
   opacity AND removes the pointer. */
.btn-primary, .btn-ghost, .btn-quiet {
  min-height: 44px;                       /* a comfortable target, everywhere */
  font-family: inherit;
}
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 6px; border: 0; background: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line-3);
  border-radius: var(--r-btn); cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.btn-quiet:hover { color: var(--ink); text-decoration-color: currentColor; }

.btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-quiet:focus-visible,
.nav-item:focus-visible, .nav-account:focus-visible, .botnav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-btn);
}

.btn-primary:disabled, .btn-ghost:disabled, .btn-quiet:disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* ── SHARED CHIP ──────────────────────────────────────────────────────────
   Powrót · Praca · Relacje on the home screen, and the tags on the Decision
   Card, are the same object. Defined once here and used by neither yet —
   those screens are prompts 3 and 5. `.lp3-chip` above stays exactly as it
   is; that is the landing's own oversized tile and not this. */
.chip3 {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 8px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--lift);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.chip3:hover { border-color: var(--line-3); color: var(--ink); }
.chip3.is-on {
  border-color: var(--primary); color: var(--primary);
  background: rgba(109,74,240,.08);
}
.chip3.is-on::before { content: "\2713"; font-size: 11px; }  /* not colour alone */
.chip3:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── SHARED SURFACE ───────────────────────────────────────────────────────
   The approved card: warm surface, hairline border, large radius, restrained
   shadow. Built from the tokens that already describe exactly that, so it
   cannot drift away from them. */
.surface3 {
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: clamp(20px, 2.4vw, 32px);
}
.surface3.is-raised { box-shadow: var(--shadow-2); }

/* ── DESKTOP HEADER ───────────────────────────────────────────────────────
   Calm and spacious: the mark, two destinations, one action, one quiet
   utility. Not a dashboard toolbar. */
.topbar.is-v3 { gap: clamp(20px, 3vw, 48px); }
.topbar.is-v3 .nav { gap: clamp(14px, 2vw, 30px); margin-left: clamp(8px, 2vw, 28px); }

.topbar.is-v3 .nav-item {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 2px;
  font-size: var(--t-sm); font-weight: 600;
}
/* The active destination is heavier ink AND a rule beneath it. Two signals,
   so the highlight survives greyscale and colour blindness alike. */
.topbar.is-v3 .nav-item.is-on { color: var(--ink); }
.topbar.is-v3 .nav-item.is-on::after { background: var(--primary); height: 2px; }

.topbar.is-v3 .utilities { gap: clamp(10px, 1.4vw, 18px); }
.topbar.is-v3 .nav-cta { min-height: 44px; padding: 12px 20px; }

.nav-account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--lift); color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-account:hover { border-color: var(--line-3); color: var(--ink); }

/* ── THE PHONE'S PRIMARY NAVIGATION ───────────────────────────────────────
   Hidden entirely above the phone breakpoint, so a desktop reader never sees
   it and never pays for it. See components/BottomNav.js for why it exists. */
.botnav { display: none; }

@media (max-width: 900px) {
  /* The desktop destinations leave the header. They are not hidden behind a
     hamburger — they are DOWN THERE, always visible, in the bar below. */
  .topbar.is-v3 .nav { display: none; }

  /* With the wrapped nav row gone the bar is one row again, so the stage no
     longer has to clear 150px of chrome that is not there. */
  .topbar.is-v3 { height: auto; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  .stage { padding-top: 104px; }
  .lp-hero { padding-top: 118px; }

  /* The label is long and the phone is narrow; the action keeps its target
     height and loses only its horizontal padding. */
  .topbar.is-v3 .nav-cta { padding: 12px 14px; font-size: var(--t-xs); }

  .botnav {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--bar-solid);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-2);
    /* the iOS home indicator, and anything else the browser reserves */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .botnav-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    max-width: 560px; margin: 0 auto;
  }
  .botnav-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 56px; padding: 8px 4px 10px;
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.1;
    color: var(--ink-3);
    transition: color var(--dur) var(--ease);
  }
  .botnav-item:hover { color: var(--ink-2); }
  .botnav-l { text-align: center; }

  /* THREE SIGNALS ON THE ACTIVE ITEM, none of them colour by itself: a rule
     across the top of the cell, a heavier label, and a shift in ink. */
  .botnav-item.is-on { color: var(--primary); font-weight: 800; }
  .botnav-item.is-on::before {
    content: ""; position: absolute; top: 0; left: 18%; right: 18%;
    height: 2px; border-radius: 0 0 2px 2px; background: var(--primary);
  }
  .botnav-i { flex: none; }

  /* The bar is fixed, so the last thing on a page needs room to clear it
     rather than ending underneath it.

     ON #main AND NOT ON body, for two reasons. Body padding did not extend the
     scroll range here — the final section still finished beneath the bar — and
     `arrival` renders no <main> at all, so putting the clearance on body
     reserved 56px at the bottom of a full-viewport composition that has no bar
     above which to clear. Both problems are the same problem: the reservation
     belongs to the pages that actually have the bar. */
  #main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Somebody who asked their system for less movement gets none of ours. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost, .btn-quiet, .chip3,
  .nav-account, .botnav-item, .topbar.is-v3 .nav-item { transition: none; }
}

/* ============================================================================
   THE HOME  ·  built to the approved design
   ----------------------------------------------------------------------------
   A centred hero over a drawn table. Two rules govern everything below.

   THE FIELD IS THE FOCAL POINT. It is the widest single object above the fold,
   it is fully rounded, and it is the only thing on the page with a real
   resting shadow. Headline and sub-line lead to it; chips and buttons sit
   under it; the drawing explains what it does.

   THE PHONE IS A DIFFERENT COMPOSITION, NOT A SMALLER ONE. The buttons go full
   width, the asides and the plant disappear rather than shrink, the drawing is
   swapped for its own narrow version, and the three perspective words leave
   the picture to become readable text beneath it.
   ============================================================================ */

/* The only thing in this file that is not Home. There was no visually-hidden
   helper in the repository and the Home needs two: a field label and a written
   description of a decorative drawing. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.home3 {
  position: relative;
  isolation: isolate;                 /* the ambient layer stays behind */
  padding: clamp(28px, 5vw, 72px) var(--gutter) 0;
  overflow-x: clip;                   /* asides may sit near the edge */
}

/* ── AMBIENT ──────────────────────────────────────────────────────────────
   Soft currents behind everything. Pointer-inert and never selectable. */
.home3-ambient {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}

.home3-plant {
  /* Beside the table rather than under the footer: the drawing is the thing
     it keeps company with. */
  position: absolute; left: clamp(-10px, 1vw, 26px); bottom: 248px; z-index: -1;
  width: clamp(84px, 8vw, 116px); height: auto;
  pointer-events: none; user-select: none;
}

/* ── HERO ─────────────────────────────────────────────────────────────────
   Centred, with a measure that stays comfortable rather than filling 1440px. */
.home3-hero {
  position: relative;
  max-width: 940px; margin: 0 auto;
  text-align: center;
  padding-top: clamp(10px, 3vw, 40px);
}

.home3-h1 {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 68px);
  font-weight: 800; letter-spacing: -.042em; line-height: 1.03;
  color: var(--ink);
  text-wrap: balance;
}

.home3-sub {
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}

/* ── THE FIELD ────────────────────────────────────────────────────────── */
.home3-form { margin-top: clamp(26px, 3.2vw, 44px); }

.home3-field {
  display: flex; align-items: center; gap: 14px;
  width: min(620px, 100%); margin: 0 auto;
  padding: 0 24px;
  background: var(--lift);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.home3-field:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-2), 0 0 0 4px rgba(109,74,240,.14);
}
.home3-field-i { flex: none; color: var(--ink-3); }

.home3-input {
  flex: 1; min-width: 0;
  padding: 19px 0;
  border: 0; outline: none; background: none;
  font-size: clamp(15px, 1.15vw, 17px); color: var(--ink);
}
.home3-input::placeholder { color: var(--ink-4); }

/* ── CHIPS ────────────────────────────────────────────────────────────────
   Small, pale and quiet — a shortcut, not a taxonomy. The chosen one gains a
   filled ground, a border, heavier ink AND a mark, so the choice survives a
   greyscale screen. */
.home3-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 18px;
}
.home3-chip {
  min-height: 38px; padding: 8px 18px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--lav-2);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  /* WAS `#4A4F76` ON A HARDCODED VIOLET WASH. Neither followed the theme, so
     the dark palette rendered this chip at 2.33 : 1 — and neither moved when
     the product's accent did. */
  color: var(--chip-ink); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.home3-chip:hover { background: var(--lav-3); color: var(--ink); }
.home3-chip.is-on {
  background: var(--lav-3);
  border-color: var(--primary);
  color: var(--violet-text);
}
.home3-chip.is-on::before { content: "\2713"; margin-right: 7px; font-size: 11px; }
.home3-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── THE TWO ACTIONS ──────────────────────────────────────────────────── */
.home3-cta {
  display: flex; justify-content: center; align-items: center;
  gap: 16px; margin-top: clamp(24px, 2.6vw, 34px); flex-wrap: wrap;
}
.home3-go { padding: 16px 30px; border-radius: var(--r-pill); font-size: var(--t-body); }
.home3-share { padding: 15px 28px; border-radius: var(--r-pill); background: var(--lift); }

/* ── THE HANDWRITTEN ASIDES ───────────────────────────────────────────────
   Italic, small, muted and absolutely positioned beside the hero. They are
   decoration: they carry no instruction, and they vanish below the desktop
   breakpoint rather than fighting the hero for room. */
.home3-aside {
  position: absolute; z-index: 1;
  margin: 0; max-width: 20ch;
  font-size: 14px; font-style: italic; line-height: 1.5;
  color: #8B93B8;
  transform: rotate(-4deg);
  pointer-events: none; user-select: none;
}
.home3-aside.is-left  { left: -4%;  bottom: -34px; text-align: left; }
.home3-aside.is-right { right: -4%; top: 128px; text-align: left; transform: rotate(3deg); }

@media (max-width: 1180px) { .home3-aside { display: none; } }

/* ── THE TABLE SCENE ─────────────────────────────────────────────────────
   The drawing and its central sentence share one positioning context, so the
   text can sit over the oval without either of them measuring the other. */
.home3-scene {
  max-width: 1060px;
  margin: clamp(24px, 4vw, 56px) auto 0;
}

/* The drawing's own box. The sentence is positioned against THIS, not against
   the section, so the phone's label row underneath cannot push it off the
   table. */
.home3-stage { position: relative; }

.home3-svg { display: block; width: 100%; height: auto; }
.home3-svg.is-narrow { display: none; }

/* Over the oval. The ellipse centre falls at 72% of the wide viewBox; the
   sentence sits a shade below it because the table is drawn in perspective —
   its far rim is higher than its near one, so the optical middle is lower than
   the geometric one. */
.home3-msg {
  position: absolute; left: 50%; top: 74%;
  transform: translate(-50%, -50%);
  margin: 0; width: min(360px, 60%);
  text-align: center; line-height: 1.34;
  font-size: clamp(15px, 1.45vw, 20px);
  pointer-events: none;
}
.home3-msg b { display: block; font-weight: 700; color: var(--ink); }
.home3-msg span { color: var(--ink-2); }

/* The phone's copy of the three perspective words. Hidden on desktop, where
   the drawing carries them itself. */
.home3-seats { display: none; }

/* ── THE FOOT ─────────────────────────────────────────────────────────── */
.home3-foot {
  max-width: 1060px; margin: clamp(20px, 3vw, 40px) auto 0;
  padding: clamp(18px, 2vw, 26px) 0 clamp(34px, 4vw, 56px);
  border-top: 1px solid var(--line);
  display: grid; gap: 14px; justify-items: center; text-align: center;
}
.home3-foot-line { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.home3-foot-mark { display: inline-flex; align-items: baseline; gap: 9px; }
.home3-foot-word { font-size: 17px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.home3-foot-tag { font-size: var(--t-xs); color: var(--ink-3); }
.home3-foot-note {
  margin: 0; max-width: 62ch;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}

/* ── PHONE ────────────────────────────────────────────────────────────────
   Not the desktop scene scaled. The asides and the plant go, the actions go
   full width, the drawing is swapped for the narrow composition, and the
   labels come out of the picture and become text. */
@media (max-width: 720px) {
  /* THE BAR IS FIXED AND THE HOME IS NOT A .stage, so it never inherited the
     clearance the rest of the app gets. At 18px the headline started 34px
     underneath the header and the first word was simply gone. */
  .home3 { padding-top: 76px; }
  .home3-plant { display: none; }

  /* Room for the one action. `Dodaj swoją drogę` is three words and it was
     wrapping to two lines inside a 63px bar; nowrap plus the tighter padding
     keeps it on one line, and the language control stands down on a phone —
     the MVP is Polish, the approved phone header carries no language picker,
     and 375px cannot hold the mark, a picker, the action and the account at a
     legible size. Language remains switchable on every wider screen. */
  .topbar.is-v3 .nav-cta { white-space: nowrap; padding: 12px 12px; }
  .topbar.is-v3 .lang { display: none; }

  .home3-h1 { font-size: clamp(30px, 8.6vw, 40px); letter-spacing: -.035em; }
  .home3-sub { font-size: 16px; max-width: 34ch; }

  .home3-field { padding: 0 18px; gap: 11px; }
  .home3-input { padding: 16px 0; font-size: 16px; }  /* 16px: iOS must not zoom */

  .home3-chips { gap: 8px; margin-top: 16px; }
  .home3-chip { padding: 8px 14px; font-size: var(--t-xs); }

  .home3-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .home3-go, .home3-share { width: 100%; justify-content: center; }

  .home3-svg.is-wide { display: none; }
  .home3-svg.is-narrow { display: block; }

  /* NOT the oval's centre, but the empty half of it. The chairs stand on the
     far rim and their contact shadows reach a little past their feet, so a
     sentence centred on the geometric middle clipped the two outer ones. This
     sits in the near half, where there is nothing but table. The narrower
     measure keeps it clear of the arms as well as the shadows. */
  .home3-msg { top: 82%; width: min(230px, 66%); font-size: 15px; }

  .home3-seats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-top: 16px;
  }
  .home3-seat {
    padding: 7px 13px; border-radius: var(--r-pill);
    border: 1px solid var(--line-2); background: var(--lift);
    font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  }

  .home3-foot { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .home3-field, .home3-chip { transition: none; }
}

/* ============================================================================
   THE QUIZ  ·  Zbuduj swój Stół
   ----------------------------------------------------------------------------
   Two columns on a desktop: the questions on the left, the table being set on
   the right. One column on a phone, with the drawing after the answers rather
   than squeezed beside them.

   THE SELECTED OPTION IS NOT BLUE. It is blue AND filled AND bordered AND
   marked with a tick, because a state carried by hue alone is a state a
   colour-blind reader cannot see and a greyscale printout loses entirely.

   THE INPUT IS REAL. Each option is a native radio or checkbox inside its own
   <label>; the control is hidden from sight, never from the browser. Arrow
   keys move between radios, Space toggles a checkbox, the focus ring lands on
   the card, and none of that is code we wrote.
   ============================================================================ */

.quiz3 { padding-bottom: clamp(40px, 6vw, 80px); }

/* The quiz carries its own context row — `‹ Powrót do Polski ✎` — so the
   app's breadcrumb above it would say the same thing twice in two different
   voices. The approved design has one. */
body:has(.quiz3) .crumbs { display: none; }

.quiz3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  max-width: 1180px; margin: 0 auto;
}

.quiz3-main { min-width: 0; max-width: 640px; }

/* ── THE CONTEXT ROW ──────────────────────────────────────────────────────
   ‹ subject ✎ — small, quiet, and empty until there is something true to put
   in it. It never names a country the person did not give. */
.quiz3-ctx {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.quiz3-ctx-back, .quiz3-ctx-edit {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px because they are the only way back to the decision from here, and a
     34px target on a phone is a target somebody misses. */
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-pill); color: var(--ink-3);
  border: 1px solid transparent; background: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.quiz3-ctx-back:hover, .quiz3-ctx-edit:hover { background: var(--wash-2); color: var(--ink); }
.quiz3-ctx-back:focus-visible, .quiz3-ctx-edit:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.quiz3-ctx-t {
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quiz3-ctx-t.is-empty { font-weight: 500; color: var(--ink-3); font-style: italic; }

/* ── PROGRESS ─────────────────────────────────────────────────────────── */
.quiz3-prog { display: flex; align-items: center; gap: 14px; }
.quiz3-bar { display: flex; gap: 6px; flex: 1; max-width: 320px; }
.quiz3-seg {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--lift-2); border: 1px solid var(--line);
}
/* Done and current differ from each other, not only from the rest: the
   current one is the primary hue, the finished ones a settled blue. */
.quiz3-seg.is-done { background: var(--blue); border-color: var(--blue); }
.quiz3-seg.is-on   { background: var(--primary); border-color: var(--primary); }
.quiz3-prog-n {
  font-size: var(--t-xs); font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── HEADINGS ─────────────────────────────────────────────────────────── */
.quiz3-title {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800; letter-spacing: -.038em; line-height: 1.05;
  color: var(--ink);
}
.quiz3-q {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 700; letter-spacing: -.028em; line-height: 1.25;
  color: var(--ink);
}
.quiz3-help {
  margin: 10px 0 0;
  font-size: var(--t-sm); color: var(--ink-3);
}

/* ── OPTIONS ──────────────────────────────────────────────────────────── */
.quiz3-set { border: 0; margin: 0; padding: 0; min-width: 0; }

.quiz3-opts {
  display: grid; gap: 12px;
  margin-top: clamp(20px, 2.2vw, 28px);
}
/* Step four uses two columns on a wide screen, as the reference does. It
   collapses below, because two narrow columns of Polish sentences is not a
   layout, it is a word search. */
.quiz3-opts.is-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.quiz3-opt {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 14px 20px;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); color: var(--ink);
  font-size: var(--t-body); font-weight: 600; line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.quiz3-opt:hover { border-color: var(--line-3); background: var(--lift-2); }

/* Hidden from sight, present for the browser. Never display:none — that would
   take it out of the tab order and out of the radio group. */
.quiz3-input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0;
}

/* The marker: a ring for a radio, a rounded square for a checkbox. */
.quiz3-mark {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-pill);
  border: 1.8px solid var(--line-3); background: var(--ground);
  display: inline-grid; place-items: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quiz3-opts.is-multi .quiz3-mark { border-radius: 7px; }

.quiz3-opt-t { min-width: 0; }

/* THE SELECTED STATE, FOUR WAYS AT ONCE: filled ground, matching border,
   inverted ink, and a tick drawn in the marker. */
.quiz3-opt.is-on {
  background: var(--blue); border-color: var(--blue); color: #FFFFFF;
  box-shadow: var(--shadow-2);
}
.quiz3-opt.is-on .quiz3-mark { background: #FFFFFF; border-color: #FFFFFF; }
.quiz3-opt.is-on .quiz3-mark::after {
  content: "\2713"; font-size: 13px; font-weight: 800; color: var(--blue); line-height: 1;
}

/* The ring lands on the card, because the card is what a person is aiming at. */
.quiz3-input:focus-visible + .quiz3-mark { outline: none; }
.quiz3-opt:has(.quiz3-input:focus-visible) {
  outline: 2px solid var(--primary); outline-offset: 3px;
}

/* ── THE OPEN QUESTION ────────────────────────────────────────────────── */
.quiz3-textwrap { margin-top: clamp(20px, 2.2vw, 28px); }
.quiz3-ta {
  width: 100%; display: block;
  padding: 16px 18px; resize: vertical;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); color: var(--ink);
  font: inherit; font-size: var(--t-body); line-height: 1.55;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quiz3-ta::placeholder { color: var(--ink-4); }
.quiz3-ta:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(109,74,240,.14);
}

/* ── THE ERROR ────────────────────────────────────────────────────────────
   Beside the controls it belongs to, tied to them by aria-describedby, and
   announced rather than shouted from a dialogue box. Empty means silent: it
   takes up no room until it has something to say. */
.quiz3-err {
  margin: 0; min-height: 0;
  font-size: var(--t-sm); font-weight: 600; color: var(--danger);
}
.quiz3-err.is-on {
  margin-top: 14px;
  display: flex; align-items: flex-start; gap: 8px;
}
.quiz3-err.is-on::before { content: "!"; font-weight: 800; }

/* ── BACK / NEXT ──────────────────────────────────────────────────────── */
.quiz3-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: clamp(26px, 3vw, 40px);
}
.quiz3-back { padding: 14px 26px; border-radius: 12px; background: var(--lift-2); }
.quiz3-next { padding: 15px 28px; border-radius: 12px; font-size: var(--t-body); }

/* ── THE TABLE BEING SET ──────────────────────────────────────────────── */
.quiz3-side { position: sticky; top: 104px; }
.quiz3-svg { display: block; width: 100%; height: auto; }
.quiz3-side-note {
  margin: 10px 0 0; text-align: center;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3);
  max-width: 34ch; margin-inline: auto;
}

/* ── THE END ──────────────────────────────────────────────────────────── */
.quiz3-done { max-width: 640px; margin: 0 auto; text-align: center; }
.quiz3-done-t {
  margin: 0; font-size: clamp(26px, 3vw, 38px);
  font-weight: 800; letter-spacing: -.035em; color: var(--ink);
}
.quiz3-done-d {
  margin: 18px auto 0; max-width: 52ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}
.quiz3-done-a {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 30px; flex-wrap: wrap;
}
.quiz3-done-n {
  margin: 26px auto 0; max-width: 48ch;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}

/* ── PHONE ────────────────────────────────────────────────────────────────
   One column. The drawing follows the answers instead of sitting beside them,
   and both option grids become a single column so a Polish sentence is never
   split across two 150px lanes. */
@media (max-width: 900px) {
  .quiz3-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .quiz3-main { max-width: none; }
  .quiz3-side { position: static; order: 2; max-width: 320px; margin-inline: auto; }
}

@media (max-width: 720px) {
  .quiz3-opts.is-multi { grid-template-columns: minmax(0, 1fr); }
  .quiz3-opt { min-height: 56px; padding: 13px 16px; font-size: var(--t-sm); }
  .quiz3-actions { gap: 10px; }
  .quiz3-back, .quiz3-next { flex: 1; justify-content: center; padding: 14px 16px; }
  .quiz3-ta { font-size: 16px; }     /* 16px: iOS must not zoom the page */
  .quiz3-prog-n { font-size: 11px; }
  .quiz3-done-a > * { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz3-opt, .quiz3-mark, .quiz3-ta,
  .quiz3-ctx-back, .quiz3-ctx-edit { transition: none; }
}

/* ============================================================================
   THE DECISION CARD  ·  Czy dobrze Cię rozumiemy?
   ----------------------------------------------------------------------------
   One column, one card, two actions. There is no dedicated approved comp for
   this screen, so it is built out of the system the other four demonstrate:
   the quiz's content width and navy hierarchy, the Home's card surface, and
   the shell's button scale. It should read as the screen AFTER the quiz, not
   as a report about somebody.

   NOTHING ON IT IS A METER. No bar, no dial, no ring, no percentage and no
   badge — this file contains no rule that could draw one, on purpose.
   ============================================================================ */

.dc3 { padding-bottom: clamp(40px, 6vw, 80px); }

/* The quiz's measure, so the two screens feel like one journey rather than
   two designs that happen to follow each other. */
.dc3-wrap { max-width: 720px; margin: 0 auto; }

.dc3-eyebrow {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--primary);
}
.dc3-title {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800; letter-spacing: -.038em; line-height: 1.06;
  color: var(--ink); text-wrap: balance;
}
.dc3-lead {
  margin: clamp(12px, 1.4vw, 18px) 0 0; max-width: 54ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}

/* ── THE CARD ─────────────────────────────────────────────────────────── */
.dc3-card {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  /* A hairline between blocks rather than a border on each: the card is one
     object, and boxes inside boxes is how this turns into a dashboard. */
  gap: 0;
}
.dc3-block { padding: clamp(18px, 2.2vw, 26px) 0; border-top: 1px solid var(--line); }
.dc3-block:first-child { padding-top: 0; border-top: 0; }
.dc3-block:last-child { padding-bottom: 0; }

.dc3-block-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 28px;
}
.dc3-k {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-3);
}

/* The one action that can change what a block says. Quiet until wanted, and a
   real target when it is: 44px tall, its label spelled out for a screen
   reader, and never the only thing carrying a meaning by colour. */
.dc3-edit {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 6px 12px; margin-right: -12px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: none; font-family: inherit;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.dc3-edit:hover { background: var(--wash-2); color: var(--ink); border-color: var(--line); }
.dc3-edit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── WHAT THEY SAID ───────────────────────────────────────────────────── */
.dc3-line {
  margin: 12px 0 0;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45;
  font-weight: 600; letter-spacing: -.015em; color: var(--ink);
}
.dc3-raw { font-weight: 500; font-size: var(--t-read); color: var(--ink-2); }

/* Tags: three facts, scannable. They are list items, NOT buttons — nothing
   happens when you press one, so nothing about them may suggest it. */
.dc3-tags {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.dc3-tag {
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(109,74,240,.22);
  background: rgba(124,110,240,.09);
  font-size: var(--t-sm); font-weight: 600; color: var(--chip-ink);
}

/* Fears: a list, in the quiz's order. The marker is the same for both — a
   sequence here is chronology, never severity. */
.dc3-fears { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dc3-fear {
  position: relative; padding-left: 22px;
  font-size: var(--t-read); font-weight: 600; line-height: 1.45; color: var(--ink);
}
.dc3-fear::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--blue);
}

/* Their own words. The heaviest thing on the card, because it is the only
   sentence on it that nobody but them wrote. */
.dc3-quote {
  margin: 14px 0 0; padding: 16px 20px;
  border: 0; border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--lift-2);
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5;
  font-weight: 600; letter-spacing: -.015em; color: var(--ink);
}

/* ── THE NOTE, AND THE TWO ACTIONS ────────────────────────────────────── */
.dc3-note {
  margin: clamp(16px, 2vw, 22px) 0 0; max-width: 58ch;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}
.dc3-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: clamp(22px, 2.6vw, 32px); flex-wrap: wrap;
}
.dc3-back { padding: 14px 26px; border-radius: 12px; background: var(--lift-2); }
.dc3-go { padding: 15px 28px; border-radius: 12px; font-size: var(--t-body); }

/* ── NOTHING TO READ BACK YET ─────────────────────────────────────────── */
.dc3-empty { max-width: 620px; margin: clamp(20px, 5vw, 60px) auto 0; text-align: center; }
.dc3-empty-t {
  margin: 0; font-size: clamp(26px, 3vw, 38px);
  font-weight: 800; letter-spacing: -.035em; color: var(--ink);
}
.dc3-empty-d {
  margin: 18px auto 0; max-width: 52ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}
.dc3-empty-a {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 30px; flex-wrap: wrap;
}

/* ── PHONE ────────────────────────────────────────────────────────────────
   A vertical read, and both actions full width with the primary one last so
   the thumb lands on it. Nothing is miniaturised. */
@media (max-width: 720px) {
  .dc3-quote { padding: 14px 16px; font-size: 17px; }
  .dc3-line { font-size: 17px; }
  /* Stacked in DOM order, so what a screen reader reads and what the eye
     sees are the same sequence: correct first, continue second. */
  .dc3-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .dc3-back, .dc3-go { width: 100%; justify-content: center; padding: 15px 18px; }
  .dc3-empty-a > * { flex: 1; justify-content: center; }
  /* The heading row wraps rather than squeezing the label to nothing. */
  .dc3-edit { margin-right: -8px; padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc3-edit { transition: none; }
}

/* ============================================================================
   THE EXPERIENCE TABLE  ·  three seats around one question
   ----------------------------------------------------------------------------
   Built to reference 02. The composition is a centred oval with a card to its
   left, a card to its right and a card below it, joined by hairlines that end
   in a small dot at the card.

   NOTHING HERE CAN DRAW A RANKING. There is no rule for a badge, a number, a
   medal, a bar or a percentage anywhere in this block, and the three seats are
   styled identically — position is layout, not standing. An empty seat is
   styled as an ABSENCE (dashed, pale, unfilled) rather than as a broken card,
   because that is what it is.
   ============================================================================ */

.tb3 { padding-bottom: clamp(30px, 4vw, 56px); }

/* The Table carries its own way back — `← Wróć do swojej decyzji` — and the
   approved screen has no breadcrumb above it. The same treatment the quiz
   already gets, and it leaves the legacy Crossroads (which has no .tb3)
   exactly as it was. */
body:has(.tb3) .crumbs { display: none; }
/* The legacy `.back` is a 21px text link. It is the only way back to the
   decision from here, so on this screen it gets a real target. */
.tb3-back {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 10px; margin-left: -10px;
  margin-bottom: clamp(6px, 1vw, 12px);
  border-radius: var(--r-btn);
}
.tb3-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── THE HEAD ─────────────────────────────────────────────────────────── */
.tb3-head { max-width: 860px; margin: 0 auto; text-align: center; }
.tb3-eyebrow {
  margin: 0; font-size: var(--t-sm); color: var(--ink-3); font-weight: 500;
}
.tb3-title {
  margin: 10px 0 0;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  color: var(--ink); text-wrap: balance;
}

/* Context the person gave, for scanning. List items, never buttons, and never
   a count or a weight — a few facts, in the order they were answered. */
.tb3-chips {
  list-style: none; margin: clamp(14px, 1.8vw, 22px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.tb3-chip {
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--lav-2); color: var(--chip-ink);
  font-size: var(--t-sm); font-weight: 600;
}
.tb3-lead {
  margin: clamp(14px, 1.8vw, 20px) auto 0; max-width: 62ch;
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3);
}

/* ── THE STAGE ────────────────────────────────────────────────────────────
   Three columns and two rows. The oval holds the middle of the first row; the
   two side seats flank it; the third sits under it. The DOM order is the seat
   order and grid placement does the rest, so what a screen reader reads is
   never dictated by where a card happens to sit. */
.tb3-stage {
  position: relative;
  max-width: 1220px; margin: clamp(26px, 4vw, 52px) auto 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 364px) minmax(220px, 1fr);
  grid-template-rows: auto auto;
  /* The gap is load-bearing: reference 02 leaves roughly a seventh of the
     width between each card and the oval, which is what gives the connectors
     something to cross and the composition its air. */
  column-gap: clamp(18px, 6vw, 92px);
  row-gap: clamp(26px, 3.4vw, 48px);
  align-items: center;
}

/* The hairlines. Stretched to the stage rather than measured, so no number in
   here has to know how wide a window is. Decorative throughout. */
.tb3-wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.tb3-wire { fill: none; stroke: #9FB4E8; stroke-width: 1.4; opacity: .75; }
.tb3-wire.is-b { stroke: #A99BF0; }

/* ── THE OVAL ─────────────────────────────────────────────────────────────
   The visual centre of the decision. Not a control: it has no hover, no
   pointer and nothing happens when it is pressed. */
.tb3-oval {
  grid-column: 2; grid-row: 1; z-index: 1;
  justify-self: center; align-self: center;
  width: 100%; max-width: 364px; aspect-ratio: 2.65 / 1;
  display: grid; place-content: center; text-align: center;
  padding: 0 24px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF 38%, #F4F7FE 78%, #EEF2FC 100%);
  box-shadow: 0 18px 46px -26px rgba(16,19,28,.30), 0 0 0 1px rgba(214,224,246,.55);
}
.tb3-oval-t {
  margin: 0; font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.tb3-oval-d {
  margin: 6px 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3);
}

/* ── THE SEATS ────────────────────────────────────────────────────────── */
.tb3-seats { display: contents; list-style: none; margin: 0; padding: 0; }
.tb3-seat { position: relative; z-index: 1; min-width: 0; }
.tb3-seat.is-p0 { grid-column: 1; grid-row: 1; }
.tb3-seat.is-p1 { grid-column: 3; grid-row: 1; }
.tb3-seat.is-p2 { grid-column: 2; grid-row: 2; }

/* The endpoint dot, drawn on the card so it stays round whatever the wires
   behind it are stretched to. */
.tb3-seat::after {
  content: ""; position: absolute; z-index: 2;
  width: 9px; height: 9px; border-radius: var(--r-pill);
  background: #6E8FE0;
}
.tb3-seat.is-p0::after { right: -5px; top: 46%; }
.tb3-seat.is-p1::after { left: -5px; top: 46%; background: #8E7AE2; }
.tb3-seat.is-p2::after { top: -5px; left: 50%; margin-left: -4px; background: #8E7AE2; }

/* ── A SEAT THAT IS TAKEN ─────────────────────────────────────────────── */
.tb3-card {
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 18px 40px -28px rgba(16,19,28,.35), var(--shadow-1);
  padding: clamp(18px, 1.8vw, 24px);
}

.tb3-card-h { display: flex; align-items: center; gap: 12px; }
.tb3-av {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  /* NO `color` HERE ANY MORE. The mark is a pale tint with a dark letter, and
     both come from the same hue — see `wash()` in ExperienceTable.js, which
     sets them together inline so the pair can never drift apart. A white
     default here would have won on the anonymous variant and lost on every
     other, which is exactly the kind of half-applied rule it replaces. */
  font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  font-family: var(--font-display);
  box-shadow: inset 0 0 0 1px rgba(10,14,56,.06);
}
/* Anonymity has a look of its own — a neutral glyph, not a face and not a
   letter borrowed from a name the person asked us not to show. */
.tb3-av.is-anon {
  background: var(--lift-2); color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.tb3-who { min-width: 0; }
.tb3-name {
  margin: 0; font-size: var(--t-body); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
.tb3-when { margin: 2px 0 0; font-size: var(--t-xs); color: var(--ink-3); }

.tb3-route {
  margin: clamp(14px, 1.4vw, 18px) 0 0;
  font-size: clamp(16px, 1.35vw, 19px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.35; color: var(--ink);
}
.tb3-shape { margin: 6px 0 0; font-size: var(--t-sm); color: var(--ink-2); }

.tb3-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: clamp(14px, 1.4vw, 18px);
  padding-top: 6px; border-top: 1px solid var(--line);
}
.tb3-why, .tb3-open {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 6px 10px; margin-inline: -10px;
  border: 0; background: none; border-radius: var(--r-btn);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--primary); cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.tb3-why:hover, .tb3-open:hover { color: var(--primary-lit); }
.tb3-why:focus-visible, .tb3-open:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
/* The chevron turns, so the state is carried by shape as well as by the
   panel appearing — never by colour on its own. */
.tb3-why svg { transition: transform var(--dur) var(--ease); }
.tb3-why.is-open svg { transform: rotate(180deg); }

/* ── WHY THIS STORY ───────────────────────────────────────────────────────
   One line, from the matcher's own slot. The fuller account — what you share
   and what you do not — is a later screen, and this block deliberately has no
   room for it. */
/* The class sets `display:flex`, which would otherwise out-rank the reset's
   `[hidden]` rule by arriving later — a panel that is closed in the markup and
   open on the screen. Stated explicitly so the two cannot disagree. */
.tb3-why-panel[hidden] { display: none; }
.tb3-why-panel {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 14px; padding: 16px;
  border-radius: var(--r-card);
  background: var(--lift-2); border: 1px solid var(--line);
}
.tb3-why-badge {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: rgba(109,74,240,.10); color: var(--primary);
}
.tb3-why-body { min-width: 0; }
.tb3-why-t {
  margin: 0; font-size: var(--t-sm); font-weight: 700;
  line-height: 1.45; color: var(--ink);
}
.tb3-why-t.is-none { font-weight: 500; color: var(--ink-3); font-style: italic; }
.tb3-why-a { margin-top: 12px; }
.tb3-ask { padding: 10px 18px; border-radius: 11px; font-size: var(--t-sm); }
.tb3-why-n { margin: 10px 0 0; font-size: var(--t-xs); color: var(--ink-4); line-height: 1.5; }

/* ── A SEAT THAT IS EMPTY ─────────────────────────────────────────────────
   Reference 03's treatment: a dashed ring with a plus, standing on the same
   pale base a taken seat stands on. It is unmistakably a SEAT and
   unmistakably not a person — no card, no avatar, no name, and no route to
   anybody. */
.tb3-empty {
  display: grid; justify-items: center; text-align: center;
  padding: clamp(14px, 1.6vw, 22px) 10px;
}
.tb3-empty-mark { position: relative; display: block; width: 92px; height: 92px; }
.tb3-empty-ring {
  position: absolute; left: 7px; top: 0;
  display: grid; place-items: center;
  width: 78px; height: 78px; border-radius: var(--r-pill);
  border: 2px dashed #B9C6E8;
  color: #8E9BC2; font-size: 26px; font-weight: 300; line-height: 1;
  background: rgba(255,255,255,.55);
}
/* The base the seat stands on, echoing the filled seats in reference 03. */
.tb3-empty-base {
  position: absolute; left: 12px; bottom: 2px;
  width: 68px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #E4EAF7, #D4DCEF);
  box-shadow: 0 8px 14px -8px rgba(16,19,28,.35);
}
.tb3-empty-t {
  margin: 14px 0 0; font-size: var(--t-body); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink-2); max-width: 18ch;
}
.tb3-empty-d {
  margin: 6px 0 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 24ch;
}
.tb3-empty-a { margin-top: 8px; font-size: var(--t-xs); }

/* ── NOBODY AT ALL, AND NOTHING TO SEAT ───────────────────────────────── */
.tb3-none {
  max-width: 560px; margin: clamp(24px, 3vw, 40px) auto 0;
  text-align: center;
}
.tb3-none-t { margin: 0; font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.tb3-none-d { margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3); }

/* ── NOT ENOUGH OF A DECISION TO SEAT ANYTHING ────────────────────────── */
.tb3-guard { max-width: 620px; margin: clamp(20px, 5vw, 60px) auto 0; text-align: center; }
.tb3-guard-t {
  margin: 0; font-size: clamp(26px, 3vw, 38px);
  font-weight: 800; letter-spacing: -.035em; color: var(--ink);
}
.tb3-guard-d {
  margin: 18px auto 0; max-width: 50ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}
.tb3-guard-a {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 30px; flex-wrap: wrap;
}

/* ── PHONE ────────────────────────────────────────────────────────────────
   One column, and still one Table. The oval comes first so the question is
   read before any answer to it, the seats stack under it in the same order,
   and a single hairline runs down the stack so the three of them still read as
   sitting around one thing rather than as a feed. */
@media (max-width: 900px) {
  .tb3-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 22px;
  }
  .tb3-wires { display: none; }

  .tb3-oval {
    grid-column: 1; grid-row: auto;
    max-width: 420px; aspect-ratio: 2.4 / 1;
  }
  .tb3-seat.is-p0, .tb3-seat.is-p1, .tb3-seat.is-p2 { grid-column: 1; grid-row: auto; }

  /* The shared spine. Decorative, and it runs between the seats rather than
     trailing off the end of the page. */
  .tb3-seat::before {
    content: ""; position: absolute; left: 50%; top: -22px;
    width: 1.4px; height: 22px; margin-left: -.7px;
    background: #C4D0EC;
  }
  /* Written at the same specificity as the desktop placement rules, or those
     would keep winning inside this query and leave the dot halfway down the
     card instead of on the spine above it. */
  .tb3-seat.is-p0::after,
  .tb3-seat.is-p1::after,
  .tb3-seat.is-p2::after {
    left: 50%; right: auto; top: -5px; margin-left: -4px;
  }
  .tb3-seat.is-p0::after { background: #6E8FE0; }
}

@media (max-width: 720px) {
  .tb3-title { font-size: clamp(26px, 7.4vw, 34px); letter-spacing: -.032em; }
  .tb3-chip { padding: 6px 13px; font-size: var(--t-xs); }
  .tb3-oval { aspect-ratio: 2.1 / 1; padding: 0 18px; }
  .tb3-card { padding: 16px; }
  .tb3-route { font-size: 17px; }
  /* Two actions, one under the other. Side by side they were 150px wide and
     the longer label wrapped into the shorter one. */
  .tb3-foot { flex-direction: column; align-items: stretch; gap: 0; }
  .tb3-why, .tb3-open { justify-content: space-between; margin-inline: 0; padding: 6px 2px; }
  .tb3-ask { width: 100%; justify-content: center; }
  .tb3-guard-a > * { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tb3-why, .tb3-open, .tb3-why svg { transition: none; }
}

/* ============================================================================
   DLACZEGO TA HISTORIA?  ·  one panel, under the Table
   ----------------------------------------------------------------------------
   Reference 02's bottom panel: a wide white surface, a pale circular badge
   with a bulb, a small letter-spaced eyebrow, the account, then the actions.

   IT IS ATTACHED TO THE TABLE, NOT FLOATING UNDER IT. The seat that is open
   carries a ring of the same colour, so the eye can get back to which of the
   three this is about without reading anything.
   ============================================================================ */

.tb3-why-slot { max-width: 1220px; margin: clamp(20px, 2.6vw, 34px) auto 0; }

/* The open seat, marked by more than a colour: a ring AND a heavier rule. */
.tb3-card.is-selected {
  border-color: rgba(109,74,240,.45);
  box-shadow: 0 18px 40px -26px rgba(109,74,240,.45),
              0 0 0 1px rgba(109,74,240,.35) inset;
}

.why3 {
  display: flex; gap: clamp(14px, 1.8vw, 22px); align-items: flex-start;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px -30px rgba(16,19,28,.4), var(--shadow-1);
}
.why3-badge {
  flex: none; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: var(--r-pill);
  background: rgba(109,74,240,.10); color: var(--primary);
}
.why3-body { min-width: 0; flex: 1; }

.why3-eyebrow {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-3);
}
.why3-who {
  margin: 8px 0 0; font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 800; letter-spacing: -.025em; color: var(--ink);
}

/* The composer's reason for the seat. Quiet on purpose: it explains the
   TABLE, and the two lists below explain the pairing, which is what the
   reader came for. */
.why3-slot {
  margin: 5px 0 0; font-size: var(--t-sm); line-height: 1.45;
  font-weight: 600; color: var(--ink-3);
}

/* Two columns of evidence on a wide screen, one on a narrow one. Neither is
   a chart, a meter or a score — they are two short lists. */
.why3-cols {
  display: grid; gap: clamp(14px, 2vw, 30px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(16px, 1.8vw, 22px);
}
.why3-sec { min-width: 0; }
.why3-k {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--primary);
}
.why3-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.why3-li {
  position: relative; padding-left: 20px;
  font-size: var(--t-sm); line-height: 1.5; font-weight: 600; color: var(--ink);
}
.why3-li::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--blue);
}
/* An absence of evidence is said once, quietly, and never given the weight of
   a fact. */
.why3-none {
  margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.55;
  color: var(--ink-3); font-style: italic;
}

.why3-caveat {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  padding-top: clamp(14px, 1.6vw, 18px); border-top: 1px solid var(--line);
  font-size: var(--t-body); font-weight: 700; letter-spacing: -.015em; color: var(--ink);
}

/* What the engine could not do. Collapsed, small, and never called a
   difference. */
.why3-gaps { margin-top: 12px; }
.why3-gaps > summary {
  cursor: pointer; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
  min-height: 32px; display: inline-flex; align-items: center;
}
.why3-gaps > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.why3-gaplist {
  margin: 8px 0 0; padding-left: 18px;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}

.why3-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(16px, 1.8vw, 22px); flex-wrap: wrap;
}
.why3-read { padding: 14px 26px; border-radius: 12px; font-size: var(--t-body); }
.why3-ask { padding: 13px 22px; border-radius: 12px; font-size: var(--t-sm); }
.why3-note { margin: 10px 0 0; font-size: var(--t-xs); color: var(--ink-4); }

@media (max-width: 720px) {
  .why3 { flex-direction: column; gap: 14px; padding: 18px; }
  .why3-badge { width: 44px; height: 44px; }
  .why3-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .why3-actions { flex-direction: column; align-items: stretch; }
  .why3-read, .why3-ask { width: 100%; justify-content: center; }
}

/* ============================================================================
   THE STORY READER  ·  Przed · Decyzja · Po · Dzisiaj
   ----------------------------------------------------------------------------
   There is no approved comp for this screen, so it is built from the system
   the other four demonstrate: the quiz's measure, the Home's surface, the
   shell's buttons. Long-form reading is the whole job, so the column is
   deliberately narrower than the Table's.
   ============================================================================ */

.st3 { padding-bottom: clamp(30px, 4vw, 56px); }
.st3-wrap { max-width: 760px; margin: 0 auto; }

/* ── THE HEAD ─────────────────────────────────────────────────────────── */
.st3-eyebrow {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--primary);
}
.st3-title {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.06;
  color: var(--ink); text-wrap: balance;
}
.st3-who {
  margin: 12px 0 0; font-size: var(--t-sm); color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: baseline;
}
.st3-name { font-weight: 700; color: var(--ink-2); }
.st3-dot { color: var(--ink-4); }

/* THE ONE SET OF QUOTATION MARKS ON THE PAGE. Everything else the record
   holds is composed prose and is never dressed as speech. */
.st3-quote {
  margin: clamp(18px, 2vw, 26px) 0 0; padding: 18px 22px;
  border: 0; border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--lift-2);
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5;
  font-weight: 600; letter-spacing: -.015em; color: var(--ink);
}

/* ── THE TABS ─────────────────────────────────────────────────────────── */
.tabs3 { margin-top: clamp(24px, 3vw, 36px); }
.tabs3-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px; padding: 5px;
  background: var(--lift-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.tabs3-tab {
  min-height: 44px; padding: 10px 8px;
  border: 0; border-radius: var(--r-pill); background: none;
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-3); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs3-tab:hover { color: var(--ink); }
.tabs3-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* THE ACTIVE TAB IS NOT ONLY A COLOUR: it is filled, it is heavier, and it
   carries a rule. Two of those survive greyscale. */
.tabs3-tab.is-on {
  background: var(--lift); color: var(--ink); font-weight: 800;
  box-shadow: var(--shadow-1), inset 0 -2px 0 var(--primary);
}

.tabs3-panel { margin-top: clamp(20px, 2.4vw, 30px); }
.tabs3-panel:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

/* ── ONE PHASE ────────────────────────────────────────────────────────── */
.st3-phase { display: grid; gap: clamp(20px, 2.4vw, 30px); }

.st3-block { min-width: 0; }
.st3-k {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-3);
}
/* The reading measure. Long-form prose wants a short line, not the full
   width of a 1440px screen. */
.st3-read {
  margin: 10px 0 0; max-width: 68ch;
  font-size: var(--t-read); line-height: 1.7; color: var(--ink);
}
.st3-read.is-strong { font-weight: 700; letter-spacing: -.015em; }

/* A BLOCK THE AUTHOR WROTE AS A LIST. Record 13's approved text carries two —
   the five questions a family put to itself, and the five things she would
   prepare better. Same measure, same colour and same rhythm as the prose it
   sits among: a list here is the author's punctuation, not a design feature. */
.st3-list {
  margin: 10px 0 0; padding: 0 0 0 1.25em; max-width: 68ch;
  display: grid; gap: 6px;
}
.st3-list .st3-read { margin: 0; }

/* THE AUTHOR'S OWN LINE ABOUT THEMSELVES, directly under the byline it
   describes. Quiet on purpose — it is context for the account, and a
   profession set in the page's loudest type starts to read as a credential
   being sold. */
.st3-authorline {
  margin: 6px 0 0; font-size: var(--t-sm); color: var(--ink-3);
  max-width: 54ch;
}

.st3-opts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.st3-opt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-radius: var(--r-card);
  border: 1px solid var(--line-2); background: var(--lift);
  font-size: var(--t-sm); color: var(--ink-2);
}
/* The road taken is marked by a fill, a border AND a word — never by colour
   on its own. */
.st3-opt.is-taken {
  border-color: rgba(109,74,240,.4); background: rgba(109,74,240,.07);
  color: var(--ink); font-weight: 700;
}
.st3-opt-m {
  margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--primary); color: var(--primary-ink);
  font-size: var(--t-tag); letter-spacing: var(--track-tag); text-transform: uppercase;
}

.st3-verdict {
  margin: 10px 0 0; font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 800; letter-spacing: -.025em; color: var(--ink);
}
/* AN ABSENCE IS NOT A VERDICT, so it does not get a verdict's weight. */
.st3-verdict.is-open {
  font-size: var(--t-read); font-weight: 500; font-style: italic; color: var(--ink-3);
}

.st3-checkins { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.st3-checkins li {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  font-size: var(--t-sm); color: var(--ink-2);
}
.st3-when { font-weight: 700; color: var(--ink); min-width: 72px; }
.st3-note { color: var(--ink-3); }

/* ── WHAT THIS PHASE WAS NOT TOLD ─────────────────────────────────────────
   Collected once per phase rather than a line per field, and kept apart by
   WHICH silence it is. */
.st3-absent {
  margin-top: 4px; padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px dashed var(--line-2);
}
.st3-absent-l {
  margin: 6px 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}
.st3-absent-k { font-weight: 700; color: var(--ink-3); }

/* An entire phase with nothing in it. Said plainly; nothing is written to
   cover the gap. */
.st3-empty {
  margin: 0; padding: clamp(20px, 2.4vw, 30px);
  border: 1px dashed var(--line-2); border-radius: var(--r-card);
  background: var(--lift-2);
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-3); text-align: center;
}

/* ── PROVENANCE, KEPT AND KEPT QUIET ──────────────────────────────────── */
.st3-prov {
  margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
}
.st3-prov-k {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-4);
}
.st3-prov-l {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-size: var(--t-xs); color: var(--ink-3);
}
.st3-prov-l b { color: var(--ink-2); font-weight: 700; }
.st3-prov-n {
  margin: 12px 0 0; max-width: 62ch;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}

/* ── THE TWO ACTIONS ──────────────────────────────────────────────────── */
.st3-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(24px, 3vw, 36px); flex-wrap: wrap;
}
.st3-ask { padding: 15px 28px; border-radius: 12px; font-size: var(--t-body); }
.st3-back { padding: 14px 26px; border-radius: 12px; background: var(--lift-2); }
.st3-ask-n { margin: 12px 0 0; font-size: var(--t-xs); color: var(--ink-4); }

/* ── PHONE ────────────────────────────────────────────────────────────────
   Four short Polish words across the width, not a scrolling strip: the labels
   are Przed / Decyzja / Po / Dzisiaj and they fit when the padding gives way
   before the type does. */
@media (max-width: 720px) {
  .st3-title { font-size: clamp(25px, 7.2vw, 33px); letter-spacing: -.032em; }
  .st3-quote { padding: 14px 16px; font-size: 18px; }
  .tabs3-strip { gap: 2px; padding: 4px; }
  .tabs3-tab { padding: 10px 2px; font-size: 13px; }
  .st3-read { font-size: 16px; line-height: 1.65; }
  .st3-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .st3-ask, .st3-back { width: 100%; justify-content: center; }
  .st3-prov-l { gap: 6px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabs3-tab { transition: none; }
}


/* ============================================================================
   ZAPYTAJ O DOŚWIADCZENIE  ·  one question, on one surface
   ----------------------------------------------------------------------------
   The Quiz's measure and the Home's surface, inside the existing sheet. There
   is no approved comp for this screen, so nothing here invents a new object:
   the textarea is the Quiz's textarea, the buttons are the shell's buttons,
   and the card is `surface3` in everything but name.

   NOTHING ON IT SUGGESTS DELIVERY. There is no tick, no progress bar, no
   "sending…" state and no rule that could draw one — because none of that
   happens. See components/AskFlow.js.
   ========================================================================= */

/* THE SHEET IS CENTRED AND BOUNDED BY THE VIEWPORT, not by the v2 drawer it
   inherits from. `.sheet` is a right-aligned desktop drawer that eleven older
   screens still use, so it is left exactly as it is: at 390px it put a 390px
   panel 40px from the left and hung the last 40px off the edge, clipping the
   context line. Fixed here, on this sheet's own classes, rather than by
   changing a rule other screens depend on. */
.ask3-sheet {
  align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 28px);
  overflow-y: auto;
}
.ask3-panel {
  width: 100%;
  max-width: 620px;
  margin: auto;
  /* Taller than the screen scrolls inside the panel rather than off it. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: clamp(22px, 3vw, 36px);
}
.ask3-body { display: block; }

.ask3-title {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800; letter-spacing: -.032em; line-height: 1.12;
  color: var(--ink); text-wrap: balance;
}

/* ── WHICH STORY THIS IS ABOUT ────────────────────────────────────────────
   Small, quiet, and only ever public fields. */
.ask3-ctx {
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--lift-2); border: 1px solid var(--line);
}
.ask3-ctx-k {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-3);
}
.ask3-ctx-road {
  margin: 6px 0 0; font-size: var(--t-body); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
.ask3-ctx-m { margin: 4px 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.ask3-ctx-who { font-weight: 700; color: var(--ink-2); }
.ask3-dot { color: var(--ink-4); }

/* ── THE QUESTION ─────────────────────────────────────────────────────── */
.ask3-field { margin-top: clamp(16px, 2vw, 22px); }
.ask3-l {
  display: block; margin-bottom: 10px;
  font-size: var(--t-body); font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.ask3-ta {
  width: 100%; display: block;
  padding: 15px 17px; resize: vertical;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); color: var(--ink);
  font: inherit; font-size: var(--t-body); line-height: 1.55;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ask3-ta::placeholder { color: var(--ink-4); }
.ask3-ta:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(109,74,240,.14);
}

/* Empty means silent: it takes no room until it has something to say. */
.ask3-err {
  margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--danger);
}
.ask3-err:not(:empty) {
  margin-top: 12px; display: flex; align-items: flex-start; gap: 8px;
}
.ask3-err:not(:empty)::before { content: "!"; font-weight: 800; }

/* ── HOW THE ASKER APPEARS ────────────────────────────────────────────────
   A checkbox when there is a real choice, a stated fact when there is not.
   The helper line is part of the control, not fine print under it. */
.ask3-priv {
  margin-top: clamp(16px, 2vw, 22px);
  padding: 14px 16px;
  border-radius: var(--r-card);
  border: 1px solid var(--line-2); background: var(--lift);
}
.ask3-priv.is-fixed { background: var(--lift-2); }

.ask3-priv-l {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; cursor: pointer;
}
.ask3-check { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ask3-mark {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.8px solid var(--line-3); background: var(--ground);
  display: inline-grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Checked is filled AND bordered AND ticked — never hue on its own. */
.ask3-check:checked + .ask3-mark { background: var(--blue); border-color: var(--blue); }
.ask3-check:checked + .ask3-mark::after {
  content: "\2713"; font-size: 13px; font-weight: 800; color: #FFFFFF; line-height: 1;
}
.ask3-priv-l:has(.ask3-check:focus-visible) .ask3-mark {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
.ask3-priv-t { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.ask3-priv-h {
  margin: 8px 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3);
}
.ask3-priv.is-fixed .ask3-priv-t { display: block; }

.ask3-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(18px, 2.2vw, 26px); flex-wrap: wrap;
}
.ask3-send { padding: 15px 28px; border-radius: 12px; font-size: var(--t-body); }
.ask3-cancel { padding: 14px 22px; border-radius: 12px; background: var(--lift-2); }
.ask3-note { margin: 14px 0 0; font-size: var(--t-xs); color: var(--ink-4); }

/* ── SAVED, AND WHAT THAT ACTUALLY MEANS ─────────────────────────────── */
.ask3-done-d {
  margin: 14px 0 0; font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}
.ask3-done-n { margin: 10px 0 0; font-size: var(--t-xs); color: var(--ink-3); }

@media (max-width: 720px) {
  .ask3-panel { padding: 18px; }
  .ask3-ta { font-size: 16px; }              /* 16px: iOS must not zoom */
  .ask3-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .ask3-actions > * { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ask3-ta, .ask3-mark { transition: none; }
}

/* ============================================================================
   CZY TEN STÓŁ COŚ ZMIENIŁ  ·  the two measurements
   ----------------------------------------------------------------------------
   A sibling of the Quiz, deliberately: same column width, same option cards,
   same button scale, same navy hierarchy. It must not read as a survey tool
   bolted onto the side of a product — so there is no star row, no smiley
   scale, no progress percentage and no chart anywhere in this block.
   ========================================================================= */

.fb3 { padding-bottom: clamp(40px, 6vw, 80px); }
.fb3-wrap { max-width: 720px; margin: 0 auto; }

.fb3-eyebrow {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--primary);
}
.fb3-title {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800; letter-spacing: -.038em; line-height: 1.06;
  color: var(--ink); text-wrap: balance;
}
.fb3-lead {
  margin: clamp(12px, 1.4vw, 18px) 0 0; max-width: 56ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}
.fb3-prev {
  margin: 14px 0 0; font-size: var(--t-sm); color: var(--ink-3); font-style: italic;
}

.fb3-form { display: grid; gap: clamp(22px, 2.6vw, 34px); margin-top: clamp(24px, 3vw, 36px); }

/* A fieldset carries the question for a screen reader; the legend is the
   question, so the group and its heading cannot drift apart. */
.fb3-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.fb3-legend {
  padding: 0;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700; letter-spacing: -.024em; line-height: 1.3; color: var(--ink);
}

/* ── THE FIVE POINTS ──────────────────────────────────────────────────────
   Five equal columns on any width — five one-character labels fit at 390px
   with room to spare, so the row never has to scroll or wrap. */
.fb3-scale {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; margin-top: 14px;
}
.fb3-point {
  position: relative;
  display: grid; place-items: center;
  min-height: 56px; padding: 10px 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fb3-point:hover { border-color: var(--line-3); background: var(--lift-2); }
.fb3-point-n {
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink-2);
}
/* Chosen: filled, bordered, inverted AND ticked. Four signals, two of which
   survive greyscale. */
.fb3-point.is-on {
  background: var(--blue); border-color: var(--blue);
  box-shadow: var(--shadow-2);
}
.fb3-point.is-on .fb3-point-n { color: #FFFFFF; }
.fb3-point.is-on::after {
  content: "\2713"; position: absolute; top: 5px; right: 7px;
  font-size: 11px; font-weight: 800; color: #FFFFFF;
}

.fb3-ends {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 10px;
  font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3);
}
.fb3-ends span:last-child { text-align: right; }

/* The real control, hidden from sight and never from the browser. */
.fb3-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.fb3-point:has(.fb3-radio:focus-visible),
.fb3-opt:has(.fb3-radio:focus-visible) {
  outline: 2px solid var(--primary); outline-offset: 3px;
}

/* ── SINGLE-CHOICE ANSWERS ────────────────────────────────────────────────
   Stacked when the labels are roads and names; in a row when they are three
   short words. Both stack on a phone. */
.fb3-opts { display: grid; gap: 10px; margin-top: 14px; }
.fb3-opts.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fb3-opt {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 13px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fb3-opt:hover { border-color: var(--line-3); background: var(--lift-2); }
.fb3-mark {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-pill);
  border: 1.8px solid var(--line-3); background: var(--ground);
  display: inline-grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fb3-opt.is-on { background: var(--blue); border-color: var(--blue); box-shadow: var(--shadow-2); }
.fb3-opt.is-on .fb3-mark { background: #FFFFFF; border-color: #FFFFFF; }
.fb3-opt.is-on .fb3-mark::after {
  content: "\2713"; font-size: 13px; font-weight: 800; color: var(--blue); line-height: 1;
}
.fb3-opt-t { min-width: 0; display: grid; }
.fb3-opt-l {
  font-size: var(--t-sm); font-weight: 600; line-height: 1.35; color: var(--ink);
}
.fb3-opt-s { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); }
.fb3-opt.is-on .fb3-opt-l, .fb3-opt.is-on .fb3-opt-s { color: #FFFFFF; }
.fb3-opt.is-on .fb3-opt-s { opacity: .82; }

/* ── WRITTEN ANSWERS ──────────────────────────────────────────────────── */
.fb3-field { min-width: 0; }
.fb3-l {
  display: block;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700; letter-spacing: -.024em; line-height: 1.3; color: var(--ink);
}
.fb3-help { margin: 8px 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.fb3-ta {
  width: 100%; display: block; margin-top: 14px;
  padding: 15px 17px; resize: vertical;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); color: var(--ink);
  font: inherit; font-size: var(--t-body); line-height: 1.55;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fb3-ta:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(109,74,240,.14);
}

.fb3-err { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--danger); }
.fb3-err:not(:empty) { display: flex; align-items: flex-start; gap: 8px; }
.fb3-err:not(:empty)::before { content: "!"; font-weight: 800; }

.fb3-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fb3-go { padding: 15px 28px; border-radius: 12px; font-size: var(--t-body); }

.fb3-note {
  margin: clamp(22px, 2.6vw, 32px) 0 0; max-width: 62ch;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}

/* ── SAVED ────────────────────────────────────────────────────────────── */
.fb3-done { margin-top: clamp(24px, 3vw, 36px); }
.fb3-done-t {
  margin: 0; font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800; letter-spacing: -.03em; color: var(--ink);
}
.fb3-done-d {
  margin: 12px 0 clamp(20px, 2.4vw, 28px); max-width: 52ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}

.fb3-guard { text-align: center; margin-top: clamp(20px, 5vw, 60px); }
.fb3-guard .fb3-lead { margin-inline: auto; }
.fb3-guard .fb3-actions { justify-content: center; margin-top: 28px; }

@media (max-width: 720px) {
  .fb3-opts.is-row { grid-template-columns: minmax(0, 1fr); }
  .fb3-scale { gap: 6px; }
  .fb3-point { min-height: 52px; }
  .fb3-ta { font-size: 16px; }               /* 16px: iOS must not zoom */
  .fb3-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .fb3-actions > * { width: 100%; justify-content: center; }
  .fb3-ends { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb3-point, .fb3-opt, .fb3-mark, .fb3-ta { transition: none; }
}

/* ── THE TABLE'S OWN CLOSING ACTION ───────────────────────────────────────
   Below the explanation panel, in the quietest weight the product has. It is
   the last thing on the page on purpose: reading a story is what the Table is
   for, and this must never out-shout it. */
.tb3-sum {
  max-width: 1220px; margin: clamp(22px, 3vw, 36px) auto 0;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
  display: grid; justify-items: center; text-align: center; gap: 4px;
}
.tb3-sum-a { font-size: var(--t-sm); }
.tb3-sum-n { margin: 0; max-width: 46ch; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4); }


/* ════════════════════════════════════════════════════════════════════════
   DODAJ SWOJĄ DROGĘ — THE STORY CREATOR (cr3-)
   ------------------------------------------------------------------------
   Three stages, one rail, and a working draft that rides beside stage one.
   Everything here is scoped under `.cr3` so nothing reaches the eleven other
   screens that share `.qcard`, `.actions` and `.tag`.

   The visual language is the one the rest of the v3 shell already uses: soft
   cards on the page ground, a primary pill for forward motion, hairline rules
   and the same radii. No new colour, no new shadow and no new font size is
   introduced for this feature.
   ════════════════════════════════════════════════════════════════════════ */

.cr3 { max-width: 1220px; margin: 0 auto; }

.cr3-h {
  margin: 0; font-size: var(--t-xl); font-weight: 800;
  letter-spacing: var(--track-tight); color: var(--ink);
}
.cr3-lead {
  margin: 12px 0 0; max-width: 56ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}

/* ── the three-step rail ─────────────────────────────────────────────── */
.cr3-steps {
  list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 2vw, 22px);
}
.cr3-step {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-sm); color: var(--ink-3);
}
/* The arrow between steps is decoration and is not announced. */
.cr3-step + .cr3-step::before {
  content: "\2192"; margin-right: clamp(2px, 1vw, 10px); color: var(--ink-4);
}
.cr3-step-n {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--lift-2); color: var(--ink-3);
  font-size: var(--t-sm); font-weight: 800;
  border: 1px solid var(--line);
}
.cr3-step.is-now .cr3-step-n {
  background: var(--primary); color: var(--primary-ink); border-color: transparent;
}
.cr3-step.is-now .cr3-step-l { color: var(--ink); font-weight: 700; }
.cr3-step.is-done .cr3-step-n { background: var(--lift); color: var(--primary); border-color: var(--line-2); }
.cr3-step.is-done .cr3-step-l { color: var(--ink-2); }

/* ── the two columns ─────────────────────────────────────────────────── */
.cr3-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(20px, 2.6vw, 30px);
  align-items: start;
}
.cr3-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.cr3-col { min-width: 0; }

/* ── a card on the page ──────────────────────────────────────────────── */
.cr3-card {
  background: var(--lift); border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(18px, 2.2vw, 26px);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.cr3-card-t {
  margin: 0 0 12px; font-size: var(--t-md); font-weight: 800;
  letter-spacing: -.02em; color: var(--ink);
}
.cr3-card-t.cr3-sub { font-size: var(--t-read); }
.cr3-help {
  margin: 10px 0 0; max-width: 58ch;
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3);
}
.cr3-center { text-align: center; margin-inline: auto; }

.cr3-opener, .cr3-ta {
  width: 100%; display: block; resize: vertical;
  padding: 15px 17px;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift-2); color: var(--ink);
  font: inherit; font-size: var(--t-body); line-height: 1.6;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cr3-opener:focus, .cr3-ta:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(109,74,240,.14);
}

/* ── the four categories ─────────────────────────────────────────────── */
/* Four across wherever four fit, so the set reads as one choice rather than
   as a three-and-one list that implies the last one is an afterthought. */
.cr3-cats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px; margin-top: 14px;
}
.cr3-cat {
  appearance: none; cursor: pointer; text-align: left;
  padding: 14px 16px; min-height: 52px;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); color: var(--ink);
  font: inherit; font-size: var(--t-body); font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cr3-cat:hover { border-color: var(--line-3); }
.cr3-cat.is-on {
  border-color: var(--primary); background: rgba(109,74,240,.07); color: var(--ink);
}

/* ── uporządkuj moją historię ────────────────────────────────────────── */
.cr3-organise-wrap { display: grid; justify-items: center; margin: clamp(6px, 1.4vw, 14px) 0 0; }
.cr3-organise {
  appearance: none; cursor: pointer;
  width: 100%; max-width: 420px; min-height: 52px;
  border: 1px solid transparent; border-radius: var(--r-card);
  background: rgba(109,74,240,.10); color: var(--primary);
  font: inherit; font-size: var(--t-body); font-weight: 700;
  transition: background var(--dur) var(--ease);
}
.cr3-organise:hover { background: rgba(109,74,240,.16); }

.cr3-qs { display: grid; gap: 14px; margin-top: 18px; }
.cr3-q { margin: 0; }

/* ── the working draft ───────────────────────────────────────────────── */
.cr3-draft {
  position: sticky; top: 96px;
  background: var(--lift-2); border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(16px, 2vw, 22px);
}
.cr3-draft-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.cr3-draft-t { font-size: var(--t-read); font-weight: 800; color: var(--ink); }
.cr3-draft-a { display: flex; gap: 8px; flex-wrap: wrap; }
.cr3-mini {
  appearance: none; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-btn);
  border: 1px solid var(--line-2); background: var(--lift); color: var(--ink-2);
  font: inherit; font-size: var(--t-xs); font-weight: 700;
}
.cr3-mini:hover { border-color: var(--line-3); color: var(--ink); }

.cr3-drow {
  background: var(--lift); border-radius: var(--r-card);
  padding: 14px 16px; margin-bottom: 10px;
}
.cr3-drow-t { font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.cr3-drow-e { margin: 8px 0 0; font-size: var(--t-xs); color: var(--ink-4); }
.cr3-lines { display: grid; gap: 7px; margin-top: 10px; }
/* Bars, not text. The panel reports THAT something is written, never a
   paraphrase of it — a summary here would be the product writing prose. */
.cr3-line { display: block; height: 7px; border-radius: var(--r-hair); background: var(--line); }
.cr3-line:nth-child(3n+2) { width: 88%; }
.cr3-line:nth-child(3n+3) { width: 64%; }

/* ── the preview, in four sections ───────────────────────────────────── */
.cr3-opener-read {
  margin: 14px 0 0; padding: 14px 16px;
  border-left: 2px solid var(--primary); border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--lift-2);
  font-size: var(--t-read); line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cr3-secs { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.cr3-sec {
  background: var(--lift); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: clamp(18px, 2.2vw, 26px);
}
.cr3-sec-t {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 4px; font-size: var(--t-tag); font-weight: 800;
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-3);
}
.cr3-sec-n {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: var(--r-pill); background: var(--lift-2);
  font-size: 11px; letter-spacing: 0; color: var(--ink-3);
}
.cr3-sec-b { display: grid; gap: 16px; margin-top: 16px; }
.cr3-item { padding-top: 14px; border-top: 1px solid var(--line); }
.cr3-item:first-child { padding-top: 0; border-top: 0; }
.cr3-item-q { font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.cr3-item-a {
  margin: 8px 0 0; font-size: var(--t-read); line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* A silence is shown as itself, in a quieter weight and never hidden. */
.cr3-item.is-absent .cr3-item-q { color: var(--ink-3); }
.cr3-item-x { margin: 6px 0 0; font-size: var(--t-sm); font-style: italic; color: var(--ink-4); }

/* ── sharing ─────────────────────────────────────────────────────────── */
.cr3-vis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-top: 14px;
}
.cr3-vis-c {
  appearance: none; cursor: pointer; text-align: left;
  display: grid; gap: 6px; align-content: start;
  padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--lift); color: var(--ink); font: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cr3-vis-c:hover { border-color: var(--line-3); }
.cr3-vis-c.is-on { border-color: var(--primary); background: rgba(109,74,240,.06); }
.cr3-dot {
  width: 16px; height: 16px; border-radius: var(--r-pill);
  border: 2px solid var(--line-3); background: var(--lift);
}
.cr3-vis-c.is-on .cr3-dot { border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--primary); }
.cr3-vis-t { font-size: var(--t-body); font-weight: 700; }
.cr3-vis-d { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-3); }

.cr3-check {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: var(--t-body); line-height: 1.5; color: var(--ink);
}
.cr3-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); flex: none; }
.cr3-check input:disabled { cursor: not-allowed; }
.cr3-check input:disabled + span { color: var(--ink-4); }
.cr3-confirm { font-weight: 700; }

.cr3-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: var(--r-card);
  background: rgba(37,99,255,.07); border: 1px solid rgba(37,99,255,.16);
}
.cr3-banner p { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.cr3-banner-i {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 800;
}

.cr3-done { max-width: 820px; }

/* ── phone ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cr3-grid { grid-template-columns: minmax(0, 1fr); }
  /* The draft reads BELOW the writing on a phone, not beside it, and stops
     being sticky — a panel pinned to a 390px viewport eats the page. */
  .cr3-draft { position: static; order: 2; }
}
@media (max-width: 720px) {
  .cr3-steps { gap: 8px; }
  .cr3-step-l { font-size: var(--t-xs); }
  .cr3-step + .cr3-step::before { margin-right: 2px; }
  .cr3-opener, .cr3-ta { font-size: 16px; }   /* 16px: iOS must not zoom */
  .cr3-cats { grid-template-columns: minmax(0, 1fr); }
  .cr3-vis { grid-template-columns: minmax(0, 1fr); }
  .cr3-organise { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cr3-cat, .cr3-vis-c, .cr3-organise, .cr3-opener, .cr3-ta { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   PRZYKŁADOWY STÓŁ — the category Tables (sx3-)
   ------------------------------------------------------------------------
   Reference 03's composition: a tinted panel, an icon and a letter-spaced
   kicker with the tagline opposite, a centred two-line question, the words
   `Przykładowy Stół`, then ONE wide oval with all three seats standing inside
   it on pale bases, thin arcs between them and a small burst above.

   It sits under `.tb3` so it inherits the Table's page rhythm and the rule that
   hides the breadcrumb, and it adds nothing to `.tb3` itself — the
   personalised Table's grid, wires and panel are untouched.

   Two tones and only two, carried in custom properties so no rule below
   names a colour twice: teal for work, the product's violet for relationships.
   ════════════════════════════════════════════════════════════════════════ */

.sx3 {
  --sx-tint: #23959B;
  --sx-soft: rgba(35,149,155,.11);
  --sx-ring: #7CC3C6;
  --sx-av-a: #BFE6E7;
  --sx-av-b: #8FD0D2;
  --sx-base-a: #9ACED1;
  --sx-base-b: #6FAFB4;
  --sx-panel: linear-gradient(180deg, #F1FAFA 0%, #F8FCFC 60%, #FFFFFF 100%);
  --sx-oval: radial-gradient(closest-side, rgba(255,255,255,.95) 30%, #E7F4F4 78%, #DCEFEF 100%);
}
.sx3.is-relationships {
  --sx-tint: #6D4AF0;
  --sx-soft: rgba(109,74,240,.10);
  --sx-ring: #A99BF0;
  --sx-av-a: #E1DAFD;
  --sx-av-b: #BFB1F7;
  --sx-base-a: #C4B8F6;
  --sx-base-b: #9E8CEB;
  --sx-panel: linear-gradient(180deg, #F6F4FF 0%, #FAF9FF 60%, #FFFFFF 100%);
  --sx-oval: radial-gradient(closest-side, rgba(255,255,255,.95) 30%, #EEEBFD 78%, #E5E0FB 100%);
}

.sx3-panel {
  max-width: 1060px; margin: 0 auto;
  padding: clamp(22px, 3vw, 40px) clamp(18px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px);
  border-radius: var(--r-panel);
  background: var(--sx-panel);
  border: 1px solid var(--line);
}

/* ── the kicker row ──────────────────────────────────────────────────── */
.sx3-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sx3-icon {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--sx-soft); color: var(--sx-tint);
}
.sx3-kicker {
  margin: 0; font-size: var(--t-tag); font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2);
}
.sx3-tag { margin: 0 0 0 auto; font-size: var(--t-sm); color: var(--ink-3); }

/* ── the question ────────────────────────────────────────────────────── */
.sx3-title {
  margin: clamp(18px, 2.4vw, 30px) auto 0; max-width: 17ch;
  text-align: center; text-wrap: balance;
  font-size: clamp(28px, 3.3vw, 44px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.1; color: var(--ink);
}
.sx3-sample {
  margin: 10px 0 0; text-align: center;
  font-size: var(--t-read); color: var(--ink-3);
}

/* ── the stage: one oval, three seats inside it ──────────────────────── */
.sx3-stage {
  position: relative;
  margin: clamp(22px, 3vw, 38px) auto 0;
  max-width: 960px;
}
.sx3-oval {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--sx-oval);
  box-shadow: 0 30px 60px -44px rgba(16,19,28,.35);
}
.sx3-burst {
  position: absolute; left: 50%; top: 22px; width: 46px; height: 26px;
  margin-left: -23px; color: var(--sx-tint); opacity: .75;
}
.sx3-deco {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.sx3-arc { fill: none; stroke: var(--sx-ring); stroke-width: 1.4; opacity: .8; }

.sx3-seats {
  position: relative; list-style: none; margin: 0;
  padding: clamp(70px, 8vw, 96px) clamp(28px, 6vw, 80px) clamp(62px, 7vw, 88px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
}
.sx3-li { min-width: 0; }

.sx3-seat {
  display: grid; justify-items: center; align-content: start; text-align: center;
  min-width: 0;
}

/* The seat itself: a circle standing on a pale base. The base is drawn first
   so the circle sits on top of it, exactly as the reference stacks them. */
.sx3-mark { position: relative; display: block; width: 122px; height: 108px; }
.sx3-base {
  position: absolute; left: 6px; right: 6px; bottom: 0; height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sx-base-a), var(--sx-base-b));
  box-shadow: 0 12px 18px -12px rgba(16,19,28,.4);
  opacity: .85;
}
.sx3-seat.is-empty .sx3-base { opacity: .35; }

.sx3-mark .tb3-av {
  position: absolute; left: 50%; top: 0; margin-left: -41px;
  width: 82px; height: 82px; font-size: 26px;
  border: 5px solid #FFFFFF;
  box-shadow: 0 10px 22px -14px rgba(16,19,28,.45);
}
/* A dashed ring and a plus — an empty SEAT, never a missing avatar. */
.sx3-ring {
  position: absolute; left: 50%; top: 0; margin-left: -44px;
  display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: var(--r-pill);
  border: 2px dashed var(--sx-tint);
  background: rgba(255,255,255,.6);
  color: var(--sx-tint); font-size: 30px; font-weight: 300; line-height: 1;
}

.sx3-name {
  margin: 14px 0 0; max-width: 18ch;
  font-size: var(--t-body); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.3; color: var(--ink);
}
.sx3-meta {
  margin: 6px 0 0; max-width: 24ch;
  font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3);
}
.sx3-read { margin-top: 6px; }

/* ── under the Table ─────────────────────────────────────────────────── */
.sx3-foot {
  display: grid; justify-items: center; text-align: center;
  margin-top: clamp(20px, 2.6vw, 32px);
}
.sx3-lead-t {
  margin: 0; max-width: 30ch; text-wrap: balance;
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.35; color: var(--ink);
}
.sx3-lead-d {
  margin: 10px 0 0; max-width: 58ch;
  font-size: var(--t-read); line-height: 1.6; color: var(--ink-2);
}
.sx3-note {
  margin: 14px 0 0; max-width: 60ch;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-4);
}
/* Secondary on purpose: ghost weight, normal size, below everything. */
.sx3-share { margin-top: 18px; padding: 12px 22px; font-size: var(--t-sm); }

/* ── phone ───────────────────────────────────────────────────────────────
   Not the desktop oval squeezed. The kicker row wraps, the question keeps
   its size, and the oval becomes a tall rounded surface behind three stacked
   seats — still one Table, still three positions, no horizontal scroll. */
@media (max-width: 720px) {
  .sx3-tag { margin-left: 0; flex-basis: 100%; }
  .sx3-title { max-width: none; font-size: clamp(26px, 7.4vw, 32px); }
  .sx3-oval { border-radius: 46% / 12%; }
  .sx3-deco { display: none; }
  .sx3-burst { top: 14px; }
  .sx3-seats {
    grid-template-columns: minmax(0, 1fr);
    padding: 58px 16px 44px; gap: 26px;
  }
  .sx3-mark { width: 110px; height: 98px; }
  .sx3-share { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sx3-read, .sx3-share { transition: none; }
}