/* posadka.pl — the design system ("Polska Szkoła Plakatu") on top of tokens.css.
   1 base · 2 brand primitives · 3 components · 4 chrome · 5 listing · 6 offer · 7 status
   8 landing · 9 design page · 10 motion.
   Rules from the handoff: flat fields (no gradients, glow or soft shadows), square corners,
   hard offset shadows, at most two colour fields per screen besides cream and black, cream text
   on red only at 32px bold or larger, never ochre text on cream. */

/* ---- 1 · Base ------------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font: var(--ps-text-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

main {
  flex: 1;
}

/* Scroll areas inside the page (the filter panel, tables, dialogs; not the page itself, which
   keeps the system's overlay bar): thin, square, ink, ochre under the pointer. Safari reads only
   the -webkit- rules; the others read scrollbar-color. */
body * {
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}

body *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body *::-webkit-scrollbar-track,
body *::-webkit-scrollbar-corner {
  background: transparent;
}

body *::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background: var(--ink) content-box;
}

body *::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background-color: var(--action);
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-color: var(--action);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ps-red);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  padding-block: var(--ps-space-6) var(--ps-space-9);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--ps-cream);
  font-weight: 700;
}

.skip:focus {
  top: 12px;
}

.muted {
  color: var(--ink-soft);
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82em;
}

.num {
  font-variant-numeric: tabular-nums;
}

/* ---- 2 · Brand primitives ---------------------------------------------------------------------- */

/* Eyebrow: institution tags, section labels. */
.eyebrow {
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
}

/* Highlight block: an ochre rectangle behind one to three key words, black text. */
.hl {
  display: inline-block;
  padding: 0.02em 0.28em 0.12em;
  background: var(--ps-ochre);
  color: var(--ps-black);
  transform: rotate(-3deg);
}

/* Sun and bar: the cut-paper shapes. */
.sun {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ps-red);
}

.bar {
  display: block;
  height: var(--ps-bar-sm);
  background: var(--ps-black);
}

/* Arch frame: a black-and-white photo in a doorway. */
.arch {
  display: block;
  overflow: hidden;
  border-radius: var(--ps-radius-arch);
  background: var(--ps-black);
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.35);
}

/* Pin: the teardrop that marks the chosen thing. Colour from currentColor, dot from --pin-dot. */
.pin {
  --pin: 28px;
  position: relative;
  display: inline-block;
  width: var(--pin);
  height: var(--pin);
  border-radius: 50% 50% 50% 0;
  background: currentColor;
  transform: rotate(-45deg);
}

.pin::after {
  content: "";
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: var(--pin-dot, var(--ps-cream));
}

/* Logo: the P mark (stem in currentColor, red sun) and the brush wordmark. --logo-h sets the
   mark's height; the wordmark follows it (96px type for a 168px mark in the handoff). */
.logo {
  --logo-h: 44px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.16);
  color: var(--ps-black);
  text-decoration: none;
}

a.logo:hover {
  color: var(--ps-black);
}

.logo-mark {
  flex: none;
  width: calc(var(--logo-h) * 0.682);
  height: var(--logo-h);
  overflow: visible;
}

.logo-sun {
  fill: var(--logo-sun, var(--ps-red));
}

.logo-stem {
  fill: currentColor;
}

.logo-word {
  font-family: var(--ps-font-brush);
  font-size: calc(var(--logo-h) * 0.57);
  line-height: 0.9;
  white-space: nowrap;
  transform: rotate(-4deg) translateY(12%);
}

.logo-tld {
  color: var(--logo-accent, var(--ps-ochre));
}

.logo-stack {
  flex-direction: column;
  gap: calc(var(--logo-h) * 0.1);
}

.logo-stack .logo-word {
  font-size: calc(var(--logo-h) * 0.5);
  transform: rotate(-4deg);
}

/* On dark fields: cream stem and letters; .pl turns ochre on cobalt and black. */
.on-dark .logo,
.logo.on-dark {
  color: var(--ps-cream);
  --logo-accent: var(--ps-ochre);
}

.on-red .logo,
.logo.on-red {
  color: var(--ps-cream);
  --logo-sun: var(--ps-black);
  --logo-accent: var(--ps-black);
}

/* ---- 3 · Components ---------------------------------------------------------------------- */

/* Buttons: square, flat, hard black offset shadow. Hover lifts, active presses into the shadow.
   Clickable things are cobalt (the handoff's link colour on cream), never black. */
.btn {
  --shadow: var(--ps-black);
  --lift: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 12px 26px;
  border: 2px solid var(--ps-black);
  border-radius: 0;
  background: var(--action);
  color: var(--on-action);
  font: 800 18px/1.1 var(--ps-font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--lift) var(--lift) 0 var(--shadow);
  transition:
    transform 120ms var(--ps-ease-move),
    box-shadow 120ms var(--ps-ease-move);
}

.btn:hover {
  color: var(--on-action);
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--lift) + 2px) calc(var(--lift) + 2px) 0 var(--shadow);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--shadow);
}

.btn-xl {
  --lift: 10px;
  min-height: 64px;
  padding: 18px 38px;
  font-size: 20px;
}

/* On dark fields: cream face, black shadow. */
.btn-light {
  --shadow: var(--ps-black);
  border-color: var(--ps-cream);
  background: var(--ps-cream);
  color: var(--ps-black);
}

.btn-light:hover {
  color: var(--ps-black);
}

/* Secondary: outlined in cobalt, black shadow on hover only. */
.btn-ghost {
  --lift: 0px;
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  --lift: 4px;
  color: var(--ink);
}

.btn[aria-busy="true"],
.htmx-request.btn {
  opacity: 0.6;
  pointer-events: none;
}

/* Inputs and selects: cream face, 2px black border, square. Focus is the ochre outline. */
.input,
.select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--ps-black);
  border-radius: 0;
  background: var(--paper-raised);
  color: var(--ps-black);
  font: 600 18px/1.3 var(--ps-font-display);
}

.input::placeholder {
  color: #6E665C;
  opacity: 1;
}

.input-xl {
  min-height: 64px;
  padding-inline: 20px;
  font-size: 20px;
}

.input:focus-visible,
.select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23171513' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 13px 9px;
  cursor: pointer;
}

/* Field label: an eyebrow above the control. */
.field {
  display: grid;
  gap: 6px;
}

.field > span {
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
}

/* Filter chip: a checkbox shown as an outlined tag; checked = black fill, cream text. */
.chip-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.chip-toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.chip-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 2px solid var(--action-line);
  color: var(--ink);
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
}

.chip-toggle span::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
}

.chip-toggle input:checked + span {
  background: var(--action);
  color: var(--on-action);
}

.chip-toggle input:checked + span::before {
  background: var(--ps-ochre);
  border-color: var(--ps-ochre);
}

.chip-toggle input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Tags on cards: small, outlined; warnings in red, document kinds filled. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1.5px solid var(--ps-black);
  font: 700 12px/1.2 var(--ps-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ps-black);
}

