/* «Журнал разговоров» — раскладка страницы. Цвета, шрифты, кнопки и поля — base.css (токены и компоненты RESI).
   Без inline-стилей: CSP страницы — style-src 'self'. */
body{margin:0}
.wrap{max-width:var(--w-read);margin:0 auto;padding:0 var(--sp-4) var(--sp-12)}
.topbar{display:flex;align-items:center;min-height:64px;margin-bottom:var(--sp-2)}
h1{font-size:32px;line-height:1.15;letter-spacing:-.01em;color:var(--navy);font-weight:600;margin:var(--sp-4) 0 var(--sp-4)}
h2{font-size:21px;line-height:1.3;color:var(--navy);font-weight:600;margin:0 0 var(--sp-3)}
p{margin:0 0 var(--sp-3)}
.lead{font-size:19px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:14px}
.expect-intro{margin:0 0 var(--sp-3)}
.big{font-size:19px;font-weight:600}
.steps{padding-left:22px;margin:0 0 var(--sp-6)}
.steps li{margin-bottom:var(--sp-2)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);align-items:center;margin:var(--sp-4) 0}
.row.tight{margin:var(--sp-2) 0;gap:var(--sp-2) var(--sp-4)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* навигация между экранами */
/* одна строка; на узком экране листается вбок внутри себя (страница вбок не листается) */
.jnav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:var(--sp-4);padding:0;border-bottom:1px solid var(--line);font-size:15px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jnav::-webkit-scrollbar{display:none}
.jnav .btn.link{font-weight:500;text-decoration:none;white-space:nowrap;flex:none}
.jnav .btn.link[aria-current=page]{text-decoration:underline;font-weight:600}
/* правка 22.10: текущий пункт длиннее строки навигации («Копия, напоминание…» на телефоне) переносится, а не обрезается */
.jnav .btn.link[aria-current=page]{white-space:normal;max-width:100%;text-align:left}
/* правка 22.10: на узком экране, пока справа есть ещё пункты, — мягкое затемнение у правого края (список листается) */
@media (max-width:600px){.jnav.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}}
/* v2.15, п. 3: пункт, расширенный в navPeek, — текст слева */
.jnav .btn.link{justify-content:flex-start}

/* разделы первого экрана: линия сверху, без подложек (как на главной) */
.jsection{border-top:1px solid var(--navy);padding:var(--sp-6) 0 var(--sp-4);margin-top:var(--sp-8)}
.jsection h2+p{margin-top:0}
h1+.jsection{margin-top:var(--sp-4)}

/* поля */
.field{margin:0 0 var(--sp-6)}
.field>label{display:block;font-weight:600;margin-bottom:var(--sp-2)}
.field>p:first-of-type{margin-top:var(--sp-2)}
textarea{min-height:72px;resize:vertical}
textarea:disabled{background:var(--bg);border-color:var(--line)}
input.time{width:auto;min-width:140px;min-height:var(--ctl-h);padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-ctl);background:var(--surface);font:16px/1.4 var(--font-ui);color:var(--ink)}
input[type=date]{width:auto;min-width:180px}
select{width:auto;min-width:240px;max-width:100%}

/* ссылка-кнопка «Добавить в Google Календарь», пока не выбраны дни и время */
a.btn[aria-disabled=true]{border-color:var(--line-strong);color:var(--muted);cursor:not-allowed;pointer-events:none}

/* варианты-«чипы»: радио и флажки */
.choices{border:0;margin:0 0 var(--sp-6);padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.choices legend{font-weight:600;margin-bottom:var(--sp-2);padding:0;width:100%}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-ctl);background:var(--surface);line-height:1.3}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.check{display:flex;gap:var(--sp-3);align-items:center;min-height:44px;margin:var(--sp-6) 0;cursor:pointer}
.check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--navy)}

/* подсказка над «Что получилось» */
.hint-box{border-left:3px solid var(--amber);padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);margin:0 0 var(--sp-4)}
.hint-box p{margin:0 0 var(--sp-1)}
.hint-label{font-size:14px;font-weight:600;color:var(--amber)}
.hint-cap{font-size:14px;color:var(--muted)}
.hint-q{font-size:17px}

.note{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-6);font-size:15px}
.note p{margin-bottom:var(--sp-2)}
.blocked{border:1px solid var(--err);border-radius:var(--radius-ctl);padding:var(--sp-3) var(--sp-4);margin:var(--sp-2) 0 var(--sp-4);background:var(--surface)}
.blocked p{margin:0 0 var(--sp-1)}
.blocked p:first-child{color:var(--err);font-weight:600}

