/* 3L Deliver · Ops area (board, jobs, job detail, exceptions, customers, drivers, performance).
   Instrument register: one graphite panel per view (the counter line or the route map), light stepped surfaces, ink for ops actions. */

.op .op-l,.op-pk .op-l{display:none}
.op-h2{font-size:17px;line-height:1.25;font-weight:620;letter-spacing:-.012em;display:inline-flex;align-items:center;gap:8px}
.op-h2 .ct,.op-lh .ct{display:inline-block;min-width:22px;padding:0 7px;border-radius:11px;background:var(--inset);font-size:12.5px;font-weight:620;line-height:22px;text-align:center;color:var(--ink)}
.op-card{padding:18px 20px;margin-bottom:16px}
.op-card .card-h a{font-size:13px;font-weight:560;color:var(--ink-2);text-decoration:none}
@media (hover:hover){.op-card .card-h a:hover{color:var(--ink)}}
.op-meter{display:block;height:6px;border-radius:3px;background:var(--inset);overflow:hidden;min-width:48px}
.op-meter i{display:block;height:100%;border-radius:3px;background:var(--ink)}
.op-meter.is-late i{background:var(--late)}
.op .tbl-foot a{color:var(--ink-2);font-weight:560;text-decoration:none;white-space:nowrap}
.op .page-h .sub a{color:var(--ink);text-decoration:none;font-weight:600}
@keyframes op-flash{from{background:var(--line)}to{background:transparent}}
.op tr.is-flash td,.op li.is-flash{animation:op-flash 1400ms ease-out}
@property --op-rf{syntax:'<angle>';inherits:false;initial-value:360deg}
@keyframes op-close{from{--op-rf:180deg}to{--op-rf:360deg}}
.op .st.is-closing.to-ok::before{background:conic-gradient(currentColor var(--op-rf),transparent 0);animation:op-close 260ms cubic-bezier(.2,.8,.2,1) both}