a.chip {
  border-color: var(--ink);
  color: var(--ink);
}

a.chip:hover {
  background: var(--action);
  color: var(--on-action);
}

.chip-doc {
  background: var(--ps-black);
  color: var(--ps-cream);
}

.chip-warn {
  border-color: var(--ps-red);
  color: #B42F1C; /* red darkened for small text on cream: 5.1:1 */
}

/* Ochre means "clickable": an informational tag stays outlined. */
.chip-count {
  border-style: dashed;
}

/* Stamp: the deadline, set like a rubber stamp on the card. */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 8px 12px 7px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  line-height: 1.1;
  text-align: center;
  transform: rotate(-3deg);
}

.stamp-date {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stamp-label {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.stamp-urgent {
  background: var(--ps-red); /* black on red: 5:1 */
}

.stamp-past {
  border-color: #7A7166;
  color: #5E574F;
  background: transparent;
}

.stamp-past .stamp-date {
  text-decoration: line-through 2px;
}

.stamp-none {
  border-style: dashed;
  background: transparent;
  color: var(--ink-soft);
  transform: none;
}

.stamp-big {
  padding: 14px 26px;
}

.stamp-big .stamp-date {
  font-size: 44px;
}

/* ---- 4 · Chrome: top bar and footer -------------------------------------------------------- */

.topbar {
  border-bottom: var(--ps-bar-sm) solid var(--ps-black);
  background: var(--page);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding-block: 10px;
}

.logo-top {
  --logo-h: 54px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--action-line);
  color: var(--ink);
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-cta:hover,
.nav-cta[aria-current="page"] {
  background: var(--action);
  color: var(--on-action);
}

.footer {
  margin-top: auto;
  background: var(--ps-black);
  color: var(--ps-cream);
}

/* The brand on the left, link columns beside it, the copyright under both; on a narrow screen
   the columns go two abreast under the brand. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) 3fr;
  gap: var(--ps-space-6) var(--ps-space-7);
  padding-block: var(--ps-space-7);
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: 14px;
}

.logo-footer {
  --logo-h: 52px;
  justify-self: start;
  color: var(--ps-cream);
  --logo-accent: var(--ps-ochre);
}

a.logo-footer:hover {
  color: var(--ps-cream);
}

.footer-line {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.footer-note {
  max-width: 44ch;
  color: #CFC6B4;
  font: var(--ps-text-small);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ps-space-6) var(--ps-space-5);
  align-content: start;
}

.footer-head {
  margin-bottom: 10px;
  color: #CFC6B4;
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--ps-text-small);
}

.footer-col a {
  color: var(--ps-cream);
}

.footer-col a:hover {
  color: var(--ps-ochre);
}

.footer-copy {
  grid-column: 1 / -1;
  color: #CFC6B4;
  font: var(--ps-text-small);
}

.footer-copy a {
  color: var(--ps-cream);
}

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- 5 · Listing ----------------------------------------------------------------------------- */

.search-head {
  display: grid;
  gap: 6px;
  margin-bottom: var(--ps-space-5);
}

.search-title {
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.search {
  display: grid;
  gap: var(--ps-space-4);
  margin-bottom: var(--ps-space-6);
}

.search-row {
  display: flex;
  gap: 14px;
}

.search-box {
  position: relative;
  flex: 1;
}

.search-box .input {
  padding-left: 52px;
}

.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--ps-black);
  stroke-width: 2.6;
  pointer-events: none;
}

.spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ps-red);
  opacity: 0;
  transform: scale(0.4);
}

.htmx-request .spinner,
.htmx-request.search .spinner {
  opacity: 1;
  animation: pulse 700ms var(--ps-ease-move) infinite alternate;
}

.results-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.results-count strong {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.results-count .hint {
  color: var(--ink-soft);
  font: var(--ps-text-small);
}

.offer-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Offer card: square, 2px black border; the whole card is the link (the title's ::after). */
.offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 20px 22px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  transition:
    transform 120ms var(--ps-ease-move),
    box-shadow 120ms var(--ps-ease-move);
}

.offer:hover,
.offer:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: var(--ps-shadow-hard-sm);
}

.offer-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.offer-employer {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.offer-title {
  font: 700 clamp(21px, 2.3vw, 26px)/1.15 var(--ps-font-display);
  letter-spacing: var(--ps-tracking-title);
  overflow-wrap: anywhere;
}

.offer-title a {
  color: var(--ps-black);
  text-decoration: none;
}

.offer-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.offer-title a:hover {
  color: var(--ps-black);
}

.offer-title a:focus-visible {
  outline: none;
}

.offer-position {
  font: var(--ps-text-small);
  font-size: 16px;
}

.offer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
  font: var(--ps-text-small);
}

.meta-place {
  font-weight: 700;
}

.meta-date {
  color: var(--ink-soft);
}

.offer-deadline {
  align-self: start;
}

.offer.is-removed {
  opacity: 0.6;
}

.more {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

.empty {
  padding: var(--ps-space-6);
  border: 2px dashed var(--ps-black);
}

/* ---- 5b · Search: layout, filter panel, chips, cards' extras, dialogs ------------------------ */

.page-search .search {
  gap: var(--ps-space-4);
  margin-bottom: 0;
}

.search-body {
  display: grid;
  gap: var(--ps-space-5);
}

.search-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.toolbar:empty {
  display: none;
}

.filters-open {
  display: none;
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ps-ochre);
  color: var(--ps-black);
  font-size: 13px;
  font-weight: 800;
}

.badge[hidden] {
  display: none;
}

/* Active filters: removable chips. */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 12px;
  border: 2px solid var(--action-line);
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.chip-remove:hover {
  background: var(--ps-cream);
  color: var(--ink);
}

.chips-clear {
  font: var(--ps-text-small);
}

.new-since {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 2px dashed var(--action-line);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.new-since::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ps-ochre);
}

.new-since[hidden] {
  display: none;
}

/* Autocomplete under the search box. */
.suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 15;
  margin: 0;
  padding: 4px 0;
  border: 2px solid var(--ps-black);
  background: var(--ps-cream);
  box-shadow: var(--ps-shadow-hard-sm);
  list-style: none;
}

.suggest[hidden] {
  display: none;
}

.suggest li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 14px;
  cursor: pointer;
}

.suggest li[aria-selected="true"],
.suggest li:hover {
  background: var(--action);
  color: var(--on-action);
}

.suggest-label {
  font-weight: 700;
}

.suggest-detail {
  font: var(--ps-text-small);
  opacity: 0.8;
}

/* The filter panel. */
.filters-panel {
  display: grid;
  gap: 4px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding-right: 6px;
}

.sheet-head,
.sheet-foot {
  display: none;
}

.facet {
  margin: 0;
  padding: 14px 0 16px;
  border: 0;
  border-top: 2px solid var(--ps-black);
  min-width: 0;
}

.facet legend,
.facet > summary {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
}

.facet > summary {
  float: none;
  cursor: pointer;
}

