/* WORKSHOP (/ui/workshop-page.js). Built from the mockup the owner approved on
   2026-09-23 ("Make workshop page mockup. More premium." then "Let's build").
   Light, the system's own tokens, and one signature: a registration is drawn
   as the plate on the car. Fraunces for the figures and Barlow Condensed for
   the plates; the page loads both itself the first time it opens, and falls
   back to Georgia / Arial Narrow until they arrive.
   Every class is wk- and sits under .rlx. */

/* ── in the app: a page that scrolls as a document ── */
.rlx.rl-page.wk-pg.active{display:block;overflow:auto}
.rlx.wk-pg .wk-in{max-width:1320px;margin:0 auto;padding-bottom:48px;display:flex;flex-direction:column;gap:24px}
.rlx.wk-pg .rl-pg-hd{align-items:flex-start;margin-bottom:0}
.rlx.wk-pg .rl-pg-hd h1{font-size:30px;letter-spacing:-.035em}
.rlx.wk-pg .rl-pg-hd p{font-size:14px;margin-top:7px;color:var(--rl-ink3)}
.rlx.wk-pg .rl-pg-hd p b{color:var(--rl-ink);font-weight:700}
.rlx .wk-eyebrow{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--rl-ink3);margin-bottom:7px}

/* ── the plate: the registration as it reads on the car ── */
.rlx .wk-plate{display:inline-flex;align-items:stretch;flex:none;height:24px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1.5px #161a22,0 1px 1px rgba(16,24,40,.08);overflow:hidden;vertical-align:middle}
.rlx .wk-plate .in{flex:none;width:15px;background:#1d4fc4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.rlx .wk-plate .in i{width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.rlx .wk-plate .in b{font-size:5.5px;font-weight:800;line-height:1;letter-spacing:.02em;color:#fff}
.rlx .wk-plate .n{display:flex;align-items:center;padding:0 8px 0 7px;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:16px;font-weight:700;line-height:1;letter-spacing:.05em;color:#10131a;white-space:nowrap}
.rlx .wk-plate.is-sm{height:20px;border-radius:3.5px}
.rlx .wk-plate.is-sm .in{width:12px}
.rlx .wk-plate.is-sm .in i{width:4px;height:4px}
.rlx .wk-plate.is-sm .in b{font-size:4.5px}
.rlx .wk-plate.is-sm .n{font-size:13.5px;padding:0 6px}
.rlx .wk-plate.is-lg{height:36px;border-radius:6px;box-shadow:inset 0 0 0 2px #161a22,0 2px 4px rgba(16,24,40,.08)}
.rlx .wk-plate.is-lg .in{width:21px;gap:2px}
.rlx .wk-plate.is-lg .in i{width:8px;height:8px}
.rlx .wk-plate.is-lg .in b{font-size:7.5px}
.rlx .wk-plate.is-lg .n{font-size:24px;padding:0 13px 0 11px}
.rlx .wk-noplate{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line);font-size:11.5px;font-weight:600;color:var(--rl-ink3);white-space:nowrap}

/* ── a job's stage: one colour per stage, text a shade darker than its dot ── */
.rlx [data-st="booked"]{--c:#8a92a6;--t:#475067}
.rlx [data-st="in_progress"]{--c:var(--rl-info);--t:#1d4fc4}
.rlx [data-st="awaiting_approval"]{--c:var(--rl-warn);--t:#a15c07}
.rlx [data-st="ready"]{--c:var(--rl-ok);--t:#067a55}
.rlx [data-st="delivered"]{--c:#b3b9c7;--t:#475067}
.rlx [data-st="cancelled"]{--c:var(--rl-danger);--t:#be123c}
.rlx .wk-st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:800;white-space:nowrap;color:var(--t,var(--rl-ink2));background:color-mix(in srgb,var(--c,var(--rl-ink3)) 11%,#fff)}
.rlx .wk-st i,.rlx .wk-pill i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--c,var(--rl-ink3))}
.rlx .wk-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:800;white-space:nowrap;color:var(--t,var(--rl-ink2));background:color-mix(in srgb,var(--c,var(--rl-ink3)) 11%,#fff)}
.rlx .wk-pill.is-ok{--c:var(--rl-ok);--t:#067a55}
.rlx .wk-pill.is-info{--c:var(--rl-info);--t:#1d4fc4}
.rlx .wk-pill.is-acc{--c:var(--rl-acc);--t:#b93520}
.rlx .wk-pill.is-warn{--c:var(--rl-warn);--t:#a15c07}
.rlx .wk-pill.is-bad{--c:var(--rl-danger);--t:#be123c}
.rlx .wk-pill.is-mute{--c:#8a92a6;--t:#475067}

/* ── the four figures ── */
.rlx .wk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rlx .wk-kpi{display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 20px;border-radius:var(--rl-r20);background:#fff;border:1px solid var(--rl-line);box-shadow:var(--rl-sh-xs);transition:transform .2s var(--rl-ease),box-shadow .2s,border-color .2s}
.rlx .wk-kpi:hover{transform:translateY(-2px);box-shadow:var(--rl-sh-md);border-color:#d7dbe4}
.rlx .wk-kpi:focus-visible{outline:0;box-shadow:0 0 0 4px var(--rl-ring)}
.rlx .wk-kpi.is-on{border-color:var(--rl-ink);box-shadow:0 0 0 1px var(--rl-ink),var(--rl-sh-sm)}
.rlx .wk-kpi .hd{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;font-weight:700;color:var(--rl-ink2)}
.rlx .wk-kpi .hd .rl-tile{width:34px;height:34px;border-radius:10px}
.rlx .wk-kpi .fig{display:flex;align-items:baseline;gap:8px;min-width:0}
.rlx .wk-kpi .fig b{font-family:"Fraunces",Georgia,serif;font-size:32px;font-weight:600;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--rl-ink);white-space:nowrap}
.rlx .wk-kpi .fig span{font-size:13px;font-weight:700;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-kpi .sub{font-size:12.5px;color:var(--rl-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── a section's heading ── */
.rlx .wk-sec-hd{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.rlx .wk-sec-hd h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--rl-ink)}
.rlx .wk-sec-hd>span{font-size:13.5px;color:var(--rl-ink3)}

/* ── the bay: one column per stage ── */
.rlx .wk-bay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.84fr);gap:14px;align-items:start}
.rlx .wk-col{min-width:0}
.rlx .wk-col-hd{display:flex;align-items:center;gap:8px;height:26px;padding:0 4px;margin-bottom:10px}
.rlx .wk-col-hd>i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.rlx .wk-col-hd>b{font-size:13px;font-weight:800;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-col-hd .ct{flex:none;display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:99px;background:var(--rl-surface3);font-size:11.5px;font-weight:800;color:var(--rl-ink2)}
.rlx .wk-col-hd .sm{margin-left:auto;font-size:12px;font-weight:700;color:var(--rl-ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rlx .wk-col-bd{display:flex;flex-direction:column;gap:10px;min-height:340px;padding:10px;border-radius:18px;background:var(--rl-surface2)}
.rlx .wk-col.is-done .wk-col-bd{gap:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--rl-line)}
.rlx .wk-col-none{padding:22px 10px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--rl-ink3)}
.rlx .wk-car{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--rl-line);box-shadow:var(--rl-sh-xs);cursor:pointer;transition:transform .2s var(--rl-ease),box-shadow .2s,border-color .2s;animation:wk-in .3s var(--rl-ease) both}
@keyframes wk-in{from{opacity:0;transform:translateY(6px)}}
.rlx .wk-car:hover{transform:translateY(-2px);box-shadow:var(--rl-sh-md);border-color:#d7dbe4}
.rlx .wk-car:focus-visible{outline:0;box-shadow:0 0 0 4px var(--rl-ring)}
.rlx .wk-car .top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.rlx .wk-car .tm{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-car .nm{min-width:0}
.rlx .wk-car .nm b{display:block;font-size:14px;font-weight:800;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-car .nm em{display:block;font-style:normal;font-size:12.5px;color:var(--rl-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-car .ft{display:flex;align-items:center;gap:8px;min-width:0;padding-top:10px;border-top:1px dashed #dfe2ea}
.rlx .wk-car .step{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700;color:var(--t)}
.rlx .wk-car .step>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-car .step.is-late{color:#be123c}
.rlx .wk-car .amt{margin-left:auto;flex:none;font-size:13.5px;font-weight:800;color:var(--rl-ink);font-variant-numeric:tabular-nums}
.rlx .wk-car .act{display:flex;justify-content:flex-end;margin-top:-4px}
.rlx .wk-link{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;margin:-3px -6px;border-radius:7px;font-size:12px;font-weight:800;color:var(--rl-acc2);white-space:nowrap}
.rlx .wk-link:hover{background:var(--rl-acc-soft)}
.rlx .wk-link[disabled]{opacity:.5;cursor:default}
.rlx .wk-told{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#067a55;white-space:nowrap}
.rlx .wk-new{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1.5px dashed #cfd4df;border-radius:14px;font-size:13px;font-weight:700;color:var(--rl-ink2);text-align:center;transition:.15s}
.rlx .wk-new:hover{border-color:var(--rl-ink3);color:var(--rl-ink);background:#fff}
.rlx .wk-done{display:flex;flex-direction:column;gap:6px;padding:11px 8px;border-bottom:1px solid var(--rl-line);border-radius:10px;cursor:pointer}
.rlx .wk-done:hover{background:#fafbfc}
.rlx .wk-done .r{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rlx .wk-done .r b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.rlx .wk-done>span{font-size:12px;color:var(--rl-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-done-note{display:flex;align-items:flex-start;gap:8px;padding:10px 8px 2px;font-size:12px;line-height:1.45;color:var(--rl-ink3)}
.rlx .wk-done-note .rl-ic{flex:none;margin-top:1px}

/* ── follow-ups · the month ── */
.rlx .wk-two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.rlx .wk-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:22px 24px;border-radius:22px;background:#fff;border:1px solid var(--rl-line);box-shadow:var(--rl-sh-xs)}
.rlx .wk-card-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rlx .wk-card-hd h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.005em;color:var(--rl-ink)}
.rlx .wk-card-hd>span{font-size:12.5px;font-weight:600;color:var(--rl-ink3)}
.rlx .wk-card-hd .rl-live{margin-left:auto;top:0}
.rlx .wk-fus{display:flex;flex-direction:column;margin-top:-4px}
.rlx .wk-fu{display:flex;align-items:center;gap:14px;padding:12px 8px;border-top:1px solid var(--rl-line);border-radius:10px;cursor:pointer;transition:background .12s}
.rlx .wk-fu:first-child{border-top:0}
.rlx .wk-fu:hover{background:#fafbfc}
.rlx .wk-fu:focus-visible{outline:0;box-shadow:0 0 0 3px var(--rl-ring)}
.rlx .wk-fu .rl-tile{width:36px;height:36px;border-radius:11px}
.rlx .wk-fu .t{flex:1;min-width:0}
.rlx .wk-fu .t b{display:block;font-size:13.5px;font-weight:700;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-fu .t b em{font-style:normal;font-weight:500;color:var(--rl-ink3)}
.rlx .wk-fu .t>span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--rl-ink3)}
.rlx .wk-fu .t>span b{display:inline;color:var(--rl-ink)}
.rlx .wk-fu .r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.rlx .wk-fu .tm{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-fu .rl-btn{margin-top:2px}
.rlx .wk-fu-more{padding:4px 8px 0;font-size:12.5px;color:var(--rl-ink3)}
.rlx .wk-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:var(--rl-surface2);font-size:12.5px;line-height:1.5;color:var(--rl-ink2)}
.rlx .wk-note>.rl-ic{flex:none;margin-top:1px;color:var(--rl-ink3)}
.rlx .wk-note p{flex:1;min-width:0;margin:0}
.rlx .wk-note .wk-link{margin-top:-1px}
.rlx .wk-quiet{padding:18px 4px 6px;text-align:center;font-size:13px;line-height:1.5;color:var(--rl-ink3)}
.rlx .wk-quiet b{display:block;margin-bottom:3px;font-size:14px;color:var(--rl-ink)}
.rlx .wk-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rlx .wk-stat{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border-radius:16px;background:var(--rl-surface2)}
.rlx .wk-stat>span{font-size:12.5px;font-weight:700;color:var(--rl-ink2)}
.rlx .wk-stat>b{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:600;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-stat>em{font-style:normal;font-size:12px;color:var(--rl-ink3)}
.rlx .wk-ahead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1.5px dashed #dfe2ea;font-size:12.5px;line-height:1.45;color:var(--rl-ink2)}
.rlx .wk-ahead b{color:var(--rl-ink)}
.rlx .wk-ahead>.rl-ic{flex:none;color:var(--rl-ink3)}

/* ── every vehicle ── */
.rlx .wk-list{border-radius:22px;background:#fff;border:1px solid var(--rl-line);box-shadow:var(--rl-sh-xs);overflow:hidden}
.rlx .wk-list-hd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rl-line);flex-wrap:wrap}
.rlx .wk-chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.rlx .wk-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--rl-line);background:#fff;font-size:12.5px;font-weight:700;color:var(--rl-ink2);white-space:nowrap;transition:.13s}
.rlx .wk-chip:hover{border-color:#cfd4df;color:var(--rl-ink)}
.rlx .wk-chip i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--rl-ink3)}
.rlx .wk-chip.is-on{background:var(--rl-ink);border-color:var(--rl-ink);color:#fff}
.rlx .wk-chip.is-on i{color:rgba(255,255,255,.7)}
.rlx .wk-list-hd .rl-search{margin-left:auto;flex:0 1 320px;height:40px}
.rlx .wk-table th{padding:10px 14px;background:rgba(248,249,251,.96)}
.rlx .wk-table td{padding:12px 14px}
.rlx .wk-table th.num,.rlx .wk-table td.num{text-align:right}
.rlx .wk-table td.num{font-variant-numeric:tabular-nums}
.rlx .wk-veh{display:flex;align-items:center;gap:12px;min-width:0}
.rlx .wk-veh .t,.rlx .wk-who,.rlx .wk-next{min-width:0}
.rlx .wk-veh .t b,.rlx .wk-who b{display:block;font-size:13.5px;font-weight:700;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-veh .t>span{display:block;font-size:12px;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-who>span{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-last{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.rlx .wk-last>span{font-size:12px;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-km{font-family:"DM Mono",ui-monospace,monospace;font-size:13px;color:var(--rl-ink2);white-space:nowrap}
.rlx .wk-next>b{display:block;font-size:13px;font-weight:600;color:var(--rl-ink);white-space:nowrap}
.rlx .wk-next.is-due>b{font-weight:800;color:#a15c07}
.rlx .wk-next.is-bad>b{font-weight:800;color:#be123c}
.rlx .wk-next.is-mute>b{font-weight:500;color:var(--rl-ink3)}
.rlx .wk-next>span{display:block;margin-top:2px;font-size:11.5px;color:var(--rl-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-spent{font-size:13.5px;font-weight:800;color:var(--rl-ink)}
.rlx .wk-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.rlx .wk-list-ft{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--rl-line);font-size:12.5px;color:var(--rl-ink3)}
.rlx .wk-list-ft b{color:var(--rl-ink)}
.rlx .wk-list-ft .rl-btn{margin-left:auto}
.rlx .wk-cards{display:none}
.rlx .wk-list .rl-blank{padding:44px 20px}
.rlx .wk-skel{height:74px;border-radius:14px;background:linear-gradient(90deg,#eef0f4 0%,#f7f8fa 50%,#eef0f4 100%);background-size:200% 100%;animation:rl-shimmer 1.2s infinite linear}

/* ── the job card: a side panel ── */
.rlx .rl-drawer.is-wk{width:min(660px,calc(100vw - 24px))}
.rlx .wk-jc-hd{flex:none;display:flex;align-items:flex-start;gap:14px;padding:20px 24px 16px}
.rlx .wk-jc-hd .t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rlx .wk-jc-hd .t .wk-eyebrow{margin:0}
.rlx .wk-jc-hd h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--rl-ink)}
.rlx .wk-jc-hd h2 em{font-style:normal;font-weight:500;color:var(--rl-ink3)}
.rlx .wk-jc{padding:0 0 12px}
.rlx .wk-jc>section{display:flex;flex-direction:column;gap:12px;padding:18px 24px;border-top:1px solid var(--rl-line)}
.rlx .wk-jc>section.is-flat{border-top:0;padding-top:4px}
.rlx .wk-jc h3{margin:0;font-size:14px;font-weight:800;color:var(--rl-ink)}
.rlx .wk-h3{display:flex;align-items:center;gap:10px;min-height:30px}
.rlx .wk-h3 .sp{flex:1}
.rlx .wk-h3>span:not(.sp){font-size:12.5px;font-weight:600;color:var(--rl-ink3)}
.rlx .wk-cust{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--rl-surface2)}
.rlx .wk-cust .t{flex:1;min-width:0}
.rlx .wk-cust .t b{display:block;font-size:14px;font-weight:800;color:var(--rl-ink)}
.rlx .wk-cust .t>span{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;color:var(--rl-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-steps{position:relative;display:flex;align-items:flex-start;padding-top:2px}
.rlx .wk-steps::before{content:"";position:absolute;left:10%;right:10%;top:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rl-ok) 0 var(--p,0%),var(--rl-line) var(--p,0%) 100%)}
.rlx .wk-step{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 2px;border-radius:10px;text-align:center}
.rlx .wk-step>i{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px #d5d9e3;color:transparent;transition:.2s var(--rl-ease)}
.rlx .wk-step>i::after{content:"";width:7px;height:7px;border-radius:50%;background:#cfd4df}
.rlx .wk-step.is-done>i{background:var(--rl-ok);box-shadow:none;color:#fff}
.rlx .wk-step.is-done>i::after,.rlx .wk-step.is-now>i::after{display:none}
.rlx .wk-step.is-now>i{background:var(--c,var(--rl-ink));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--rl-ink)) 18%,transparent);color:#fff}
.rlx .wk-step>b{font-size:12px;font-weight:700;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-step.is-done>b{color:var(--rl-ink)}
.rlx .wk-step.is-now>b{color:var(--t,var(--rl-ink));font-weight:800}
.rlx .wk-step>span{min-height:14px;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;color:var(--rl-ink3);white-space:nowrap}
.rlx .wk-step:hover>i{box-shadow:inset 0 0 0 1.5px var(--rl-ink3)}
.rlx .wk-step.is-done:hover>i,.rlx .wk-step.is-now:hover>i{filter:brightness(1.06)}
.rlx .wk-step:focus-visible{outline:0;box-shadow:0 0 0 3px var(--rl-ring)}
.rlx .wk-appr{display:flex;flex-direction:column;gap:12px;margin:0 24px 6px;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--rl-warn) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-warn) 26%,transparent)}
.rlx .wk-appr .hd{display:flex;align-items:center;gap:9px;color:#a15c07}
.rlx .wk-appr .hd b{flex:1;min-width:0;font-size:14px;font-weight:800}
.rlx .wk-appr .hd>span{font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;white-space:nowrap}
.rlx .wk-appr .bd{display:flex;align-items:flex-end;gap:16px}
.rlx .wk-appr .side{display:flex;flex-direction:column;gap:8px;flex:0 0 170px}
.rlx .wk-appr .side p{margin:0;font-size:11.5px;line-height:1.45;color:#a15c07}
.rlx .wk-wa{flex:1;min-width:0;max-width:330px;border-radius:4px 14px 14px 14px;background:#fff;box-shadow:0 1px 1px rgba(16,24,40,.1);overflow:hidden}
.rlx .wk-wa .tx{padding:10px 12px 4px;font-size:12.5px;line-height:1.45;color:#16181d;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.rlx .wk-wa .tm{padding:0 12px 6px;text-align:right;font-family:"DM Mono",ui-monospace,monospace;font-size:10px;color:var(--rl-ink3)}
.rlx .wk-wa .bt{display:flex;border-top:1px solid #eef0f4}
.rlx .wk-wa .bt span{flex:1 1 0;height:36px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:800;color:#0b7fc2}
.rlx .wk-wa .bt span+span{border-left:1px solid #eef0f4}
.rlx .wk-jc .rl-callout{margin:0 24px 6px}
.rlx .wk-unit{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--rl-line);border-radius:var(--rl-r10);background:#fff;color:var(--rl-ink3);box-shadow:var(--rl-sh-xs);transition:border-color .15s,box-shadow .15s}
.rlx .wk-unit:focus-within{border-color:var(--rl-acc);box-shadow:0 0 0 4px var(--rl-ring);color:var(--rl-ink)}
.rlx .wk-unit input.rl-bare{font-family:"DM Mono",ui-monospace,monospace;font-size:14px!important}
.rlx .wk-unit em{font-style:normal;font-size:12.5px;color:var(--rl-ink3)}
.rlx .wk-reg{text-transform:uppercase;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:17px!important;font-weight:700!important;letter-spacing:.06em}
.rlx .wk-combo{position:relative}
.rlx .wk-combo-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;display:flex;flex-direction:column;max-height:220px;overflow:auto;padding:5px;border-radius:var(--rl-r12);background:#fff;box-shadow:var(--rl-sh-lg)}
.rlx .wk-combo-list[hidden]{display:none}
.rlx .wk-combo-list button{padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--rl-ink)}
.rlx .wk-combo-list button:hover,.rlx .wk-combo-list button:focus-visible{background:var(--rl-surface2);outline:0}
.rlx .wk-lines{display:flex;flex-direction:column;gap:6px}
.rlx .wk-ln{display:grid;grid-template-columns:minmax(0,1fr) 62px 96px 86px 30px;gap:8px;align-items:center}
.rlx .wk-ln.hd{font-size:11.5px;font-weight:700;color:var(--rl-ink3);padding:0 2px}
.rlx .wk-ln.hd .amt{font-size:11.5px;font-weight:700;color:var(--rl-ink3)}
.rlx .wk-ln .n,.rlx .wk-ln .amt,.rlx .wk-ln.hd .r{text-align:right}
.rlx .wk-ln input.n{text-align:right;font-variant-numeric:tabular-nums}
.rlx .wk-ln .amt{font-size:13.5px;font-weight:700;color:var(--rl-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rlx .wk-sum{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--rl-surface2)}
.rlx .wk-sum>div{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--rl-ink2)}
.rlx .wk-sum>div>span:first-child{flex:1}
.rlx .wk-sum>div>b{font-variant-numeric:tabular-nums;color:var(--rl-ink)}
.rlx .wk-sum .wk-unit{width:140px;height:34px}
.rlx .wk-sum .tot{align-items:baseline;padding-top:8px;border-top:1px solid #dfe2ea}
.rlx .wk-sum .tot>span:first-child{font-size:14px;font-weight:800;color:var(--rl-ink)}
.rlx .wk-sum .tot>b{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:600;letter-spacing:-.01em}
.rlx .wk-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rlx .wk-ph{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--rl-surface3)}
.rlx .wk-ph img{display:block;width:100%;height:100%;object-fit:cover}
.rlx .wk-ph>span{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:99px;background:rgba(15,18,24,.72);color:#fff;font-size:10.5px;font-weight:700;backdrop-filter:blur(4px)}
.rlx .wk-ph>span.is-no{background:rgba(190,18,60,.86)}
.rlx .wk-file{position:relative;overflow:hidden}
.rlx .wk-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.rlx .wk-hint{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;color:#067a55;background:color-mix(in srgb,var(--rl-ok) 8%,#fff)}
.rlx .wk-hint.is-mute{color:var(--rl-ink2);background:var(--rl-surface2)}
.rlx .wk-hint>.rl-ic{flex:none;margin-top:1px}
.rlx .wk-hist{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--rl-line)}
.rlx .wk-hist:first-of-type{border-top:0}
.rlx .wk-hist>i{flex:none;width:8px;height:8px;border-radius:50%;background:#d5d9e3}
.rlx .wk-hist .t{flex:1;min-width:0}
.rlx .wk-hist .t b{display:block;font-size:13px;font-weight:700;color:var(--rl-ink)}
.rlx .wk-hist .t b .km{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;color:var(--rl-ink2)}
.rlx .wk-hist .t>span{display:block;font-size:12px;color:var(--rl-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .wk-hist>b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.rlx .wk-jc-ft .hint{color:#a15c07}
.rlx .wk-del{color:#be123c!important}
.rlx .wk-del:hover{background:#fff1f3!important}

/* ── ask for approval ── */
.rlx .rl-dlg.is-wka{width:min(820px,calc(100vw - 32px))}
.rlx .wk-apd{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.rlx .wk-apd textarea.rl-ipt{height:280px;font-size:13.5px!important;line-height:1.5}
.rlx .wk-apd .rl-cb-phone{width:280px}
.rlx .wk-apd .rl-cb-screen{height:420px}

/* ── follow-up settings: the form, the phone beside it ── */
.rlx .rl-dlg.is-wkf{width:min(1000px,calc(100vw - 32px));height:min(760px,calc(100vh - 48px))}
.rlx .rl-dlg.is-wkf .rl-ov-bd.wkf{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 336px;padding:0;overflow:hidden;border-top:1px solid var(--rl-line)}
.rlx .wkf-main{min-height:0;overflow-y:auto;padding:4px 24px 20px}
.rlx .wkf-side{min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 22px 18px;background:linear-gradient(180deg,#f8f6f3,#f2efea);border-left:1px solid var(--rl-line)}
.rlx .wkf-side-hd{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rlx .wkf-side-hd .rl-seg{flex:1;max-width:260px}
.rlx .wkf-side .rl-cb-phone{flex:none}
.rlx .wkf-note{display:flex;align-items:flex-start;gap:6px;max-width:286px;margin:0;font-size:12px;line-height:1.45;color:var(--rl-ink3)}
.rlx .wkf-note .rl-ic{flex:none;margin-top:1px}
.rlx .wkf-blk{display:flex;flex-direction:column;gap:12px;padding:18px 0;border-top:1px solid #f0f1f5}
.rlx .wkf-blk:first-child{border-top:0}
.rlx .wkf-blk.is-off>:not(.wkf-top){opacity:.45;pointer-events:none}
.rlx .wkf-top{display:flex;align-items:flex-start;gap:12px}
.rlx .wkf-top .rl-tile{width:36px;height:36px;border-radius:11px}
.rlx .wkf-top .t{flex:1;min-width:0}
.rlx .wkf-top .t b{display:block;font-size:14.5px;font-weight:800;color:var(--rl-ink)}
.rlx .wkf-top .t span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--rl-ink3)}
.rlx .wkf-days{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--rl-ink2)}
.rlx .wkf-step{display:inline-flex;align-items:center;gap:2px;height:38px;padding:0 3px;border:1px solid var(--rl-line);border-radius:11px;background:#fff;box-shadow:var(--rl-sh-xs)}
.rlx .wkf-step button{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--rl-ink2)}
.rlx .wkf-step button:hover{background:var(--rl-surface2);color:var(--rl-ink)}
.rlx .wkf-step b{width:28px;text-align:center;font-family:"DM Mono",ui-monospace,monospace;font-size:14px;font-weight:500;color:var(--rl-ink)}
.rlx .wkf-vars{display:flex;flex-direction:column;gap:8px}
.rlx .wkf-var{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center}
.rlx .wkf-var.has-fixed{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr)}
.rlx .wkf-var>span{height:30px;display:grid;place-items:center;border-radius:8px;background:var(--rl-acc-soft);font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;color:var(--rl-acc2)}
.rlx .wkf-empty{display:flex;align-items:center;gap:12px;padding:13px;border-radius:var(--rl-r12);box-shadow:inset 0 0 0 1.5px var(--rl-line);border:0}
.rlx .wkf-empty .t{flex:1;min-width:0;font-size:13px;color:var(--rl-ink3)}
.rlx .wkf-empty .t b{display:block;font-size:13.5px;color:var(--rl-ink)}
.rlx .wkf-why{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;font-weight:600;color:#b45309}
.rlx .wkf-why>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .wkf-why.is-ok{color:var(--rl-ok)}
@media (max-width:900px){.rlx .rl-dlg.is-wkf .rl-ov-bd.wkf{grid-template-columns:minmax(0,1fr) 312px}.rlx .wkf-side{padding:14px 12px}}

/* ── narrower windows ── */
@media (max-width:1240px){
  .rlx .wk-bay{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rlx .wk-col.is-done{display:none}
  .rlx .wk-kpi .fig b{font-size:28px}
}
@media (max-width:1100px){
  .rlx .wk-two{grid-template-columns:minmax(0,1fr)}
  .rlx .wk-table .wk-col-km,.rlx .wk-table .wk-col-last{display:none}
}
@media (max-width:980px){
  .rlx .wk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .wk-bay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .wk-col-bd{min-height:0}
  .rlx .wk-apd{grid-template-columns:minmax(0,1fr)}
  .rlx .wk-apd .rl-cb-phone{display:none}
}

/* ── a phone: the header, the figures, the list, the follow-ups ──
   The old theme collapses .content while a page like this is up; put it back
   and let the page's own column scroll (as Webinars does). The bay board and
   the month are desktop views; on a phone the list, filtered to the bay, is
   the board. */
@media (max-width:760px){
  body:has(#page-workshop.wk-pg.active) .content{height:auto!important;padding:0!important;overflow:visible!important}
  #page-workshop.wk-pg.active .wk-in{padding:0 16px 96px;gap:18px}
  .rlx.wk-pg .rl-pg-hd{padding:0}
  /* the app's own top bar already says Workshop */
  .rlx.wk-pg .rl-pg-hd h1{display:none}
  .rlx.wk-pg .rl-pg-hd .wk-eyebrow{margin:12px 0 0}
  .rlx.wk-pg .rl-pg-hd .acts .rl-btn{height:40px;min-height:40px!important}
  .rlx.wk-pg .rl-pg-hd .acts .is-dark{width:40px;padding:0}
  .rlx .wk-kpis{gap:10px}
  .rlx .wk-kpi{padding:14px;gap:9px;border-radius:18px}
  .rlx .wk-kpi .hd{font-size:12px;gap:8px}
  .rlx .wk-kpi .hd .rl-tile{width:28px;height:28px;border-radius:9px}
  .rlx .wk-kpi .fig b{font-size:24px}
  .rlx .wk-kpi .fig span{display:none}
  .rlx .wk-kpi .sub{font-size:11.5px}
  .rlx .wk-bay-sec,.rlx .wk-month{display:none}
  .rlx .wk-list-sec{order:3}
  .rlx .wk-two{order:4}
  .rlx .wk-list{border-radius:18px}
  .rlx .wk-list-hd{padding:12px;gap:10px}
  .rlx .wk-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px;width:calc(100% + 24px)}
  .rlx .wk-chips::-webkit-scrollbar{display:none}
  .rlx .wk-chip{height:36px;border-radius:999px}
  .rlx .wk-list-hd .rl-search{flex:1 1 100%;margin:0;order:-1}
  .rlx .wk-table{display:none}
  .rlx .wk-cards{display:flex;flex-direction:column;gap:10px;padding:12px}
  .rlx .wk-cd{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:16px;border:1px solid var(--rl-line);background:#fff;cursor:pointer}
  .rlx .wk-cd .r1{display:flex;align-items:center;gap:10px;min-width:0}
  .rlx .wk-cd .r1 .wk-st{margin-left:auto}
  .rlx .wk-cd .r2{display:flex;align-items:baseline;gap:8px;min-width:0}
  .rlx .wk-cd .r2 b{flex:1;min-width:0;font-size:14.5px;font-weight:800;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rlx .wk-cd .r2 strong{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
  .rlx .wk-cd .r3{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--rl-ink3)}
  .rlx .wk-cd .r3>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rlx .wk-list-ft{padding:12px 16px}
  .rlx .wk-card{padding:16px;border-radius:18px}
  .rlx .wk-fu{gap:12px;padding:11px 2px}
  .rlx .wk-fu .rl-tile{width:32px;height:32px}
  .rlx .wk-fu .r .tm{display:none}
  /* the job card: full screen, as every side panel is on a phone (the width
     above would otherwise outrank the system's own phone rule) */
  .rlx .rl-drawer.is-wk{width:auto}
  .rlx .rl-dlg.is-wka{width:auto}
  .rlx .wk-jc-hd{padding:16px 16px 12px}
  .rlx .wk-jc>section{padding:16px}
  .rlx .wk-appr,.rlx .wk-jc .rl-callout{margin-left:16px;margin-right:16px}
  .rlx .wk-appr .bd{flex-direction:column;align-items:stretch}
  .rlx .wk-appr .side{flex:none}
  .rlx .wk-steps::before{left:9%;right:9%}
  .rlx .wk-step>b{font-size:10.5px}
  .rlx .wk-step>span{display:none}
  .rlx .wk-ln{grid-template-columns:minmax(0,1fr) 52px 84px 30px}
  .rlx .wk-ln .amt,.rlx .wk-ln.hd .r.amt{display:none}
  .rlx .wk-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .wk-jc-ft{flex-wrap:wrap}
  .rlx .wk-jc-ft .hint{display:none}
  /* the settings dialog: one column, the phone under the form */
  .rlx .rl-dlg.is-wkf{width:auto;height:auto}
  .rlx .rl-dlg.is-wkf .rl-ov-bd.wkf{display:block;overflow-y:auto}
  .rlx .wkf-main,.rlx .wkf-side{overflow:visible}
  .rlx .wkf-main{padding:0 16px 16px}
  .rlx .wkf-side{border-left:0;border-top:1px solid var(--rl-line)}
  .rlx .rl-dlg.is-wkf .rl-ov-ft{flex-wrap:wrap}
  .rlx .rl-dlg.is-wkf .wkf-why{flex-basis:100%}
  .rlx .rl-dlg.is-wkf .rl-ov-ft .sp{display:none}
  .rlx .wkf-var.has-fixed{grid-template-columns:52px minmax(0,1fr)}
  .rlx .wkf-var.has-fixed>input{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.rlx .wk-car{animation:none}.rlx .rl-live i{animation:none}}