/* ---------- board header + the counter line (the instrument) ---------- */
.op-bh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.op-bh .sub{font-size:13.5px;font-weight:520;color:var(--ink-3);margin-top:6px}
.op-count{display:flex;align-items:center;flex-wrap:wrap;gap:4px 24px;min-height:48px;padding:0 20px;margin-bottom:32px;border-radius:var(--r-l)}
.op-c{flex:none;min-width:0;display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.op-c .v{font-size:20px;line-height:1;font-weight:540;letter-spacing:-.03em;color:var(--g-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.op-c .v .n{display:inline-block}
.op-c .v small{font-size:13px;color:var(--g-ink-2);letter-spacing:0;margin-left:1px}
.op-c .l{font-size:12px;font-weight:520;color:var(--g-ink-2);line-height:1.3}
.op-c-t{margin-left:auto;font-size:12px;color:var(--g-ink-2)}
@keyframes op-tick{0%{transform:translateY(-7px);opacity:.2;color:var(--ok-g-ink)}60%{color:var(--ok-g-ink)}100%{transform:none;opacity:1;color:var(--g-ink)}}
.op-c.is-tick .n{animation:op-tick 520ms cubic-bezier(.2,.8,.2,1)}

/* ---------- exceptions lane ---------- */
.op-lane{margin-bottom:20px}
.op-lh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.op-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:560;color:var(--ink-2);text-decoration:none}
.op-more svg{width:14px;height:14px}
@media (hover:hover){.op-more:hover{color:var(--ink)}}
.op-ex-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.op-ex{background:var(--raised);border-radius:var(--r-l);padding:16px 18px 16px;box-shadow:var(--sh-2);min-width:0}
.op-ex.is-done{box-shadow:inset 0 0 0 1px var(--line);background:var(--card)}
.op-ex-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.op-ex-h .mono{color:var(--ink-2);text-decoration:none}
.op-age{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.op-ex h3{font-size:18px;line-height:1.25;font-weight:620;letter-spacing:-.015em;margin:10px 0 3px}
.op-ex h3 a{text-decoration:none}
@media (hover:hover){.op-ex h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.op-ex-m{font-size:13px;color:var(--ink-2);line-height:1.45}
.op-ex-m b{font-weight:600;color:var(--ink)}
.op-q{margin:12px 0 10px;background:var(--inset);border-radius:var(--r-m);padding:12px 14px;box-shadow:var(--sh-in)}
.op-q p{font-size:16px;line-height:1.35;font-weight:580;letter-spacing:-.01em;color:var(--ink)}
.op-q footer{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.45}
.op-next{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.op-next>span{font-size:12px;font-weight:620;color:var(--ink);margin-right:8px}
.op-next a{color:var(--ink);text-decoration:none}
.op-ex-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.op-lane-ok{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--ink-2)}
.op-lane-ok b{color:var(--ink);font-weight:600}
.op-lane-ok svg{flex:none;color:var(--ink-3)}
.op-lane-ok a{margin-left:auto;color:var(--ink-2);font-weight:560;text-decoration:none;white-space:nowrap}

/* ---------- today's table + unallocated lane ---------- */
.op-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.op-th{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.op-tbl .tq{font-size:12px;color:var(--ink-3);margin-left:6px;font-weight:450}
.op-tbl .tm{font-size:14.5px}
.op-tbl .ar{color:var(--ink-3)}
.op-tbl td.c-rt{max-width:250px}
.op-tbl td.c-cu{max-width:200px}
.op-tbl td.c-vh .mono{font-size:12px;margin-left:4px}
.op-ucol{background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line);padding:16px 14px 10px}
.op-ucol .op-lh{padding:0 4px}
.op-un{list-style:none;display:flex;flex-direction:column;gap:8px}
.op-grp{font-size:12px;font-weight:600;color:var(--ink-3);padding:6px 4px 0}
.op-u{background:var(--raised);border-radius:var(--r-m);padding:12px 14px 14px;box-shadow:var(--sh-1);display:flex;flex-direction:column;align-items:flex-start}
.op-u-h{display:flex;align-items:center;gap:10px;width:100%}
.op-u-h .mono{color:var(--ink-2);text-decoration:none}
.op-u-w{margin-left:auto;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.op-u-w.is-soon{color:var(--late);font-weight:600}
.op-u-r{font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin:7px 0 2px}
.op-u-m{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.op-u .btn{margin-top:12px}

/* ---------- allocate picker (sheet) ---------- */
.sheet.op-pk-sh{width:min(880px,100%)}
.op-pk-job{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin-bottom:14px}
.op-pk-h,.op-pr{display:grid;grid-template-columns:20px minmax(0,1.25fr) minmax(0,1.35fr) 96px 88px;gap:4px 14px;align-items:center}
.op-pk-h{padding:0 10px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.op-pk-h span:first-child{grid-column:2}
.op-pk-h .r,.op-pr .r{text-align:right}
.op-pk{display:flex;flex-direction:column;gap:2px}
.op-pr{padding:9px 10px;border-radius:var(--r-m);cursor:pointer;font-size:13.5px;transition:background-color var(--t) ease-out}
@media (hover:hover){.op-pr:not(.is-dis):hover{background:var(--inset)}}
.op-pr:has(input:checked){background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.op-pr.is-dis{cursor:not-allowed;color:var(--ink-3)}
.op-pr.is-dis .nm b,.op-pr.is-dis .hl b{color:var(--ink-3)}
.op-pr input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--inset);box-shadow:inset 0 0 0 1.5px var(--ink-3);display:grid;place-items:center;margin:0;cursor:inherit}
.op-pr input:checked{background:var(--btn-ink);box-shadow:none}
.op-pr input:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-btn-ink)}
.op-pr input:disabled{opacity:.45}
.op-pr input:focus-visible{box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--focus)}
.op-pr .nm b{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.op-pr .nm .chip{height:20px;font-size:12px;padding:0 7px}
.op-pr .sub{display:block;font-size:12.5px;color:var(--ink-3)}
.op-pr .ps{color:var(--ink-2);line-height:1.35}
.op-pr .hl b{font-weight:600;color:var(--ink)}
.op-pr .fr,.op-pr .hl{white-space:nowrap}
.op-pr .why{grid-column:2/-1;font-size:12.5px;color:var(--ink-3)}
.op-pr.g2 .why{color:var(--late)}
.op-pr .ps .sub{display:block;font-size:12.5px;color:var(--ink-3)}
.op-pk-g{font-size:12px;font-weight:600;color:var(--ink-3);padding:14px 10px 4px;border-top:1px solid var(--line-2);margin-top:6px}
.op-pk-g:first-child{border-top:0;margin-top:0;padding-top:2px}
.op-pr-x{grid-template-columns:20px minmax(0,1fr)}
.op-pr-x .nm .sub{max-width:68ch;line-height:1.45;margin-top:2px}
.op-pr-x .why{color:var(--ink-3)}
.op-pk-n{font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.45}

/* ---------- job detail ---------- */
.op-dh{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13.5px;letter-spacing:0;font-weight:520}
.op-dh .mono{font-size:13px;color:var(--ink-2)}
.op-fail{display:flex;align-items:flex-start;gap:14px;background:var(--bad-bg);border-radius:var(--r-l);padding:14px 18px;margin-bottom:20px;color:var(--bad)}
.op-fail.is-late{background:var(--late-bg);color:var(--late)}
.op-fail svg{flex:none;margin-top:1px}
.op-fail>div{flex:1;min-width:0}
.op-fail b{font-weight:620;font-size:15px}
.op-fail p{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.op-fail p a{color:var(--ink)}
.op-fail .btn{flex:none}
.op-jd{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start}
.op-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ph pod" "em pod";grid-template-rows:auto 1fr;gap:0 16px;align-items:start}
.op-two .op-card{margin-bottom:16px}
.op-two-ph{grid-area:ph}.op-two-pod{grid-area:pod}.op-two-em{grid-area:em}
.op-wait{display:block;margin-top:6px;font-size:12.5px;font-weight:560;color:var(--ink-2)}
.op-wait.is-ch{color:var(--late)}
.op-map{overflow:hidden;margin-bottom:16px}
.op-tl{list-style:none;display:flex;flex-direction:column}
.op-tl li{display:grid;grid-template-columns:66px 18px minmax(0,1fr) auto;gap:12px;align-items:start;position:relative;padding-bottom:14px}
.op-tl li:last-child{padding-bottom:0}
.op-tl li::before{content:"";position:absolute;left:86.25px;top:19px;bottom:1px;width:1.5px;background:var(--line)}
.op-tl li:last-child::before{display:none}
.op-tl .t{font-size:13.5px;font-weight:560;letter-spacing:-.01em;padding-top:1px}
/* ring states per status; system events are a 6 px ink dot */
.op-tl .rg{width:18px;height:18px;display:grid;place-items:center;position:relative;z-index:1;margin-top:1px;color:var(--ink)}
.op-tl .rg::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.5px currentColor,0 0 0 2px var(--card)}
.op-tl .k-bk .rg{color:var(--ink-3)}
.op-tl .k-bk .rg::after{box-shadow:0 0 0 2px var(--card);border:1.5px dashed currentColor;box-sizing:border-box}
.op-tl .k-al .rg{color:var(--ink-2)}
.op-tl .k-col .rg::after{background:conic-gradient(currentColor 0 270deg,var(--card) 0)}
.op-tl .k-go .rg::after,.op-tl .k-late .rg::after{background:linear-gradient(90deg,currentColor 50%,var(--card) 50%)}
.op-tl .k-late .rg{color:var(--late)}
.op-tl .k-ok .rg{color:var(--ok)}
.op-tl .k-ok .rg::after{background:currentColor}
.op-tl .k-sys .rg::after{width:6px;height:6px;background:var(--ink);box-shadow:0 0 0 3px var(--card)}
.op-tl .k-bad .rg{color:var(--bad)}
.op-tl .k-bad .rg::after{box-shadow:none;background:conic-gradient(from 40deg,currentColor 0 290deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 5.4px,#000 5.8px);mask:radial-gradient(circle,transparent 5.4px,#000 5.8px)}
.op-tl b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.op-tl .d{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.op-tl .src{font-size:12px;color:var(--ink-3);padding-top:2px}
.op-tl-n{font-size:12.5px;color:var(--ink-3);margin-top:14px}
.op-ph{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op-phb{border:0;background:none;padding:0;text-align:left;border-radius:var(--r-m);min-width:0}
.op-phb img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-m);background:var(--inset);transition:transform var(--t-fast) ease-out}
.op-phb:active img{transform:scale(.98)}
.op-phb span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.op-big{width:100%;border-radius:var(--r-m)}
.op-pod-a{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.op-card .podm{max-width:100%}
.op-em{list-style:none}
.op-em li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;padding:10px 4px;border-top:1px solid var(--line-2);border-radius:var(--r-s)}
.op-em li:first-child{border-top:0}
.op-em-t{font-size:14px;font-weight:560}
.op-em-t span{display:block;font-size:12px;color:var(--ink-3);font-weight:450}
.op-em-b{min-width:0}
.op-em-b a{display:block;font-size:13px;font-weight:560;line-height:1.4;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.op-em-b a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.op-em-b span{display:block;font-size:12px;color:var(--ink-3);line-height:1.4;margin-top:2px;font-variant-numeric:tabular-nums}
.op-em-s{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;padding-top:2px}
.op-em-s svg{flex:none}
.op-honest{font-size:12.5px;color:var(--foot);margin-top:12px;line-height:1.45}
.op-nt{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:10px}
.op-nt b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.op-nf{margin-top:14px}
.op-nf-a{display:flex;justify-content:flex-end;margin-top:8px}
.op-rs{display:flex;flex-direction:column;gap:12px}
.op-rs .chk .sub{display:block;font-size:12.5px;color:var(--ink-3)}
.op-rs .op-other{margin-left:28px}
.op-rs .op-other.is-off{opacity:.55}

/* ---------- jobs search ---------- */
.op-sf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start;background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line);padding:18px 20px}
.op-sf-q .inp{min-height:48px}
.op-sf-q .inp input{height:46px;font-size:16px}
.op-eg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.op-eg>span{font-size:12.5px;color:var(--ink-3);margin-right:2px}
.op-sf-r{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.op-sf-r .fld{min-width:0}
.op-sf-r .seg{margin-top:0}
#op-d{min-width:150px}
.op-count-l{margin:22px 0 10px;font-size:13.5px;color:var(--ink-2)}
.op-count-l b{color:var(--ink);font-weight:620}

/* ---------- exceptions page ---------- */
.op-xg{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.op-x-list{display:flex;flex-direction:column;gap:16px}
.op-xs{position:sticky;top:calc(var(--top-h) + 16px)}
.op-rsn{list-style:none;display:flex;flex-direction:column;gap:10px}
.op-rsn li{display:grid;grid-template-columns:minmax(0,1fr) 90px 24px;gap:12px;align-items:center;font-size:13.5px}
.op-rsn b{text-align:right;font-weight:600}

/* ---------- stacked tables (customers, drivers, contacts, by-customer) ---------- */
.op-st tbody td{height:auto;padding-top:9px;padding-bottom:9px}
.op-st td.c-a b{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.op-st td.c-a b .chip{height:20px;font-size:12px;padding:0 7px}
.op-st td.c-a>span{display:block;font-size:12.5px;color:var(--ink-3)}
.op-st td .dim{color:var(--ink-3)}
.op-st td .mono{color:var(--ink-2)}
.op-st td a.mono{text-decoration:none}
.op-flat{box-shadow:none;background:transparent;border-radius:0}
.op-flat thead th{background:var(--raised)}
.op-card .op-flat thead th,.op-card .op-flat{background:transparent}
.op-card .op-flat thead th{background:var(--raised)}
.op-tk{justify-content:flex-start}
.op-saved{min-height:18px}
.op-saved .ok-inline{font-size:12.5px}

/* customers / account */
.op-acc-l{display:flex;gap:10px 28px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin:-10px 0 24px}
.op-acc-l b{color:var(--ink);font-weight:620;font-size:15px}
.op-acc{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.op-ps .chk{margin-bottom:12px}
.op-ps .chk .sub{display:block;font-size:12.5px;color:var(--ink-3)}
.op-ps .fld{margin-top:14px}
.op-ps-a{display:flex;justify-content:flex-end;margin-top:16px}

/* drivers */
.op-who{display:flex;align-items:center;gap:10px}
.op-who b{display:block;font-size:14px;font-weight:600}
.op-who>span>span{display:block;font-size:12.5px;color:var(--ink-3)}
.op-ds{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.op-ds svg{flex:none}
.op-ds.k-deactivated,.op-ds.k-off-today{color:var(--ink-3)}
.op-ds.k-deactivated svg{color:var(--bad)}
.op-drv td .op-pos{padding-left:28px}
.op-dx{display:inline-flex;gap:2px;justify-content:flex-end;white-space:nowrap}
.op-dl{font:inherit;font-size:13px;font-weight:560;color:var(--ink-2);text-decoration:none;background:none;border:0;padding:6px 8px;border-radius:var(--r-s);cursor:pointer;min-height:32px;display:inline-flex;align-items:center}
@media (hover:hover){.op-dl:hover{color:var(--ink);background:var(--inset)}.op-dl.is-bad:hover{color:var(--bad)}}
.op-dl:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.op-pos{display:block;font-size:12.5px;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.op-hrs{display:flex;align-items:center;gap:8px;min-width:130px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.op-hrs b{color:var(--ink);font-weight:600}
.op-hr{flex:none;color:var(--ink-3)}
.op-hr .a{stroke:var(--ink)}
.op-hr.is-warn .a{stroke:var(--late)}
.op-q2 b{display:block;font-size:14px;font-weight:600}
.op-q2 span{display:block;font-size:12.5px}
.op-drv tr.is-off td>*{opacity:.55}
.op-drv td.c-x{padding-right:6px}
.op-foot-n{font-size:12.5px;color:var(--ink-3);margin-top:14px;max-width:86ch;line-height:1.5}
.op-pin{display:flex;gap:10px;justify-content:center;margin:6px 0 16px}
.op-pin span{width:58px;height:70px;border-radius:var(--r-m);background:var(--inset);box-shadow:var(--sh-in);display:grid;place-items:center;font-size:40px;font-weight:540;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.op-pin-n{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.op-busy{list-style:none;display:flex;flex-direction:column;gap:8px}
.op-busy li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.op-busy a{color:var(--ink-2);text-decoration:none}
.op-form{display:grid;gap:14px}

/* ---------- performance ---------- */
.op-pg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.op-pg .op-card{margin-bottom:0}
.op-pg-2{margin-top:16px}
.op-fig{margin:0}
.op-fig figcaption{margin-bottom:12px}
.op-fig h2{font-size:15px;font-weight:620;letter-spacing:-.01em}
.op-fig figcaption span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.op-ch{position:relative;min-height:200px}
.op-ch svg{display:block;max-width:none;overflow:visible;touch-action:pan-y}
.op-ch text{font-family:var(--font);font-size:12px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.op-ch .gl{stroke:var(--line-2);stroke-width:1}
.op-ch .tg{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 3}
.op-ch .tgl{font-size:12px;fill:var(--ink-2);font-weight:560}
.op-pro{display:flex;flex-wrap:wrap;gap:20px 56px;margin-bottom:16px;padding:22px 24px}
.op-pro-i{min-width:0}
.op-pro-i .l{margin-top:10px}
.op-ch .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.op-ch .dt{fill:var(--ink);stroke:var(--raised);stroke-width:2}
.op-ch .bar{fill:var(--ink)}
.op-ch .z{stroke:var(--ink-3);stroke-width:1}
.op-ch .el{fill:var(--ink);font-size:12.5px;font-weight:600}
.op-ch .ch{stroke:var(--ink-3);stroke-width:1}
.op-tip{position:absolute;z-index:3;pointer-events:none;background:var(--g1);color:var(--g-ink);border-radius:var(--r-s);padding:6px 10px;font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}
.op-tip b{display:block;font-size:13.5px;font-weight:620}
.op-tip span{color:var(--g-ink-2)}
.op-ba-r{display:grid;grid-template-columns:118px minmax(0,1fr) 92px;gap:12px;align-items:center;margin-top:16px;font-size:13.5px}
.op-ba-r .k{color:var(--ink-2)}
.op-ba-t{height:12px;border-radius:6px;background:var(--inset);overflow:hidden}
.op-ba-t i{display:block;height:100%;min-width:4px;border-radius:6px;background:var(--ink)}
.op-ba-r.is-old .op-ba-t i{background:var(--ink-3)}
.op-ba-r b{text-align:right;font-size:16px;font-weight:600;letter-spacing:-.02em}
.op-ba-n{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:18px}
.op-ba-n b{color:var(--ink);font-weight:620}
.op-nums{margin-top:16px}
.op-nums summary{display:inline-flex;font-size:13.5px;font-weight:560;color:var(--ink-2);cursor:pointer;padding:6px 8px;margin-left:-8px;border-radius:var(--r-s)}
@media (hover:hover){.op-nums summary:hover{color:var(--ink);background:var(--inset)}}
.op-nums .tbl-wrap{margin-top:8px;max-width:640px;background:var(--raised);box-shadow:var(--sh-1);border-radius:var(--r-l)}
.op-hb{display:flex;align-items:center;gap:10px}
.op-hb-t{display:block;width:96px;height:6px;border-radius:3px;background:var(--inset);overflow:hidden}
.op-hb-t i{display:block;height:100%;border-radius:3px;background:var(--ink)}
.op-hb b{font-weight:560;font-size:13.5px}
.op-by tr[data-href]{cursor:pointer}

/* ---------- reflow ---------- */
@media (max-width:1240px){
  .op-two{grid-template-columns:minmax(0,1fr);grid-template-areas:"ph" "pod" "em";grid-template-rows:auto}
  .op-jd{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:1100px){
  .op-main,.op-xg,.op-acc,.op-jd{grid-template-columns:minmax(0,1fr)}
  .op-xs{position:static}
  .op-pg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .op-sf{grid-template-columns:1fr}
  .op-ucol{order:-1}
}
@media (max-width:720px){
  /* stacked rows */
  .op .op-l{display:block;font-size:12px;color:var(--ink-3);font-weight:450;margin-bottom:2px}
  .op-st{overflow:visible}
  .op-st table,.op-st tbody{display:block}
  .op-st thead{display:none}
  .op-st tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:12px 14px;border-top:1px solid var(--line-2);position:relative}
  .op-st tbody tr:first-child{border-top:0}
  .op-st tbody td{display:block;height:auto;padding:0;border:0;white-space:normal;border-radius:0!important;background:none!important;box-shadow:none!important}
  .op-st tbody td.c-a{grid-column:1/-1}
  .op-st tbody td.r{text-align:left}
  .op-st tbody td.c-x{grid-column:1/-1;margin-left:-8px}
  .op-st tbody td.c-x .op-dx{justify-content:flex-start}
  .op-drv td .op-pos{padding-left:0}
  .op-st tbody td.c-k .op-l{display:inline;margin:0;font-size:13px;color:var(--ink-2)}
  .op-st tbody td.c-k .chk{align-items:center}
  .op-st .op-pos{max-width:none;white-space:normal}
  @media (hover:hover){.op-st tbody tr:hover{background:var(--inset)}}
  .op-flat{margin:0 -6px}
  .op-flat tbody tr{padding:12px 6px}
}
@media (max-width:620px){
  .op-bh{margin-bottom:16px}
  .op-count{gap:2px 14px;padding:9px 16px;margin-bottom:24px}
  .op-c{gap:5px}
  .op-c .v,.op-c .v small,.op-c .l{font-size:13px;letter-spacing:0}
  .op-c .v{font-weight:620}
  .op-pro{flex-direction:column;gap:18px}
  .op-ex{padding:14px 14px 14px}
  .op-ex h3{font-size:17px}
  .op-ex-list{grid-template-columns:1fr}
  /* job tables become two-line rows */
  .op-tbl{overflow:visible}
  .op-tbl table,.op-tbl tbody{display:block}
  .op-tbl thead{display:none}
  .op-tbl tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"st ref tm" "rt rt rt" "cu cu dr";gap:2px 10px;padding:10px 12px;border-top:1px solid var(--line-2);align-items:center}
  .op-tbl tbody tr:first-child{border-top:0}
  .op-tbl tbody tr.grp{display:block}
  .op-tbl tbody td{display:block;height:auto;padding:0;border:0;border-radius:0!important;background:none!important;box-shadow:none!important;min-width:0}
  .op-tbl td.c-st{grid-area:st}
  .op-tbl td.c-ref{grid-area:ref}
  .op-tbl td.c-tm{grid-area:tm;text-align:right}
  .op-tbl td.c-rt{grid-area:rt;max-width:none;font-size:14px;font-weight:560;margin-top:4px}
  .op-tbl td.c-cu{grid-area:cu;max-width:none;font-size:12.5px;color:var(--ink-3)}
  .op-tbl td.c-dr{grid-area:dr;font-size:12.5px;color:var(--ink-3);text-align:right}
  .op-tbl td.c-vh{display:none}
  .op-res td.c-vh{display:none}
  .op-tbl tbody td[colspan]{grid-column:1/-1}
  @media (hover:hover){.op-tbl tbody tr:hover{background:var(--inset)}}
  .op-tbl .tbl-foot{flex-direction:column;align-items:flex-start}
  .op-tl li{grid-template-columns:58px 18px minmax(0,1fr);gap:10px}
  .op-tl li::before{left:76.25px}
  .op-tl .src{display:none}
  .op-ph{grid-template-columns:1fr 1fr}
  .op-em li{grid-template-columns:44px minmax(0,1fr)}
  .op-pk-h{display:none}
  .op-pr{grid-template-columns:20px minmax(0,1fr) auto;gap:2px 10px;padding:10px 8px}
  .op-pr .ps{grid-column:2/-1;font-size:13px}
  .op-pr .hl{grid-column:2;text-align:left!important;font-size:12.5px}
  .op-pr .hl .op-l{display:inline;margin:0;font-size:12.5px}
  .op-pr .fr{grid-column:3;grid-row:1;font-size:12.5px}
  .op-ba-r{grid-template-columns:96px minmax(0,1fr) 72px;gap:10px}
  .op-sf{padding:14px}
  .op-sf-r{flex-direction:column;gap:12px}
  .op-acc-l{gap:8px 18px}
  .op-pin span{width:52px;height:62px;font-size:34px}
  .op .page-h .acts{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .op-c.is-tick .n{animation:none}
  .op tr.is-flash td,.op li.is-flash{animation:op-flash 1400ms linear}
  .op-phb img{transition:none}
}
.op-by .tbl td,.op-by .tbl th{padding-left:8px;padding-right:8px}
.op-by td.c-a{white-space:normal}
.op-board .op-tbl td,.op-board .op-tbl th{padding-left:10px;padding-right:10px}
.op-board .op-tbl td.c-rt{max-width:230px}
.op-board .op-tbl td.c-cu{max-width:180px}
@media (max-width:1320px) and (min-width:621px){.op-board .op-tbl th:nth-child(7),.op-board .op-tbl td.c-vh{display:none}.op-board .op-tbl td.c-rt{max-width:190px}.op-board .op-tbl td.c-cu{max-width:150px}}
@media (max-width:1180px){.op-main{grid-template-columns:minmax(0,1fr)}.op-ucol{order:-1}}
@media (max-width:1180px){.op-un{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}.op-grp{grid-column:1/-1}}
.op-st td.c-a>.op-who{display:flex;color:var(--ink);font-size:inherit}
.op-hb b{white-space:nowrap}
@media (max-width:720px){
  .op-by tbody tr{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px}
  .op-by .op-hb-t{display:none}
}