/* ТЗ №13 — дополнения к визуальной системе №12 (styles.css). */

/* ---------- семь шагов в шапке ---------- */
.topbar{flex-wrap:wrap;row-gap:6px}
.progress{display:none}
.steps-bar{list-style:none;margin:0;padding:0 0 2px;width:100%;display:flex;gap:6px;align-items:center}
.steps-bar li{flex:1 1 0;position:relative;height:22px;display:flex;align-items:center}
.steps-bar li:before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:#e6d6d4;transition:background .3s}
.steps-bar li span{position:relative;margin:0 auto;width:20px;height:20px;border-radius:50%;background:var(--paper);border:1.5px solid #dccbc8;display:grid;place-items:center;font:600 11px/1 var(--sans);color:var(--ink-soft);transition:all .3s}
.steps-bar li.done:before{background:var(--rose)}
.steps-bar li.done span{border-color:var(--rose);color:var(--rose-deep)}
.steps-bar li.current:before{background:linear-gradient(90deg,var(--rose),#e6d6d4)}
.steps-bar li.current span{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.12)}
.steps-bar.hidden-bar{visibility:hidden}

/* ---------- обложка ---------- */
.hero-start h1{font-size:34px}
.subtitle-7{margin:12px 0 0;display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,250,246,.82);font:italic 17px/1.35 var(--serif);color:var(--rose-deep)}
@media (min-width:760px){.hero-start h1{font-size:46px}.subtitle-7{font-size:20px}}

/* ---------- знакомство ---------- */
.about{display:grid;grid-template-columns:104px 1fr;grid-template-areas:"photo head" "text text";gap:14px 16px;align-items:center;background:var(--paper);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.about-photo{grid-area:photo}.about-head{grid-area:head}.about-text{grid-area:text}
.about-head .about-name{margin:0}
.about-photo{position:relative;border-radius:18px;overflow:hidden;background:var(--blush-2);aspect-ratio:490/620}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.8) sepia(.08) contrast(.97);}
.about-photo:after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(147,102,118,.18);background:linear-gradient(180deg,rgba(234,208,210,0) 55%,rgba(234,208,210,.35) 100%)}
.about-text .eyebrow{margin-bottom:4px}
.about-name{font:600 20px/1.2 var(--serif);color:var(--dark);margin-bottom:10px}
.about-text p:not(.eyebrow):not(.about-name){font-size:15px;line-height:1.55}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.about-text p{font-size:15px;line-height:1.55}
@media (max-width:359px){.about{grid-template-columns:84px 1fr}}
@media (min-width:760px){.about{grid-template-columns:190px 1fr;grid-template-areas:"photo head" "photo text";align-items:start;padding:26px 30px;gap:10px 26px}.about-text p{font-size:16px}}

/* ---------- основное аудио ---------- */
.main-audio{margin:18px 0 4px;padding:20px;box-shadow:0 10px 28px rgba(124,109,168,.14);border:1px solid #dcd2ea}
.main-audio .audio-title{font-size:22px}

/* ---------- сказка ---------- */
.tale{margin-top:16px;border-radius:var(--r-md);background:var(--paper-2);overflow:hidden;border:1px solid var(--line)}
.tale-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tale-title{font:600 19px/1.3 var(--serif);color:var(--dark);margin:14px 16px 4px}
.tale-pending{font-size:14px;color:var(--ink-soft);margin:0 16px 10px}
.tale-read>summary{list-style:none;margin:0 16px 16px;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:999px;background:var(--rose-deep);color:#fff;font-size:16px}
.tale-read>summary::-webkit-details-marker{display:none}
.tale-read[open]>summary{background:var(--paper);color:var(--rose-deep);border:1px solid var(--rose)}
.tale-body{padding:0 18px 20px}
.tale-body p{margin:0 0 4px;font:17px/1.65 var(--serif);color:var(--dark)}
.tale-body p.gap{margin-top:12px}

/* ---------- личная подводка ---------- */
.personal{background:linear-gradient(160deg,#fbf1f1,#f5eef6)}
.personal>p{font:17px/1.6 var(--serif);color:var(--dark)}

/* ---------- маленькое действие: два варианта ---------- */
.actions{display:grid;gap:10px;margin:14px 0 4px}
.action-card{position:relative;display:block;cursor:pointer}
.action-card input{position:absolute;opacity:0;width:1px;height:1px}
.action-body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 16px 58px;border-radius:var(--r-md);background:#fff;border:1.5px solid var(--line);position:relative;transition:border-color .15s,background .15s}
.action-num{position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--blush-2);color:var(--rose-deep);display:grid;place-items:center;font:600 14px var(--serif)}
.action-body b{font:600 18px/1.3 var(--serif);color:var(--dark)}
.action-text{font-size:15px;line-height:1.5;color:var(--ink)}
.action-card .dialogue{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding:12px 14px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line)}
.action-card .dialogue-them{font-size:15px;color:var(--ink-soft)}
.action-card .dialogue-me{font:italic 17px/1.45 var(--serif);color:var(--blue)}
.action-card input:checked+.action-body{border-color:var(--rose);background:var(--blush-2)}
.action-card input:checked+.action-body .action-num{background:var(--rose);color:#fff}
.action-card input:checked+.action-body .action-num:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;background:var(--rose);border-radius:50%}
.action-card input:focus-visible+.action-body{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- заметка о паузе ---------- */
.pause-note{margin-top:14px;padding:10px 14px;border-radius:var(--r-sm);background:var(--aqua-bg);font-size:14px;color:var(--dark)}

/* ---------- продолжение ---------- */
.next-step{background:var(--paper)}
.next-links{display:grid;gap:10px;margin-top:14px}
.next-card{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-md);text-decoration:none;border:1.5px solid var(--line);background:var(--paper-2);min-height:64px;justify-content:center}
.next-card b{font:600 17px/1.3 var(--serif);color:var(--blue)}
.next-card span{font-size:14px;color:var(--ink-soft)}
.next-card:after{content:"→";position:absolute;right:16px}
.next-card{position:relative;padding-right:40px}
@media (min-width:760px){.next-links{grid-template-columns:1fr 1fr}}
.print-empty{width:100%;text-align:center;margin:4px 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--blush-2);font-size:15px;color:var(--dark)}

/* ---------- печать «Моего пути»: только заполненное ---------- */
@media print{
  .steps-bar,.next-step,.print-empty,.path-count{display:none!important}
  .path-item.empty{display:none!important}
  #path .hero{background:#fff}
  #path .hero:before,#path .hero:after{display:none}
  .path-item{border:1px solid #e3d3d1}
}

/* ---------- меню шагов: всегда в пределах экрана ---------- */
.menu nav{position:fixed;top:56px;right:12px;left:auto;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 140px);overflow:auto;z-index:30}
@media (max-width:374px){
  .chip-button,.menu>summary{min-height:38px;padding:5px 9px;font-size:12.5px}
  .brand{font-size:13px}.brand span{font-size:11.5px}
  .topbar{padding-left:10px;padding-right:10px;column-gap:6px}
  .topbar-actions{gap:4px}
}

/* ---------- продолжение пути ---------- */
.resume{border-radius:var(--r-lg);padding:16px 18px;background:var(--lav-bg);border:1.5px dashed #bfb3dc;display:flex;flex-direction:column;gap:10px}
.resume p{margin:0;font-size:15px;color:var(--dark)}
.resume-cta{align-self:flex-start}
.resume-cta:after{content:" →"}
@media print{ body.path-empty #path{display:none!important} }