/* мои записи */
.jlist{list-style:none;margin:0 0 var(--sp-6);padding:0;border-top:1px solid var(--line)}
.jlist li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-2) var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.jlist .item{font-weight:500}
.confirm{border:1px solid var(--line-strong);border-radius:var(--radius-ctl);background:var(--surface);padding:var(--sp-3) var(--sp-4);width:100%}
.confirm p{margin:0}
.confirm .row{margin:var(--sp-3) 0 0}
.record dt{font-weight:600;margin-top:var(--sp-4)}
.record dd{margin:var(--sp-1) 0 0}
.record ul,.stats{margin:0;padding-left:20px}
.stats{font-size:15px;color:var(--muted);margin-top:var(--sp-2)}

/* правило безопасности и «После запинок» */
.safety,.recovery{border-top:1px solid var(--navy);padding-top:var(--sp-4);margin-top:var(--sp-6)}
.extra{margin-top:var(--sp-6)}

/* подвал — как на главной (landing.css) */
footer{border-top:1px solid var(--line);padding:var(--sp-8) 0 var(--sp-12);font-size:14px;color:var(--muted);margin-top:var(--sp-8)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) 18px;margin:10px 0}
footer a{color:var(--muted)}
footer nav a{display:inline-flex;align-items:center;min-height:44px}

/* ── телефон (mobile-first, 22.10): цели нажатия не меньше 44×44 и не ближе 8 px, поля — шрифт 16 px (иначе iPhone приближает) ── */
.topbar{min-height:48px;margin-bottom:0;flex-wrap:wrap;gap:0 var(--sp-6);border-bottom:1px solid var(--line)}
.topbar .brand{min-height:44px;flex:none}
.topbar .jnav{flex:1 1 auto;min-width:0;border-bottom:0}
@media (max-width:600px){.topbar{flex-wrap:nowrap;gap:var(--sp-4)}}
/* уже 360 px навигация — своей строкой под знаком: текущий пункт помещается целиком */
@media (max-width:359px){.topbar{flex-wrap:wrap;gap:var(--sp-2) 0}.topbar .jnav{flex-basis:100%}}
@media (min-width:601px){.jnav{flex-wrap:wrap;overflow:visible;gap:0 var(--sp-6)}}
.btn.link{display:inline-flex;align-items:center;min-height:44px}
input,select,textarea{font-size:16px}
p>a:only-child{display:inline-flex;align-items:center;min-height:44px}
.confirm .row .btn{flex:1 1 120px}

/* v2.15, п. 1: «Записать ожидание» и пояснение второй строкой мелким шрифтом внутри кнопки */
.btn.btn-two{flex-direction:column;align-items:flex-start;gap:2px;max-width:100%;padding:8px 20px;white-space:normal;text-align:left;line-height:1.25}
.btn-two .btn-label{font-weight:600}
.btn-two .btn-sub{font-size:13px;font-weight:400;line-height:1.3}
/* v2.15, п. 2: пояснение «запинки» под вопросом и под «После запинок» */
.choices .choices-note{width:100%;margin:-4px 0 var(--sp-2)}
.stumble-hint{margin:0 0 var(--sp-2)}

/* быстрая запись: целиком на экране 375×667 */
.quick h1{font-size:24px;margin:var(--sp-3) 0 var(--sp-2)}
.quick .choices{margin-bottom:var(--sp-3)}
.quick .choices legend{margin-bottom:6px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.grid3 .chip span{width:100%;padding:4px 2px;font-size:14px;line-height:1.2;text-align:center}
/* вопрос и варианты в одну строку, если помещаются */
.choices.inline{align-items:center}
.choices.inline legend{float:left;width:auto;margin:0}
.quick .hint-box{padding:2px 0 2px var(--sp-3);margin:0 0 var(--sp-3);font-size:13px;line-height:1.35}
.quick .hint-box p{margin:0}
.quick .hint-box .hint-label,.quick .hint-box .hint-cap{display:inline;font-size:13px;line-height:1.35}
.quick .hint-box .hint-label{margin-right:6px}
.quick .hint-q{font-size:16px;line-height:1.35;margin-top:2px}
.quick .field{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3)}
.quick .field>label{width:100%;margin:0}
.quick .field>input{flex:1 1 160px;min-width:0;width:auto;min-height:44px;padding:9px 12px}
/* правка 22.10: подсказка с примером видна целиком — поле во всю ширину, две строки; «Разговор состоялся» под полем */
.quick .field>textarea.one-line{flex:1 1 100%;min-height:0;resize:none;padding:7px 12px;line-height:1.3}
.quick .field>.btn.link{flex:none}
/* кнопки прилипают к низу экрана, над клавиатурой (--kb — из app.js по visualViewport) */
.quick .actions{position:sticky;bottom:var(--kb,0px);z-index:2;flex-wrap:nowrap;gap:var(--sp-2);margin:var(--sp-2) 0 0;padding:var(--sp-2) 0;background:var(--bg)}
.quick .actions .btn{flex:1 1 0;padding:0 12px;white-space:normal;line-height:1.2}
.quick .note{margin-top:var(--sp-4)}

