/* ============ base ============ */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
svg.i.s { width: 16px; height: 16px; } svg.i.l { width: 28px; height: 28px; } svg.i.xl { width: 40px; height: 40px; }

/* ============ viewer chrome (team-facing, Chinese) ============ */
.vw { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; grid-template-rows: auto 1fr; height: 100vh; }
.vw-top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.vw-top h1 { font-size: 15px; margin: 0 8px 0 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand-logo { display: block; flex: none; border-radius: 50%; }
.vw-top h1 img.mark { width: 26px; height: 26px; }
.vw-top .grow { flex: 1; }
.vw-ctl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.vw-ctl select, .vw-ctl button { height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 0 8px; font-size: 13px; }
.vw-ctl button.on { background: var(--pri-soft); border-color: var(--pri); color: var(--pri); }
.vw-scn { font-size: 12px; color: var(--ink-2); background: var(--surface-2); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.vw-nav { overflow: auto; border-right: 1px solid var(--line); background: var(--surface); padding: 8px 0 24px; }
.vw-nav h3 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 14px 16px 6px; }
.vw-nav a { display: grid; grid-template-columns: 58px 1fr auto; gap: 6px; align-items: center; padding: 6px 16px; color: var(--ink); text-decoration: none; font-size: 13px; }
.vw-nav a:hover { background: var(--surface-2); }
.vw-nav a.on { background: var(--pri-soft); box-shadow: inset 3px 0 0 var(--pri); }
.vw-nav a.lofi { color: var(--ink-3); }
.vw-nav a code { font: 11px var(--mono); color: var(--ink-3); }
.wv { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.wv.w1 { background: var(--pri-soft); color: var(--pri); font-weight: 700; }
.vw-stage { overflow: auto; padding: 24px; display: flex; justify-content: center; align-items: flex-start; }
.vw-stage.desk { padding: 16px; display: block; }
.vw-spec { overflow: auto; border-left: 1px solid var(--line); background: var(--surface); padding: 16px; font-size: 13px; }
.vw-spec h2 { font-size: 16px; margin: 0 0 4px; }
.vw-spec h4 { font-size: 12px; margin: 18px 0 6px; color: var(--ink-2); letter-spacing: .04em; }
.vw-spec .meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.vw-spec .req { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; margin-bottom: 6px; }
.vw-spec .req b { font: 600 12px var(--mono); }
.vw-spec .req p { margin: 4px 0 0; }
.vw-spec .req .acc { color: var(--ink-2); font-size: 12px; }
.vw-spec ol { padding-left: 18px; margin: 0; } .vw-spec li { margin-bottom: 4px; }
.vw-spec .states button { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); padding: 6px 10px; border-radius: var(--r-s); margin-bottom: 4px; font-size: 13px; }
.vw-spec .states button.on { border-color: var(--pri); background: var(--pri-soft); }
.lofi-card { max-width: 520px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-l); padding: 24px; color: var(--ink-2); }

/* ============ device frames ============ */
.phone { width: 380px; height: 780px; flex: none; border-radius: 44px; background: var(--device); padding: 12px; box-shadow: var(--shadow-2); position: relative; }
.phone .scr { width: 100%; position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; position: relative; }
.os-bar { height: 30px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font: 600 12px var(--font-num); color: var(--ink); background: var(--surface); }
.os-bar .sig { display: flex; gap: 6px; align-items: center; }
.desk-frame { container-type: inline-size; position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-1); min-height: calc(100vh - 110px); display: flex; flex-direction: column; }