.facet-list {
  clear: both;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facet-list.is-long .facet-more {
  display: none;
}

.facet-list.is-open .facet-more {
  display: list-item;
}

.facet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.facet-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 6px;
  cursor: pointer;
}

.facet-option:hover {
  background: var(--paper-raised);
}

.facet-option input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--action-line);
  background: var(--paper-raised);
  cursor: pointer;
}

.facet-option input[type="radio"] {
  border-radius: 50%;
}

.facet-option input:checked {
  background: var(--action);
  box-shadow: inset 0 0 0 4px var(--paper-raised);
}

.facet-option input:disabled {
  border-color: #8C8478;
  cursor: not-allowed;
}

.facet-option input:disabled:checked {
  background: #8C8478;
}

.facet-option:has(input:disabled) {
  cursor: not-allowed;
}

.facet-option input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.facet-label {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
}

.facet-count {
  color: var(--ink-soft);
  font: var(--ps-text-small);
}

.facet-extra {
  margin-top: 6px;
}

.facet-note {
  margin-top: 6px;
  color: var(--ink-soft);
  font: var(--ps-text-small);
  font-weight: 500;
}

.facet-toggle,
.link-button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--link);
  font: 700 15px/1.3 var(--ps-font-display);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.facet-advanced {
  display: grid;
  gap: 10px;
}

/* Radio "pills": radius, alert frequency. */
.pill {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 2px solid var(--action-line);
  color: var(--ink);
  font-weight: 700;
}

.pill input:checked + span {
  background: var(--action);
  color: var(--on-action);
}

.pill input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Results header. */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: var(--ps-space-4);
  padding-bottom: 12px;
  border-bottom: var(--ps-bar-sm) solid var(--ps-black);
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
}

.select-sm {
  width: auto;
  min-height: 40px;
  padding-block: 6px;
  font-size: 16px;
}

.bell {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 2px 2px;
  background: currentColor;
}

.pay-note {
  margin-bottom: var(--ps-space-4);
  padding: 12px 16px;
  border-left: var(--ps-bar-sm) solid var(--ps-ochre);
  background: var(--paper-raised);
  font: var(--ps-text-small);
  font-size: 15px;
}

/* Card extras. */
.offer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.badge-new {
  padding: 2px 8px;
  background: var(--ps-ochre);
  color: var(--ps-black);
  font: 800 12px/1.3 var(--ps-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-new[hidden] {
  display: none;
}

.offer-pay {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.offer-pay.is-missing {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 15px;
}

.offer-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font: var(--ps-text-small);
}

.offer-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 14px;
}

/* The pin: save an offer (above the card's stretched link); "share" looks the same. */
.pin-toggle,
.share-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px 6px 10px;
  border: 2px solid var(--action-line);
  background: var(--paper-raised);
  color: var(--ink);
  font: 700 15px/1 var(--ps-font-display);
  cursor: pointer;
}

.pin-toggle .pin {
  --pin: 16px;
  --pin-dot: var(--paper-raised);
  /* The teardrop's point hangs below its box once turned: lift it so the head centres. */
  margin-top: -4px;
}

.share-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: square;
}

.pin-toggle[aria-pressed="true"] {
  background: var(--action);
  color: var(--on-action);
}

.pin-toggle[aria-pressed="true"] .pin {
  color: var(--ps-black);
  --pin-dot: var(--action);
}

.nav-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
}

/* Zero results. */
.empty {
  display: grid;
  gap: 14px;
}

.empty-title {
  font: var(--ps-text-title);
  letter-spacing: var(--ps-tracking-title);
}

.relax {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relax a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 12px 16px;
  border: 2px solid var(--action-line);
  background: var(--paper-raised);
  font-weight: 600;
  text-decoration: none;
}

.relax a span {
  font-weight: 800;
}

.relax a:hover {
  background: var(--action);
  color: var(--on-action);
}

/* Dialog (alerts). */
.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 2px solid var(--ps-black);
  background: var(--ps-cream);
  color: var(--ps-black);
  box-shadow: var(--ps-shadow-hard);
}

.dialog::backdrop {
  background: rgb(23 21 19 / 0.55);
}

.dialog-body {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 28px clamp(18px, 4vw, 32px) 30px;
}

.dialog-title {
  font: var(--ps-text-title);
  letter-spacing: var(--ps-tracking-title);
}

.dialog-lead {
  font-size: 17px;
}

