/* The glue between the Mizan design system (static/mizan/) and the server-rendered pages.
   Everything visual comes from the design system; these rules are the prototype's own layer
   (prototype/v3-src/page.html), minus its Telegram-bot simulation and sample switcher, plus the
   few classes that replace what the prototype wrote as inline styles. */
html,body{height:100%}

/* Shown only when JavaScript is there to make them work (the buttons do nothing without it). */
[data-needs-js][hidden]{display:none!important}
.rail-foot form{display:contents}
.actions.after-fields{margin-top:12px}
.topic-title{margin-bottom:6px}
.topic-body{margin:0}
.login-card .btn.quiet{margin-top:0}
/* The large mark's draw-in delays, which the design system writes as inline styles (not allowed
   by the Content-Security-Policy); assets.mark() turns each into one of these classes. The same
   mark's own <style> block (two stroke rules, with the same two colours as tokens) lives here too. */
.mz-back{stroke:var(--mark-cream);stroke-width:2.4}
.mz-front{stroke:var(--bronze-2);stroke-width:2.4}
.mk-cream{fill:var(--mark-cream)}
.mk-bronze{fill:var(--bronze-2)}
.mk-pine{fill:var(--pine)}
.hd-20{animation-delay:.2s}.hd-45{animation-delay:.45s}.hd-70{animation-delay:.7s}.hd-90{animation-delay:.9s}.hd-115{animation-delay:1.15s}

/* Text the person must copy exactly (an API key and its prefix): the body's «ss01» turns Latin digits into Persian ones. */
.latin{font-feature-settings:normal}
.side-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.help-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.topics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.topics a{cursor:pointer;box-sizing:border-box;display:flex;align-items:center;width:100%;padding:8px 10px;border-radius:8px;min-height:44px;color:inherit;text-decoration:none}
.topics a[aria-current="true"]{background:var(--pine-tint);color:var(--pine);font-weight:600}
.lv-row{display:grid;grid-template-columns:34px minmax(0,1fr) 76px;gap:10px;align-items:center}
/* Gaps found by prototype-check.py in the design system itself, closed here and reported back:
   three controls under the 44px a finger needs on a phone, and the summary bar's colour-mix()
   ground, which the checker reads as black (so it reported its text as unreadable). */
.sumbar{background:var(--surface)}
@media (max-width:860px){.login .pw-eye{width:44px;height:44px;min-height:44px}.org .node{min-height:44px}.t.edit .in{min-height:44px}}
.lv-bar{display:block;height:12px;border-radius:4px}
/* Score slider: the user asked for a bar you drag instead of the row of ScorePicker chips
   (2026-10-18). Moves in tenths from 1 to 5; «حساب نشود» kept as its own chip beside it.
   Not in the design system yet — reported back to the manager. */
