/* =====================================================================
   Framewright Flow — warstwa wizualna tej strony.
   Baza układu i komponentów siedzi w main.css, tutaj jest to, co ma
   zrobić ze strony diagram, a nie listę pudełek.
   ===================================================================== */

.page-flow {
  --panel: linear-gradient(
    180deg,
    var(--surface-raised),
    color-mix(in srgb, var(--navy) 3%, var(--surface-raised))
  );
  --panel-dark: linear-gradient(
    180deg,
    color-mix(in srgb, var(--off-white) 7%, var(--navy)),
    color-mix(in srgb, var(--off-white) 3%, var(--navy))
  );
}

/* Akcent trzymamy krótko: brąz siedzi w numerach i etykietach oraz w
   jednym zdaniu w hero. Nagłówki sekcji idą jednym kolorem. */
.page-flow .section-head h2 { max-width: 22ch; }

.kicker-num {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}
.kicker-num b {
  font-weight: 500;
  color: var(--accent);
}
.section-dark .kicker-num b,
.flow-hero .kicker-num b { color: var(--accent-on-dark); }
.kicker-num span { color: var(--ink-faint); }
.section-dark .kicker-num span { color: color-mix(in srgb, var(--off-white) 52%, var(--navy)); }

/* Siatka rysunku technicznego (.blueprint) i etykieta z kropką (.badge)
   siedzą w main.css, bo hero strony głównej używa ich tak samo. */

/* ---------- Hero ---------- */

.flow-hero {
  position: relative;
  padding-block: clamp(8.5rem, 13vw, 10rem) clamp(3rem, 6vw, 4.5rem);
  background: var(--surface-dark);
  color: var(--ink-inverse);
  overflow: clip;
}
.flow-hero .lede { color: var(--ink-inverse-muted); }
.flow-hero h1 { color: var(--ink-inverse); }
/* Link tekstowy w hero szedł domyślnym, ciemnym kolorem na navy */
.flow-hero .text-link { color: var(--ink-inverse-muted); }
@media (hover: hover) and (pointer: fine) {
  .flow-hero .text-link:hover { color: var(--ink-inverse); }
}

.flow-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 24rem at 74% 34%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 68%),
    radial-gradient(30rem 20rem at 4% 92%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 72%);
}

.flow-hero-grid {
  --login-column-gap: clamp(2.5rem, 6vw, 4rem);
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--login-column-gap);
  align-items: center;
}

.hero-copy,
.ring-column,
.login-panel { min-width: 0; }

.hero-copy,
.login-panel {
  grid-column: 1;
  grid-row: 1;
}

.ring-column {
  grid-column: 1;
  grid-row: 2;
}

/* Na telefonie formularz zastępuje tekst bez poziomych przejazdów. */
.login-panel {
  width: 100%;
  max-width: 31rem;
  margin-inline: auto;
  opacity: 0;
  transform: translate3d(0, var(--space-4), 0);
}

.flow-hero.is-login .hero-copy {
  opacity: 0;
  transform: translate3d(0, calc(var(--space-4) * -1), 0);
}

.flow-hero.is-login .login-panel {
  opacity: 1;
  transform: none;
}

.flow-hero.is-login .ring-hint {
  visibility: hidden;
  opacity: 0;
}

/* Czasy przejścia hero ↔ logowanie. Moduł JS czyta --login-dur i --login-stagger
   z tej sekcji, żeby nie chować elementu przed końcem ruchu — zmieniając je tutaj
   zmieniasz też moment sprzątania w JS. */
.flow-hero {
  --login-dur: 900ms;
  --login-fade: 560ms;
  --login-stagger: 200ms;
  --login-ease: var(--ease-drawer);
}

.login-transition-ready .hero-copy,
.login-transition-ready .ring-column,
.login-transition-ready .login-panel {
  transition:
    opacity var(--login-fade) var(--login-ease),
    transform var(--login-dur) var(--login-ease);
  transition-delay: 0ms;
}

