/* «Разбор мысли» — a notebook page with a margin line; traps are a fan of cards. */
.razbor__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.razbor__head { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); }
.razbor__head h2 { font-size: clamp(40px, 4.2vw, 66px); }
/* The traps live in their own block below: the sticky heading can only travel alongside the notebook. */

.notebook {
  position: relative; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(24px, 3vw, 40px) clamp(48px, 6vw, 84px);
  border-radius: 6px var(--radius) var(--radius) 6px; background: #fbf9f3; color: #2f3b31; box-shadow: var(--shadow-md);
  background-image: linear-gradient(90deg, transparent calc(clamp(32px, 4.4vw, 62px) - 1px), rgba(180, 122, 96, .45) calc(clamp(32px, 4.4vw, 62px) - 1px) clamp(32px, 4.4vw, 62px), transparent clamp(32px, 4.4vw, 62px));
  --ink: #2f3b31; --ink-soft: #3f4c41; --muted: #5f675b; --faint: #7d8576; --line: #dcdfd2; --line-strong: #c4cdb8; --surface: #fffefa;
}
html[data-theme='night'] .notebook { background-color: #232b26; color: var(--ink); --ink: #ece8dd; --ink-soft: #ddd8cb; --muted: #b5b8ad; --faint: #8e9488; --line: #333e36; --line-strong: #46534a; --surface: #29332c; }
.notebook__dots { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 28px; padding: 0; list-style: none; font-size: var(--text-micro); color: var(--muted); }
.notebook__dots li { display: inline-flex; align-items: center; gap: 8px; }
.notebook__dots li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sage-500); }
.notebook__dots li.is-done::before { background: var(--sage-500); }
.notebook__dots li[aria-current='step'] { color: var(--ink); font-weight: 600; }
.notebook__dots li[aria-current='step']::before { background: var(--terracotta); border-color: var(--terracotta); }
.notebook__page { display: grid; gap: 16px; }
.notebook__q { display: block; font-family: var(--serif); font-size: clamp(26px, 1.6vw + 16px, 36px); line-height: 1.15; color: var(--ink); outline: none; }
.notebook__hint { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--muted); margin-top: -6px; }
.notebook__warn { min-height: 1.4em; font-size: var(--text-small); color: var(--terracotta-ink); }
.notebook__step-cap { font-size: var(--text-micro); color: var(--muted); }
.notebook__cloud { justify-self: start; max-width: 100%; padding: 12px 18px; border-radius: 22px 22px 22px 6px; background: color-mix(in srgb, var(--line) 50%, transparent); font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); }
.notebook__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.notebook__nav .btn { min-height: 52px; }
.notebook .chip { background: var(--surface); }
.notebook .chip[aria-pressed='true'] { background: var(--green); color: var(--on-green); }
.notebook__static { display: grid; gap: 12px; padding-left: 1.2em; }

/* Live trap underline: a mirror layer behind a transparent textarea. */
.thought-field { position: relative; }
.thought-field__mirror, .thought-field__area {
  font-family: var(--sans); font-size: max(17px, var(--control)); line-height: 1.5; letter-spacing: normal;
  padding: 13px 2px; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
}
.thought-field__mirror { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; border-bottom: 1px solid transparent; }
.thought-field__mirror mark { background: none; color: transparent; text-decoration: underline wavy var(--terracotta); text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
.thought-field__area { position: relative; background: transparent; min-height: 96px; }
.thought-trap { min-height: 1.4em; font-size: var(--text-small); color: var(--ink-soft); line-height: 1.55; }

/* Strength as a vessel: words, never numbers; the colour never turns red. */
.strength { display: grid; gap: 10px; margin-top: 6px; }
.strength__label { font-size: var(--text-small); font-weight: 500; color: var(--ink-soft); }
.strength__row { display: flex; align-items: center; gap: 22px; }
.strength__scale { flex: 1; display: grid; gap: 6px; }
.strength__range { width: 100%; accent-color: var(--green); height: 44px; }
.strength__ends { display: flex; justify-content: space-between; font-size: var(--text-micro); color: var(--muted); }
.vessel { display: grid; justify-items: center; gap: 4px; --fill: .5; }
.vessel__glass { position: relative; width: 64px; height: 110px; border: 1.5px solid var(--sage-500); border-radius: 12px 12px 26px 26px; overflow: hidden; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.vessel__water { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill) * 100%); background: color-mix(in srgb, var(--sage-500) calc(30% + var(--fill) * 50%), transparent); transition: height .5s var(--ease-settle), background-color .5s; }
.vessel__cap { font-size: var(--text-micro); color: var(--muted); }
.vessel__word { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); min-width: 7em; text-align: center; }
.vessels { display: flex; gap: 32px; }

