/* YATFA — product-replica kit (02.10 etalon, ported from yatfa-site-2026-10-02/site/assets/ui.css).
   Tokens are taken from the live product: [data-theme="winter"] of application.css.
   Everything inside .ui is the product in the light theme (owner decision: the product in frame is light only). */
.ui{--u-bg:#eaebec;--u-side:#f4f5f6;--u-sf:#fff;--u-raised:#f1f5f9;--u-hover:#edf2f7;--u-tx:#0f172a;--u-tx2:#475569;--u-mut:#596779;--u-mut2:#8a94a3;
  --u-bd:#e2e8f0;--u-bd2:#cbd5e1;--u-cta:#16a34a;--u-acc:#095cdf;--u-accs:#0b4fd0;--u-acct:#e8f0fe;
  --u-ok:#0b7648;--u-oks:#e4faf0;--u-okb:#149644;--u-warn:#8e5d0f;--u-warns:#fdf5e6;--u-warnb:#b45309;--u-err:#d11a20;--u-errs:#fdebec;--u-info:#067282;--u-infos:#e3f7fa;
  --u-sh:inset 0 0 0 1px #ffffffd9,0 1px 2px #17171f0f,0 8px 24px -16px #17171f29;
  --u-sh2:inset 0 0 0 1px #ffffffe6,0 2px 6px #17171f12,0 16px 36px -20px #17171f38;
  font-family:"Plus Jakarta Sans",-apple-system,sans-serif;color:var(--u-tx);font-size:13px;line-height:1.45;text-align:left;-webkit-font-smoothing:antialiased}
.ui *{box-sizing:border-box}

