/* f-rails.css — слой экрана поверх brand.css (DESIGN-3.md). Только var(), только transform/opacity в движении. */
/* «Разговор по рельсам»: путь из четырёх станций, дыхательный круг паузы, чипы чувств
   четырёх групп, раскрытие «ты / имя» парой карточек, договорённость с золотой кромкой. */

.rails .lead { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--us-soft); color: var(--text); flex: none; }
.rails .rl-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rails .rl-head b { font-size: 17px; display: block; }
.rails .rl-head .hint { margin-top: 2px; }
.rails .rl-row { display: flex; gap: 8px; margin-top: 12px; }
.rails .btn-block { width: 100%; margin-top: 12px; }
.rails .rl-count { text-align: right; font-size: 11.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rails .rl-quote { font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; }
.rails .rl-topic { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; margin: 10px 0 8px; overflow-wrap: anywhere; }
.rails .rl-leave { margin-top: 0; }

/* ---- путь: линия и четыре станции; точки него/неё стоят под станцией, где каждый сейчас ---- */
.rails .rl-track { padding: 14px 12px 10px; position: relative; }
.rails .rl-line { position: absolute; left: calc(12.5% + 12px); right: calc(12.5% + 12px); top: 28px; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.rails .rl-line i { position: absolute; inset: 0; background: var(--us); transform-origin: left center; transition: transform var(--t-joy) var(--ease-out); }
.rails .rl-stations { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.rails .rl-st { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.rails .rl-node { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border); transition: transform var(--t-base) var(--ease-spring), background var(--t-base), color var(--t-base); }
.rails .rl-st.past .rl-node { background: var(--us); color: #fff; box-shadow: none; }
.rails .rl-st.cur .rl-node { background: var(--text); color: var(--bg); transform: scale(1.12); box-shadow: var(--glow-us); }
/* 11 px — нижняя ступень шкалы бренда; подпись переносится, а не режется многоточием
   (у последней станции короткое слово rails_track_end — длинное делилось посреди слова) */
.rails .rl-lbl { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.15; max-width: 100%; overflow-wrap: break-word; }
.rails .rl-st.cur .rl-lbl { color: var(--text); font-weight: 700; }
.rails .rl-dots { display: flex; gap: 4px; height: 12px; }
.rails .rl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px var(--surface); }
.rails .rl-dot.rl-him { background: var(--him); }
.rails .rl-dot.rl-her { background: var(--her); }
.rails .rl-dot.done { position: relative; }
.rails .rl-dot.done::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--surface); }
.rails .rl-rules-btn { margin: 10px auto 0; display: flex; gap: 6px; align-items: center; }

/* ---- правила ---- */
.rails .rl-rule-list, .sheet .rl-rule-list { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.4; }
.rails .rl-rule-list li::marker, .sheet .rl-rule-list li::marker { color: var(--violet); font-weight: 700; }

/* ---- пауза: дыхательный круг, scale 1 ↔ 1.15 за 4 с, только transform ---- */
.rails .rl-pause { text-align: center; }
.rails .rl-pause .hint { margin-top: 4px; }
.rails .rl-breath { position: relative; width: 168px; height: 168px; margin: 14px auto 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rails .rl-breath-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--us); opacity: .85; box-shadow: var(--glow-us);
  animation: rlBreathe 4s ease-in-out infinite alternate; }
@keyframes rlBreathe { from { transform: scale(1); } to { transform: scale(1.15); } }
.rails .rl-breath-num { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.rails .rl-breath-hint { position: relative; color: rgba(255,255,255,.85); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }

/* ---- чувства: четыре группы двумя колонками, у каждой свой цвет ---- */
.rails .rl-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.rails .rl-group { min-width: 0; --g: var(--violet); }
.rails .rl-group .section-title { margin-bottom: 6px; color: var(--g); }
.rails .rl-g-heavy { --g: var(--him); }
.rails .rl-g-anxious { --g: var(--violet); }
.rails .rl-g-vulnerable { --g: var(--her); }
.rails .rl-g-warm { --g: var(--gold); }
.rails .rl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rails .rl-chips .chip { font-size: 13px; padding: 7px 11px; min-height: 34px; border-color: color-mix(in oklab, var(--g) 30%, transparent); background: color-mix(in oklab, var(--g) 9%, var(--surface-2)); color: var(--text); }
.rails .rl-chips .chip.active { background: var(--text); color: var(--bg); border-color: transparent; }
/* метки выбранных чувств в раскрытии и «сдано» */
.rails .rl-mini { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rails .rl-tag { --g: var(--violet); font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in oklab, var(--g) 14%, transparent); color: var(--text); border: 1px solid color-mix(in oklab, var(--g) 30%, transparent); }
.rails .rl-tag.rl-g-heavy { --g: var(--him); }
.rails .rl-tag.rl-g-anxious { --g: var(--violet); }
.rails .rl-tag.rl-g-vulnerable { --g: var(--her); }
.rails .rl-tag.rl-g-warm { --g: var(--gold); }

/* ---- раскрытие: «ты / имя» рядом, кромка цвета человека ---- */
.rails .rl-reveal .section-title { margin-bottom: 8px; }
.rails .rl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rails .rl-side { padding: 12px; min-width: 0; border-top: 3px solid var(--violet); }
.rails .rl-side.rl-him { border-top-color: var(--him); }
.rails .rl-side.rl-her { border-top-color: var(--her); }
.rails .rl-who { font-family: var(--font-accent, "Caveat", cursive); font-size: 18px; line-height: 1; color: var(--muted); }
.rails .rl-side.rl-him .rl-who { color: var(--him); }
.rails .rl-side.rl-her .rl-who { color: var(--her); }
.rails .rl-side .rl-quote { font-size: 14px; }

/* ---- договорённость: золотая кромка (сургуч) ---- */
.rails .rl-agree { border-color: color-mix(in oklab, var(--gold) 55%, transparent); box-shadow: var(--shadow), var(--shadow-inset), 0 0 0 3px var(--gold-soft); }
.rails .rl-agree .lead { background: var(--gold-soft); color: var(--gold); }
.rails .rl-agree-text { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; margin-top: 12px; }
.rails .rl-wait-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rails .rl-wait-line .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); color: var(--gold); flex: none; }
.rails .rl-done-title { font-size: 24px; }
.rails .rl-sent .lead.pulse-dot { color: var(--violet); }
.rails .rl-sent .lead.pulse-dot::after { border-radius: 16px; }
.rails .rl-wait .lead.pulse-dot { color: var(--her); }
.rails .rl-wait .lead.pulse-dot::after { border-radius: 16px; }

/* ---- история ---- */
.rails .rl-history { display: flex; flex-direction: column; gap: 10px; }
.rails .rl-h { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.rails .rl-h .lead { width: 40px; height: 40px; border-radius: 13px; }
.rails .rl-h.rl-out-agreed .lead { background: var(--gold-soft); color: var(--gold); }
.rails .rl-h.rl-out-declined .lead, .rails .rl-h.rl-out-left .lead { background: var(--surface-2); color: var(--muted); }
.rails .rl-h-topic { font-weight: 600; overflow-wrap: anywhere; }
.rails .rl-h-agree { margin-top: 6px; font-size: 13.5px; display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }
.rails .rl-h-agree .ic { margin-top: 2px; }
.rails .empty .orb { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .rails .rl-breath-ring { animation: none !important; }
  .rails .rl-line i { transition: none; }
}