/* Wchodzący czeka, aż wychodzący zejdzie z drogi — w obie strony.
   Ring jedzie bez zwłoki, bo to on niesie ciągłość między stanami. */
.login-transition-ready .flow-hero.is-login .login-panel,
.login-transition-ready .flow-hero:not(.is-login) .hero-copy {
  transition-delay: var(--login-stagger);
}

.login-transition-ready .ring-hint {
  transition:
    opacity var(--login-fade) var(--login-ease),
    visibility 0s linear var(--login-fade);
}

.login-transition-ready .flow-hero:not(.is-login) .ring-hint {
  transition-delay: 0ms;
}

/* Klasa trafia na <html> w headzie, zanim przeglądarka narysuje wejście
   bezpośrednio na /#login. Moduł JS zaraz zamienia ją na zwykły stan sekcji. */
.login-hash .hero-copy { display: none; }
.login-hash .login-panel[hidden] {
  display: grid;
  opacity: 1;
  transform: none;
}
.login-hash .ring-hint {
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 62rem) {
  .flow-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .ring-column,
  .login-panel {
    grid-column: 2;
    grid-row: 1;
  }

  .login-panel {
    transform: translate3d(calc(100% + var(--login-column-gap)), 0, 0);
  }

  .flow-hero.is-login .hero-copy {
    transform: translate3d(calc(-100% - var(--login-column-gap)), 0, 0);
  }

  .flow-hero.is-login .ring-column,
  .login-hash .ring-column {
    opacity: 1;
    transform: translate3d(calc(-100% - var(--login-column-gap)), 0, 0);
  }
}

.flow-hero h1 { margin-bottom: var(--space-5); }
.flow-hero .hero-actions { margin-block: var(--space-6); }

/* ---------- Logowanie w hero ---------- */

.login-panel {
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: 1px solid var(--line-inverse);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--off-white) 9%, var(--navy)),
    color-mix(in srgb, var(--off-white) 4%, var(--navy))
  );
  box-shadow: var(--shadow-lg);
  color: var(--ink-inverse);
  color-scheme: dark;
}

.login-panel[hidden] { display: none; }

.login-panel-heading { display: grid; gap: var(--space-2); }
.login-panel-heading h2 {
  font-size: var(--step-3);
  color: var(--ink-inverse);
}
.login-panel-heading > p:last-child { color: var(--ink-inverse-muted); }

.login-kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: var(--accent-on-dark);
}

.login-form,
.login-field { display: grid; }
.login-form { gap: var(--space-4); }
.login-field { gap: var(--space-2); }

.login-field label,
.login-remember {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
}

.login-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.login-label-row a,
.login-back {
  color: var(--ink-inverse-muted);
  text-underline-offset: 0.2em;
  transition: color var(--dur-hover) ease;
}
.login-label-row a { font-size: var(--step--1); }

.login-field input {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-inverse);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #000000 12%, var(--navy));
  color: var(--ink-inverse);
  font: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--off-white) 3%, transparent);
  transition:
    border-color var(--dur-hover) ease,
    background var(--dur-hover) ease;
}

.login-field input:hover { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.login-field input:focus {
  border-color: var(--cyan);
  background: color-mix(in srgb, var(--off-white) 3%, var(--navy));
  outline: 2px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  outline-offset: 2px;
}
.login-field input[aria-invalid="true"] { border-color: var(--accent-on-dark); }

.login-remember {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-inverse-muted);
  cursor: pointer;
}
.login-remember input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--brass);
}

.login-submit { justify-content: center; width: 100%; }

.login-back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step--1);
}

.login-feedback {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-inverse);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--off-white) 5%, transparent);
  color: var(--ink-inverse-muted);
  font-size: var(--step--1);
}
.login-feedback.is-error { border-color: color-mix(in srgb, var(--brass) 58%, transparent); }
.login-feedback.is-status { border-color: color-mix(in srgb, var(--cyan) 58%, transparent); }
.login-feedback p { color: var(--ink-inverse); font-weight: 600; }
.login-feedback ul {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-5);
}