.dialog-close,
.sheet-close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ps-black);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.consent .facet-label {
  font-size: 15px;
  font-weight: 500;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .search-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .filters-open {
    display: inline-flex;
  }

  /* Phones and tablets: the panel is a sheet from the bottom. Results refresh behind it as
     choices change; "Pokaż N ofert" closes it. */
  .filters-panel {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    max-height: 88vh;
    padding: 0 18px;
    border-top: 2px solid var(--ps-black);
    background: var(--ps-cream);
    box-shadow: 0 -10px 0 rgb(23 21 19 / 0.2);
    transform: translateY(105%);
    transition: transform var(--ps-dur-fast) var(--ps-ease-move);
    visibility: hidden;
  }

  .sheet-open .filters-panel {
    transform: none;
    visibility: visible;
  }

  .sheet-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgb(23 21 19 / 0.45);
  }

  .sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    background: var(--ps-cream);
  }

  .sheet-title {
    font: var(--ps-text-title);
  }

  .sheet-close {
    position: static;
  }

  .sheet-foot {
    position: sticky;
    bottom: 0;
    display: block;
    padding: 12px 0 18px;
    background: var(--ps-cream);
    border-top: 2px solid var(--ps-black);
  }

  .sheet-apply {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .results-head {
    align-items: start;
  }

  .offer-side {
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---- 6 · Offer page -------------------------------------------------------------------------- */

.detail {
  display: grid;
  gap: var(--ps-space-6);
  max-width: 900px;
}

.back {
  justify-self: start;
  font-weight: 700;
}

.back::before {
  content: "← ";
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.detail-head .eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-soft);
}

.detail h1 {
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
  overflow-wrap: anywhere;
}

.detail-head .offer-meta {
  margin-top: 14px;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 28px;
  margin: 0;
  border-top: var(--ps-bar-sm) solid var(--ps-black);
}

.facts > div {
  padding: 12px 0;
  border-bottom: 2px solid var(--ps-black);
}

.facts dt {
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.facts dd {
  margin: 4px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.detail-section {
  display: grid;
  gap: 14px;
}

.detail-section h2 {
  font: var(--ps-text-title);
  letter-spacing: var(--ps-tracking-title);
}

.prose {
  max-width: 72ch;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.prose-small {
  margin-top: 10px;
  font-size: 16px;
}

.attachments {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attachments > li {
  padding: 12px 16px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

.attachments > li.is-current {
  background: var(--ps-cream);
  border-style: dashed;
}

.attachments summary {
  margin-top: 6px;
  font: var(--ps-text-small);
  cursor: pointer;
}

.member-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.notfound {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding-block: var(--ps-space-8);
}

.notfound h1 {
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  font-weight: 700;
}

/* Legal pages (/prywatnosc, /regulamin): a readable column of text. */
.legal {
  max-width: 72ch;
  padding-block: var(--ps-space-7) var(--ps-space-8);
  font-size: 17px;
  line-height: 1.6;
}

.legal-head {
  display: grid;
  gap: 10px;
  margin-bottom: var(--ps-space-6);
}

.legal-head h1 {
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.legal-date {
  color: var(--ink-soft);
  font: var(--ps-text-small);
}

.legal h2 {
  margin: 2em 0 0.6em;
  font: 800 24px/1.2 var(--ps-font-display);
  letter-spacing: -0.01em;
  scroll-margin-top: 24px;
}

.legal h3 {
  margin: 1.4em 0 0.4em;
  font: 800 18px/1.3 var(--ps-font-display);
}

.legal p + p,
.legal ul + p,
.legal p + ul,
.legal .table-wrap + p,
.legal p + .table-wrap {
  margin-top: 0.8em;
}

.legal ul {
  margin: 0.6em 0 0;
  padding-left: 1.3em;
}

.legal li + li {
  margin-top: 0.35em;
}

.legal li::marker {
  color: var(--ps-red);
}

.legal-short {
  margin-block: var(--ps-space-5) 0;
  padding: 16px 18px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

.legal table td,
.legal table th {
  vertical-align: top;
}

/* /design/alerts: the sample's bar of states. */
.preview-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: var(--ps-space-5);
  padding: 12px 16px;
  border: 2px dashed var(--ps-black);
  font: var(--ps-text-small);
}

.preview-bar strong {
  flex-basis: 100%;
}

.preview-bar [aria-current] {
  font-weight: 800;
  text-decoration-thickness: 4px;
}

/* Managing alerts (/alerts/{token}). */
.am {
  display: grid;
  gap: var(--ps-space-6);
  max-width: 760px;
  padding-block: var(--ps-space-7) var(--ps-space-8);
}

.am-head {
  display: grid;
  gap: 12px;
}

.am-head h1 {
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.am-lead {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.am-done {
  order: -1;
  padding: 10px 14px;
  border: 2px solid var(--ps-black);
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
}

.am-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-alert {
  display: grid;
  gap: 14px;
  padding: 20px clamp(16px, 3vw, 24px) 22px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  box-shadow: var(--ps-shadow-hard-sm);
  scroll-margin-top: 24px;
}

.am-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.am-alert.is-off {
  box-shadow: none;
  background: transparent;
}

.am-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.am-title {
  font: 800 22px/1.2 var(--ps-font-display);
  overflow-wrap: anywhere;
}

.am-alert.is-active .am-state {
  background: var(--ps-green);
  border-color: var(--ps-green);
  color: var(--ps-cream);
}

.am-meta {
  margin-top: -8px;
  color: var(--ink-soft);
  font: var(--ps-text-small);
}

.am-freq {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
}

.am-freq .facet {
  padding: 0;
  border-top: 0;
}

.am-freq .btn {
  min-height: 46px;
}

.btn-sm {
  --lift: 0px;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 16px;
}

.btn-sm.btn-ghost:hover,
.btn-sm:hover {
  --lift: 3px;
}

.am-erase {
  display: grid;
  gap: 12px;
  padding-top: var(--ps-space-6);
  border-top: 2px solid var(--ps-black);
}

.am-erase h2 {
  font: var(--ps-text-title);
  letter-spacing: var(--ps-tracking-title);
}

.am-erase form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* ---- 6b · Offer page (the redesign) ------------------------------------------------------ */

.op {
  display: grid;
  gap: var(--ps-space-6);
  max-width: 880px;
}

.op-status {
  padding: 14px 18px;
  border: 2px solid var(--ps-black);
  border-left-width: var(--ps-bar-sm);
  background: var(--paper-raised);
  font-weight: 600;
}

.op-head {
  display: grid;
  gap: 10px;
}

.op-employer {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.op-kind {
  letter-spacing: 0.06em;
}

.op-title {
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
  overflow-wrap: anywhere;
}

.op-unit {
  font-size: 20px;
  font-weight: 600;
}

.op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* The four facts a visitor decides on. */
.op-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

.fact {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px;
  min-width: 0;
}

.fact + .fact {
  border-left: 2px solid var(--ps-black);
}

.fact-label {
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fact-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.fact-note {
  font: var(--ps-text-small);
  color: var(--ink-soft);
}

.fact.is-missing .fact-value {
  color: var(--ink-soft);
  font-size: 18px;
}

.fact-deadline.is-urgent {
  background: var(--ps-red);
}

.fact-deadline.is-urgent .fact-label,
.fact-deadline.is-urgent .fact-note {
  color: var(--ps-black);
}

/* "W skrócie". */
.op-gist {
  display: grid;
  gap: 10px;
  padding: 18px 22px;
  border-left: var(--ps-bar-sm) solid var(--ps-ochre);
  background: var(--paper-raised);
}

.op-gist ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1em;
  font-size: 19px;
  font-weight: 600;
}

.op-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ps-space-6);
}

.op-block {
  display: grid;
  align-content: start;
  gap: 12px;
}

.op-block > h2 {
  padding-bottom: 8px;
  border-bottom: var(--ps-bar-sm) solid var(--ps-black);
  font: var(--ps-text-title);
  letter-spacing: var(--ps-tracking-title);
}

.op-sub {
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.op-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-list li {
  position: relative;
  padding-left: 26px;
}

.op-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--ps-black);
}

.op-req li::before {
  content: "✓";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  font-weight: 800;
}

.op-nice li::before {
  border: 2px solid var(--ps-black);
  background: none;
  border-radius: 50%;
}

.op-perks {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 2px dashed var(--ps-black);
}

.op-perks ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1em;
}

/* How to apply: the visitor's next step, with the source link. */
.op-apply {
  padding: 22px 24px 26px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  box-shadow: var(--ps-shadow-hard);
}

.op-apply > h2 {
  border-bottom: 0;
  padding-bottom: 0;
}

.op-checklist {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 36px;
  cursor: pointer;
}

.op-checklist input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--ps-black);
  background: var(--ps-cream);
  cursor: pointer;
}

.op-checklist input:checked {
  background: var(--action);
  box-shadow: inset 0 0 0 4px var(--ps-cream);
}

.op-checklist input:checked + span {
  text-decoration: line-through;
  color: var(--ink-soft);
}

.op-howto {
  display: grid;
  gap: 8px;
  margin: 0;
}

.op-howto div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
}

.op-howto dt {
  font-weight: 700;
}

.op-howto dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.op-stages {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.4em;
}

.op-cta {
  margin-top: 6px;
}

/* Folded: the full text and the details. */
.op-fold {
  border-top: 2px solid var(--ps-black);
}

.op-fold:last-of-type {
  border-bottom: 2px solid var(--ps-black);
}

.op-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font: var(--ps-text-title);
  font-size: 22px;
  cursor: pointer;
  list-style: none;
}

.op-fold > summary::-webkit-details-marker {
  display: none;
}

.op-fold > summary::after {
  content: "+";
  font-size: 30px;
  line-height: 1;
}

.op-fold[open] > summary::after {
  content: "−";
}

.op-fulltext {
  display: grid;
  gap: 12px;
  max-width: 72ch;
  padding-bottom: 24px;
}

.op-fulltext h3 {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 800;
}

.op-fulltext ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
}

.op-fulltext mark {
  padding: 0 2px;
  background: color-mix(in srgb, var(--ps-ochre) 45%, transparent);
  color: inherit;
  font-weight: 700;
}

/* A folded part (RODO clause, legal bases, forms): its title stays in line with the text,
   its content opens one level in, behind a soft rule that starts under the triangle, in
   smaller secondary text. */
.op-subfold > summary {
  font-weight: 700;
  cursor: pointer;
}

.op-subfold-body {
  display: grid;
  gap: 10px;
  margin: 10px 0 4px 5px;
  padding-left: 18px;
  border-left: 2px solid #CDBFA6;
  color: var(--ink-soft);
  font-size: 16px;
}

.facts .fact-wide {
  grid-column: 1 / -1;
}

.op-fold .facts {
  margin-bottom: 18px;
}

.op-similar {
  display: grid;
  gap: 16px;
  margin-top: var(--ps-space-5);
}

.op-similar h2 {
  font: var(--ps-text-title);
  letter-spacing: var(--ps-tracking-title);
}

/* Phones: a bar with the deadline and the way to apply. */
.op-bar {
  display: none;
}

@media (max-width: 760px) {
  .op-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact + .fact {
    border-left: 0;
  }

  .fact:nth-child(even) {
    border-left: 2px solid var(--ps-black);
  }

  .fact:nth-child(n + 3) {
    border-top: 2px solid var(--ps-black);
  }

  .op-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .op-howto div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .offer-page main {
    padding-bottom: 84px;
  }

  .op-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 2px solid var(--ps-black);
    background: var(--ps-cream);
  }

  .op-bar-deadline {
    font: var(--ps-text-small);
  }
}