/* ============ field app (mobile + farmer) ============ */
.app { flex: 1; display: flex; flex-direction: column; min-height: 0; font-size: 16px; }
.app-bar { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 0 8px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.app-bar h2 { flex: 1; font-size: 18px; margin: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar h2 small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.ib { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 99px; display: grid; place-items: center; color: var(--ink); position: relative; }
.ib:hover { background: var(--surface-2); }
.ib .badge { position: absolute; top: 4px; right: 2px; }
.app-body > * { flex-shrink: 0; }
.app-body { flex: 1; overflow: auto; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.app-foot { flex: none; padding: 10px 14px 14px; background: var(--surface); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }

.sync { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; flex: none; }
.sync.on { background: var(--ok-soft); color: var(--ok); }
.sync.off { background: var(--warn-soft); color: var(--warn); }
.sync.run { background: var(--info-soft); color: var(--info); }
.sync .grow { flex: 1; }
.dline { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dline b { color: var(--ink); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px; }
.card.flat { box-shadow: none; }
.card h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card .sub { font-size: 13px; color: var(--ink-3); }
.sec-t { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 6px 2px -4px; }

.btn { min-height: var(--tap); border-radius: var(--r-m); border: 1px solid transparent; padding: 0 18px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.btn.full { width: 100%; }
.btn.pri { background: var(--pri); color: var(--on-pri); }
.btn.pri:hover { background: var(--pri-hover); }
.btn.sec { background: var(--surface); color: var(--pri); border-color: var(--pri); }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.danger { background: var(--bad); color: var(--on-pri); }
.btn[disabled], .btn.dis { background: var(--surface-3); color: var(--ink-3); border-color: transparent; cursor: not-allowed; }
.btn.sm { min-height: 36px; font-size: 14px; padding: 0 12px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { min-height: 104px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 14px; font-weight: 700; font-size: 15px; text-align: left; position: relative; }
.tile .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--pri-soft); color: var(--pri); }
.tile.hero { grid-column: 1 / -1; background: var(--pri); color: var(--on-pri); border-color: var(--pri); flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 84px; font-size: 18px; }
.tile.hero .ic { background: rgba(255,255,255,.18); color: var(--on-pri); }
.tile .badge { position: absolute; top: 10px; right: 10px; }
.badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: var(--on-pri); font: 700 12px/22px var(--font-num); text-align: center; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 20px; }
.pill svg.i { width: 14px; height: 14px; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.pend { background: var(--pend-soft); color: var(--pend); }
.pill.pri { background: var(--pri-soft); color: var(--pri); }

.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-m); font-size: 14px; border: 1px solid transparent; }
.banner b { display: block; margin-bottom: 2px; }
.banner .act { margin-top: 8px; }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner.info { background: var(--info-soft); color: var(--info); }
.banner > div { color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .banner > div b { color: inherit; }
.banner.ok > div b { color: var(--ok); } .banner.warn > div b { color: var(--warn); } .banner.bad > div b { color: var(--bad); } .banner.info > div b { color: var(--info); }

.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.inp { min-height: var(--tap); border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); padding: 0 14px; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.inp input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-size: 18px; }
.inp.err { border-color: var(--bad); }
.inp.ok { border-color: var(--ok); }
.fld .hint { font-size: 12px; color: var(--ink-3); }
.fld .err-t { font-size: 13px; color: var(--bad); font-weight: 600; display: flex; gap: 6px; align-items: center; }

.seg { display: flex; background: var(--surface-2); border-radius: var(--r-m); padding: 4px; gap: 4px; }
.seg button { flex: 1; min-height: 46px; border: 0; background: transparent; border-radius: 8px; font-weight: 600; font-size: 15px; color: var(--ink-2); padding: 0 6px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.choice { display: grid; gap: 8px; }
.choice button { min-height: var(--tap); border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: 8px 14px; display: flex; align-items: center; gap: 12px; text-align: left; font-size: 15px; font-weight: 600; }
.choice button small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.choice button.on { border-color: var(--pri); background: var(--pri-soft); }
.choice button.on.bad { border-color: var(--bad); background: var(--bad-soft); }
.choice button.on.warn { border-color: var(--warn); background: var(--warn-soft); }
.choice .dot { width: 22px; height: 22px; border-radius: 99px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.choice button.on .dot { border-color: currentColor; }
.choice button.on .dot::after { content: ""; width: 10px; height: 10px; border-radius: 99px; background: currentColor; }
.choice.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice button { min-width: 0; }
.choice button > span:not(.dot) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.choice button .pill { white-space: normal; flex: none; max-width: 45%; }

.kv { display: grid; grid-template-columns: minmax(45%, 1fr) minmax(0, auto); gap: 8px 12px; font-size: 15px; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; text-align: right; font-weight: 600; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.kv .tot { border-top: 1px solid var(--line); padding-top: 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.kv dd.neg { color: var(--bad); }

.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row b { display: block; } .row small { color: var(--ink-3); font-size: 13px; }

.avatar { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; background: var(--accent-soft); color: var(--accent); }
.avatar.l { width: 72px; height: 72px; font-size: 24px; border-radius: 18px; }

.big { font: 800 56px/1 var(--font-num); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; justify-content: center; padding: 8px 0; }
.big small { font-size: 22px; font-weight: 700; color: var(--ink-3); }
.big.caret::after { content: ""; width: 3px; height: 46px; background: var(--pri); align-self: center; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { min-height: 54px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); font: 700 22px var(--font-num); }
.keypad button:active { background: var(--surface-3); }

.prog { display: flex; flex-direction: column; gap: 6px; }
.prog .bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; display: flex; }
.prog .bar i { display: block; height: 100%; background: var(--pri); }
.prog .bar i.w { background: var(--warn); } .prog .bar i.b { background: var(--bad); } .prog .bar i.o { background: var(--info); } .prog .bar i.p { background: var(--pend); }
.prog .lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }

.est { background: var(--accent-soft); border-radius: var(--r-m); padding: 12px; font-size: 14px; }
.est b { color: var(--accent); font-size: 20px; }

.sheet-back { position: absolute; inset: 0; background: rgba(20,20,14,.45); display: flex; align-items: flex-end; z-index: 5; }
.sheet { width: 100%; background: var(--surface); border-radius: 22px 22px 0 0; padding: 18px 16px 18px; display: flex; flex-direction: column; gap: 12px; max-height: 92%; overflow: auto; }
.sheet .grab { width: 40px; height: 5px; border-radius: 99px; background: var(--surface-3); align-self: center; }
.ticket { background: var(--surface); color: var(--ink); border: 1px dashed var(--line); border-radius: var(--r-s); padding: 14px; font: 13px/1.5 var(--mono); }
.ticket .c { text-align: center; }
.ticket hr { border: 0; border-top: 1px dashed var(--line); }

.qr { display: block; width: 132px; height: 132px; margin: 0 auto; background: var(--qr-bg); padding: 6px; border-radius: 8px; border: 1px solid var(--line); }
.qr rect { fill: var(--qr-fg); }

.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; }
.sw { width: 50px; height: 30px; border-radius: 99px; background: var(--surface-3); position: relative; border: 0; flex: none; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-1); transition: left .15s; }
.sw.on { background: var(--pri); } .sw.on::after { left: 23px; }

.viewfinder { height: 150px; border-radius: var(--r-l); background: var(--brand-ink); position: relative; display: grid; place-items: center; color: var(--on-pri); overflow: hidden; }
.viewfinder::before { content: ""; position: absolute; inset: 26px 90px; border: 3px solid var(--brand); border-radius: 12px; }
.viewfinder::after { content: ""; position: absolute; left: 90px; right: 90px; top: 50%; height: 2px; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.viewfinder span { position: absolute; bottom: 8px; font-size: 13px; }

.detail { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.detail table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail th { text-align: right; font-weight: 600; color: var(--ink-3); padding: 4px 0 4px 6px; }
.detail th:first-child, .detail td:first-child { text-align: left; padding-left: 0; }
.detail td { text-align: right; padding: 5px 0 5px 6px; border-top: 1px solid var(--line); }

/* ============ decision + trace markers ============ */
.dm { display: inline-flex; align-items: center; gap: 3px; font: 700 11px var(--mono); color: var(--dec); background: var(--dec-soft); border: 1px dashed var(--dec); border-radius: 6px; padding: 1px 6px; vertical-align: middle; cursor: help; white-space: nowrap; }
body.hide-dm .dm { display: none; }

/* ============ web (admin + coop portal) ============ */
.web { display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: 56px 1fr; flex: 1; min-height: 0; font-size: 14px; }
.web-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.web-top .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.web-top .grow { flex: 1; }
.web-top .sel { height: 34px; border: 1px solid var(--line); border-radius: var(--r-s); display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 13px; background: var(--surface); white-space: nowrap; }
.web-top .who { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.web-top .who .avatar { width: 30px; height: 30px; font-size: 12px; border-radius: 99px; }
.web-nav { background: var(--surface); border-right: 1px solid var(--line); padding: 10px 8px; overflow: auto; }
.web-nav a { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-height: 38px; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.web-nav a.on { background: var(--pri-soft); color: var(--pri); font-weight: 700; }
.web-nav a .badge { margin-left: auto; background: var(--surface-3); color: var(--ink-2); }
.web-main > * { flex-shrink: 0; }
.web-main { overflow: auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
.pg-h { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pg-h h1 { font-size: 22px; margin: 0; }
.pg-h .crumb { font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.pg-h .grow { flex: 1; }
.web .btn { min-height: var(--tap-web); font-size: 14px; padding: 0 14px; border-radius: var(--r-s); gap: 6px; }
.web .btn.lg { min-height: 42px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { min-width: 0; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; }
.kpi small { display: block; color: var(--ink-3); font-size: 12px; }
.kpi b { display: block; font: 800 22px/1.3 var(--font-num); }
.kpi em { font-style: normal; font-size: 12px; }
.kpi .pill { white-space: normal; max-width: 100%; border-radius: 10px; }
.kpi.warn b { color: var(--warn); } .kpi.bad b { color: var(--bad); } .kpi.ok b { color: var(--ok); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-h h3 { margin: 0; font-size: 15px; }
.panel-h .grow { flex: 1; }
.panel-b { padding: 14px; }
.tbl-wrap { overflow: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-3); background: var(--surface-2); padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl tr.sel td { background: var(--pri-soft); }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--surface-2); }
.tbl .mono { font-family: var(--mono); font-size: 12px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters .chip { height: 32px; border: 1px solid var(--line); border-radius: 99px; padding: 0 12px; background: var(--surface); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.filters .chip.on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri); font-weight: 600; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.stepper { display: flex; flex-wrap: wrap; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.stepper div { flex: 1 1 130px; min-width: 0; padding: 10px 12px; font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--line); }
.stepper div:last-child { border-right: 0; }
.stepper b { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); font-size: 12px; flex: none; }
.stepper .done { color: var(--ok); } .stepper .done b { background: var(--ok); color: var(--on-pri); }
.stepper .on { color: var(--ink); font-weight: 700; background: var(--pri-soft); } .stepper .on b { background: var(--pri); color: var(--on-pri); }
.checks { display: grid; gap: 8px; }
.checks div { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.compbar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.compbar i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; }
.photo { height: 120px; border-radius: var(--r-s); background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px); display: grid; place-items: center; color: var(--ink-3); font-size: 12px; }
.dialog-back { position: absolute; inset: 0; background: rgba(20,20,14,.45); display: grid; place-items: center; z-index: 5; }
.dialog { width: min(480px, 92%); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-2); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialog h3 { margin: 0; font-size: 18px; }
.hash { font: 12px var(--mono); background: var(--surface-2); padding: 6px 8px; border-radius: var(--r-s); word-break: break-all; }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-3); }
.empty svg.i { width: 44px; height: 44px; margin-bottom: 8px; }

/* missing translation + pseudo-loc review aids */
body.show-missing .tx-miss { outline: 2px dotted var(--bad); outline-offset: 1px; }

/* ============ responsive viewer ============ */
@media (max-width: 1180px) { .vw { grid-template-columns: 220px minmax(0, 1fr); } .vw-spec { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } .vw { height: auto; } .vw-stage { overflow: visible; } }
@media (max-width: 760px) {
  .vw { display: block; }
  .vw-nav { display: none; }
  .vw-mobnav { display: block !important; }
  .vw-stage { padding: 12px 0; }
  .phone { width: 100%; max-width: 380px; height: 760px; border-radius: 0; padding: 0; box-shadow: none; }
  .phone .scr { border-radius: 0; }
  .vw-stage.desk { padding: 8px; }
}
.vw-mobnav { display: none; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.vw-mobnav select { width: 100%; height: 36px; }

/* web layout responds to its own frame width, not the viewport (viewer panels change the space) */
@container (max-width: 1080px) {
  .split, .w8grid { grid-template-columns: minmax(0, 1fr) !important; }
  .web-top .sel.opt { display: none; }
}
@container (max-width: 820px) {
  .web { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .web-top { flex-wrap: wrap; padding: 8px 12px; row-gap: 6px; }
  .web-top .who span { display: none; }
  .web-nav { display: flex; overflow-x: auto; padding: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .web-nav a { white-space: nowrap; }
  .web-main { padding: 14px 12px 30px; }
}
body.no-spec .vw { grid-template-columns: 250px minmax(0, 1fr) 0; }
body.no-spec .vw-spec { display: none; }

/* decision drafts (wave 3) */
.decide { border: 2px dashed var(--dec); background: var(--dec-soft); border-radius: var(--r-l); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.decide-h { display: flex; align-items: center; gap: 8px; color: var(--dec); }
.decide-d { font-size: 13px; color: var(--ink-2); }
.decide-o { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.decide-o button { text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: 8px 10px; min-height: 48px; min-width: 0; overflow-wrap: anywhere; }
.decide-o button.on { border-color: var(--dec); box-shadow: inset 0 0 0 1px var(--dec); }
.decide-o button b { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; }
.decide-o button small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
/* small helpers for wave 2/3 */
.stepq { display: inline-flex; align-items: center; gap: 4px; }
.stepq button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: 700 18px var(--font-num); }
.stepq b { min-width: 24px; text-align: center; }
.mapbox { border-radius: var(--r-l); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.mapbox svg { display: block; width: 100%; height: auto; }
.mapbox .road { stroke: var(--surface-3); stroke-width: 10; fill: none; stroke-linecap: round; }
.mapbox .track { stroke: var(--pri); stroke-width: 4; fill: none; stroke-dasharray: 2 6; stroke-linecap: round; }
.mapbox .route { stroke: var(--info); stroke-width: 3; fill: none; }
.mapbox circle.coop { fill: var(--surface); stroke: var(--pri); stroke-width: 3; }
.mapbox circle.coop.late { stroke: var(--bad); }
.mapbox circle.proc { fill: var(--brand-ink); }
.mapbox circle.truck { fill: var(--accent); }
.mapbox text { font: 600 11px var(--font); fill: var(--ink-2); }
.comp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.comp > div { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px; background: var(--surface); position: relative; overflow: hidden; min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; }
.comp > div i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pri-soft); }
.comp > div > * { position: relative; }
.comp small { color: var(--ink-3); font-size: 12px; }
.lcd { flex: 1; background: var(--surface-2); padding: 16px; display: flex; flex-direction: column; gap: 10px; font: 15px/1.5 var(--mono); }
.lcd .scrn { background: var(--brand); color: var(--brand-ink); border-radius: 8px; padding: 12px; min-height: 200px; white-space: pre-wrap; font-family: var(--font); font-size: 15px; }
.lcd .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lcd .keys button { min-height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font: 700 16px var(--font-num); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; position: relative; }
.bars i { flex: 1; background: var(--pri); border-radius: 3px 3px 0 0; min-width: 3px; }
.bars i.lo { background: var(--warn); }
.bars .line { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--bad); }
.yr { position: relative; height: 54px; background: var(--surface-2); border-radius: var(--r-s); margin-top: 6px; }
.yr .band { position: absolute; top: 6px; bottom: 6px; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 4px; font-size: 11px; color: var(--warn); padding: 2px 4px; overflow: hidden; white-space: nowrap; }
.yr-m { display: grid; grid-template-columns: repeat(12, minmax(0, 30fr)) minmax(0, 6fr); font-size: 11px; color: var(--ink-3); }
.matrix td.y { color: var(--ok); font-weight: 800; text-align: center; } .matrix td.n { color: var(--ink-3); text-align: center; }
.matrix td.conf { background: var(--bad-soft); }

.wv.w3 { background: var(--dec-soft); color: var(--dec); font-weight: 700; }
.vw-spec ol.rq { padding-left: 0; list-style: none; } .vw-spec ol.rq li { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; margin-bottom: 6px; }
.vw-spec ol.rq li b { font: 600 12px var(--mono); color: var(--pri); }
.web-nav .nav-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 12px 10px 4px; }
@container (max-width: 820px) { .web-nav .nav-h { display: none; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--brand-ink); color: var(--on-pri); padding: 10px 16px; border-radius: 99px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 50; }
.toast.on { opacity: 1; transform: translateX(-50%); }
a.chip { text-decoration: none; color: inherit; }
a.chip.on { color: var(--pri); }

/* presenter script */
.vw-spec .nt { border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--r-s); padding: 4px 12px 12px; margin: 10px 0 4px; background: var(--surface); }
.vw-spec .nt h4:first-child { margin-top: 10px; }
.vw-spec .nt-intro { font-size: 14px; line-height: 1.6; margin: 0; }
.vw-spec .nt-q { margin: 0 0 6px; border-left: 3px solid var(--pri); background: var(--pri-soft); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 6px 10px; }
.vw-spec .nt-q b { font: 600 12px var(--mono); color: var(--pri); } .vw-spec .nt-q span { font-size: 11px; color: var(--ink-2); }
.vw-spec .nt-q p { margin: 3px 0 0; } .vw-spec .nt-q .orig { color: var(--ink-2); font-size: 12px; font-style: italic; }
.vw-spec ol.nt-talk { padding-left: 0; list-style: none; } .vw-spec ol.nt-talk li { margin-bottom: 8px; }
.vw-spec ol.nt-talk p { margin: 3px 0 0 2px; }
.vw-spec .nt-go { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-s); padding: 3px 8px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.vw-spec .nt-go.on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri); }
.vw-spec .nt-p { border: 1px solid var(--line); border-radius: var(--r-s); margin-bottom: 6px; }
.vw-spec .nt-p summary { cursor: pointer; padding: 6px 10px; } .vw-spec .nt-p summary b { font: 600 12px var(--mono); color: var(--pri); }
.vw-spec .nt-p > p { margin: 0 10px 6px; font-size: 12px; }
.vw-spec ol.nt-steps { list-style: none; padding: 0 6px 6px; margin: 0; }
.vw-spec ol.nt-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 5px 4px; border-radius: var(--r-s); margin: 0; }
.vw-spec ol.nt-steps li.here { background: var(--pri-soft); box-shadow: inset 3px 0 0 var(--pri); }
.vw-spec ol.nt-steps .no { font: 600 11px var(--mono); color: var(--ink-3); text-align: right; padding-top: 1px; }
.vw-spec ol.nt-steps .sc { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.vw-spec .nt-scr { font: 600 11px var(--mono); color: var(--pri); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; text-decoration: none; }
.vw-spec .nt-here { font-size: 11px; font-weight: 700; color: var(--on-pri); background: var(--pri); border-radius: 4px; padding: 0 6px; }

/* branded sign-in (option B, wave 6) */
.brand-band { display: flex; align-items: center; gap: 14px; padding: 16px 14px; margin: -14px -14px 0; background: linear-gradient(135deg, var(--pri-soft), var(--surface-2)); border-bottom: 3px solid var(--brand); }
.brand-band .bb-t b { display: block; font-size: 22px; line-height: 1.2; }
.brand-band .bb-s { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.brand-band .bb-l { display: flex; align-items: center; gap: 6px; color: var(--pri); font-size: 13px; font-weight: 600; margin-top: 6px; }
.quiet-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); padding: 0 2px; flex-wrap: wrap; }

/* ============ charts and guidance (wave 7) ============ */
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; margin: 0 0 12px; }
.flow .fl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 12.5px; text-decoration: none; min-width: 0; }
.flow .fl .fl-ic { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); flex: none; }
.flow .fl.done { color: var(--ok); } .flow .fl.done .fl-ic { background: var(--ok); color: var(--on-pri); }
.flow .fl.on { color: var(--ink); font-weight: 700; border-color: var(--pri); background: var(--pri-soft); } .flow .fl.on .fl-ic { background: var(--pri); color: var(--on-pri); }
.flow .fl-ar { color: var(--ink-3); display: inline-flex; }
.flow.compact .fl { padding: 3px 8px 3px 4px; font-size: 12px; } .flow.compact .fl .fl-ic { width: 18px; height: 18px; }
.hbars { display: grid; gap: 6px; }
.hb { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.hb-l { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; } .hb-l small { display: block; color: var(--ink-3); font-size: 11.5px; }
.hb-t { position: relative; height: 14px; background: var(--surface-3); border-radius: 4px; overflow: visible; display: block; }
.hb-b { position: absolute; left: 0; top: 0; height: 100%; background: var(--pri); border-radius: 0 4px 4px 0; min-width: 2px; }
.hb-b.o { background: var(--info); } .hb-b.w { background: var(--warn); } .hb-b.b { background: var(--bad); } .hb-b.g { background: var(--pend); } .hb-b.a { background: var(--accent); }
.hb-b.s0 { background: var(--pri); } .hb-b.s1 { background: var(--info); } .hb-b.s2 { background: var(--accent); } .hb-b.s3 { background: var(--dec); }
.hb-ref { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--bad); z-index: 1; }
.hb-v { text-align: right; font-weight: 600; white-space: nowrap; }
.hb-leg { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } .hb-refk { width: 2px; height: 12px; background: var(--bad); display: inline-block; }
.hbars.grouped .hb { grid-template-columns: minmax(90px, 1fr) minmax(0, 3fr); } .hb-g { display: grid; gap: 2px; }
.hb-g .hb-t { height: 10px; } .hb-gr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, auto); gap: 6px; align-items: center; } .hb-g em { font-style: normal; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.hbars .legend .s0::before { background: var(--pri); } .hbars .legend .s1::before { background: var(--info); } .hbars .legend .s2::before { background: var(--accent); } .hbars .legend .s3::before { background: var(--dec); }
.wf { display: grid; gap: 6px; } .wf-r { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.wf-l { color: var(--ink-2); } .wf-t { position: relative; height: 16px; background: var(--surface-3); border-radius: 4px; }
.wf-b { position: absolute; top: 0; height: 100%; border-radius: 4px; } .wf-b.base { background: var(--pri); } .wf-b.minus { background: var(--warn); } .wf-b.plus { background: var(--info); } .wf-b.net { background: var(--ok); }
.wf-v { text-align: right; white-space: nowrap; } .wf-v.tot { font-weight: 800; }
.ring { display: inline-flex; align-items: center; gap: 10px; } .ring svg { width: 64px; height: 64px; flex: none; }
.ring .rg-t { fill: none; stroke: var(--surface-3); stroke-width: 7; } .ring .rg-v { fill: none; stroke: var(--pri); stroke-width: 7; stroke-linecap: round; }
.ring.ok .rg-v { stroke: var(--ok); } .ring.warn .rg-v { stroke: var(--warn); } .ring.bad .rg-v { stroke: var(--bad); }
.ring .rg-c b { display: block; font-size: 20px; line-height: 1.1; } .ring .rg-c small { color: var(--ink-3); font-size: 12px; }
.rings { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.meter { display: grid; gap: 4px; } .mt-t { position: relative; height: 12px; background: var(--surface-3); border-radius: 99px; }
.mt-v { position: absolute; left: 0; top: 0; height: 100%; background: var(--pri); border-radius: 99px; } .mt-v.w { background: var(--warn); } .mt-v.b { background: var(--bad); }
.mt-m { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--ink-2); } .mt-m em { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.mt-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.tl { display: grid; gap: 0; } .tl-e { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 0 0 12px; position: relative; font-size: 13px; }
.tl-e::before { content: ''; position: absolute; left: 8px; top: 14px; bottom: -2px; width: 2px; background: var(--line); } .tl-e:last-child::before { display: none; }
.tl-d { width: 14px; height: 14px; border-radius: 99px; border: 3px solid var(--ok); background: var(--surface); margin-top: 2px; position: relative; z-index: 1; }
.tl-e.on .tl-d { border-color: var(--pri); background: var(--pri); } .tl-e.todo .tl-d { border-color: var(--line); } .tl-e.bad .tl-d { border-color: var(--bad); background: var(--bad); }
.tl-e.todo { color: var(--ink-3); } .tl-w { font-size: 12px; color: var(--ink-3); } .tl-x { color: var(--ink-2); font-size: 12.5px; }
.ln svg { width: 100%; height: auto; display: block; } .ln .ln-p { fill: none; stroke: var(--pri); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ln .ln-a { fill: var(--pri-soft); } .ln .ln-d { fill: var(--surface); stroke: var(--pri); stroke-width: 2; vector-effect: non-scaling-stroke; } .ln .ln-d.bad { stroke: var(--bad); fill: var(--bad); }
.ln .ln-ref { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; } .ln text { font: 600 13px var(--font-num); fill: var(--ink-2); }
.ln .ln-rt { fill: var(--bad); } .ln .ln-vt.bad { fill: var(--bad); } .ln .ln-x { fill: var(--ink-3); font-weight: 400; }
.colc { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-top: 14px; }
.colc i { flex: 1; min-width: 3px; background: var(--pri); border-radius: 3px 3px 0 0; } .colc i.lo { background: var(--warn); }
.colc-ref { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--bad); } .colc-ref em { position: absolute; right: 0; top: -16px; font: 600 11px var(--font-num); color: var(--bad); font-style: normal; }
.strip { display: flex; flex-wrap: wrap; gap: 3px; } .sd { width: 30px; height: 30px; border-radius: 6px; background: var(--surface-3); display: grid; place-items: center; font: 600 11px var(--font-num); color: var(--ink-2); }
.sd.pool { background: var(--pri-soft); color: var(--pri); } .sd.released { background: var(--pri); color: var(--on-pri); } .sd.frozen { background: var(--bad-soft); color: var(--bad); }
.sd.batch { background: var(--accent); color: var(--on-pri); } .sd.today { box-shadow: inset 0 0 0 2px var(--ink); } .sd.off { opacity: .45; }
.sd-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); } .sd-k::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--surface-3); }
.sd-k.pool::before { background: var(--pri-soft); border: 1px solid var(--pri); } .sd-k.released::before { background: var(--pri); } .sd-k.frozen::before { background: var(--bad-soft); border: 1px solid var(--bad); } .sd-k.batch::before { background: var(--accent); }
.spark { width: 80px; height: 24px; display: block; margin-top: 4px; } .spark polyline { fill: none; stroke: var(--pri); stroke-width: 1.5; } .spark circle { fill: var(--pri); }
.spark.warn polyline { stroke: var(--warn); } .spark.warn circle { fill: var(--warn); } .spark.bad polyline { stroke: var(--bad); } .spark.bad circle { fill: var(--bad); }
.guide { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); background: var(--info-soft); border-left: 3px solid var(--info); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 8px 10px; margin: 0 0 10px; }
.guide svg { color: var(--info); flex: none; margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; } .legend > span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--pri)); }

