/* Waykeeper · «Кит (kit): набор под состояние» · префикс mk-
   Токены берутся со страницы; в скобках — запасные значения. Свои размеры шрифта — только --s1…--s5. */

.mk{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); grid-template-areas:"main side" "foot foot";
  column-gap:64px; align-items:start;
  color:var(--ink,#0F1722);
  font:400 var(--s4,16px)/1.6 var(--f-text,'Onest',system-ui,sans-serif);
}
.mk--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);
}
.mk p{margin:0}
.mk input,.mk button{font:inherit; color:inherit}
.mk-main{grid-area:main; min-width:0}
.mk-side{grid-area:side; position:sticky; top:24px; min-width:0}
.mk-foot{grid-area:foot}

/* ---------- вкладки ---------- */
.mk-tabs{display:flex; flex-wrap:wrap; gap:4px 24px; margin-bottom:var(--sp-6,32px); border-bottom:1px solid var(--line,rgba(15,23,34,.10))}
.mk-tab{min-height:44px; padding:6px 0; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; cursor:pointer;
  font-size:var(--s4,16px); color:var(--ink-3,rgba(15,23,34,.62)); text-align:left}
.mk-tab:hover{color:var(--ink,#0F1722)}
.mk-tab[aria-selected="true"]{color:var(--ink,#0F1722); border-bottom-color:var(--ink,#0F1722)}
.mk-tab:focus-visible,.mk-tile:focus-visible,.mk-btn:focus-visible,.mk-clear:focus-visible,.mk-in:focus-visible{outline:2px solid var(--ink,#0F1722); outline-offset:3px}

/* ---------- шаг ---------- */
.mk-prog{font-size:var(--s5,13px); line-height:1.4; color:var(--ink-3,rgba(15,23,34,.62)); font-variant-numeric:tabular-nums}
.mk-q{margin:6px 0 0; font:300 var(--s2,34px)/1.15 var(--f-head,'Spectral',Georgia,serif); letter-spacing:-.01em; outline:none}
.mk-hint{margin-top:10px !important; max-width:34em; color:var(--ink-2,rgba(15,23,34,.78))}
.mk-row{margin-top:var(--sp-5,24px)}
.mk-rl{margin-bottom:8px !important; font-size:var(--s5,13px); line-height:1.4; color:var(--ink-3,rgba(15,23,34,.62))}
.mk-rl small{font-size:inherit}
.mk-rn{margin-top:10px !important; font-size:var(--s5,13px); line-height:1.45; color:var(--ink-3,rgba(15,23,34,.62))}
.mk-tiles{display:flex; flex-wrap:wrap; gap:8px}
.mk-tile{min-height:44px; padding:0 18px; border:1px solid var(--line-2,rgba(15,23,34,.20)); border-radius:999px; background:rgba(255,255,255,.6); cursor:pointer;
  font-size:var(--s4,16px); line-height:1.2; text-align:left; transition:background .2s, border-color .2s, color .2s}
.mk-tile:hover{background:#fff; border-color:rgba(15,23,34,.36)}
.mk-tile[aria-pressed="true"]{background:var(--ink,#0F1722); border-color:var(--ink,#0F1722); color:#fff}
.mk-tile[disabled]{opacity:.4; cursor:default}
.mk-tile--own{color:var(--ink-2,rgba(15,23,34,.78)); border-style:dashed}
.mk-tile--own[aria-pressed="true"]{color:#fff; border-style:solid}
.mk-in{width:100%; min-width:0; padding:8px 0 7px; border:0; border-bottom:1px solid var(--line-2,rgba(15,23,34,.20)); border-radius:0; background:transparent; outline:none; transition:border-color .2s}
.mk-in:focus{border-bottom-color:var(--ink,#0F1722)}
.mk-in::placeholder{color:rgba(15,23,34,.34); opacity:1}
.mk-own{margin-top:10px; max-width:34em}

.mk-nav{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-6,32px)}
.mk-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border-radius:999px;
  border:1px solid var(--line-2,rgba(15,23,34,.20)); background:rgba(255,255,255,.6); cursor:pointer; font-weight:500; transition:background .2s, border-color .2s}
.mk-btn:hover{background:#fff; border-color:rgba(15,23,34,.36)}
.mk-btn:active{transform:translateY(1px)}
.mk-btn--main{background:var(--ink,#0F1722); border-color:var(--ink,#0F1722); color:#fff}
.mk-btn--main:hover{background:#000; border-color:#000}
.mk-btn--main[disabled]{background:rgba(15,23,34,.12); border-color:transparent; color:rgba(15,23,34,.45); cursor:default}
.mk-btn--ghost{background:transparent}
.mk-done{margin-top:var(--sp-4,16px) !important; max-width:34em; font-size:var(--s5,13px); line-height:1.5; color:var(--ink-3,rgba(15,23,34,.62))}

/* ---------- карточка ---------- */
.mk-name{display:block; margin-bottom:var(--sp-4,16px)}
.mk-name[hidden],.mk-acts[hidden],.mk-exnote[hidden]{display:none}
.mk-name > span{display:block; font-size:var(--s5,13px); line-height:1.45; color:var(--ink-3,rgba(15,23,34,.62))}
.mk-card{
  padding:30px 30px 24px; border-radius:16px;
  background:rgba(255,255,255,.86); border:1px solid var(--line-2,rgba(15,23,34,.20));
  box-shadow:0 1px 2px rgba(15,23,34,.03), 0 22px 44px -30px rgba(15,23,34,.22);
}
.mk-ct{margin:0; font:300 var(--s3,21px)/1.25 var(--f-head,'Spectral',Georgia,serif); overflow-wrap:anywhere}
.mk-ct.is-empty{color:rgba(15,23,34,.28)}
.mk-cs{margin-top:4px !important; font-size:var(--s5,13px); color:var(--ink-3,rgba(15,23,34,.62))}
.mk-dl{margin:18px 0 0}
.mk-dl > div{padding:11px 0; border-top:1px solid var(--line,rgba(15,23,34,.10))}
.mk-dl dt{font-size:var(--s5,13px); line-height:1.45; color:var(--ink-3,rgba(15,23,34,.62))}
.mk-dl dd{margin:2px 0 0; font:400 var(--s4,16px)/1.4 var(--f-head,'Spectral',Georgia,serif); overflow-wrap:anywhere}
.mk-dl dd.is-empty{color:rgba(15,23,34,.22)}
.mk-cn{margin-top:12px !important; padding-top:12px; 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))}
.mk-acts{margin-top:var(--sp-4,16px)}
.mk-exnote{margin-top:var(--sp-3,12px) !important; font-size:var(--s5,13px); line-height:1.5; color:var(--ink-3,rgba(15,23,34,.62))}

.mk-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.mk-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))}
.mk-clear{min-height:32px; 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:3px}
.mk-clear:hover{color:var(--ink,#0F1722); text-decoration-color:var(--ink,#0F1722)}

@media (max-width:1080px){ .mk{grid-template-columns:minmax(0,1fr) minmax(0,360px); column-gap:40px} }
@media (max-width:760px){
  .mk{display:flex; flex-direction:column; align-items:stretch}
  .mk--panel{padding:24px 20px; border-radius:18px}
  .mk-side{position:relative; top:auto; margin-top:40px}
  .mk-card{padding:24px 20px 18px}
  .mk-foot{flex-direction:column; gap:6px}
  .mk-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion: reduce){
  .mk *,.mk *::before,.mk *::after{transition:none !important; animation:none !important}
}