/* YieldSpec's screens, live in the page. Generated by build/home.py from screens/screens.css; edit that file. */
.ys { --ink:#191817; --quiet:#6B6660; --line:#E4E2DE; --line2:#EFEDEA; --panel:#F6F5F3; --red:#C8102E; --green:#3E9E6B; --amber:#F2B233; --blue:#2F6FEB; }
.ys, .ys * { box-sizing: border-box; }
.ys .tnum { font-variant-numeric: tabular-nums; }
.ys .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ys .ic.sm { width: 15px; height: 15px; }
.ys .ic.xs { width: 13px; height: 13px; vertical-align: -2px; opacity: .7; }
.ys .win { width: 1280px; height: 800px; background: var(--panel); border-radius: 14px; border: 1px solid #DDDAD5; overflow: hidden; display: grid; grid-template-columns: 236px 1fr; font-size: 14px; line-height: 1.4; }
.ys .nav { padding: 16px 12px; }
.ys .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.ys .brand .bn { flex: 1; }
.ys .brand b { display: block; font-size: 16px; font-weight: 600; }
.ys .brand small { display: block; color: var(--quiet); font-size: 13px; }
.ys .y { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: #fff; font-weight: 600; font-size: 19px; flex: none; }
.ys .y.sm { width: 26px; height: 26px; font-size: 13px; border-radius: 50%; }
.ys .y.lg { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; }
.ys .nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ys .nav li { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; font-size: 15px; color: #2B2927; }
.ys .nav li .ic { color: #45413D; }
.ys .nav li .end { margin-left: auto; }
.ys .nav li.sub { padding-left: 39px; }
.ys .nav li.dim { color: #B0ADA7; }
.ys .nav li.rule { height: 1px; padding: 0; margin: 10px 8px; background: var(--line); border-radius: 0; }
.ys .nav li.on { background: #EAE8E4; font-weight: 500; }
.ys .nav li em { margin-left: auto; font-style: normal; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; min-width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; }
.ys .main { background: #fff; border-left: 1px solid var(--line); margin: 8px 8px 8px 0; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.ys .bar { height: 56px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--quiet); font-size: 15px; }
.ys .bar .crumb { display: inline-flex; align-items: center; gap: 8px; }
.ys .bar b { color: var(--ink); font-weight: 500; }
.ys .seg { display: inline-flex; padding: 3px; gap: 2px; background: #F2F1EE; border-radius: 9px; font-size: 14px; }
.ys .seg b, .ys .seg i { font-style: normal; padding: 4px 11px; border-radius: 7px; color: var(--quiet); font-weight: 400; }
.ys .seg b { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ys .search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; width: 270px; font-size: 14px; }
.ys .split { flex: 1; display: grid; grid-template-columns: 1fr 386px; min-height: 0; }
.ys .pane { padding: 22px 26px; min-width: 0; overflow: hidden; }
.ys .pane.wide { padding: 22px 30px; }
.ys .titlerow { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ys h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.ys h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.ys .muted { color: var(--quiet); }
.ys p { margin: 0; }
.ys .titlerow .muted { margin-top: 6px; font-size: 14.5px; }
.ys .btns { display: flex; gap: 8px; }
.ys .yb { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 500; }
.ys .yb.line { border: 1px solid var(--line); }
.ys .yb.sq { width: 36px; padding: 0; justify-content: center; }
.ys .yb.grey { background: #8F8B85; color: #fff; }
.ys .yb.ink { background: var(--ink); color: #fff; }
.ys .yb.push { margin-left: auto; }
.ys .ghost { display: inline-flex; align-items: center; gap: 6px; color: #3E3B38; font-size: 14px; }
.ys .filters { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ys .count { font-size: 13.5px; margin: 6px 0 8px; }
.ys .t { width: 100%; border-collapse: collapse; font-size: 14px; }
.ys .t th { text-align: left; font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line); color: #2B2927; }
.ys .t td { padding: 11px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.ys .t td b { display: block; font-weight: 500; }
.ys .t td small { display: block; color: var(--quiet); font-size: 13px; margin-top: 3px; }
.ys .t .r { text-align: right; }
.ys .t tr.sel td { background: #F8F7F5; }
.ys .t tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.ys .neg { color: var(--red); font-style: normal; font-weight: 500; }
.ys .sev { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ys .sev.risk { background: #FBE3E6; color: #9E0C24; }
.ys .sev.out { background: #FCEFD2; color: #7A4B00; }
.ys .sev.unusual { background: #E4ECFC; color: #1D4FB8; }
.ys .detail { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.ys .dhead { display: flex; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.ys .dhead .muted { margin-top: 5px; }
.ys .dbody { padding: 16px 20px; overflow: hidden; }
.ys .k { color: var(--quiet); font-size: 13.5px; margin: 0 0 4px; }
.ys .k.strong { color: var(--ink); font-weight: 600; font-size: 15px; display: flex; gap: 6px; align-items: center; margin: 16px 0 10px; }
.ys .todo { font-weight: 600; font-size: 16px; margin-bottom: 14px; }
.ys .dl { display: grid; grid-template-columns: 104px 1fr; gap: 9px 10px; margin: 0; font-size: 14px; }
.ys .dl dt { color: var(--quiet); }
.ys .dl dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.ys .av { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10.5px; font-weight: 600; align-items: center; justify-content: center; }
.ys .evidence { position: relative; border-radius: 10px; overflow: hidden; height: 150px; }
.ys .evidence img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ys .evidence .play { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(25,24,23,.55); display: flex; align-items: center; justify-content: center; color: #fff; }
.ys .evidence .play .ic { fill: #fff; stroke: none; width: 20px; height: 20px; margin-left: 3px; }
.ys .evidence .cam { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 12px; background: rgba(25,24,23,.6); color: #fff; font-size: 13px; }
.ys .log { display: flex; gap: 10px; align-items: flex-start; }
.ys .log b { display: block; font-weight: 500; }
.ys .log small { color: var(--quiet); font-size: 13px; }
.ys .banner { display: flex; gap: 12px; background: #FDECEE; border-radius: 12px; padding: 12px 18px; margin-bottom: 14px; }
.ys .banner .xc { color: #fff; fill: var(--red); stroke: #fff; width: 22px; height: 22px; }
.ys .banner b { display: block; font-size: 15.5px; }
.ys .banner span { display: block; margin-top: 3px; }
.ys .banner a { display: inline-block; margin-top: 8px; font-weight: 500; }
.ys .card { border: 1px solid var(--line); border-radius: 12px; }
.ys .reading { position: relative; padding-bottom: 6px; }
.ys .rhead { display: grid; grid-template-columns: 1fr 190px 170px; border-bottom: 1px solid var(--line); }
.ys .rtitle { padding: 14px 20px; display: grid; gap: 8px; }
.ys .rtitle b { font-size: 16.5px; font-weight: 600; }
.ys .rtitle > span { display: flex; gap: 12px; align-items: center; }
.ys .rval { padding: 12px 20px; border-left: 1px solid var(--line); display: grid; gap: 2px; }
.ys .rval small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); font-weight: 500; }
.ys .rval b { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.ys .rval .muted { font-size: 13px; }
.ys .chartwrap { position: relative; margin: 10px 12px 6px; }
.ys .chart { display: block; width: 100%; height: auto; }
.ys .chart .dotpulse { fill: none; stroke: var(--red); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ys-pulse 1.6s ease-out infinite; }
@keyframes ys-pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
.ys .chartguide { position: absolute; top: 4%; bottom: 10%; width: 1px; background: #191817; opacity: 0; pointer-events: none; }
.ys .charttip { position: absolute; transform: translate(-50%, -130%); background: #191817; color: #fff; font-size: 13px; padding: 5px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; }
.ys .chartwrap:hover .chartguide, .ys .chartwrap:hover .charttip { opacity: 1; }
.ys .chart text { font: 12px Inter, sans-serif; fill: #6B6660; font-variant-numeric: tabular-nums; }
.ys .chart .bandlab { fill: #6B6660; font-size: 12.5px; }
.ys .chart .grid line { stroke: #EFEDEA; stroke-width: 1; }
.ys .chart .band { fill: #EFEEEB; }
.ys .chart .lim { stroke: #C9C6C0; stroke-width: 1; }
.ys .chart .past { fill: none; stroke: #D3D0CB; stroke-width: 1.6; }
.ys .chart .now { fill: none; stroke: var(--green); stroke-width: 2.8; stroke-linejoin: round; }
.ys .chart .now.risk { stroke: var(--red); }
.ys .chart .dotrisk { fill: var(--red); }
.ys .axis { position: absolute; left: 14px; top: 102px; height: 210px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--quiet); }
.ys .axis span { transform: translateY(-50%); }
.ys .axis span:last-child { transform: translateY(-80%); }
.ys .reading .xaxis { position: absolute; left: 50px; right: 20px; bottom: 8px; }
.ys .xaxis { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--quiet); }
.ys .camview { margin-top: 14px; padding: 14px 18px 16px; }
.ys .camhead { display: flex; justify-content: space-between; margin-bottom: 10px; }
.ys .camhead b { font-weight: 600; }
.ys .camimg { position: relative; height: 112px; border-radius: 10px; overflow: hidden; }
.ys .camimg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.ys .ytag { position: absolute; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.ys .ytag i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.ys .ytag.risk i { background: var(--red); }
.ys .ytag.risk { outline: 2px solid var(--red); }
.ys .t1 { left: 41%; top: 38%; }
.ys .t2 { left: 3%; top: 58%; }
.ys .t3 { left: 81%; top: 58%; }
.ys .endrow { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; font-size: 14.5px; }
.ys .endrow b { font-size: 17px; font-weight: 600; }
.ys .okpill { display: inline-flex; align-items: center; gap: 5px; background: #E6F3EC; color: #1F6B45; border-radius: 7px; padding: 3px 9px; font-weight: 500; }
.ys .okpill .ic { opacity: 1; stroke-width: 2.4; }
.ys .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ys .tile { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; }
.ys .tile small { color: #3E3B38; font-size: 13.5px; display: flex; justify-content: space-between; }
.ys .tile b { font-size: 25px; font-weight: 600; letter-spacing: -0.01em; }
.ys .tile .muted { font-size: 12.5px; }
.ys .tile svg { width: 100%; height: 34px; }
.ys .tile .dash { stroke: #C9C6C0; stroke-width: 2; }
.ys .tile .g { fill: var(--green); }
.ys .tile .ln { fill: none; stroke: #54504B; stroke-width: 2; }
.ys .tile .ln.g { stroke: var(--green); fill: none; }
.ys .tile .bandg { fill: #E8F3ED; }
.ys .tile .gfill { fill: var(--green); }
.ys .review { margin-top: 14px; }
.ys .ready { display: flex; gap: 10px; align-items: center; padding: 14px 18px 8px; font-size: 16px; }
.ys .okc { color: var(--green); }
.ys .ready .ic { width: 22px; height: 22px; }
.ys .rules { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 18px 14px; border-bottom: 1px solid var(--line); }
.ys .chip { display: inline-flex; align-items: center; gap: 6px; background: #F3F2EF; border-radius: 8px; padding: 5px 10px; font-size: 13.5px; font-weight: 500; }
.ys .chip .ic { opacity: 1; }
.ys .went { padding: 2px 18px 12px; }
.ys .went .k.strong { margin-top: 12px; }
.ys .t.num td, .ys .t.num th { padding: 9px 12px; }
.ys .d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); margin-right: 8px; }
.ys .d.act { border-radius: 2px; }
.ys .foot { font-size: 13px; margin-top: 10px; }
.ys .rep { padding: 16px 20px 14px; margin-top: 14px; }
.ys .rephead { display: flex; justify-content: space-between; align-items: flex-start; }
.ys .rephead b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.ys .rephead .muted { font-size: 14px; }
.ys .kpi { text-align: right; }
.ys .kpi small { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); font-weight: 500; }
.ys .kpi b { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ys .dots, .ys .bars { display: block; width: 100%; height: 150px; margin-top: 8px; }
.ys .bars { height: 170px; }
.ys .dots text, .ys .bars text { font: 500 13px Inter, sans-serif; fill: #2B2927; font-variant-numeric: tabular-nums; }
.ys .legend { display: flex; gap: 24px; margin-top: 14px; font-size: 14px; }
.ys .legend b { font-weight: 600; margin-left: 4px; }
.ys .legend .sq { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.ys .sq.u { background: var(--blue); }
.ys .sq.o { background: var(--amber); }
.ys .sq.r { background: #E04A2F; }
.ys .rep .xaxis { margin-top: 4px; padding: 0 10px; }
.ys .yphonewrap { width: 340px; padding: 30px; background: transparent; }
.ys .yphone { width: 260px; height: 440px; background: linear-gradient(180deg, #F4F2EE, #E9E6E1); border: 8px solid #1E1D1C; border-radius: 42px; padding: 14px 16px; box-shadow: 0 30px 60px rgba(25,24,23,.25), 0 6px 14px rgba(25,24,23,.12); font-size: 14px; overflow: hidden; }
.ys .pbar { display: flex; justify-content: space-between; align-items: center; padding: 2px 14px 10px; font-size: 15px; }
.ys .pico { display: flex; gap: 2px; align-items: flex-end; }
.ys .pico i { width: 3px; background: #1E1D1C; border-radius: 1px; }
.ys .pico i:nth-child(1) { height:5px }
.ys .pico i:nth-child(2) { height:7px }
.ys .pico i:nth-child(3) { height:9px }
.ys .pico i:nth-child(4) { height:11px }
.ys .pfrom { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 14px; border-bottom: 1px solid var(--line2); }
.ys .pfrom small { font-size: 12.5px; color: var(--quiet); }
.ys .pmeta { text-align: center; font-size: 12px; color: var(--quiet); margin: 14px 0 8px; }
.ys .pmsg { background: #E9E9EB; border-radius: 18px; padding: 10px 14px; font-size: 15.5px; line-height: 1.38; max-width: 92%; }
.ys .op { width: 1280px; height: 800px; background: #fff; border-radius: 14px; border: 1px solid #DDDAD5; overflow: hidden; display: flex; flex-direction: column; }
.ys .op__bar { display: flex; align-items: center; gap: 16px; height: 84px; padding: 0 36px; border-bottom: 1px solid var(--line); font-size: 22px; }
.ys .op__bar b { font-size: 26px; font-weight: 600; }
.ys .op__bar .muted { font-size: 20px; }
.ys .op__live { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 20px; }
.ys .op__live i { width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.ys .op__body { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; }
.ys .op__next { position: relative; padding: 56px 48px; border-right: 1px solid var(--line); background: #FFF8E6; transition: background-color .5s; }
.ys .op__k { font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: #7A4B00; font-weight: 600; }
.ys .op__what { font-size: 76px; font-weight: 600; letter-spacing: -0.03em; margin-top: 14px; line-height: 1; }
.ys .op__due { font-size: 40px; margin-top: 34px; color: #3E3B38; }
.ys .op__due b { font-size: 96px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-left: 10px; }
.ys .op__track { height: 14px; border-radius: 7px; background: #F0E2BC; margin-top: 30px; overflow: hidden; }
.ys .op__track i { display: block; height: 100%; width: 72%; background: #E3A51C; border-radius: 7px; }
.ys .op__rule { font-size: 22px; margin-top: 18px; }
.ys .op__steps { list-style: none; margin: 0; padding: 32px 40px; display: grid; gap: 4px; align-content: start; }
.ys .op__steps li { display: grid; grid-template-columns: 48px 1fr auto 130px; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line2); font-size: 24px; }
.ys .op__steps li b { font-weight: 500; }
.ys .op__steps li span:nth-child(4) { text-align: right; font-size: 20px; }
.ys .op__ok { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #D6D4D0; display: inline-flex; align-items: center; justify-content: center; }
.ys .done .op__ok { background: var(--green); border-color: var(--green); color: #fff; }
.ys .done .op__ok .ic { width: 22px; height: 22px; stroke-width: 3; }
.ys .now { background: #FFF8E6; margin: 0 -40px; padding-left: 40px !important; padding-right: 40px !important; }
.ys .now .op__ok { border-color: #E3A51C; border-width: 3px; }
.ys .now b { font-weight: 600; }
.ys .hmi { width: 300px; padding: 0; }
.ys .hmi__screen { background: #CFD3D6; border-radius: 16px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 40px rgba(25,24,23,.16); }
.ys .hmi__top { display: flex; justify-content: space-between; background: #2E5C86; color: #fff; font-size: 12px; letter-spacing: .06em; padding: 8px 12px; border-radius: 6px 6px 0 0; }
.ys .hmi__main { background: #F3F5F6; padding: 16px 14px 14px; border-radius: 0 0 6px 6px; border: 1px solid #B8BEC3; border-top: 0; }
.ys .hmi__label { font-size: 12px; letter-spacing: .08em; color: #46505A; font-weight: 600; }
.ys .hmi__val { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 12px; }
.ys .hmi__val b { font-size: 56px; font-weight: 600; letter-spacing: -0.02em; color: #1B2833; line-height: 1; }
.ys .hmi__val span { font-size: 22px; color: #46505A; }
.ys .hmi__rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; color: #46505A; border-top: 1px solid #D5DADE; padding-top: 10px; }
.ys .hmi__rows b { text-align: right; color: #1B2833; font-weight: 600; }
.ys .hmi__keys { display: flex; gap: 8px; margin-top: 12px; }
.ys .hmi__keys i { flex: 1; text-align: center; font-style: normal; font-size: 11px; font-weight: 600; color: #46505A; background: #E3E6E8; border-radius: 6px; padding: 6px 0; box-shadow: 0 1px 0 #A9B0B6; }
.ys .plock { text-align: center; font-size: 60px; font-weight: 600; letter-spacing: -0.02em; margin-top: 18px; line-height: 1; color: #1E1D1C; }
.ys .pdate { text-align: center; font-size: 13px; color: #55504A; margin-top: 6px; }
.ys .pnote { margin-top: 26px; background: rgba(255,255,255,.92); border-radius: 18px; padding: 11px 13px 12px; box-shadow: 0 8px 24px rgba(25,24,23,.10); }
.ys .pnote__head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #55504A; margin-bottom: 6px; }
.ys .pnote__head b { color: #1E1D1C; font-weight: 600; flex: 1; }
.ys .pnote__head .y.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.ys .pnote p { font-size: 14px; line-height: 1.35; color: #1E1D1C; }
.ys .yieldcard { width: 1000px; margin: 0; background: #fff; }
.ys .dotswrap { position: relative; }
.ys .dottip { position: absolute; transform: translate(-50%, -140%); background: #191817; color: #fff; font-size: 13px; padding: 5px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.ys .op[data-state="green"] .op__next { background: #EBF6EF; }
.ys .op[data-state="green"] .op__k { color: #1F6B45; }
.ys .op[data-state="green"] .op__track { background: #CDE6D6; }
.ys .op[data-state="green"] .op__track i { background: #3E9E6B; }
.ys .op[data-state="amber"] .op__k { color: #7A4B00; }
.ys .op[data-state="red"] .op__next { background: #FDE9EC; }
.ys .op[data-state="red"] .op__k { color: #9E0C24; }
.ys .op[data-state="red"] .op__track { background: #F5CBD2; }
.ys .op[data-state="red"] .op__track i { background: #C8102E; }
.ys .op[data-state="red"] .op__due b { color: #C8102E; }
.ys .op__track i { transition: background-color .5s; }
.ys .op__track { transition: background-color .5s; }
.ys .op__k { transition: color .5s; }
.ys .op[data-state="green"] .now { background: #EBF6EF; }
.ys .op[data-state="green"] .now .op__ok { border-color: #3E9E6B; }
.ys .op[data-state="red"] .now { background: #FDE9EC; }
.ys .op[data-state="red"] .now .op__ok { border-color: #C8102E; }
.ys .op__added { display: none; align-items: center; gap: 18px; margin-top: 34px; }
.ys .op__added b { display: block; font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: #1F6B45; }
.ys .op__added span span, .ys .op__added > span:last-child > span { font-size: 22px; color: #3E3B38; }
.ys .op__tick { width: 72px; height: 72px; border-radius: 50%; background: #3E9E6B; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ys .op__tick .ic { width: 40px; height: 40px; stroke-width: 3; }
.ys .op[data-state="done"] .op__next { background: #EBF6EF; }
.ys .op[data-state="done"] .op__k { color: #1F6B45; }
.ys .op[data-state="done"] .op__due, .ys .op[data-state="done"] .op__track, .ys .op[data-state="done"] .op__rule { display: none; }
.ys .op[data-state="done"] .op__added { display: flex; }

/* hover: it should feel like the real interface */
.ys { cursor: default; text-align: left; line-height: 1.4; font-size: 14px; color: var(--ink); }
.ys svg.ic { display: inline-block; }
.ys .dots, .ys .bars, .ys .chart { display: block; }
.ys p { margin: 0; }
.ys .nav li:not(.rule) { cursor: pointer; transition: background-color .12s; }
.ys .nav li:not(.rule):not(.on):hover { background: #EEECE8; }
.ys .t tbody tr { cursor: pointer; }
.ys .t tbody tr td { transition: background-color .12s; }
.ys .t tbody tr:hover td { background: #F6F5F2; }
.ys .yb, .ys .seg i, .ys .seg b, .ys .search, .ys .ghost, .ys .crumb, .ys a, .ys .chip, .ys .tile, .ys .evidence, .ys .dl dd { cursor: pointer; }
.ys .yb { transition: border-color .12s, background-color .12s; }
.ys .yb.line:hover { border-color: #B9B5AE; background: #FAFAF9; } .ys .yb.ink:hover { background: #3A3836; } .ys .yb.grey:hover { background: #7D7A75; }
.ys .seg i:hover { color: var(--ink); }
.ys .search:hover { border-color: #C9C6C0; }
.ys .ghost:hover, .ys .crumb:hover, .ys .banner a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ys .tile { transition: border-color .15s, box-shadow .15s, transform .15s; }
.ys .tile:hover { border-color: #C9C6C0; box-shadow: 0 8px 22px rgba(25,24,23,.07); transform: translateY(-2px); }
.ys .chip { position: relative; transition: background-color .12s; }
.ys .chip:hover { background: #E8F3ED; }
.ys .chip[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; background: #191817; color: #fff; font-weight: 400; font-size: 13px; padding: 6px 10px; border-radius: 7px; white-space: nowrap; }
.ys .evidence .play { transition: transform .15s, background-color .15s; }
.ys .evidence:hover .play { transform: translate(-50%, -50%) scale(1.08); background: rgba(25,24,23,.72); }
.ys .op__steps li { transition: background-color .3s; }
.ys .op__steps li .op__ok { transition: background-color .3s, border-color .3s; }
.ys .op__steps li .op__ok .ic { opacity: 0; transition: opacity .2s; }
.ys .op__steps li.done .op__ok .ic { opacity: 1; }
.ys .op__track i { transition: width .9s linear; }
.ys .op__next > * { transition: opacity .35s; }
.ys .op__next.is-swapping > * { opacity: 0; }

/* the alert arrives */
.ys [data-new] td { transition: background-color 1.2s; }
.ys .is-pre [data-new] { display: none; }
.ys [data-new].is-arriving td { background: #FDECEE; }
.ys [data-detail] > * { transition: opacity .4s; }
.ys .is-pre [data-detail] > * { opacity: 0; }
.ys .yphone { transition: filter .5s; }
.ys.is-pre .yphone { filter: brightness(.8) saturate(.75); }
.ys .pnote { transition: opacity .5s, transform .65s cubic-bezier(.2, 1.1, .3, 1.15); }
.ys.is-pre .pnote { opacity: 0; transform: translateY(-52px) scale(.9); }
.ys .pnote.is-new { animation: ys-glow 1.8s ease-out; }
@keyframes ys-glow { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .45), 0 8px 24px rgba(25, 24, 23, .10); } 100% { box-shadow: 0 0 0 16px rgba(200, 16, 46, 0), 0 8px 24px rgba(25, 24, 23, .10); } }
.ys .yphone.is-buzz { animation: ys-buzz .65s; }
@keyframes ys-buzz { 0%, 100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-6px) rotate(-1.5deg); } 30% { transform: translateX(6px) rotate(1.5deg); } 45% { transform: translateX(-5px) rotate(-1deg); } 60% { transform: translateX(5px) rotate(1deg); } 78% { transform: translateX(-2px); } }

/* the batch record checks its rules one by one */
.ys .rules .chip .ic { transition: color .3s; }
.ys .is-pre-rules .rules .chip .ic { color: #C9C6C0; }
.ys .rules .chip.is-met { animation: ys-met .7s; }
@keyframes ys-met { 0% { background: #CFEBDA; } 100% { background: #F3F2EF; } }
.ys .ready { transition: opacity .4s; }
.ys .is-pre-rules .ready { opacity: .3; }
.ys [data-val], .ys [data-hmi] { transition: color .2s; }
.ys .dots circle { transition: opacity .3s, transform .3s; transform-box: fill-box; transform-origin: center; }
.ys .dots.is-pre circle, .ys .dots.is-pre text, .ys .dots.is-pre line.seg { opacity: 0; }
.ys .dots circle.is-hot { transform: scale(1.5); }
.ys .dotswrap { cursor: crosshair; }
@media (prefers-reduced-motion: reduce) { .ys * { transition: none !important; animation: none !important; } }