/* window */
.uiw{position:relative;border-radius:14px;overflow:hidden;background:var(--u-bg);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 120px -20px rgba(0,0,0,.7),0 30px 60px -30px rgba(40,60,160,.35)}
.uiw .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f7f8f9;border-bottom:1px solid var(--u-bd)}
.uiw .bar>i{width:11px;height:11px;border-radius:50%;background:#ff5f57;flex:none}.uiw .bar>i:nth-child(2){background:#febc2e}.uiw .bar>i:nth-child(3){background:#28c840}
.uiw .bar .url{margin:0 auto;transform:translateX(-24px);font-size:11.5px;color:var(--u-mut);background:#eceef1;padding:4px 14px;border-radius:7px;min-width:240px;text-align:center}

/* app frame */
.ui-app{display:grid;grid-template-columns:188px 1fr;min-height:100%}
.ui-app.ns{grid-template-columns:1fr}
.ui-side{background:var(--u-side);border-right:1px solid var(--u-bd);padding:0 10px 14px}
.ui-side .lg{height:50px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border-bottom:1px solid var(--u-bd);margin:0 -10px 8px;padding:0 14px}
.ui-side .lg img{width:22px;height:22px;border-radius:6px}
.ui-side .sl{display:flex;align-items:center;gap:6px;font:600 9.5px/1 "Plus Jakarta Sans";letter-spacing:.14em;text-transform:uppercase;color:var(--u-mut);margin:14px 6px 6px}
.ui-side a{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#1e293b;padding:7px 8px;border-radius:7px;text-decoration:none;transition:background .2s,color .2s}
.ui-side a svg{width:14px;height:14px;color:#475569;flex:none}
.ui-side a.on{background:#e4f4ea;color:#15703f;font-weight:600}.ui-side a.on svg{color:#15703f}
.ui-main{padding:20px 24px 24px;min-width:0;position:relative}
.ui-top{display:flex;justify-content:flex-end;align-items:center;gap:14px;height:44px;margin:-20px -24px 16px;padding:0 20px;border-bottom:1px solid var(--u-bd);background:rgba(255,255,255,.55);font-size:12px;color:var(--u-tx2)}
.ui-top .av{width:22px;height:22px;border-radius:50%;background:#dbe4ff;color:#2a45b8;display:grid;place-items:center;font-size:10px;font-weight:700}

/* page headings */
.ui-crumb{font-size:11.5px;color:var(--u-mut)}.ui-crumb b{font-weight:400;margin:0 6px;opacity:.6}
.ui-h{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:3px 0 2px;color:var(--u-tx)}
.ui-d{font-size:12.5px;color:var(--u-tx2)}
.ui-tabs{display:flex;gap:18px;border-bottom:1px solid var(--u-bd);margin:14px 0 14px}
.ui-tabs span{display:flex;align-items:center;gap:6px;padding:9px 1px;font-size:12.5px;color:var(--u-mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.ui-tabs span svg{width:13px;height:13px}
.ui-tabs span.on{color:var(--u-acc);border-color:var(--u-acc);font-weight:600}

/* cards */
.ui-card{background:var(--u-sf);border:1px solid var(--u-bd);border-radius:10px;box-shadow:var(--u-sh)}
.ui-card+.ui-card{margin-top:12px}
.ui-ch{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--u-bd);font-weight:650;font-size:13px}
.ui-ch svg{width:14px;height:14px;color:var(--u-tx2)}
.ui-ch .r{margin-left:auto;font-weight:500;font-size:11.5px;color:var(--u-mut)}
.ui-cb{padding:12px 14px}
.ui-note{font-size:11.5px;color:var(--u-tx2);line-height:1.5}

/* labels — no badges (owner decision 24.09: no chip/badge/pill, captions are coloured text) */
.ui-b{display:inline-flex;align-items:center;gap:6px;font:650 11.5px/1.2 "Plus Jakarta Sans";letter-spacing:0;text-transform:none;color:#64748b;white-space:nowrap}
.ui-b.lo{color:var(--u-ok)}
.ui-b.hi{color:#1d4fc4}
.ui-b.hu{color:var(--u-warn)}
.ui-b.er{color:var(--u-err)}
.ui-b.in{color:var(--u-info)}
.ui-b.lc{text-transform:none;letter-spacing:0;font-weight:600;font-size:11px}
.ui-b.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ui-id{font:600 10.5px/1 ui-monospace,"SF Mono",monospace;color:var(--u-mut);white-space:nowrap}
.ui-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;flex:none;display:inline-block}
.ui-dot.g{background:#16a34a}.ui-dot.b{background:#2563eb}.ui-dot.a{background:#d97706}.ui-dot.r{background:#dc2626}.ui-dot.v{background:#7c3aed}

/* switch */
.ui-tg{position:relative;width:30px;height:17px;border-radius:999px;background:#cbd5e1;flex:none;transition:background .35s var(--ease,ease);display:inline-block}
.ui-tg::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .35s var(--ease,ease)}
.ui-tg.on{background:var(--u-cta)}.ui-tg.on::after{transform:translateX(13px)}
.ui-tg.dim{opacity:.45}

/* buttons */
.ui-btn{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 "Plus Jakarta Sans";border-radius:7px;padding:8px 12px;border:1px solid transparent;cursor:default;white-space:nowrap}
.ui-btn svg{width:13px;height:13px}
.ui-btn.pri{background:var(--u-accs);color:#fff}
.ui-btn.cta{background:var(--u-cta);color:#fff}
.ui-btn.dan{background:#dc2626;color:#fff}
.ui-btn.sec{background:#fff;border-color:var(--u-bd2);color:var(--u-tx)}
.ui-btn.gh{background:none;color:var(--u-tx2)}
.ui-in{border:1px solid var(--u-bd2);border-radius:6px;padding:6px 8px;background:#f8fafc;font-size:12px;color:var(--u-tx);min-width:44px}

/* table rows */
.ui-tr{display:grid;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid #f1f3f6;font-size:12.5px}
.ui-tr:first-child{border-top:0}
.ui-th{font:700 9.5px/1 "Plus Jakarta Sans";letter-spacing:.1em;text-transform:uppercase;color:var(--u-mut);padding-top:10px;padding-bottom:8px;border-top:0}

/* event feed */
.ui-tl{position:relative;padding-left:18px}
.ui-tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1.5px;background:#e2e8f0}
.ui-ev{position:relative;padding:6px 0 10px;font-size:12.5px;line-height:1.5}
.ui-ev::before{content:"";position:absolute;left:-18px;top:10px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #94a3b8}
.ui-ev.g::before{border-color:#16a34a}.ui-ev.b::before{border-color:#2563eb}.ui-ev.a::before{border-color:#d97706}.ui-ev.r::before{border-color:#dc2626}
.ui-ev .m{font-size:11px;color:var(--u-mut)}

/* article text */
.ui-art h4{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.ui-art p{font-size:12.5px;line-height:1.6;color:#1e293b}
.ui-q{border-left:2px solid var(--u-acc);background:#f5f8ff;padding:8px 10px;border-radius:0 7px 7px 0;font-size:12px;line-height:1.55;color:#334155}

/* utilities */
.u-mut{color:var(--u-mut)}.u-tx2{color:var(--u-tx2)}.u-sm{font-size:11.5px}.u-xs{font-size:10.5px}.u-b{font-weight:650}
.u-row{display:flex;align-items:center;gap:8px}.u-sp{flex:1}
.u-g{color:var(--u-ok)}.u-a{color:var(--u-warn)}.u-r{color:var(--u-err)}.u-bl{color:var(--u-acc)}
.u-mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.u-hl{animation:uHl 1.6s ease}
@keyframes uHl{0%{background:#fff7d6}100%{background:transparent}}
.u-in{animation:uIn .5s var(--ease,ease) both}
@keyframes uIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.u-pop{animation:uPop .55s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes uPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.u-spin{display:inline-block;width:10px;height:10px;border:2px solid #c7d2fe;border-top-color:#2563eb;border-radius:50%;animation:uSp .8s linear infinite}
@keyframes uSp{to{transform:rotate(360deg)}}
.u-caret::after{content:"";display:inline-block;width:1.5px;height:1em;background:#2563eb;margin-left:1px;vertical-align:-2px;animation:uBl .8s steps(1) infinite}
@keyframes uBl{50%{opacity:0}}
.u-scan{position:relative;overflow:hidden}
.u-scan::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(37,99,235,.10) 50%,transparent 70%);animation:uScan 1.4s linear infinite}
@keyframes uScan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.u-in,.u-pop,.u-hl{animation:none}.u-scan::after,.u-spin{animation:none}}

/* pointer cursor for scenes */
.ui-cur{position:absolute;left:0;top:0;width:18px;height:18px;z-index:20;pointer-events:none;transition:transform .9s cubic-bezier(.45,.05,.25,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.ui-cur.click::after{content:"";position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;border:2px solid #2563eb;animation:uRip .6s ease-out forwards}
@keyframes uRip{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}

/* Production addition. The site raises --ink3 to #80858e (y.css) because the etalon's #6b7078 measures under AA 4.5:1
   for the small text it colours on the DARK surface (roadmap YATFA-10211, conflict 1). The replica windows are LIGHT
   (white / #e7e7e7 grounds), where #80858e would measure only ~3.7:1 while the etalon's #6b7078 passes at ~5:1 — so
   inside .ui (and the homepage's .rxw render canvases, which are light windows too) the etalon value stays. Same token, two surfaces; no other colour is touched. */
.ui,.rxw{--ink3:#6b7078}