/* Waykeeper · «Сезоны жизни» · префикс lf-
   Токены берутся со страницы (скетч v3); в скобках — запасные значения. */

.lf{
  color:var(--ink,#0F1722);
  font:400 var(--s4,16px)/1.6 var(--f-text,'Onest',system-ui,sans-serif);
}
.lf--panel{
  padding:44px; border-radius:22px;
  background:var(--glass,rgba(255,255,255,.56));
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(15,23,34,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 22px 44px -28px rgba(15,23,34,.22);
}
.lf p{margin:0}
.lf input,.lf textarea,.lf button{font:inherit; color:inherit}
.lf input::placeholder,.lf textarea::placeholder{color:rgba(15,23,34,.34); opacity:1}
.lf-step{display:block; margin:0 0 8px; color:var(--ink-2,rgba(15,23,34,.78))}

/* поля */
.lf-in{width:100%; min-width:0; padding:7px 0 6px; border:0; border-bottom:1px solid var(--line-2,rgba(15,23,34,.20)); background:transparent; outline:none; transition:border-color .2s}
.lf-in:focus{border-bottom-color:var(--ink,#0F1722)}
.lf-ta{display:block; overflow:hidden; width:100%; min-height:96px; padding:12px 14px; resize:vertical; box-sizing:border-box;
  border:1px solid var(--line-2,rgba(15,23,34,.20)); border-radius:12px; background:rgba(255,255,255,.66); outline:none; line-height:1.6; transition:border-color .2s, box-shadow .2s}
.lf-ta:focus{border-color:var(--ink,#0F1722); box-shadow:0 0 0 1px var(--ink,#0F1722)}

/* ---------- строки ---------- */
.lf-rows{list-style:none; margin:0; padding:0; max-width:640px}
.lf-row{display:grid; grid-template-columns:minmax(0,1fr) 92px 32px; column-gap:16px; align-items:center; min-height:52px}
.lf-x{width:32px; height:44px; padding:0; border:0; background:none; cursor:pointer; font-size:var(--s3,21px); line-height:1; color:rgba(15,23,34,.38); transition:color .2s}
.lf-x:hover{color:var(--ink,#0F1722)}
.lf-x:disabled{visibility:hidden}
.lf-add{margin-top:8px; min-height:44px; padding:0; border:0; background:none; cursor:pointer; color:var(--ink-2,rgba(15,23,34,.78));
  text-decoration:underline; text-decoration-color:var(--line-2,rgba(15,23,34,.20)); text-underline-offset:4px}
.lf-add:hover{color:var(--ink,#0F1722); text-decoration-color:var(--ink,#0F1722)}

/* ---------- линия жизни ---------- */
.lf-fig{margin-top:48px}
.lf-line{display:flex; align-items:stretch; min-height:96px}
.lf-ghost{flex:1; align-self:center; height:1px; background:var(--line,rgba(15,23,34,.10))}   /* пустая линия жизни — ровная тонкая, не пунктир (README, правило 8) */
.lf-seg{position:relative; flex:1 1 0; min-width:0; display:grid; grid-template-rows:minmax(44px,auto) 18px auto; align-content:end;
  padding:0; border:0; background:none; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent}
.lf-sn{align-self:end; padding:0 10px 8px 8px; font-size:var(--s5,13px); line-height:1.35; color:var(--ink-2,rgba(15,23,34,.78));
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; transition:color .2s}
.lf-bar{position:relative; display:block}
.lf-bar::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(15,23,34,.42); transition:background .2s, height .2s}
.lf-bar::after{content:""; position:absolute; left:0; top:3px; width:1px; height:12px; background:rgba(15,23,34,.42)}
.lf-bar i{position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; box-sizing:border-box;
  background:var(--page,#FCFDFF); border:1px solid rgba(15,23,34,.30); opacity:0; transition:opacity .2s, background .2s, border-color .2s}
.lf-sy{padding:8px 10px 0 8px; font-size:var(--s5,13px); line-height:1.35; color:var(--ink-3,rgba(15,23,34,.62)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lf-seg:not(.lf-tail):hover .lf-sn{color:var(--ink,#0F1722)}
.lf-seg:not(.lf-tail):hover .lf-bar::before{background:var(--ink,#0F1722)}
.lf-seg:not(.lf-tail):hover .lf-bar i{opacity:1}
.lf-seg[aria-pressed="true"] .lf-sn{color:var(--ink,#0F1722)}
.lf-seg[aria-pressed="true"] .lf-bar::before{height:2px; margin-top:-.5px; background:var(--ink,#0F1722)}
.lf-seg[aria-pressed="true"] .lf-bar i{opacity:1; background:var(--accent,#EA5F22); border-color:var(--accent,#EA5F22); box-shadow:0 0 0 5px rgba(234,95,34,.12)}
.lf-seg:focus-visible{outline:2px solid var(--ink,#0F1722); outline-offset:2px; border-radius:6px}
.lf-tail{flex:0 0 56px; cursor:default}
.lf-tail .lf-bar::before,.lf-tail:hover .lf-bar::before{background:repeating-linear-gradient(to right, rgba(15,23,34,.30) 0 2px, transparent 2px 6px)}
.lf-hint{margin-top:16px !important; font-size:var(--s5,13px); line-height:1.45; color:var(--ink-3,rgba(15,23,34,.62))}

/* ---------- живые сезоны ---------- */
.lf-alive{margin-top:48px}
.lf-alive:empty{display:none}
.lf-card + .lf-card{margin-top:28px}
.lf-card{margin-top:16px}
.lf-ch{display:flex; align-items:baseline; gap:10px; margin:0; font:400 var(--s3,21px)/1.3 var(--f-head,'Spectral',Georgia,serif)}
.lf-ch i{flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent,#EA5F22); transform:translateY(-3px)}
.lf-ch small{font:400 var(--s5,13px)/1.45 var(--f-text,'Onest',sans-serif); color:var(--ink-3,rgba(15,23,34,.62))}
.lf-q3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:6px}
.lf-q3 label span{display:block; padding-top:8px; font-size:var(--s5,13px); line-height:1.45; color:var(--ink-3,rgba(15,23,34,.62))}
.lf-common{display:block; margin-top:48px}

.lf-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.lf-foot{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:40px; padding-top:14px; border-top:1px solid var(--line,rgba(15,23,34,.10));
  font-size:var(--s5,13px); line-height:1.45; color:var(--ink-3,rgba(15,23,34,.62))}
.lf-clear{min-height:32px; padding:0; border:0; background:none; cursor:pointer; font:inherit; color:var(--ink-2,rgba(15,23,34,.78));
  text-decoration:underline; text-decoration-color:var(--line-2,rgba(15,23,34,.20)); text-underline-offset:3px}
.lf-clear:hover{color:var(--ink,#0F1722); text-decoration-color:var(--ink,#0F1722)}
.lf-x:focus-visible,.lf-add:focus-visible,.lf-clear:focus-visible{outline:2px solid var(--ink,#0F1722); outline-offset:2px; border-radius:6px}

/* ---------- телефон: линия вертикальная, у левого края ---------- */
@media (max-width:760px){
  .lf--panel{padding:24px 20px; border-radius:18px}
  .lf-rows{max-width:none}
  .lf-row{grid-template-columns:minmax(0,1fr) 76px 32px; column-gap:12px}
  .lf-line{flex-direction:column; min-height:0}
  .lf-ghost{flex:none; align-self:stretch; width:1px; height:120px; margin-left:8px;
    background:var(--line,rgba(15,23,34,.10))}
  .lf-seg{display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; min-height:56px; align-content:center; padding:6px 0}
  .lf-bar{grid-column:1; grid-row:1 / 3; align-self:stretch; margin:-6px 0}
  .lf-bar::before{left:50%; right:auto; top:0; bottom:0; width:1px; height:auto}
  .lf-bar::after{left:3px; top:0; width:12px; height:1px}
  .lf-seg[aria-pressed="true"] .lf-bar::before{width:2px; height:auto; margin:0 0 0 -.5px}
  .lf-sn{grid-column:2; grid-row:1; padding:0; font-size:var(--s4,16px); -webkit-line-clamp:2}
  .lf-sy{grid-column:2; grid-row:2; padding:0}
  .lf-tail{flex:0 0 40px; min-height:40px}
  .lf-tail .lf-bar::before,.lf-tail:hover .lf-bar::before{background:repeating-linear-gradient(to bottom, rgba(15,23,34,.30) 0 2px, transparent 2px 6px)}
  .lf-q3{grid-template-columns:1fr; gap:4px}
  .lf-foot{flex-direction:column; gap:6px}
}

@media (prefers-reduced-motion: reduce){
  .lf *,.lf *::before,.lf *::after{transition:none !important; animation:none !important}
}