/* ---- 7 · Status page (internal) ------------------------------------------------------------ */

.page-title {
  margin-bottom: 18px;
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.status {
  display: grid;
  gap: 28px;
}

/* A wide table scrolls in its own box instead of widening the page's grid track. */
.status > * {
  min-width: 0;
}

.refreshed {
  font: var(--ps-text-small);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.kpi {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

.kpi-value {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi-label {
  font: var(--ps-text-small);
}

.kpi-warn {
  background: var(--ps-ochre);
}

.panel {
  display: grid;
  gap: 12px;
}

.panel h2 {
  font: var(--ps-text-title);
  letter-spacing: var(--ps-tracking-title);
}

.table-wrap {
  overflow-x: auto;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

table {
  width: 100%;
  border-collapse: collapse;
  font: var(--ps-text-small);
}

th,
td {
  padding: 8px 12px;
  border-bottom: 1px solid #CDBFA6;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--ps-black);
  color: var(--ps-cream);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}

.bad {
  color: #B42F1C;
  font-weight: 800;
}

.row-bad td {
  background: #F6D9C9;
}

.empty-note {
  color: var(--ink-soft);
}

.mono-ish {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.errors {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.errors > li {
  padding: 10px 14px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

.error-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: var(--ps-text-small);
}

.error-url,
.error-msg {
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Health states: always a word, with a square mark whose colour says whose problem it is.
   Red: the site refuses us. Ink: the site is down. Cobalt: our parser. Ochre: unstable.
   Hollow: paused (ink) or not judged (soft). Green: works. */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--ps-text-small);
  white-space: nowrap;
}

.state::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--state, var(--ink-soft));
  background: var(--state, transparent);
}

.state-healthy { --state: var(--ps-green); }
.state-degraded { --state: var(--ps-ochre); }
.state-blocked { --state: var(--ps-red); }
.state-down { --state: var(--ps-black); }
.state-broken { --state: var(--ps-cobalt); }

.state-paused::before {
  border-color: var(--ps-black);
  background: transparent;
}

.state-idle::before,
.state-dead::before {
  border-style: dashed;
  background: transparent;
}

/* The overall level: a flat field with the word, the reasons beside it on paper. */
#banner {
  display: block;
}

.banner {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  box-shadow: var(--ps-shadow-hard-sm);
}

.banner-level {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.banner-ok .banner-level {
  background: var(--ps-green);
  color: var(--ps-cream);
}

.banner-warn .banner-level {
  background: var(--ps-ochre);
  color: var(--ps-black);
}

/* Cream on red only this large (the handoff's rule). */
.banner-bad .banner-level {
  background: var(--ps-red);
  color: var(--ps-cream);
}

.banner-body {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px 20px;
  border-left: 2px solid var(--ps-black);
  font: var(--ps-text-small);
}

.banner-reasons {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

/* State tiles: count, state, change since yesterday; each opens the filtered host table. */
.state-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 12px;
}

.state-tile {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
}

.state-tile:hover,
.state-tile[aria-current] {
  background: var(--action);
  color: var(--on-action);
}

.state-tile-n {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.state-tile-delta {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.state-tile:hover .state-tile-delta,
.state-tile[aria-current] .state-tile-delta {
  color: var(--on-action);
}

.state-tile .state {
  white-space: normal;
}

.state-tile.is-zero .state-tile-n {
  color: var(--ink-soft);
}

/* Host table. */
.host-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: end;
  font: var(--ps-text-small);
}

.host-filters label {
  display: grid;
  gap: 4px;
}

.host-filters select,
.host-filters input {
  min-height: 38px;
  padding: 6px 10px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  color: var(--ink);
  font: var(--ps-text-small);
}

.hosts-table {
  display: grid;
  gap: 10px;
}

.host-cell {
  display: grid;
  gap: 2px;
  min-width: 220px;
}

.host-why {
  font-weight: 500;
}

.host-meta,
.host-fault {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.pager {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Sparklines and the host page's hour strip (inline SVG, _spark.html). */
.spark {
  display: block;
}

.spark-base {
  fill: #CDBFA6;
}

.spark-bar {
  fill: var(--ink-soft);
}

.spark-bad {
  fill: var(--ps-red);
}

.strip-wrap {
  display: grid;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.strip {
  display: block;
}

.strip-axis {
  display: flex;
  justify-content: space-between;
  max-width: 576px;
  font-size: 12px;
}

.strip-ok { fill: var(--ps-green); background: var(--ps-green); }
.strip-mixed { fill: var(--ps-ochre); background: var(--ps-ochre); }
.strip-bad { fill: var(--ps-red); background: var(--ps-red); }
.strip-none { fill: #DCD2BF; background: #DCD2BF; }

.strip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--ps-text-small);
}

.strip-legend li {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.strip-key {
  width: 12px;
  height: 12px;
}

/* System tiles. */
.sys-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.sys-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 14px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

.sys-title {
  font: var(--ps-text-eyebrow);
  letter-spacing: var(--ps-tracking-eyebrow);
  text-transform: uppercase;
}

.sys-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.sys-detail {
  color: var(--ink-soft);
  font: var(--ps-text-small);
}

/* A tile's level: a word on a small field (ink on green would be too dark: cream). */
.level {
  justify-self: start;
  padding: 2px 8px;
  border: 1.5px solid var(--ps-black);
  font: 700 12px/1.2 var(--ps-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.level-ok {
  background: var(--ps-green);
  color: var(--ps-cream);
}

.level-warn {
  background: var(--ps-ochre);
  color: var(--ps-black);
}

.level-bad {
  border-color: var(--ps-red);
  color: #B42F1C;
}

.level-off {
  border-style: dashed;
  color: var(--ink-soft);
}

/* The host page. */
.host-title {
  font-size: clamp(26px, 4vw, 44px);
}

.host-head {
  display: grid;
  gap: 6px;
}

.host-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-weight: 600;
}

.host-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 20px;
  margin: 0;
}

.host-facts dt {
  color: var(--ink-soft);
  font: var(--ps-text-small);
}

.host-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The folded tables, loaded when opened. */
.status-more summary {
  cursor: pointer;
}

.status-more summary h2 {
  display: inline;
}

.status-more h3 {
  font: 700 20px/1.2 var(--ps-font-display);
}

/* Narrow screens drop the sparklines; the diagnostics stay (tables scroll in their box). */
@media (max-width: 640px) {
  .col-spark {
    display: none;
  }

  .banner {
    grid-template-columns: 1fr;
  }

  .banner-body {
    border-left: 0;
    border-top: 2px solid var(--ps-black);
  }
}

/* ---- 8 · Landing ----------------------------------------------------------------------------- */

/* Hero: a poster built from cut paper. Sun right, slab and dot, the horizon bar; the question in
   three lines with the middle one on ochre and the last one red. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 120px) clamp(64px, 9vw, 120px);
}

.hero-art > span {
  position: absolute;
  display: block;
}

.hero-sun {
  right: -12vw;
  top: clamp(-120px, -6vw, -40px);
  width: clamp(360px, 58vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ps-red);
}

.hero-slab {
  right: clamp(8px, 6vw, 110px);
  top: clamp(180px, 22vw, 320px);
  width: clamp(90px, 14vw, 210px);
  height: clamp(260px, 42vw, 560px);
  background: var(--ps-green);
  transform: rotate(12deg);
}

.hero-dot {
  right: clamp(150px, 24vw, 360px);
  bottom: clamp(60px, 7vw, 110px);
  width: clamp(54px, 8vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ps-ochre);
}

.hero-bar {
  left: 0;
  bottom: clamp(28px, 4vw, 52px);
  width: min(70vw, 980px);
  height: var(--ps-bar);
  background: var(--ps-black);
  transform-origin: 0 50%;
}

.hero-inner {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--ps-space-5);
}

.hero-title {
  display: grid;
  justify-items: start;
  gap: 0.06em;
  font: var(--ps-text-display-xl);
  letter-spacing: var(--ps-tracking-display-xl);
}

.hero-line .hl {
  padding: 0.02em 0.22em 0.12em;
}

.hero-line-red {
  color: var(--ps-red);
}

.hero-sub {
  max-width: 34ch;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  line-height: 1.35;
}

.hero-search {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  width: min(100%, 760px);
  margin-top: 8px;
}

.hero-search .input {
  flex: 1 1 280px;
}

.hero-cta {
  position: relative;
  flex: none;
}

.hero-pin {
  --pin: 34px;
  position: absolute;
  right: 22px;
  top: -44px;
  z-index: 1;
  color: var(--ps-black);
  transform-origin: 50% 100%;
}

.hero-count {
  max-width: 36ch;
  font-weight: 600;
}

.hero-count strong {
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* People: black section, three poster cards. */
.people {
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--ps-black);
  color: var(--ps-cream);
}

.people-title {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: clamp(40px, 6vw, 72px);
  font: var(--ps-text-display-l);
  letter-spacing: var(--ps-tracking-display-l);
  text-align: center;
}

.poster-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.poster {
  --field: var(--ps-green);
  --sun: var(--ps-red);
  --caption: var(--ps-cream);
  --eyebrow: var(--ps-cream);
  transform: rotate(var(--tilt, 0deg));
}

.poster-cobalt {
  --field: var(--ps-cobalt);
}

.poster-red {
  --field: var(--ps-red);
  --sun: var(--ps-ochre);
  --eyebrow: var(--ps-black); /* small cream text on red fails contrast */
}

.poster-link {
  display: grid;
  background: var(--field);
  color: var(--caption);
  text-decoration: none;
  box-shadow: var(--ps-shadow-hard-on-dark);
  transition:
    transform 160ms var(--ps-ease-move),
    box-shadow 160ms var(--ps-ease-move);
}

.poster-link:hover {
  color: var(--caption);
  transform: translate(-3px, -3px);
  box-shadow: 13px 13px 0 var(--ps-cream);
}

.poster-art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
}

.poster-sun {
  position: absolute;
  right: -8%;
  top: 4%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
}

.poster-art .arch {
  position: absolute;
  left: 12%;
  bottom: 0;
  width: 66%;
  height: 84%;
}

.poster-art .arch img {
  transition: transform 1600ms var(--ps-ease-move);
}

.poster-link:hover .arch img {
  transform: scale(1.06);
}

.poster-bar {
  height: var(--ps-bar);
  background: var(--ps-black);
}

.poster-caption {
  display: grid;
  gap: 6px;
  padding: 18px 20px 24px;
}

.poster-caption .eyebrow {
  color: var(--eyebrow);
}

.poster-role {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Regions: the tile cartogram and the counter. */
.regions {
  padding-block: clamp(64px, 9vw, 120px);
  text-align: center;
}

.regions-title {
  font: var(--ps-text-display-l);
  letter-spacing: var(--ps-tracking-display-l);
}

.regions-underline {
  display: block;
  width: min(60%, 420px);
  height: var(--ps-bar);
  margin: 14px auto clamp(36px, 5vw, 64px);
  background: var(--ps-red);
  transform-origin: 0 50%;
}

.cartogram {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.tile {
  grid-column: var(--col);
  grid-row: var(--row);
  transform: rotate(var(--tilt, 0deg));
}

.tile a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  padding: clamp(8px, 1.4vw, 18px);
  background: var(--tile-bg);
  color: var(--tile-fg);
  text-decoration: none;
  transition:
    transform 160ms var(--ps-ease-pop),
    box-shadow 160ms var(--ps-ease-move);
}

.tile a:hover {
  color: var(--tile-fg);
  transform: translate(-3px, -3px) rotate(calc(var(--tilt, 0deg) * -1));
  box-shadow: var(--ps-shadow-hard-sm);
}

.tile-0 {
  --tile-bg: var(--ps-red);
  --tile-fg: var(--ps-black); /* cream on red only from 32px bold: the city name is smaller */
}

.tile-1 {
  --tile-bg: var(--ps-ochre);
  --tile-fg: var(--ps-black);
}

.tile-2 {
  --tile-bg: var(--ps-green);
  --tile-fg: var(--ps-cream);
}

.tile-3 {
  --tile-bg: var(--ps-cobalt);
  --tile-fg: var(--ps-cream);
}

.tile-city {
  font-size: clamp(12px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.1;
}

.tile-count {
  font-size: clamp(22px, 4.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.counter {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: clamp(40px, 6vw, 80px);
}

.counter-num {
  font: var(--ps-text-number);
  letter-spacing: var(--ps-tracking-number);
}

.counter-label {
  padding: 4px 30px 10px;
  background: var(--ps-black);
  color: var(--ps-cream);
  font-size: clamp(26px, 3.6vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  transform: rotate(-2deg);
}

/* Closing: green, the sun rising behind the stacked logo, the tagline in two beats. */
/* The landing page's alert form: a place and a kind of employer, then that page's alert. */
.home-alert {
  padding-block: clamp(48px, 7vw, 96px);
  background: var(--ps-ochre);
  border-block: var(--ps-bar) solid var(--ps-black);
}

.home-alert-inner {
  display: grid;
  gap: var(--ps-space-4);
}

.home-alert-title {
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.home-alert-lead {
  max-width: 56ch;
}

.home-alert-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--ps-space-4);
  margin-top: var(--ps-space-3);
}

@media (max-width: 760px) {
  .home-alert-form {
    grid-template-columns: 1fr;
  }
}

.closing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 5vw, 72px);
  background: var(--ps-green);
  color: var(--ps-cream);
}

.closing-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--ps-space-6);
  text-align: center;
}

.logo-closing {
  --logo-h: clamp(170px, 22vw, 260px);
  color: var(--ps-cream);
  --logo-accent: var(--ps-ochre);
}

.closing-title {
  display: grid;
  justify-items: center;
  gap: 12px;
  /* The wordmark is turned -4°: it overhangs its box, so the tagline keeps its distance; the
     "Ludzkiej." block, turned too, keeps its from the button. */
  margin-block: var(--ps-space-8) var(--ps-space-7);
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

/* ---- 9 · Design page ------------------------------------------------------------------------ */

.ds {
  display: grid;
  gap: var(--ps-space-8);
}

.ds-intro {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.ds-intro h1 {
  font: var(--ps-text-display-l);
  letter-spacing: var(--ps-tracking-display-l);
}

.ds-section {
  display: grid;
  gap: var(--ps-space-5);
}

.ds-section > h2 {
  padding-bottom: 10px;
  border-bottom: var(--ps-bar-sm) solid var(--ps-black);
  font: var(--ps-text-heading);
  letter-spacing: var(--ps-tracking-heading);
}

.ds-note {
  max-width: 70ch;
  color: var(--ink-soft);
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.swatch {
  display: grid;
  grid-template-rows: 120px 1fr;
  border: 2px solid var(--ps-black);
}

.swatch-chip {
  background: var(--sw);
}

.swatch-info {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--paper-raised);
  font: var(--ps-text-small);
}

.swatch-info strong {
  font-size: 18px;
}

.type-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 2px solid var(--ps-black);
}

.type-row > span:first-child {
  font: var(--ps-text-small);
  color: var(--ink-soft);
}

.t-display-xl { font: var(--ps-text-display-xl); letter-spacing: var(--ps-tracking-display-xl); }
.t-display-l { font: var(--ps-text-display-l); letter-spacing: var(--ps-tracking-display-l); }
.t-heading { font: var(--ps-text-heading); letter-spacing: var(--ps-tracking-heading); }
.t-title { font: var(--ps-text-title); letter-spacing: var(--ps-tracking-title); }
.t-body { font: var(--ps-text-body); }
.t-small { font: var(--ps-text-small); }
.t-number { font: var(--ps-text-number); letter-spacing: var(--ps-tracking-number); font-variant-numeric: tabular-nums; }

.ds-stage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  min-height: 200px;
  padding: 28px;
  border: 2px solid var(--ps-black);
  overflow: hidden;
}

.ds-stage.field-cream { background: var(--ps-cream); }
.ds-stage.field-black { background: var(--ps-black); color: var(--ps-cream); }
.ds-stage.field-cobalt { background: var(--ps-cobalt); color: var(--ps-cream); }
.ds-stage.field-red { background: var(--ps-red); color: var(--ps-cream); }
.ds-stage.field-green { background: var(--ps-green); color: var(--ps-cream); }

.ds-stage .logo {
  --logo-h: 120px;
}

.ds-favicons {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.ds-favicons img {
  border: 1px solid #CDBFA6;
}

.ds-shapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.ds-shape {
  display: grid;
  align-content: end;
  gap: 10px;
  min-height: 200px;
  padding: 16px;
  border: 2px solid var(--ps-black);
  font: var(--ps-text-small);
}

.ds-shape .sun {
  width: 110px;
}

.ds-shape .bar {
  height: var(--ps-bar);
  transform: rotate(-6deg);
}

.ds-shape .arch {
  width: 110px;
  height: 130px;
}

.ds-specimen {
  display: grid;
  gap: 18px;
  max-width: 760px;
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.motion-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.motion-demo button {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: 180px;
  padding: 16px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  font: var(--ps-text-small);
  cursor: pointer;
}

.motion-demo .ball {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ps-red);
}

.motion-demo button:nth-child(2) .ball { background: var(--ps-cobalt); }
.motion-demo button:nth-child(3) .ball { background: transparent; }

.motion-demo button.play:nth-child(1) .ball { animation: pop var(--ps-dur-base) var(--ps-ease-pop); }
.motion-demo button.play:nth-child(2) .ball { animation: move var(--ps-dur-slow) var(--ps-ease-move); }
.motion-demo button.play:nth-child(3) .pin { animation: pin-drop 900ms both; }

@keyframes move {
  0% { transform: translateX(-50px); }
  100% { transform: translateX(0); }
}

/* E-mail previews (/design/emails): each e-mail at a desktop and a phone width. */
.ew-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
}

.ew-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0 0 20px;
  font-size: 15px;
}

.ew-meta dt {
  color: var(--ink-soft);
}

.ew-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ew-frames {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.ew-frame {
  margin: 0;
  max-width: 100%;
}

.ew-frame figcaption {
  font: var(--ps-text-small);
  font-weight: 700;
  margin-bottom: 6px;
}

.ew-frame iframe {
  display: block;
  max-width: 100%;
  min-height: 400px;
  border: 2px solid var(--ps-black);
  background: #fff;
}

.ew-desktop iframe {
  width: 680px;
}

.ew-phone iframe {
  width: 375px;
}

.ew-text {
  margin-top: 20px;
}

.ew-text summary {
  cursor: pointer;
  font-weight: 700;
}

.ew-text pre {
  max-width: 76ch;
  padding: 16px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
  white-space: pre-wrap;
  font-size: 14px;
}

@media (max-width: 700px) {
  .ew-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 10 · Motion ------------------------------------------------------------------------------ */

@keyframes pop {
  0% { transform: scale(0) rotate(var(--from-rot, -12deg)); }
  100% { transform: scale(1) rotate(var(--to-rot, 0deg)); }
}

@keyframes rise {
  0% { transform: translateY(70%); }
  100% { transform: translateY(0); }
}

@keyframes rise-far {
  0% { transform: translateY(160%); }
  100% { transform: translateY(0); }
}

@keyframes grow-x {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes slide-in {
  0% { transform: translateX(-110vw); }
  100% { transform: translateX(0); }
}

@keyframes slab-in {
  0% { transform: translateX(60vw) rotate(12deg); }
  100% { transform: translateX(0) rotate(12deg); }
}

/* The pin falls (ease-in), squashes on landing, settles. Its own -45deg turn is kept. */
@keyframes pin-drop {
  0% { transform: translateY(-120vh) rotate(-45deg); animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
  62% { transform: translateY(0) rotate(-45deg) scale(1, 1); }
  76% { transform: translateY(4px) rotate(-45deg) scale(1.2, 0.7); }
  100% { transform: translateY(0) rotate(-45deg) scale(1, 1); }
}

@keyframes pulse {
  0% { transform: scale(0.4); }
  100% { transform: scale(1); }
}

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .home .hero-sun { animation: pop var(--ps-dur-slow) var(--ps-ease-pop) both; --from-rot: 0deg; }
  .home .hero-slab { animation: slab-in var(--ps-dur-slow) var(--ps-ease-move) 150ms both; }
  .home .hero-dot { animation: pop var(--ps-dur-base) var(--ps-ease-pop) 400ms both; }
  .home .hero-bar { animation: grow-x var(--ps-dur-slow) var(--ps-ease-move) 250ms both; }
  .home .hero-line { animation: slide-in var(--ps-dur-base) var(--ps-ease-move) both; }
  .home .hero-line:nth-child(1) { animation-delay: 300ms; }
  .home .hero-line:nth-child(2) { animation-delay: 450ms; }
  .home .hero-line:nth-child(3) { animation-delay: 600ms; }
  .home .hero-line .hl { animation: pop var(--ps-dur-base) var(--ps-ease-pop) 650ms both; --from-rot: -20deg; --to-rot: -3deg; }
  .home .hero-pin { animation: pin-drop 900ms 1100ms both; }

  /* Sections below the fold play when scrolled in (app.js adds .is-in); without JS, all shows. */
  .js .reveal { opacity: 0; }
  .js .reveal.is-in { opacity: 1; }
  .js .people-title.is-in .people-line { animation: pop var(--ps-dur-base) var(--ps-ease-pop) both; --from-rot: 0deg; }
  .js .people-title.is-in .hl-pop { animation: pop var(--ps-dur-base) var(--ps-ease-pop) 180ms both; --from-rot: -20deg; --to-rot: -3deg; }
  .js .poster.is-in { animation: pop var(--ps-dur-base) var(--ps-ease-pop) var(--delay, 0ms) both; --from-rot: 10deg; --to-rot: var(--tilt); }
  .js .regions-title.is-in { animation: pop var(--ps-dur-base) var(--ps-ease-pop) both; --from-rot: 0deg; }
  .js .regions-underline.is-in { animation: grow-x var(--ps-dur-slow) var(--ps-ease-move) 200ms both; }
  .js .tile.is-in { animation: pop var(--ps-dur-base) var(--ps-ease-pop) var(--delay, 0ms) both; --from-rot: 25deg; --to-rot: var(--tilt); }
  .js .counter.is-in { animation: pop var(--ps-dur-base) var(--ps-ease-pop) 300ms both; --from-rot: 0deg; }
  /* The sun rises behind the stem, as in the video's ending. */
  .js .closing .logo-sun { transform-box: fill-box; transform: translateY(160%); }
  .closing.is-in .logo-sun { animation: rise-far var(--ps-dur-slow) var(--ps-ease-move) both; }
  .closing.is-in .logo-word { animation: pop var(--ps-dur-base) var(--ps-ease-pop) 500ms both; --from-rot: 0deg; --to-rot: -4deg; }
  .closing.is-in .hl-late { animation: pop var(--ps-dur-base) var(--ps-ease-pop) 600ms both; --from-rot: -20deg; --to-rot: -3deg; }

  /* Product views stay calm: cards only fade up, staggered. */
  .offer-list > .offer { animation: fade-up var(--ps-dur-fast) var(--ps-ease-move) both; }
  .offer-list > .offer:nth-child(2) { animation-delay: 40ms; }
  .offer-list > .offer:nth-child(3) { animation-delay: 80ms; }
  .offer-list > .offer:nth-child(4) { animation-delay: 120ms; }
  .offer-list > .offer:nth-child(5) { animation-delay: 160ms; }
  .offer-list > .offer:nth-child(n + 6) { animation-delay: 200ms; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    transition-duration: 1ms !important;
  }
}

/* ---- Responsive ----------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .poster-row {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    min-height: 64px;
  }

  .logo-top {
    --logo-h: 36px;
  }

  .nav {
    gap: 12px;
  }

  .nav-cta,
  .nav-saved {
    padding: 8px 10px;
    font-size: 15px;
  }

  .nav-long {
    display: none;
  }

  .search-row {
    flex-direction: column;
  }

  .hero-title {
    font-size: clamp(40px, 11.6vw, 64px);
  }

  .offer {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .offer-deadline {
    grid-row: 1;
    justify-self: start;
  }

  .stamp {
    flex-direction: row;
    gap: 8px;
    min-width: 0;
    padding: 4px 10px;
    transform: rotate(-1.5deg);
  }

  .stamp-date {
    font-size: 18px;
  }

  .detail-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-stamp {
    grid-row: 1;
  }

  /* Small screens: the sun keeps to the top corner, clear of the red last line; the slab would
     sit behind text, so it goes. */
  .hero-sun {
    right: -34vw;
    top: -150px;
    width: 78vw;
  }

  .hero-art .hero-slab {
    display: none;
  }

  .hero-dot {
    right: 10px;
    bottom: auto;
    top: 150px;
    width: 46px;
  }

  .hero-cta,
  .hero-cta .btn {
    width: 100%;
  }

  .type-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* /zapisane: deadline reminders by e-mail. */
.remind {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 2px solid var(--ps-black);
  background: var(--paper-raised);
}

.remind-form {
  display: grid;
  gap: 12px;
}

/* The box is as wide as the offer cards below it; its text keeps a readable measure. */
.remind-form > *,
.remind-note {
  max-width: 72ch;
}

.remind-title {
  font: 800 20px/1.2 var(--ps-font-display);
}

.remind-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.remind-row .field {
  flex: 1 1 240px;
}

.remind-error {
  font-weight: 700;
}