/* ═══════════════════════════════════════════════════════════════════════════
   qc-ui-flow.css — kit pieces MES-Lite does not have (26 Sep 2026)

   QCUI.money · QCUI.timeline · QCUI.actionBar · docSheet · fileTiles · fileViewer (+ the approve button and the
   60 / 76 px touch sizes it offers); for long forms (26 Sep 2026) formSteps ·
   splitAside · factList · todoList and segmented({ fit }). Agreed in public/kit/design/rgp.html §10
   before any screen used them; shown in Administration → UI Kit.

   WHY A SEPARATE FILE. qc-ui.css is GENERATED from MES-Lite's compiled CSS by
   scripts/port-mes-kit.py and is never hand-edited. MES-Lite has none of these
   pieces, and its build changed on 25 Sep 2026 so the generator cannot rebuild
   today without pulling MES-Lite's newer CSS into every screen. So, like
   qc-shell.css and qc-station-header.css, these live here — fenced under
   .qc-ui.qc-ui and !important exactly as the generated rules are, so the same
   index.html globals lose to them. Colours are tokens only (brand-tokens.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── money ─────────────────────────────────────────────────────────────────── */
.qc-ui.qc-ui .qcui-money{display:flex!important;align-items:stretch!important;height:42px!important;min-height:42px!important;border:1px solid var(--pg-border,#e4e4e7)!important;border-radius:.5rem!important;overflow:hidden!important;background-color:rgb(250 250 250)!important;min-width:0!important}
.qc-ui.qc-ui .qcui-money:focus-within{border-color:var(--brand)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)!important}
.qc-ui.qc-ui .qcui-money-cur{display:flex!important;align-items:center!important;padding:0 .7rem!important;background-color:#f4f4f5!important;border-right:1px solid var(--pg-border,#e4e4e7)!important;color:#52525b!important;font-weight:600!important;flex:none!important}
.qc-ui.qc-ui.qc-ui .qcui-money .qcui-money-input{flex:1 1 auto!important;min-width:0!important;width:100%!important;height:auto!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;text-align:right!important;font-variant-numeric:tabular-nums!important;padding:0 .75rem!important}
.qc-ui.qc-ui .qcui-money-val{flex:1 1 auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;padding:0 .75rem!important;font-variant-numeric:tabular-nums!important;font-weight:600!important;color:#18181b!important;white-space:nowrap!important;overflow:hidden!important}
.qc-ui.qc-ui .qcui-money.is-ro{background-color:#f4f4f5!important}
@media (max-width:720px){ .qc-ui.qc-ui .qcui-money{height:44px!important;min-height:44px!important} }

/* ── timeline ──────────────────────────────────────────────────────────────── */
.qc-ui.qc-ui .qcui-tl{display:flex!important;flex-direction:column!important;padding-left:2px!important}
.qc-ui.qc-ui .qcui-tl-round{font-size:.68rem!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:#71717a!important;margin:.25rem 0 .6rem 2.4rem!important}
.qc-ui.qc-ui .qcui-tl-step{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;column-gap:.75rem!important;position:relative!important;padding:0 0 1rem 0!important;background:transparent!important;text-align:left!important}
.qc-ui.qc-ui .qcui-tl-step:last-child{padding-bottom:0!important}
.qc-ui.qc-ui .qcui-tl-step::before{content:""!important;position:absolute!important;left:13px!important;top:28px!important;bottom:0!important;width:2px!important;background:#e4e4e7!important}
.qc-ui.qc-ui .qcui-tl-step:last-child::before,.qc-ui.qc-ui .qcui-tl-step:has(+ .qcui-tl-round)::before{display:none!important}
.qc-ui.qc-ui .qcui-tl-dot{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;border-radius:9999px!important;display:grid!important;place-items:center!important;font-size:.72rem!important;font-weight:800!important;border:2px solid #d4d4d8!important;background:#fff!important;color:#71717a!important;z-index:1!important;box-sizing:border-box!important}
.qc-ui.qc-ui .qcui-tl-step.is-done .qcui-tl-dot{background:var(--tone-green-solid)!important;border-color:var(--tone-green-solid)!important;color:#fff!important}
.qc-ui.qc-ui .qcui-tl-step.is-rejected .qcui-tl-dot{background:var(--tone-red-solid)!important;border-color:var(--tone-red-solid)!important;color:#fff!important}
.qc-ui.qc-ui .qcui-tl-step.is-back .qcui-tl-dot{background:var(--tone-orange-solid)!important;border-color:var(--tone-orange-solid)!important;color:#fff!important}
.qc-ui.qc-ui .qcui-tl-step.is-now .qcui-tl-dot{border-color:var(--tone-amber-solid)!important;color:var(--tone-amber-fg)!important;box-shadow:0 0 0 4px var(--tone-amber-bg)!important}
.qc-ui.qc-ui .qcui-tl-step.is-skip .qcui-tl-dot{border-style:dashed!important}
.qc-ui.qc-ui .qcui-tl-step.is-skip .qcui-tl-label{color:#71717a!important}
.qc-ui.qc-ui .qcui-tl-body{min-width:0!important;padding-top:3px!important}
/* a signature beside the name (RGP, 28 Sep 2026): a third column, on white like the paper */
.qc-ui.qc-ui .qcui-tl-step.has-sig{grid-template-columns:28px minmax(0,1fr) auto!important}
.qc-ui.qc-ui .qcui-tl-sig{display:block!important;height:44px!important;width:auto!important;max-width:150px!important;object-fit:contain!important;background:#fff!important;border:1px solid #e4e4e7!important;border-radius:.4rem!important;padding:2px 6px!important;align-self:start!important}
@media (max-width:480px){.qc-ui.qc-ui .qcui-tl-sig{height:34px!important;max-width:100px!important}}
.qc-ui.qc-ui .qcui-tl-label{font-weight:650!important;font-size:.875rem!important;color:#18181b!important;display:flex!important;align-items:center!important;gap:.5rem!important;flex-wrap:wrap!important}
.qc-ui.qc-ui .qcui-tl-who{font-size:.8rem!important;color:#52525b!important;margin-top:2px!important;overflow-wrap:anywhere!important}
.qc-ui.qc-ui .qcui-tl-comment{margin-top:.4rem!important;font-size:.8rem!important;color:#27272a!important;background:#f4f4f5!important;border-radius:.5rem!important;border-left:3px solid #d4d4d8!important;padding:.4rem .65rem!important;overflow-wrap:anywhere!important}

/* ── action bar ─────────────────────────────────────────────────────────────
   sticky, not fixed: a fixed bar ignores the sidebar and the iPad's own bars
   (the Station Submit-bar lesson, 20–21 Sep 2026). It is the LAST child of the
   screen, so it rides the bottom edge while the screen scrolls under it. */
.qc-ui.qc-ui .qcui-actionbar{position:sticky!important;bottom:0!important;z-index:40!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:.6rem!important;margin-top:1rem!important;padding:.75rem 1rem!important;background:color-mix(in srgb,#fff 94%,transparent)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;border-top:1px solid #e4e4e7!important;box-shadow:0 -6px 16px -12px rgba(0,0,0,.25)!important}
/* end: pushed to the bottom of a full-height column screen (its own margin would beat a screen's) */
.qc-ui.qc-ui .qcui-actionbar.is-end{margin-top:auto!important}
.qc-ui.qc-ui .qcui-actionbar-note{margin-right:auto!important;font-size:.8125rem!important;color:#52525b!important;min-width:0!important}
.qc-ui.qc-ui .qcui-actionbar-btns{display:flex!important;gap:.6rem!important;flex-wrap:wrap!important;justify-content:flex-end!important}
@media (max-width:720px){
  .qc-ui.qc-ui .qcui-actionbar{padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom))!important}
  .qc-ui.qc-ui .qcui-actionbar-note{flex:1 1 100%!important;margin:0!important}
  .qc-ui.qc-ui .qcui-actionbar-btns{flex:1 1 100%!important}
  .qc-ui.qc-ui .qcui-actionbar-btns > button{flex:1 1 0!important;min-width:0!important;padding-left:.5rem!important;padding-right:.5rem!important}
  .qc-ui.qc-ui .qcui-actionbar-btns > button > svg{flex:none!important}
  /* four or more actions: two per row on a phone, never four squeezed words (RGP pass, 26 Sep 2026) */
  .qc-ui.qc-ui .qcui-actionbar-btns:has(> button:nth-child(4)){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .qc-ui.qc-ui .qcui-actionbar-btns:has(> button:nth-child(4)) > button:last-child:nth-child(odd){grid-column:1 / -1!important}
}

/* the approve button — a MEANING, fixed green in every company (never Branding),
   the pair of the kit's btn-danger. White on --tone-green-solid measures 5.0:1. */
.qc-ui.qc-ui .qcui-btn-approve{border-radius:.5rem!important;background-color:var(--tone-green-solid)!important;color:#fff!important;padding:.5rem 1rem!important;font-weight:600!important;border:0!important}
.qc-ui.qc-ui .qcui-btn-approve:hover{filter:brightness(.93)!important}
/* touch sizes for a gate / a station: 60 px, and 76 px for the one big action.
   Both axes and both min- clamps (ui-kit.md: a sized control states all four). */
.qc-ui.qc-ui .qcui-btn-lg{min-height:60px!important;height:auto!important;font-size:1rem!important;padding:.6rem 1.25rem!important;border-radius:.75rem!important}
.qc-ui.qc-ui .qcui-btn-xl{min-height:76px!important;height:auto!important;font-size:1.06rem!important;padding:.7rem 1.4rem!important;border-radius:.85rem!important;white-space:normal!important;text-align:center!important;line-height:1.25!important}
/* Inside a kiosk frame (.qcui-kiosk: Station Mode) the kit shrinks every primary /
   secondary button to 48 px at a heavier weight — a gate's 60 / 76 px must still win. */
.qc-ui.qc-ui.qc-ui.qcui-kiosk button.qcui-btn-lg{min-height:60px!important;height:auto!important;font-size:1rem!important;padding:.6rem 1.25rem!important}
.qc-ui.qc-ui.qc-ui.qcui-kiosk button.qcui-btn-xl{min-height:76px!important;height:auto!important;font-size:1.06rem!important;padding:.7rem 1.4rem!important}
/* A text box at a gate: 60 px, the size of the buttons beside it (QCUI.input size 'lg'
   is just this class on a kit .input; the kit's 42 px would otherwise win). */
.qc-ui.qc-ui.qc-ui input.input.qcui-input-lg,.qc-ui.qc-ui.qc-ui.qcui-kiosk input.input.qcui-input-lg{height:60px!important;min-height:60px!important;font-size:1.05rem!important}
.qc-ui.qc-ui button[disabled].qcui-btn-xl,.qc-ui.qc-ui button[disabled].qcui-btn-lg{background:#f4f4f5!important;color:#52525b!important;border:1px dashed #d4d4d8!important;cursor:not-allowed!important;opacity:1!important}

/* ── a number tile that opens its list (QCUI.statTile({ attrs })) ──────────────
   The same box as the plain tile; a button, so a keyboard reaches it, and the
   index.html globals (button{color:#FFF!important}) are beaten here. */
.qc-ui.qc-ui button.qcui-tile-link{width:100%!important;cursor:pointer!important;font:inherit!important;color:#18181b!important;background-color:#fff!important;transition:box-shadow .15s,border-color .15s!important}
.qc-ui.qc-ui button.qcui-tile-link:hover{border-color:var(--brand)!important;box-shadow:0 4px 14px -8px rgba(0,0,0,.35)!important}
.qc-ui.qc-ui button.qcui-tile-link:focus-visible{outline:2px solid var(--brand)!important;outline-offset:2px!important}

/* ── stepper: − n + ─────────────────────────────────────────────────────────── */
.qc-ui.qc-ui .qcui-stepper{display:inline-flex!important;align-items:stretch!important;height:42px!important;min-height:42px!important;border:1px solid var(--pg-border,#e4e4e7)!important;border-radius:.5rem!important;overflow:hidden!important;background:#fff!important;flex:none!important}
.qc-ui.qc-ui .qcui-stepper-btn{width:42px!important;min-width:42px!important;height:auto!important;min-height:0!important;display:grid!important;place-items:center!important;background:#f4f4f5!important;color:#18181b!important;border:0!important;border-radius:0!important;padding:0!important;cursor:pointer!important}
.qc-ui.qc-ui .qcui-stepper-btn:active{background:#e4e4e7!important}
.qc-ui.qc-ui.qc-ui .qcui-stepper .qcui-stepper-input{width:4.5rem!important;min-width:0!important;height:auto!important;min-height:0!important;border:0!important;border-left:1px solid var(--pg-border,#e4e4e7)!important;border-right:1px solid var(--pg-border,#e4e4e7)!important;border-radius:0!important;box-shadow:none!important;text-align:center!important;font-weight:700!important;font-variant-numeric:tabular-nums!important;padding:0 .25rem!important;background:#fff!important}
.qc-ui.qc-ui .qcui-stepper.is-lg{height:60px!important;min-height:60px!important;border-radius:.75rem!important}
.qc-ui.qc-ui .qcui-stepper.is-lg .qcui-stepper-btn{width:60px!important;min-width:60px!important}
.qc-ui.qc-ui.qc-ui .qcui-stepper.is-lg .qcui-stepper-input{width:5rem!important;font-size:1.25rem!important}
@media (max-width:720px){ .qc-ui.qc-ui .qcui-stepper{height:44px!important;min-height:44px!important} .qc-ui.qc-ui .qcui-stepper-btn{width:44px!important;min-width:44px!important} }

/* ── the assistant pill never sits on the action bar ─────────────────────────
   The QC Assistant pill (#qcai-toggle, chatbot_frontend.js) is fixed bottom-right
   above everything, which is exactly where an action bar puts its main button —
   Submit, Approve, Let out could not be pressed (found by rgp-screens-check,
   26 Sep 2026). Like Visitors' tab bar (visitor-management.css), the pill is lifted
   clear while a screen that shows an action bar is open; both stay reachable.
   Outside the .qc-ui fence on purpose: the pill is not a kit element. */
body:has(section.active .qcui-actionbar) #qcai-toggle { bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important; }

/* ── a long form, made easy (26 Sep 2026, RGP New pass; design reference rgp.html §3b) ── */
/* segmented, sized to its words (QCUI.segmented({ fit: true })) */
.qc-ui.qc-ui.qc-ui .qcui-seg.qcui-seg-fit{display:inline-flex!important;width:auto!important;max-width:100%!important;flex-wrap:wrap!important}
.qc-ui.qc-ui.qc-ui .qcui-seg.qcui-seg-fit .qcui-seg-btn{flex:0 0 auto!important;padding:0 1.1rem!important;min-width:4.5rem!important}
/* the step bar */
.qc-ui.qc-ui .qcui-fsteps{display:flex!important;flex-wrap:wrap!important;gap:.4rem!important;margin:0!important;padding:0!important;list-style:none!important}
.qc-ui.qc-ui .qcui-fstep{display:inline-flex!important;align-items:center!important;gap:.45rem!important;height:32px!important;padding:0 .8rem 0 .35rem!important;border-radius:9999px!important;border:1px solid var(--pg-border,#e4e4e7)!important;background:#fff!important;color:#71717a!important;font-size:.8rem!important;font-weight:600!important;white-space:nowrap!important}
.qc-ui.qc-ui .qcui-fstep-n{width:22px!important;height:22px!important;border-radius:9999px!important;display:grid!important;place-items:center!important;background:#f4f4f5!important;color:#3f3f46!important;font-size:.72rem!important;font-weight:700!important;flex:none!important}
.qc-ui.qc-ui .qcui-fstep.is-done{border-color:var(--brand)!important;color:var(--brand-dark)!important}
.qc-ui.qc-ui .qcui-fstep.is-done .qcui-fstep-n{background:var(--brand)!important;color:var(--brand-contrast,#fff)!important}
.qc-ui.qc-ui .qcui-fstep.is-now{border-color:#3f3f46!important;color:#18181b!important}
.qc-ui.qc-ui .qcui-fstep.is-now .qcui-fstep-n{background:#18181b!important;color:#fff!important}
/* main + a side panel that stays in view */
.qc-ui.qc-ui .qcui-split{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:1rem!important;align-items:start!important}
.qc-ui.qc-ui .qcui-split-main,.qc-ui.qc-ui .qcui-split-aside{display:flex!important;flex-direction:column!important;gap:1rem!important;min-width:0!important}
.qc-ui.qc-ui .qcui-split-aside{order:-1!important}
@media (min-width:1100px){
  .qc-ui.qc-ui .qcui-split{grid-template-columns:minmax(0,1fr) 340px!important;gap:1.25rem!important}
  .qc-ui.qc-ui .qcui-split-aside{order:0!important;position:sticky!important;top:.75rem!important}
}
/* label : value summary */
.qc-ui.qc-ui .qcui-facts{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:.35rem .9rem!important;margin:0!important;font-size:.85rem!important}
.qc-ui.qc-ui .qcui-facts dt{color:#71717a!important;font-weight:500!important}
.qc-ui.qc-ui .qcui-facts dd{margin:0!important;text-align:right!important;font-weight:600!important;color:#18181b!important;overflow-wrap:anywhere!important}
.qc-ui.qc-ui .qcui-facts dd.is-strong{font-size:1.05rem!important;font-weight:750!important}
/* what is left before an action */
.qc-ui.qc-ui .qcui-todo{display:flex!important;flex-direction:column!important;gap:.4rem!important;margin:0!important;padding:0!important;list-style:none!important;font-size:.84rem!important}
.qc-ui.qc-ui .qcui-todo li{display:flex!important;align-items:center!important;gap:.5rem!important}
.qc-ui.qc-ui .qcui-todo li.is-done{color:var(--tone-green-fg)!important}
.qc-ui.qc-ui .qcui-todo li.is-todo{color:var(--tone-amber-fg)!important;font-weight:600!important}

/* ── a record that reads like its paper (26 Sep 2026, RGP pass; design reference rgp.html §5b) ── */
.qc-ui.qc-ui .qcui-facts.is-doc{grid-template-columns:max-content minmax(0,1fr)!important;gap:.3rem 1rem!important}
.qc-ui.qc-ui .qcui-facts.is-doc dd{text-align:left!important}
.qc-ui.qc-ui .qcui-doc{background-color:#fff!important;border:1px solid var(--pg-border,#e4e4e7)!important;border-radius:.875rem!important;overflow:hidden!important;min-width:0!important}
.qc-ui.qc-ui .qcui-doc-top{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:1.25rem!important;padding:1.1rem 1.4rem!important;border-bottom:2px solid #18181b!important}
.qc-ui.qc-ui .qcui-doc-left{min-width:0!important;flex:1 1 auto!important}
.qc-ui.qc-ui .qcui-doc-logo{display:block!important;max-height:48px!important;max-width:200px!important;width:auto!important;height:auto!important;object-fit:contain!important;margin:0 0 .6rem!important}
.qc-ui.qc-ui .qcui-doc-right{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:.3rem!important;text-align:right!important;flex:none!important}
/* in the right-aligned number block the copy button goes BEFORE the number, so the number ends flush
   with the lines under it, next to the QR (owner, 28 Sep 2026) */
.qc-ui.qc-ui .qcui-doc-right .qcui-ref{flex-direction:row-reverse!important}
/* the QR as tall as the header beside it (owner, 28 Sep 2026), square, 72–140 px */
.qc-ui.qc-ui .qcui-doc-aside{flex:none!important;align-self:stretch!important;display:flex!important;align-items:center!important}
.qc-ui.qc-ui .qcui-doc-aside svg{height:100%!important;width:auto!important;aspect-ratio:1/1!important;min-height:72px!important;max-height:140px!important;display:block!important}
.qc-ui.qc-ui .qcui-doc-title{text-align:center!important;font-weight:800!important;font-size:.82rem!important;letter-spacing:.07em!important;text-transform:uppercase!important;padding:.55rem 1rem!important;border-bottom:1px solid var(--pg-border,#e4e4e7)!important;background-color:#f4f4f5!important;color:#18181b!important}
.qc-ui.qc-ui .qcui-doc-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;border-bottom:1px solid var(--pg-border,#e4e4e7)!important}
.qc-ui.qc-ui .qcui-doc-row:last-child{border-bottom:0!important}
.qc-ui.qc-ui .qcui-doc-row.is-one{grid-template-columns:minmax(0,1fr)!important}
.qc-ui.qc-ui .qcui-doc-b{padding:.9rem 1.4rem!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:.5rem!important}
.qc-ui.qc-ui .qcui-doc-b + .qcui-doc-b{border-left:1px solid var(--pg-border,#e4e4e7)!important}
.qc-ui.qc-ui .qcui-doc-lbl{font-size:.68rem!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:#71717a!important}
.qc-ui.qc-ui .qcui-doc-n{font-weight:600!important;letter-spacing:0!important;text-transform:none!important}
.qc-ui.qc-ui .qcui-doc-empty{font-size:.84rem!important;color:#71717a!important;margin:0!important}
@media (max-width:720px){
  .qc-ui.qc-ui .qcui-doc-top{flex-wrap:wrap!important;padding:.9rem 1rem!important}
  .qc-ui.qc-ui .qcui-doc-right{align-items:flex-start!important;text-align:left!important}
  .qc-ui.qc-ui .qcui-doc-aside{display:none!important}
  .qc-ui.qc-ui .qcui-doc-logo{max-height:40px!important;max-width:140px!important}
  .qc-ui.qc-ui .qcui-doc-row{grid-template-columns:minmax(0,1fr)!important}
  .qc-ui.qc-ui .qcui-doc-b{padding:.8rem 1rem!important}
  .qc-ui.qc-ui .qcui-doc-b + .qcui-doc-b{border-left:0!important;border-top:1px solid var(--pg-border,#e4e4e7)!important}
}
/* file tiles + the viewer (buttons: the index.html button globals are beaten here) */
.qc-ui.qc-ui .qcui-files{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;gap:.6rem!important}
.qc-ui.qc-ui button.qcui-file{display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:left!important;padding:0!important;margin:0!important;border:1px solid var(--pg-border,#e4e4e7)!important;border-radius:.6rem!important;overflow:hidden!important;background-color:#fff!important;color:#18181b!important;cursor:pointer!important;min-width:0!important;height:auto!important;min-height:0!important;box-shadow:none!important}
.qc-ui.qc-ui button.qcui-file:hover{border-color:var(--brand)!important}
.qc-ui.qc-ui button.qcui-file:focus-visible{outline:2px solid var(--brand)!important;outline-offset:2px!important}
.qc-ui.qc-ui .qcui-file-pv{height:88px!important;display:grid!important;place-items:center!important;background-color:#f4f4f5!important;color:#71717a!important;overflow:hidden!important}
.qc-ui.qc-ui .qcui-file.is-pdf .qcui-file-pv{color:var(--tone-red-fg)!important}
.qc-ui.qc-ui .qcui-file-pv img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.qc-ui.qc-ui .qcui-files.is-contain .qcui-file-pv{background-color:#fff!important}
.qc-ui.qc-ui .qcui-files.is-contain .qcui-file-pv img{object-fit:contain!important;padding:.3rem!important}
.qc-ui.qc-ui .qcui-file-nm{font-size:.75rem!important;font-weight:600!important;padding:.45rem .6rem 0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.qc-ui.qc-ui .qcui-file-meta{font-size:.68rem!important;color:#71717a!important;padding:0 .6rem .45rem!important}
.qcui-viewer{display:flex;justify-content:center}
.qcui-viewer-img{max-width:100%;max-height:calc(100dvh - 220px);object-fit:contain;display:block}
.qcui-viewer-pdf{width:100%;height:calc(100dvh - 220px);border:0;display:block}
/* docViewer: an A4 document the app draws (RGP challan) — the frame fills the popup */
.qcui-viewer-frame{width:100%;height:calc(100dvh - 200px);border:0;display:block;border-radius:.5rem}

/* ── a drawn signature (QCUI.signaturePad) — white paper in every theme; the pen is black ── */
.qc-ui .qcui-sig,.qcui-sig{display:flex;flex-direction:column;gap:.35rem;max-width:520px}
.qcui-sig .qcui-sig-pad{width:100%;height:auto;aspect-ratio:520/160;background:#fff;border:1px dashed #a1a1aa;border-radius:.5rem;touch-action:none;cursor:crosshair;display:block}
.qcui-sig .qcui-sig-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.qcui-sig .qcui-sig-hint{font-size:.75rem;color:#71717a}
.qc-ui.qc-ui button.qcui-sig-clear,button.qcui-sig-clear{background:transparent!important;color:#3f3f46!important;border:1px solid #d4d4d8!important;border-radius:.4rem!important;padding:.2rem .7rem!important;font-size:.8rem!important;height:auto!important;min-height:0!important;box-shadow:none!important}

/* ── an approval workflow read as a flow (QCUI.bandBox · stepNo · route; rgp.html §8) ── */
.qc-ui.qc-ui .qcui-band{border:1px solid var(--pg-border,#e4e4e7)!important;border-radius:.75rem!important;padding:.75rem .9rem!important;display:flex!important;flex-direction:column!important;gap:.6rem!important;background-color:#fff!important;min-width:0!important}
.qc-ui.qc-ui .qcui-band-head{display:flex!important;align-items:center!important;gap:.6rem!important;flex-wrap:wrap!important;min-height:32px!important}
.qc-ui.qc-ui .qcui-band-title{font-weight:750!important;font-size:.95rem!important;color:#18181b!important;font-variant-numeric:tabular-nums!important}
.qc-ui.qc-ui .qcui-band-sp{flex:1 1 auto!important}
.qc-ui.qc-ui .qcui-band-acts{display:flex!important;align-items:center!important;gap:.5rem!important;flex:none!important}
.qc-ui.qc-ui .qcui-stepno{width:26px!important;height:26px!important;min-width:26px!important;border-radius:9999px!important;background-color:#f4f4f5!important;color:#3f3f46!important;display:grid!important;place-items:center!important;font-weight:800!important;font-size:.72rem!important}
.qc-ui.qc-ui .qcui-route{display:flex!important;align-items:center!important;gap:.4rem!important;flex-wrap:wrap!important}
.qc-ui.qc-ui .qcui-route-st{border:1px solid var(--pg-border,#e4e4e7)!important;border-radius:9999px!important;padding:.2rem .7rem!important;font-size:.8rem!important;font-weight:600!important;color:#18181b!important;background-color:#fff!important}
.qc-ui.qc-ui .qcui-route-st.is-cond{border-style:dashed!important;color:var(--tone-violet-fg)!important;background-color:var(--tone-violet-bg)!important}
.qc-ui.qc-ui .qcui-route-ar{color:#a1a1aa!important;font-weight:700!important}

/* ── a toolbar's gap IS its spacing (28 Sep 2026, Walkabout Activity Log) ──
   The generated kit's `button.btn-primary+button{margin-left:.75rem}` is one element
   more specific than its own `.qcui-toolbar>button{margin:0}`, so a second text button
   in a toolbar got .75rem ON TOP of the gap — and in the phone grid below it sat 12px
   in from its column. Same selector weight, loaded later, so this wins. (Here, not in
   scripts/port-mes-kit.py, because the current MES-Lite build no longer matches what
   the generator expects; move it into the generator at the next regeneration.) */
.qc-ui.qc-ui.qc-ui .qcui-toolbar>button+button{margin:0!important}

/* ── a toolbar of filters that stays tidy on a phone (opt-in: .qcui-toolbar.is-grid) ──
   RGP lists, 27 Sep 2026: four filters wrapped into four ragged rows. On a phone the
   search takes the first row with the refresh icon beside it, the filters sit two per
   row, and one marked .qcui-toolbar-full takes a row of its own. A laptop is unchanged.
   Opt-in so no other screen moves. */
@media (max-width:720px){
  .qc-ui.qc-ui.qc-ui .qcui-toolbar.is-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:.6rem!important;align-items:end!important}
  .qc-ui.qc-ui.qc-ui .qcui-toolbar.is-grid>*{grid-column:span 3!important;min-width:0!important;max-width:none!important;flex:none!important;width:auto!important}
  .qc-ui.qc-ui.qc-ui .qcui-toolbar.is-grid>.qcui-toolbar-grow{grid-column:1 / span 5!important;grid-row:1!important}
  .qc-ui.qc-ui.qc-ui .qcui-toolbar.is-grid>.btn-icon{grid-column:6!important;grid-row:1!important;justify-self:end!important;width:2.625rem!important}
  .qc-ui.qc-ui.qc-ui .qcui-toolbar.is-grid>.qcui-toolbar-full{grid-column:1 / -1!important}
  .qc-ui.qc-ui.qc-ui .qcui-toolbar.is-grid:not(:has(>.btn-icon))>.qcui-toolbar-grow{grid-column:1 / -1!important}
}

/* ── a page's guide (QCUI.helpGuide), shown by the header (i) button ── */
.qcui-help{display:flex;flex-direction:column;gap:1.1rem;font-size:.9rem;line-height:1.5}
.qcui-help-intro{margin:0;color:#3f3f46}
.qcui-help-part{display:flex;flex-direction:column;gap:.5rem}
.qcui-help-h{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#71717a}
.qcui-help-t{margin:0;color:#27272a}
.qcui-help-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.qcui-help-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:.6rem;align-items:start;color:#27272a}
.qcui-help-steps .qcui-stepno{width:26px;height:26px;min-width:26px;border-radius:9999px;background:#f4f4f5;border:1px solid #e4e4e7;color:#3f3f46;display:grid;place-items:center;font-weight:800;font-size:.72rem}

/* ── severity badge (Quality Walkabout, 27 Sep 2026) ───────────────────────────
   QCUI.severityBadge: Critical / Major / Minor / MOC use the ordinary tone pills;
   only Catastrophic needs its own maroon, from the --sev-catastrophic-* tokens.
   Same geometry as the generated .qcui-tone-* pills. */
.qc-ui.qc-ui.qc-ui .qcui-sev-catastrophic{display:inline-block!important;vertical-align:middle!important;white-space:nowrap!important;font-size:.75rem!important;line-height:1rem!important;padding:.125rem .625rem!important;border-radius:9999px!important;font-weight:600!important;background-color:var(--sev-catastrophic-tint)!important;color:var(--sev-catastrophic-text)!important}

/* ── pager clears the floating assistant (28 Sep 2026) ────────────────────────
   The Dudo button is fixed at the bottom right. A pager is the LAST thing on a
   list screen, so the page cannot scroll it any higher and "2 / Next" sat under
   the button (measured: Walkabout My Actions at 1440). Room below every kit pager. */
.qc-ui.qc-ui [data-qcui-pager]{margin-bottom:4.5rem!important}