/* Шаблон ООП-закону — the parts of this page on top of glex.css (tokens,
 * cards, tabs and steps come from there, so both themes work).
 */

.lt-meta{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:var(--s-4) 0 0; padding:0}
.lt-meta li{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; padding:4px 10px;
            border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted); background:var(--surface)}

/* ── the process map ─────────────────────────────────────────────────────── */
.lt-steps{list-style:none; margin:0 0 var(--s-5); padding:0;
          display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px}
.lt-steps li{position:relative; min-width:0}
.lt-steps li + li::before{content:""; position:absolute; z-index:0; top:29px; left:-10px; width:10px; height:2px; background:var(--line)}
.lt-steps button{
  position:relative; z-index:1; width:100%; height:100%; display:grid; justify-items:center; align-content:start; gap:6px;
  padding:12px 6px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  color:var(--muted); font:inherit; font-size:14px; font-weight:600; line-height:1.25; text-align:center; cursor:pointer;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
@media (hover:hover){ .lt-steps button:hover{border-color:var(--blue); color:var(--title)} }
.lt-steps button:focus-visible{outline:none; box-shadow:var(--focus)}
.lt-steps .n{display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
             background:var(--surface-alt); color:var(--muted); font-family:var(--mono); font-size:13px}
.lt-steps .is-done .n{background:var(--blue-tint); color:var(--blue-strong)}
.lt-steps button[aria-selected="true"]{border-color:var(--blue); color:var(--title); box-shadow:var(--shadow-card)}
.lt-steps button[aria-selected="true"] .n{background:var(--blue); color:#fff}
:root[data-theme="dark"] .lt-steps button[aria-selected="true"] .n{color:#0B1219}
@media (max-width:900px){
  .lt-steps{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px}
  .lt-steps li{flex:0 0 118px; scroll-snap-align:start}
}

.lt-stage{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
          box-shadow:var(--shadow-card); padding:var(--s-5)}
.lt-process:not(.is-interactive) .lt-stage + .lt-stage{margin-top:var(--s-4)}
.lt-stage h3{display:flex; align-items:center; gap:10px; font-size:21px}
.lt-stage__n{display:inline-grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%;
             background:var(--blue); color:#fff; font-family:var(--mono); font-size:13px; letter-spacing:0}
:root[data-theme="dark"] .lt-stage__n{color:#0B1219}
.lt-stage__event{margin:var(--s-3) 0 var(--s-5); color:var(--ink)}
.lt-cols{display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.lt-cols h4{margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-strong)}
.lt-cols ul,.lt-cols ol{margin:0; padding-left:1.15em; display:grid; gap:8px; font-size:15px; color:var(--ink)}
.lt-timers b{color:var(--title)}
.lt-stage__nav{display:flex; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-5);
               padding-top:var(--s-4); border-top:1px solid var(--line)}
.lt-stage__nav .btn[disabled]{visibility:hidden}

/* ── one norm, two representations ───────────────────────────────────────── */
.lt-tabs{margin-bottom:var(--s-5)}
.lt-pane{max-width:880px}
.lt-pane[hidden]{display:none}
.lt-quote{margin:0; padding:var(--s-4) var(--s-5); border-left:3px solid var(--blue); background:var(--surface-alt);
          border-radius:0 var(--r-card) var(--r-card) 0; color:var(--ink)}
.lt-quote p{margin:0 0 var(--s-3)}
.lt-quote footer{font-size:14px}
.lt-aside{font-size:14.5px; margin-top:var(--s-3); max-width:82ch}
.lt-article{padding:var(--s-4) var(--s-5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface)}
.lt-article__head{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:0}
.lt-article__sub{margin:8px 0 10px; color:var(--muted)}
.lt-article ol{margin:0; padding-left:1.2em; display:grid; gap:8px}
.lt-article i{font-style:normal; font-weight:600; color:var(--title)}
code{font-family:var(--mono); font-size:.9em}
.lt-code{margin:0; padding:var(--s-4) var(--s-5); border-radius:var(--r-card); overflow-x:auto;
         background:#0F1D2B; color:#E6EDF3; font-family:var(--mono); font-size:13.5px; line-height:1.6}
:root[data-theme="dark"] .lt-code{border:1px solid var(--line)}
.lt-code code{font-size:inherit}
.lt-result{display:inline-block; margin-left:var(--s-3); font-weight:600}
.lt-result.is-pass{color:var(--ok)}
.lt-result.is-fail{color:var(--err)}

/* ── rules that run ──────────────────────────────────────────────────────── */
.lt-calcs{grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); align-items:start}
.lt-calc > * + *{margin-top:0}
.lt-calc h3{margin-bottom:var(--s-2)}
.lt-field{display:grid; gap:5px; margin-top:var(--s-3); font-size:14px; color:var(--muted)}
.lt-field[hidden]{display:none}
.lt-field select,.lt-field input{
  width:100%; min-height:42px; padding:8px 10px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-field);
}
.lt-field select:focus,.lt-field input:focus{outline:none; border-color:var(--blue); box-shadow:var(--focus)}
.lt-out{margin:var(--s-4) 0 0; padding:12px 14px; border-radius:var(--r-field); background:var(--surface-alt);
        color:var(--ink); font-size:14.5px; line-height:1.5}
.lt-out:empty{display:none}
.lt-out b{color:var(--title)}
.lt-out.is-yes{background:var(--ok-tint)}
.lt-out.is-no{background:var(--err-tint)}
.lt-out.is-part{background:var(--warn-tint)}
.lt-out .refs{display:block; margin-top:6px; font-size:13px; color:var(--muted)}

/* ── model tables ────────────────────────────────────────────────────────── */
.lt-table{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface)}
.lt-table table{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
.lt-table th,.lt-table td{padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.lt-table thead th{background:var(--surface-alt); color:var(--muted); font-size:12.5px; font-weight:600;
                   letter-spacing:.08em; text-transform:uppercase}
.lt-table tbody tr:last-child > *{border-bottom:0}
.lt-table tbody th{color:var(--title); font-weight:600}
.lt-table .lt-hl > *{background:var(--blue-tint)}
.lt-subhead{margin-top:var(--s-7)}

/* ── findings and citation ───────────────────────────────────────── */
.lt-findings{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); max-width:920px}
.lt-findings li{display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s-3); align-items:start;
                padding:var(--s-4); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface)}
.lt-findings .badge{justify-self:start}
@media (max-width:560px){ .lt-findings li{grid-template-columns:1fr} }
.lt-principles{max-width:82ch}
.lt-cite{display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
.lt-cite h2{font-size:22px; margin-bottom:var(--s-3)}
.lt-citation{margin:0 0 var(--s-3); padding:var(--s-4); border:1px dashed var(--line); border-radius:var(--r-card);
             background:var(--surface-alt); font-size:15px}
.lt-sources{display:grid; gap:8px; margin:0; padding-left:1.15em}