.notebook__safety { display: grid; gap: 16px; padding: 22px; border-radius: var(--radius); background: var(--peach); outline: none; --ink: #2f3b31; color: #2f3b31; }
.notebook__safety-text { font-family: var(--serif); font-size: clamp(24px, 1.2vw + 16px, 30px); line-height: 1.25; }
.notebook__outcome { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1vw + 16px, 27px); line-height: 1.3; }
.notebook__shift { display: grid; gap: 6px; }
.notebook__old { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--terracotta) 50%, transparent); }
.notebook__new { font-family: var(--serif); font-size: clamp(24px, 1.2vw + 16px, 30px); color: var(--green); }
html[data-theme='night'] .notebook__new { color: var(--sage-500); }
.notebook__summary { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--line) 35%, transparent); font-size: var(--text-small); }

@media (max-width: 1023px) {
  .razbor__inner { grid-template-columns: minmax(0, 1fr); }
  .razbor__head { position: static; }
}
@media (max-width: 767px) {
  .notebook { padding-left: 34px; background-image: linear-gradient(90deg, transparent 21px, rgba(180, 122, 96, .45) 21px 22px, transparent 22px); }
  .notebook__nav .btn { flex: 1; }
}

/* ---------- Traps: twelve straight cards, four in a row ---------- */
.traps { margin-top: clamp(52px, 6vw, 88px); }
.traps__title { font-size: clamp(32px, 2.6vw + 14px, 50px); margin-bottom: 10px; }
.traps__sub { color: var(--muted); margin-bottom: 30px; }
.traps__fan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .traps__fan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trap {
  position: relative; display: grid; min-width: 0; min-height: 170px; perspective: 1400px; text-align: left; color: var(--ink);
  border-radius: var(--radius); transition: transform .5s var(--ease-settle);
}
.trap__face {
  grid-area: 1 / 1; min-width: 0; display: grid; gap: 12px; align-content: start; grid-template-rows: auto 1fr auto; padding: 22px 20px 18px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow-wrap: break-word; hyphens: manual;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .8s var(--ease-settle), opacity .3s, box-shadow .45s var(--ease-settle), border-color .3s var(--ease-out);
}
.trap:nth-child(3n + 1) .trap__front { background: var(--sage-50); }
.trap:nth-child(3n + 2) .trap__front { background: var(--peach); }
.trap__name { font-family: var(--serif); font-size: clamp(22px, .5vw + 18px, 27px); line-height: 1.12; }
.trap__hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-micro); color: var(--muted); }
.trap__hint::after { content: '↻'; display: inline-block; color: var(--terracotta-ink); transition: transform .6s var(--ease-settle); }
.trap__back { transform: rotateY(180deg); grid-template-rows: none; font-size: var(--text-small); line-height: 1.5; background: var(--surface-raised); }
.trap__row b { font-weight: 600; }
.trap__example { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--muted); }
.trap[aria-pressed='true'] .trap__front { transform: rotateY(-180deg); }
.trap[aria-pressed='true'] .trap__back { transform: none; }
.trap:hover { transform: translateY(calc(var(--lift) * 2.5)); }
.trap:hover .trap__face { border-color: var(--sage-300); box-shadow: var(--shadow-md); }
.trap:hover .trap__hint::after { transform: rotate(180deg); }
.trap:active { transform: scale(var(--press)); transition-duration: .1s; }
html.motion-reduced .trap__face { transform: none !important; }
html.motion-reduced .trap__back, html.motion-reduced .trap[aria-pressed='true'] .trap__front { opacity: 0; }
html.motion-reduced .trap[aria-pressed='true'] .trap__back { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-allowed) .trap__face { transform: none !important; }
  html:not(.motion-allowed) .trap__back, html:not(.motion-allowed) .trap[aria-pressed='true'] .trap__front { opacity: 0; }
  html:not(.motion-allowed) .trap[aria-pressed='true'] .trap__back { opacity: 1; }
}
@media (max-width: 767px) {
  .traps__fan { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 14px; scrollbar-width: none; }
  .traps__fan::-webkit-scrollbar { display: none; }
  .trap { flex: 0 0 72vw; max-width: 280px; scroll-snap-align: start; }
}

.trap-game { display: grid; gap: 14px; margin-top: 32px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg); border: 1px dashed var(--line-strong); }
@media (min-width: 1024px) {
  .trap-game { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: 'title title' 'thought answers' 'thought feedback' 'thought more'; grid-template-rows: auto auto auto 1fr; gap: 14px clamp(32px, 4vw, 64px); align-items: start; }
  .trap-game__title { grid-area: title; }
  .trap-game__thought { grid-area: thought; }
  .trap-game > .chips-row { grid-area: answers; }
  .trap-game__feedback { grid-area: feedback; }
  .trap-game__more { grid-area: more; }
  .trap-game__feedback:empty { min-height: 0; }
}
.trap-game__title { font-family: var(--serif); font-size: 28px; font-weight: 400; }
.trap-game__thought { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 1.2vw + 16px, 30px); line-height: 1.25; outline: none; }
.trap-game__feedback { min-height: 1.5em; color: var(--ink-soft); }
.trap-game__more { display: flex; flex-wrap: wrap; gap: 0 22px; }