@media (hover: hover) and (pointer: fine) {
  .login-label-row a:hover,
  .login-back:hover { color: var(--ink-inverse); }
}

/* Skąd Flow bierze kontekst. Domyka hero i zapowiada architekturę. */
.hero-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--line-inverse);
}
.hero-sources > span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: color-mix(in srgb, var(--off-white) 45%, var(--navy));
}
.hero-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-sources li {
  padding: 0.3rem var(--space-3);
  border: 1px solid var(--line-inverse);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-inverse-muted);
}

/* ---------- Pętla ---------- */

.ring {
  position: relative;
  width: 100%;
  max-width: 33rem;
  margin-inline: auto;
  aspect-ratio: 1;
  container-type: inline-size;
}

.ring-surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: grab;
  /* Palec w pionie nadal przewija stronę, w poziomie kręci pętlą */
  touch-action: pan-y;
}
.ring-surface.is-grabbed { cursor: grabbing; }

.ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ring-track {
  fill: none;
  stroke: var(--line-inverse);
  stroke-width: 0.35;
}
.ring-arc {
  fill: none;
  stroke: var(--accent-on-dark);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: var(--circ);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Znacznik jedzie po wewnętrznej orbicie: obracamy pudełko, nie
   liczymy sinusów. Wewnątrz, żeby nie chował się pod plakietkami. */
.ring-orbit {
  position: absolute;
  inset: 20%;
  pointer-events: none;
}
.ring-orbit::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent-on-dark);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brass) 70%, transparent);
}

.ring-node {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 5.4rem;
  padding: var(--space-2);
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink-inverse-muted);
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease-out);
}
.ring-node b {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--line-inverse);
  background: color-mix(in srgb, var(--off-white) 7%, var(--navy));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  transition: transform var(--dur-ui) var(--ease-out),
    background var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
.ring-node small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
.ring-node.is-active { color: var(--ink-inverse); }
.ring-node.is-active b {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--navy);
  transform: scale(1.1);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brass) 14%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .ring-node:hover b { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); }
}

.ring-card {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 48%;
  padding: var(--space-4);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ring-card em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: var(--accent-on-dark);
}
.ring-card h2 {
  margin-block: var(--space-2);
  font-size: clamp(1rem, 5.2cqi, 1.4rem);
  color: var(--ink-inverse);
}
.ring-card p {
  font-size: clamp(0.72rem, 3.2cqi, 0.86rem);
  color: var(--ink-inverse-muted);
  line-height: 1.45;
}

.ring-hint {
  margin-block-start: var(--space-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--off-white) 42%, var(--navy));
}

@container (max-width: 26rem) {
  .ring-node { width: 3.2rem; }
  .ring-node small { display: none; }
  .ring-card { width: 58%; }
}

/* ---------- Problem: systemy, które nie rozmawiają ---------- */