.slide-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.slide{position:relative;flex:1 1 260px;min-width:0}
.slide.up input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.slide.up input:focus-visible{outline:none}
/* ds-allow: D8 — the score bar's filled track; no design-system component draws it yet */
.slide.up input::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to left,var(--pine) var(--p),var(--line-2) var(--p))}
.slide.up input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--surface);border:2px solid var(--pine);box-shadow:var(--shadow-1);transition:box-shadow .15s}
.slide.up input:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px color-mix(in srgb,var(--bronze) 18%,transparent)}
.slide.up input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--bronze);outline-offset:2px}
.slide.up input::-moz-range-track{height:6px;border-radius:99px;background:var(--line-2)}
.slide.up input::-moz-range-progress{height:6px;border-radius:99px;background:var(--pine)}
.slide.up input::-moz-range-thumb{box-sizing:border-box;width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--pine);box-shadow:var(--shadow-1);transition:box-shadow .15s}
.slide.up input:hover::-moz-range-thumb{box-shadow:0 0 0 5px color-mix(in srgb,var(--bronze) 18%,transparent)}
.slide.up input:focus-visible::-moz-range-thumb{outline:2px solid var(--bronze);outline-offset:2px}
.slide.up.unset input::-webkit-slider-runnable-track{background:var(--line-2)}
.slide.up.unset input::-webkit-slider-thumb{opacity:0}
.slide.up.unset input::-moz-range-progress{background:transparent}
.slide.up.unset input::-moz-range-thumb{opacity:0}
.slide:not(.up) .ticks{display:none}
.slide .ticks{position:relative;height:18px;margin-inline:13px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.slide .ticks span{position:absolute;inset-block-start:0;transform:translateX(50%)}
.slide-v{min-width:44px;text-align:center;font-weight:700;font-size:18px;color:var(--pine)}
.slide-row.off .slide,.slide-row.off .slide-v{opacity:.4;pointer-events:none}
.slide:not(.up) .in{min-width:6em}
.slide:not(.up)+.slide-v{display:none}

/* «دسترسی‌ها» (5.11): the chosen manager's rows are real forms, one per key. A save button shows
   only where htmx is not there to save at once (app.js hides it). */
[data-js-hides][hidden]{display:none!important}
.sw-form .sw-row{border-top:0}
.sw-form:not(:first-of-type) .sw-row{border-top:1px solid var(--line)}
.sw-form .btn{margin-top:6px}
.seg-form{margin-bottom:10px}
.pick-form{margin-bottom:10px}
.msel.listed .opts{position:static;display:block;box-shadow:none;max-height:260px}
.t tbody tr[aria-current="true"]{background:var(--pine-tint)}
.org span.node{cursor:default}
.org span.node:hover{border-color:var(--line)}

/* «ربات تلگرام» (5.13): the prototype's inline spacing as classes; a text keeps its line breaks; the
   copied name stays selectable where the copy button has no JavaScript behind it. */
.dl.spaced{margin-bottom:14px}
.pre{white-space:pre-line}
.copy{user-select:text}

/* The screens of the evaluations (5.2-5.4). Widths and heights of bars come as classes (no inline style is allowed). */
.pw-0{width:0%} .pw-1{width:1%} .pw-2{width:2%} .pw-3{width:3%} .pw-4{width:4%} .pw-5{width:5%} .pw-6{width:6%} .pw-7{width:7%} .pw-8{width:8%} .pw-9{width:9%}
.pw-10{width:10%} .pw-11{width:11%} .pw-12{width:12%} .pw-13{width:13%} .pw-14{width:14%} .pw-15{width:15%} .pw-16{width:16%} .pw-17{width:17%} .pw-18{width:18%} .pw-19{width:19%}
.pw-20{width:20%} .pw-21{width:21%} .pw-22{width:22%} .pw-23{width:23%} .pw-24{width:24%} .pw-25{width:25%} .pw-26{width:26%} .pw-27{width:27%} .pw-28{width:28%} .pw-29{width:29%}
.pw-30{width:30%} .pw-31{width:31%} .pw-32{width:32%} .pw-33{width:33%} .pw-34{width:34%} .pw-35{width:35%} .pw-36{width:36%} .pw-37{width:37%} .pw-38{width:38%} .pw-39{width:39%}
.pw-40{width:40%} .pw-41{width:41%} .pw-42{width:42%} .pw-43{width:43%} .pw-44{width:44%} .pw-45{width:45%} .pw-46{width:46%} .pw-47{width:47%} .pw-48{width:48%} .pw-49{width:49%}
.pw-50{width:50%} .pw-51{width:51%} .pw-52{width:52%} .pw-53{width:53%} .pw-54{width:54%} .pw-55{width:55%} .pw-56{width:56%} .pw-57{width:57%} .pw-58{width:58%} .pw-59{width:59%}
.pw-60{width:60%} .pw-61{width:61%} .pw-62{width:62%} .pw-63{width:63%} .pw-64{width:64%} .pw-65{width:65%} .pw-66{width:66%} .pw-67{width:67%} .pw-68{width:68%} .pw-69{width:69%}
.pw-70{width:70%} .pw-71{width:71%} .pw-72{width:72%} .pw-73{width:73%} .pw-74{width:74%} .pw-75{width:75%} .pw-76{width:76%} .pw-77{width:77%} .pw-78{width:78%} .pw-79{width:79%}
.pw-80{width:80%} .pw-81{width:81%} .pw-82{width:82%} .pw-83{width:83%} .pw-84{width:84%} .pw-85{width:85%} .pw-86{width:86%} .pw-87{width:87%} .pw-88{width:88%} .pw-89{width:89%}
.pw-90{width:90%} .pw-91{width:91%} .pw-92{width:92%} .pw-93{width:93%} .pw-94{width:94%} .pw-95{width:95%} .pw-96{width:96%} .pw-97{width:97%} .pw-98{width:98%} .pw-99{width:99%}
.pw-100{width:100%}
.hh-0{height:0%} .hh-1{height:1%} .hh-2{height:2%} .hh-3{height:3%} .hh-4{height:4%} .hh-5{height:5%} .hh-6{height:6%} .hh-7{height:7%} .hh-8{height:8%} .hh-9{height:9%}
.hh-10{height:10%} .hh-11{height:11%} .hh-12{height:12%} .hh-13{height:13%} .hh-14{height:14%} .hh-15{height:15%} .hh-16{height:16%} .hh-17{height:17%} .hh-18{height:18%} .hh-19{height:19%}
.hh-20{height:20%} .hh-21{height:21%} .hh-22{height:22%} .hh-23{height:23%} .hh-24{height:24%} .hh-25{height:25%} .hh-26{height:26%} .hh-27{height:27%} .hh-28{height:28%} .hh-29{height:29%}
.hh-30{height:30%} .hh-31{height:31%} .hh-32{height:32%} .hh-33{height:33%} .hh-34{height:34%} .hh-35{height:35%} .hh-36{height:36%} .hh-37{height:37%} .hh-38{height:38%} .hh-39{height:39%}
.hh-40{height:40%} .hh-41{height:41%} .hh-42{height:42%} .hh-43{height:43%} .hh-44{height:44%} .hh-45{height:45%} .hh-46{height:46%} .hh-47{height:47%} .hh-48{height:48%} .hh-49{height:49%}
.hh-50{height:50%} .hh-51{height:51%} .hh-52{height:52%} .hh-53{height:53%} .hh-54{height:54%} .hh-55{height:55%} .hh-56{height:56%} .hh-57{height:57%} .hh-58{height:58%} .hh-59{height:59%}
.hh-60{height:60%} .hh-61{height:61%} .hh-62{height:62%} .hh-63{height:63%} .hh-64{height:64%} .hh-65{height:65%} .hh-66{height:66%} .hh-67{height:67%} .hh-68{height:68%} .hh-69{height:69%}
.hh-70{height:70%} .hh-71{height:71%} .hh-72{height:72%} .hh-73{height:73%} .hh-74{height:74%} .hh-75{height:75%} .hh-76{height:76%} .hh-77{height:77%} .hh-78{height:78%} .hh-79{height:79%}
.hh-80{height:80%} .hh-81{height:81%} .hh-82{height:82%} .hh-83{height:83%} .hh-84{height:84%} .hh-85{height:85%} .hh-86{height:86%} .hh-87{height:87%} .hh-88{height:88%} .hh-89{height:89%}
.hh-90{height:90%} .hh-91{height:91%} .hh-92{height:92%} .hh-93{height:93%} .hh-94{height:94%} .hh-95{height:95%} .hh-96{height:96%} .hh-97{height:97%} .hh-98{height:98%} .hh-99{height:99%}
.hh-100{height:100%}
.lvb-0,.lvb-1{background:var(--ok)}.lvb-1{opacity:.7}.lvb-2{background:var(--void)}.lvb-3{background:var(--warn)}.lvb-4{background:var(--bad)}
.lv-n{font-size:12.5px}
.stack.tight{gap:8px}
.side-h{font-size:15.5px}
.card.pad .side-h{margin-bottom:8px}
.dl.dl-two{grid-template-columns:auto auto;margin-top:6px}
.hist-file{font-size:13px;color:var(--muted)}
.seg a{all:unset;cursor:pointer;padding:0 13px;min-height:44px;display:inline-flex;align-items:center;gap:7px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-2)}
.seg a[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);font-weight:600}
.seg a:focus-visible,.view:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.view{min-height:44px}
.view[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.view[aria-current="true"] b{color:var(--bronze-2)}
.t tbody tr.go .main-cell a{color:inherit;text-decoration:none}
.sumbar form{display:contents}
.score-row textarea.note{min-height:40px}
.page>.seg,.page>.views{margin-bottom:12px}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}