/* narrow screens: tables become cards */
.tbl-wrap { container-type: inline-size; }
@container (max-width: 560px) {
  .tbl-wrap .tbl thead { display: none; }
  .tbl-wrap .tbl, .tbl-wrap .tbl tbody, .tbl-wrap .tbl tr { display: block; width: 100%; }
  .tbl-wrap .tbl tr { border: 1px solid var(--line); border-radius: var(--r-m); padding: 6px 10px; margin: 0 0 8px; background: var(--surface); }
  .tbl-wrap .tbl td { display: flex; justify-content: space-between; gap: 10px; border: 0; padding: 4px 0; white-space: normal; text-align: right; }
  .tbl-wrap .tbl td[data-l]::before { content: attr(data-l); color: var(--ink-3); font-size: 12px; text-align: left; flex: none; max-width: 45%; }
  .tbl-wrap .tbl td:not([data-l]) { justify-content: flex-end; }
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cards.c2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cardi { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; color: inherit; text-decoration: none; min-width: 0; }
.cardi.warn { border-color: var(--warn); } .cardi.bad { border-color: var(--bad); } .cardi.ok { border-color: var(--ok); }
.ci-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--pri-soft); color: var(--pri); display: grid; place-items: center; flex: none; }
.cardi.warn .ci-ic { background: var(--warn-soft); color: var(--warn); } .cardi.bad .ci-ic { background: var(--bad-soft); color: var(--bad); }
.ci-b { min-width: 0; flex: 1; display: grid; gap: 6px; } .ci-h { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; } .ci-h b { font-size: 15px; }
.ci-s { color: var(--ink-3); font-size: 12.5px; } .ci-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 4px 10px; font-size: 13px; }
.ci-m span small { display: block; color: var(--ink-3); font-size: 11px; } .ci-a { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: start; }
.bcol { background: var(--surface-2); border-radius: var(--r-m); padding: 8px; display: grid; gap: 8px; min-width: 0; }
.bcol-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; font-size: 13px; color: var(--ink-2); } .bcol-h .num { background: var(--surface); border-radius: 99px; padding: 0 8px; font-weight: 700; }
.bcol.warn .bcol-h { color: var(--warn); } .bcol.bad .bcol-h { color: var(--bad); } .bcol.ok .bcol-h { color: var(--ok); }
.bcol .cardi { padding: 10px; } .bcol-e { color: var(--ink-3); text-align: center; padding: 10px; font-size: 12px; }