.silos {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}
@media (min-width: 34rem) {
  .silos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.silo {
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
}
.silo b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: var(--ink);
}
.silo span {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---------- Architektura ---------- */

.arch {
  position: relative;
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 62rem) {
  .arch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* Łączniki między kolumnami wypełniają dokładnie przerwę siatki,
   niezależnie od szerokości kolumn. Impuls biegnie od źródeł, przez
   Flow, do rekomendacji. */
@media (min-width: 62rem) {
  .arch-col:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 100%;
    width: var(--space-5);
    height: 2px;
    background: color-mix(in srgb, var(--navy) 18%, transparent);
    overflow: hidden;
  }
  .arch-link {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 100%;
    z-index: 1;
    width: var(--space-5);
    height: 8px;
    margin-block-start: -3px;
    overflow: hidden;
  }
  .arch-link::before {
    content: "";
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 0;
    width: 40%;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--brass) 70%, transparent);
    animation: link-travel 2.6s var(--ease-in-out) infinite;
    animation-delay: var(--delay, 0s);
  }
}
@keyframes link-travel {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

.arch-col {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.arch-col.is-core {
  background: var(--surface-dark);
  color: var(--ink-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.arch-col.is-core::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--space-6);
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.arch-col.is-core h3 { color: var(--ink-inverse); }
.arch-col.is-core > p { color: var(--ink-inverse-muted); }

.arch-col > small {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
}
.arch-col.is-core > small { color: var(--accent-on-dark); }
.arch-col h3 { font-size: var(--step-2); }
.arch-col > p { color: var(--ink-muted); font-size: var(--step--1); }

.arch-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.arch-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.arch-list li::before {
  content: "";
  margin-block-start: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.arch-col.is-core .arch-list { color: var(--ink-inverse-muted); }
.arch-col.is-core .arch-list li::before { background: var(--cyan); opacity: 1; }

.arch-list b {
  margin-inline-end: 0.4em;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.arch-col.is-core .arch-list b { color: var(--ink-inverse); }

.principles-row {
  display: grid;
  gap: var(--space-5);
  margin-block-start: clamp(2.5rem, 6vw, var(--space-8));
}
@media (min-width: 52rem) {
  .principles-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page-flow .principle {
  padding: var(--space-5);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

/* ---------- Silnik dopasowania ---------- */

.match {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 52rem) {
  .match { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.match-card {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-inverse);
  background: var(--panel-dark);
  overflow: hidden;
}
.match-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--accent-on-dark);
}
.match-card.is-soft::before { background: var(--cyan); }

.match-card > small {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: var(--accent-on-dark);
}
.match-card.is-soft > small { color: var(--cyan); }
.match-card h3 {
  margin-block: var(--space-3) var(--space-5);
  font-size: var(--step-2);
  color: var(--ink-inverse);
}
.match-card ul {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.match-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--line-inverse);
  color: var(--ink-inverse-muted);
}
.match-card li:last-child { border-block-end: 0; }
.match-card li::before {
  content: attr(data-i);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--off-white) 40%, var(--navy));
}
.match-card > p {
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--off-white) 52%, var(--navy));
}

/* ---------- Łańcuch decyzyjny ---------- */

.stepper {
  display: grid;
  gap: var(--space-5);
  margin-block-start: clamp(2.5rem, 6vw, var(--space-8));
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .stepper { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .stepper li { padding-inline-end: var(--space-5); }
}

.stepper li {
  position: relative;
  padding-block-start: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-dark .stepper li { color: var(--ink-inverse); }

.stepper li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
}
.section-dark .stepper li::before { background: var(--line-inverse); }

.stepper li::after {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.section-dark .stepper li::after { background: var(--accent-on-dark); }

.stepper li span {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.section-dark .stepper li span { color: var(--ink-inverse-muted); }

/* ---------- Autorytet człowieka ---------- */

.authority { background: var(--surface-sunken); }
.authority blockquote {
  max-width: 30ch;
  font-size: var(--step-2);
}

/* ---------- Pilotaż ---------- */

.page-flow .contact-card { background: var(--panel-dark); }

/* ---------- Mniej ruchu ---------- */

@media (prefers-reduced-motion: reduce) {
  .arch-link::before { animation: none; transform: translateX(75%); }
  .login-transition-ready .hero-copy,
  .login-transition-ready .ring-column,
  .login-transition-ready .login-panel,
  .login-transition-ready .ring-hint { transition: none; }

  /* Zwłoka wchodzącego ma wyższą specyficzność niż skrót wyżej,
     więc zerujemy ją osobno — inaczej zostałaby tu wisieć. */
  .login-transition-ready .flow-hero.is-login .login-panel,
  .login-transition-ready .flow-hero:not(.is-login) .hero-copy { transition-delay: 0ms; }
}