@media (max-width:480px){
  h1{font-size:28px}
  .chip span{padding:8px 12px}
}
@media (max-width:389px){
  .grid3 .chip span{font-size:13.5px}
}
@media (max-width:359px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3 .chip span{font-size:14px}
  .choices.inline legend{float:none;width:100%;margin-bottom:6px}
}

/* «Перед разговором» (/journal/before, v2.3): статическая карточка; английские фразы — по одной в строке */
.before .card-block{border-top:1px solid var(--navy);padding:var(--sp-4) 0 var(--sp-2);margin-top:var(--sp-4)}
.before h3{font-size:17px;line-height:1.3;color:var(--navy);font-weight:600;margin:var(--sp-3) 0 var(--sp-1)}
.before .steps{margin-bottom:var(--sp-3)}
.phrases{list-style:none;margin:0 0 var(--sp-2);padding:0}
.phrases li{padding:2px 0 2px var(--sp-3);border-left:2px solid var(--seg);margin-bottom:var(--sp-1)}
.dots{padding-left:22px;margin:0 0 var(--sp-3)}
.dots li{margin-bottom:var(--sp-2)}
.static-note{margin-top:var(--sp-6)}

/* «Ответы за период» (v2.4): один цвет RESI, варианты различаются узором и подписью; только счётчики */
.charts{border-top:1px solid var(--navy);padding-top:var(--sp-4);margin-top:var(--sp-8)}
.charts .period{margin-bottom:var(--sp-3)}
.chart-count{font-weight:600}
.chart{margin:var(--sp-6) 0 0}
.chart h3{font-size:17px;line-height:1.3;color:var(--navy);font-weight:600;margin:0 0 var(--sp-2)}
.chart-svg{display:block;max-width:100%;height:auto;overflow:visible}
.chart-svg .ax{font:13px var(--font-ui);fill:var(--muted)}
.chart-svg .num{font:600 13px var(--font-ui);fill:var(--ink)}
.chart-svg .axis{stroke:var(--line-strong);stroke-width:1}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);list-style:none;margin:0 0 var(--sp-2);padding:0;font-size:14px;color:var(--muted)}
.chart-legend li{display:inline-flex;align-items:center;gap:6px}
.chart-legend svg{flex:none}
.chart-table{margin-top:var(--sp-2)}
.chart-table summary{display:flex;align-items:center;min-height:44px;font-weight:500;color:var(--navy);cursor:pointer}
.table-wrap{max-width:100%;overflow-x:auto}
.chart-table table{border-collapse:collapse;font-size:14px;margin:var(--sp-1) 0 var(--sp-2)}
.chart-table th,.chart-table td{border-bottom:1px solid var(--line);padding:6px 10px 6px 0;text-align:left;font-weight:400}
.chart-table thead th{font-weight:600;color:var(--muted)}
.chart-table td{text-align:right}

/* «Для ИИ-помощника» (v2.5): предпросмотр — поле только для чтения, текст можно выделить вручную */
.ai .choices{margin-bottom:var(--sp-3)}
.ai-warning{margin-top:0}
.ai-preview{min-height:260px;font:16px/1.45 var(--font-ui);white-space:pre-wrap;background:var(--surface)}

/* шапка журнала (этап 1): название журнала вместо знака RESI */
.brand.jbrand{font:600 17px/1.2 var(--font-ui);letter-spacing:0;white-space:nowrap;text-decoration:none}
@media (max-width:400px){.brand.jbrand{font-size:15px}}

/* v2.6–v2.8: уведомление «из отчёта», ожидание, пометки, мостик, строка без отчёта, политика, 404 */
.notice{margin:var(--sp-4) 0 0}
.pending-offer{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line-strong);border-radius:var(--radius-ctl);background:var(--surface)}
.pending-offer p{margin:0 0 var(--sp-1)}
.tag{display:inline-block;margin-left:var(--sp-2);padding:1px 8px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:13px;color:var(--muted);font-weight:500}
p.tag{margin:0 0 var(--sp-3)}
.tag.expired{border-style:dashed}
.how{margin:var(--sp-6) 0}
.bridge,.nudge,.expect{border-top:1px solid var(--line);padding-top:var(--sp-4);margin-top:var(--sp-8)}
.expect{border-top-color:var(--navy)}
.about-link{margin-top:var(--sp-8)}
.policy h2{font-size:18px;margin:var(--sp-6) 0 var(--sp-2)}
.policy-block p{margin-bottom:var(--sp-2)}
.notfound{padding:var(--sp-8) 0}