/* ============ page operation flow (guided walkthrough) ============ */
.opflow { width: 100%; max-width: 1180px; margin: 0 auto 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 8px; align-self: stretch; }
.of-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .of-h b { font-size: 14px; } .of-h .grow { flex: 1; }
.of-h button { height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 0 10px; font-size: 13px; cursor: pointer; }
.of-h button.pri { background: var(--pri); border-color: var(--pri); color: var(--on-pri); font-weight: 700; } .of-h button:disabled { opacity: .45; cursor: default; }
.of-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--pri-soft); border-radius: var(--r-s); padding: 8px 10px; font-size: 14px; }
.of-now.away { background: var(--warn-soft); } .of-n { font-weight: 800; color: var(--pri); white-space: nowrap; } .of-now.away .of-n { color: var(--warn); }
.of-r { font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.of-x { font-size: 12px; font-weight: 700; color: var(--warn); border: 1px dashed var(--warn); border-radius: 99px; padding: 0 8px; }
.of-a { flex: 1 1 200px; min-width: 0; } .of-now button { height: 28px; border: 1px solid var(--warn); background: var(--surface); color: var(--warn); border-radius: var(--r-s); padding: 0 10px; font-size: 12px; cursor: pointer; }
.of-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
.of-c { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 3px 8px 3px 4px; font-size: 11.5px; cursor: pointer; text-align: left; color: var(--ink-2); }
.of-c b { grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); font-size: 11px; }
.of-c span { font-weight: 600; white-space: nowrap; } .of-c em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.of-c.done b { background: var(--ok); color: var(--on-pri); } .of-c.on { border-color: var(--pri); background: var(--pri-soft); color: var(--ink); } .of-c.on b { background: var(--pri); color: var(--on-pri); }
.of-c.exc { border-style: dashed; } .of-ar { color: var(--ink-3); font-style: normal; }
.vw-stage { flex-direction: column; align-items: center; } .vw-stage.desk { align-items: stretch; }
.bcol .cards { grid-template-columns: minmax(0, 1fr); } .bcol .cardi { min-width: 0; } .bcol .ci-h b { overflow-wrap: anywhere; }

/* GPS map (C06) */
.mapbox.gps svg { width: 100%; height: auto; }
.mapbox.gps .farm { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.mapbox.gps .trk circle { fill: var(--info); stroke: var(--surface); stroke-width: 2 } .mapbox.gps .trk text { font: 600 10px var(--mono); fill: var(--info); }
.mapbox.gps .trk.off circle { fill: var(--pend); } .mapbox.gps .trk.off text { fill: var(--pend); }
.mapbox.gps .coop.here { stroke: var(--pri); stroke-width: 3; }