/* Projects/Item-requests-v1/req.css — Item requests module, app tablet (834 × 1194). The base (stage, frame, bottom tabs, header band,
   buttons, containers, rows, tabs, status pill, search, chips, fields, sheets, toast) is carried over from GRC-v2/grc-v2/audit.css so the
   two modules look the same. Colours only as tokens from app/tokens.css; no font sizes here (text takes a .t-* class, typeset.js). */
body { margin: 0; background: var(--md3-displaybg-secondary); }
.stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); padding: var(--sp-24); }
.stage__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-16); width: 834px; max-width: 100%; box-sizing: border-box; padding: var(--sp-8) var(--sp-12); border: 1px dashed var(--md3-outline); border-radius: 8px; color: var(--md3-on-surface-variant); }
.stage__bar--figma { border-style: solid; }
.stage__label { text-transform: uppercase; letter-spacing: .06em; }
.stage__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.stage__link { border: 0; background: none; padding: 0; color: var(--md3-on-surface); text-decoration: underline; cursor: pointer; font-family: inherit; font-size: inherit; }
.stage__link:disabled { color: var(--md3-on-surface-variant); text-decoration: none; cursor: default; }
.stage__me { color: var(--md3-on-surface); }
.figbar__status { margin-left: auto; color: var(--md3-on-surface-variant); }
.figbar__status[data-tone="error"] { color: var(--md3-error); }
.device-slot { position: relative; flex: none; }
body.fill .stage { padding: 0; gap: 0; }
body.fill .stage__bar { display: none; }

/* ---------- the tablet ---------- */
/* The reference's colour names, re-pointed at Antz tokens (G-9), so inline var(--x) in the carried-over markup resolves to Antz. */
.device {
  --bg: var(--md3-background); --card: var(--md3-on-primary);
  --ink: var(--md3-on-surface-variant); --ink2: var(--md3-on-surface-variant); --ink3: var(--md3-on-surface-variant); /* UX audit 4: text under 18px never uses neutral-secondary (3.77:1) */
  --line: var(--md3-neutral05); --line2: var(--md3-neutral05);
  --brand: var(--md3-on-surface); --brand-d: var(--md3-on-surface); --brand-50: var(--md3-on-background);
  --ok: var(--md3-on-surface); --ok-bg: var(--md3-on-background);
  --warn: var(--md3-on-tertiary-container); --warn-bg: var(--md3-notes-a40);
  --bad: var(--md3-error); --bad-bg: var(--md3-error-container);
  --info: var(--md3-on-secondary-container); --info-bg: var(--md3-secondary-container-a30);
  --fill-ok: var(--md3-primary); --fill-warn: var(--md3-moderate-secondary); --fill-bad: var(--md3-error); /* bar, dot and ring fills (component-map 0.2 glyph column) */
  --r: 16px;
  position: absolute; top: 0; left: 0; transform-origin: top left;
  width: 834px; height: 1194px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 4px 16px var(--md3-neutral-primary-a20), 0 1px 3px var(--black-08);
  -webkit-font-smoothing: antialiased;
}
body.fill .device { position: relative; width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }
:where(.device) *, :where(.device) *::before, :where(.device) *::after { box-sizing: border-box; margin: 0; padding: 0; } /* zero specificity, so any module rule wins */
:where(.device) a { color: inherit; text-decoration: none; }
:where(.device) button { font-family: inherit; color: inherit; cursor: pointer; }

main { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-16) var(--sp-24); display: flex; flex-direction: column; }
main > * { flex-shrink: 0; } /* a child with overflow set would otherwise shrink to nothing when the page scrolls */
main > * + * { margin-top: var(--sp-16); }
main > .ph + *, main > .crumb + .ph { margin-top: 0; }

/* ---------- bottom tab bar (library tablet navigation; badge = library .app-badge tone) ---------- */
.rail { flex: none; display: flex; background: var(--md3-on-primary); box-shadow: 0 -1px 0 var(--md3-surface-variant); padding: 0 var(--sp-8); }
.rail .logo, .rail .me { display: none; }
.nav { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); height: 72px; color: var(--md3-on-surface-variant); border-top: 2px solid transparent; }
.nav.on { color: var(--md3-on-surface); border-top-color: var(--md3-primary); }
.nav .dot { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--md3-tertiary); color: var(--md3-on-primary); display: grid; place-items: center; }

/* ---------- page header: a white band across the top, never text on the page tint (G-4) ---------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-12) var(--sp-16);
  margin: 0 calc(-1 * var(--sp-16)); padding: var(--sp-20) var(--sp-24) var(--sp-16); background: var(--md3-on-primary); border-bottom: 1px solid var(--md3-surface-variant); }
.ph h1 { color: var(--md3-neutral-primary); }
.ph .sub { color: var(--md3-on-surface-variant); margin-top: var(--sp-4); }
.ph-act { display: flex; align-items: center; gap: var(--sp-8); flex: none; margin-left: auto; }
.crumb { display: flex; align-items: center; gap: var(--sp-4); margin: 0 calc(-1 * var(--sp-16)); padding: var(--sp-12) var(--sp-24) 0; background: var(--md3-on-primary); color: var(--md3-on-surface); }
.crumb + .ph { padding-top: var(--sp-8); }
/* the model chain under the Governance title belongs to the header band */
.ph-chain { gap: var(--sp-8); margin: 0 calc(-1 * var(--sp-16)) !important; padding: 0 var(--sp-24) var(--sp-12); background: var(--md3-on-primary); }
.ph:has(+ .ph-chain) { border-bottom: 0; }
.ph-chain .app-icon { color: var(--md3-outline); }
.ph-chain + .tabs, .ph + .tabs, .ph + nav.tabs { margin: 0 calc(-1 * var(--sp-16)); padding: 0 var(--sp-24); background: var(--md3-on-primary); border-bottom: 1px solid var(--md3-surface-variant); }
.ph:has(+ .tabs) { border-bottom: 0; padding-bottom: var(--sp-8); }
main > .ph + .tabs + * { margin-top: var(--sp-16); }
main > .ph + * { margin-top: var(--sp-16); }
main > .ph + .tabs, main > .ph-chain + .tabs { margin-top: 0; }
main > .ph-chain + .tabs + * { margin-top: var(--sp-16); }
main > .crumb:first-child { margin-top: 0; }

/* ---------- buttons (the library .btn is 78 wide; the GRC buttons size to their label) ---------- */
.device .btn { width: auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); height: 44px; padding: 0 var(--sp-16); border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); white-space: nowrap; }
.device .btn.pri { background: var(--md3-on-surface); border-color: var(--md3-on-surface); color: var(--md3-on-primary); }
.device .btn.ghost { background: transparent; border-color: transparent; color: var(--md3-on-surface-variant); }
.device .btn.sm { height: 40px; padding: 0 var(--sp-12); }
.device .btn.bad { color: var(--md3-error); }
.device .btn.block { width: 100%; }
.device .btn:disabled { background: var(--md3-surface-variant); border-color: var(--md3-surface-variant); color: var(--md3-on-surface-variant); cursor: not-allowed; }
.iconbtn { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); display: grid; place-items: center; color: var(--md3-on-surface-variant); }
/* the site pill in the header (Web Code ScopeChip) */
.ph-act .chip { height: 40px; background: var(--md3-secondary-container-a30); border-color: var(--md3-outline-variant); color: var(--md3-on-surface-variant); }
.ph-act .chip .app-icon { color: var(--md3-secondary-dark); }

/* ---------- containers ---------- */
.card { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; }
.pad { padding: var(--sp-20); }
.sec-h { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-16) var(--sp-20) var(--sp-8); }
.h2, .h3 { color: var(--md3-neutral-primary); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--md3-on-surface-variant); }
.muted, .faint { color: var(--md3-on-surface-variant); }
.mt8 { margin-top: var(--sp-8); } .mt12 { margin-top: var(--sp-12); } .mt16 { margin-top: var(--sp-16); } .mt20 { margin-top: var(--sp-20); } .mt24 { margin-top: var(--sp-24); }
.flex { display: flex; align-items: center; gap: var(--sp-8); } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-16); }
.g4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); }
.ms { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--sp-16); }

/* row list inside a white container (iPad-3 rows, Web Code dividers) */
.row { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16) var(--sp-20); border-top: 1px solid var(--line2); min-height: 72px; cursor: pointer; }
.row:first-child { border-top: 0; }
.row .chev { color: var(--md3-outline); flex: none; display: flex; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.ico.bad { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.ico.warn { background: var(--md3-notes-a40); color: var(--md3-on-tertiary-container); }
.ico.ok { background: var(--md3-on-background); color: var(--md3-on-surface); }
.ico.info { background: var(--md3-secondary-container-a30); color: var(--md3-on-secondary-container); }
.title { color: var(--md3-neutral-primary); }
.meta { color: var(--md3-on-surface-variant); margin-top: 2px; }

/* A group label joins the white container under it, so it never sits on the tint (G-4). */
.grp { display: flex; align-items: baseline; gap: var(--sp-8); padding: var(--sp-16) var(--sp-20) var(--sp-8); background: var(--md3-on-primary); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; }
.grp + .card, .grp + section.card { margin-top: 0 !important; border-top: 0; border-radius: 0 0 16px 16px; }
.grp .eyebrow { letter-spacing: .08em; }

.empty { padding: var(--sp-20); border: 1px dashed var(--md3-outline-variant); border-radius: 12px; text-align: center; color: var(--md3-on-surface-variant); background: var(--md3-on-primary); }
.banner { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-20); border-radius: 12px; background: var(--md3-notes-a40); color: var(--md3-on-tertiary-container); }
.banner.bad { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.banner.ok { background: var(--md3-on-background); color: var(--md3-on-surface); }

/* ---------- tabs and segmented (Web Code tabs; Antz CustomSwitchTabs for the segmented) ---------- */
.tabs { display: flex; gap: var(--sp-24); overflow-x: auto; scrollbar-width: none; }
.tabs a { height: 52px; display: flex; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface-variant); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--md3-on-surface); border-bottom-color: var(--md3-primary); }
.tabs .n { min-width: 22px; height: 20px; padding: 0 var(--sp-8); border-radius: 10px; background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); display: inline-grid; place-items: center; }
.tabs a.on .n { background: var(--md3-on-background); color: var(--md3-on-surface); }
/* a tabs row that is not under the header still gets a white container */
main > .tabs:not(.ph + .tabs):not(.ph-chain + .tabs) { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; padding: 0 var(--sp-20); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4); border-radius: 12px; background: var(--md3-displaybg-primary); margin-bottom: var(--sp-16); }
.seg a, .seg button { height: 40px; padding: 0 var(--sp-16); border-radius: 8px; display: flex; align-items: center; gap: var(--sp-8); border: 0; background: none; color: var(--md3-on-surface-variant); }
.seg .on { background: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.seg .n { color: var(--md3-on-surface-variant); }
.seg .on .n { color: var(--md3-on-primary50); }
main > .seg { align-self: flex-start; background: var(--md3-on-primary); border: 1px solid var(--line); }

/* ---------- status: word + one dot, colour only on the dot (SURFACES T1.4, G-11); severity tag (G-8) ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--sp-8); height: 28px; padding: 0 var(--sp-12); border-radius: 999px; background: var(--md3-on-primary); border: 1px solid var(--md3-outline-variant); color: var(--md3-on-surface-variant); white-space: nowrap; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--md3-outline); flex: none; }
.pill.ok::before { background: var(--md3-primary); }
.pill.info::before { background: var(--md3-add-primary); }
.pill.warn::before { background: var(--md3-moderate-secondary); }
.pill.bad::before { background: var(--md3-error); }
.t-ok { color: var(--md3-on-surface); } .t-warn { color: var(--md3-on-tertiary-container); } .t-bad { color: var(--md3-error); } .t-info { color: var(--md3-on-secondary-container); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-8); border-radius: 4px; background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); white-space: nowrap; }
.dotm { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--md3-outline); display: inline-block; }
.dotm.bad { background: var(--md3-error); } .dotm.warn { background: var(--md3-moderate-secondary); } .dotm.ok { background: var(--md3-primary); } .dotm.info { background: var(--md3-add-primary); } .dotm.attn { background: var(--md3-tertiary); }
.sev { display: inline-flex; align-items: center; gap: var(--sp-4); height: 24px; padding: 0 var(--sp-8); border-radius: 4px; white-space: nowrap; }
.sev--High { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.sev--Medium { background: var(--md3-notes-a40); color: var(--md3-on-tertiary-container); }
.sev--Low { background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); }

/* ---------- KPI tile (iPad-3 §5; Web Code Kpi) ---------- */
.metric { display: flex; flex-direction: column; padding: var(--sp-16) 18px; cursor: pointer; }
.metric .eyebrow { letter-spacing: 1.12px; }
.metric .num { margin-top: var(--sp-8); color: var(--md3-neutral-primary); font-variant-numeric: tabular-nums; }
.metric .num small { color: var(--md3-on-surface-variant); margin-left: var(--sp-4); }
.metric .kpi-sub { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-8); color: var(--md3-on-surface-variant); }
.metric:active { background: var(--md3-surface); }

/* ---------- small data pieces ---------- */
.kv { display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-12) var(--sp-16); }
.kv dt { color: var(--md3-on-surface-variant); } .kv dd { color: var(--md3-on-surface-variant); }
.bar { height: 8px; border-radius: 4px; background: var(--md3-surface-variant); overflow: hidden; display: flex; gap: 1px; }
.bar i { display: block; height: 100%; }
.heat { display: grid; grid-template-columns: 22px repeat(5, 1fr); gap: var(--sp-4); color: var(--md3-on-surface-variant); }
.heat div { height: 34px; border-radius: 8px; display: grid; place-items: center; }
.lvl { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; }
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--md3-on-background); color: var(--md3-on-surface); display: inline-grid; place-items: center; flex: none; }

/* chain / trace (Web Code StagePipeline) */
.chain { display: flex; align-items: stretch; }
.node { flex: 1; min-width: 0; padding: var(--sp-12) 14px; border: 1px solid var(--md3-surface-variant); border-radius: 12px; background: var(--md3-on-primary); cursor: pointer; }
.node .v { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md3-neutral-primary); }
.link { width: 22px; flex: none; display: grid; place-items: center; color: var(--md3-outline-variant); }
.node.cur { border-color: var(--md3-outline-variant); background: var(--md3-surface); }
.rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); }
.rel a { padding: 14px; border: 1px solid var(--md3-surface-variant); border-radius: 12px; background: var(--md3-on-primary); }
.rel b { display: block; color: var(--md3-neutral-primary); }

/* evidence thumbnails (Web Code AddMediaDrawer tiles) */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); }
.thumb { aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; color: var(--md3-on-primary); position: relative; overflow: hidden; cursor: pointer; }
.thumb > span:not(.app-icon) { position: absolute; left: var(--sp-8); bottom: var(--sp-8); background: var(--md3-neutral-primary-a40); padding: 2px var(--sp-8); border-radius: 4px; color: var(--md3-on-primary); }
.thumb.doc { background: var(--md3-displaybg-primary); color: var(--md3-outline); }
.thumb.doc > span:not(.app-icon) { background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }

/* search + chips (iPad-3 §12, Web Code choice chips) */
.search { height: 44px; display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-16); background: var(--md3-on-primary); border: 1px solid var(--md3-outline-variant); border-radius: 999px; flex: 1; color: var(--md3-on-surface-variant); }
.card .search, .sheet .search { background: var(--md3-background); border-color: transparent; }
.search input { border: 0; outline: 0; font-family: inherit; flex: 1; background: none; color: var(--md3-on-surface-variant); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.chip { height: 40px; padding: 0 var(--sp-16); border-radius: 999px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); display: inline-flex; align-items: center; gap: var(--sp-8); white-space: nowrap; }
.chip.on { background: var(--md3-primary-a10); border-color: var(--md3-primary); color: var(--md3-on-surface); }

/* ---------- form fields (library .app-field geometry, 56 high) ---------- */
.field { margin-bottom: var(--sp-20); }
.field > label { display: block; color: var(--md3-on-surface-variant); margin-bottom: var(--sp-8); }
.inp { width: 100%; height: 56px; border: 1px solid var(--md3-outline-variant); border-radius: 8px; padding: 0 var(--sp-16); font-family: inherit; color: var(--md3-on-surface-variant); background: var(--md3-on-primary); outline: none; }
textarea.inp { height: 96px; padding: 14px var(--sp-16); resize: none; }
.inp:focus { border-color: var(--md3-outline); }
.scale { display: flex; gap: var(--sp-8); }
.scale button { flex: 1; height: 56px; border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); }
.scale button.on { background: var(--md3-on-primary-container); border-color: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.cbx { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--md3-outline); display: grid; place-items: center; flex: none; background: var(--md3-on-primary); }
.cbx.on { background: var(--md3-on-surface); border-color: var(--md3-on-surface); color: var(--md3-on-primary); }
.rng { width: 100%; height: 44px; accent-color: var(--md3-primary); }
/* toggle rows (Web Code switch rows; knob = library .app-switch colours) */
.tgl { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 56px; border-top: 1px solid var(--line2); cursor: pointer; }
.tgl i { width: 44px; height: 26px; border-radius: 13px; background: var(--md3-outline-variant); position: relative; flex: none; transition: background .15s; }
.tgl i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--md3-on-primary); box-shadow: 0 1px 2px var(--md3-neutral-primary-a20); transition: left .15s; }
.tgl.on i { background: var(--md3-primary); } .tgl.on i::after { left: 21px; }

/* ---------- sheets (iPad-3 §14: teal scrim, 22 top radius; Web Code DrawerShell header/footer) ---------- */
.scrim { position: absolute; inset: 0; background: var(--md3-on-primary-container-a60); display: none; z-index: 20; }
.scrim.on { display: block; }
.sheet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(100% - 32px); max-width: 770px; max-height: 90%; background: var(--md3-on-primary); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: 0 8px 10px -5px var(--md3-neutral-primary-a20), 0 16px 24px 2px var(--md3-neutral-primary-a10), 0 6px 30px 5px var(--md3-neutral-primary-a10); }
.sheet .grab { width: 36px; height: 4px; border-radius: 999px; background: var(--md3-outline-variant); margin: var(--sp-12) auto var(--sp-4); flex: none; }
.sh-h { padding: var(--sp-8) var(--sp-24) var(--sp-16); border-bottom: 1px solid var(--md3-surface-variant); }
.sh-b { padding: var(--sp-24); overflow-y: auto; flex: 1; background: var(--md3-background); }
.sh-f { padding: var(--sp-16) var(--sp-24) var(--sp-20); border-top: 1px solid var(--md3-surface-variant); display: flex; gap: var(--sp-12); justify-content: flex-end; background: var(--md3-on-primary); }
/* wizard steps (Web Code NewAuditWizard StepHeader numbers, iPad-3 bar) */
.steps { display: flex; gap: var(--sp-8); margin-top: var(--sp-16); }
.steps div { flex: 1; }
.steps i { display: block; height: 4px; border-radius: 2px; background: var(--md3-surface-variant); }
.steps .done i { background: var(--md3-primary); } .steps .cur i { background: var(--md3-on-surface); }
.steps span { display: block; color: var(--md3-on-surface-variant); margin-top: var(--sp-8); }
.steps .done span { color: var(--md3-on-surface-variant); } .steps .cur span { color: var(--md3-on-surface); }
/* option cards inside sheets — white on the sheet's tinted body */
.opt { display: flex; align-items: center; gap: 14px; padding: var(--sp-16); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-height: 72px; background: var(--md3-on-primary); }
.opt.on { border-color: var(--md3-primary); background: var(--md3-surface); }
.opt + .opt { margin-top: var(--sp-8); }
.libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-24); background: var(--md3-on-primary); border-radius: 12px; padding: 0 var(--sp-16); }
.libgrid a { display: flex; align-items: center; gap: var(--sp-12); height: 56px; border-bottom: 1px solid var(--line2); color: var(--md3-on-surface-variant); }

/* toast (the old build's) */
.toast { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--md3-on-secondary-container); color: var(--md3-on-primary); padding: var(--sp-12) var(--sp-16); border-radius: 8px; opacity: 0; transition: .25s; z-index: 40; display: flex; gap: var(--sp-8); align-items: center; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.appbar { flex: none; display: flex; align-items: center; gap: var(--sp-8); height: 56px; padding: 0 var(--sp-16) 0 var(--sp-24); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); border-bottom: 1px solid var(--md3-surface-variant); }
.appbar .chip { height: 40px; background: var(--md3-secondary-container-a30); border-color: var(--md3-outline-variant); }
.appbar .chip .app-icon { color: var(--md3-secondary-dark); }
.device, body.fill .device { background: var(--md3-background); }
.device.is-phone { width: 390px; height: 840px; border-radius: 28px; }

/* ---------- Item requests (22 Oct) ---------- */
.device.is-land { width: 1194px; height: 834px; }
main > .ph + .tabs + * { margin-top: var(--sp-16); }
/* the floating New request button sits above the bottom tabs (Antz app FAB: primary, 56) */
.fab { position: absolute; right: var(--sp-24); bottom: calc(72px + var(--sp-24)); z-index: 15; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--md3-on-surface); color: var(--md3-on-primary); box-shadow: 0 4px 8px 3px var(--md3-neutral-primary-a10), 0 1px 3px var(--md3-neutral-primary-a20); }
.fab[hidden] { display: none; }
main { padding-bottom: 112px; }
.nm { gap: var(--sp-8); min-width: 0; }
.nm .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urg { display: inline-flex; color: var(--md3-tertiary); flex: none; }
.amt { color: var(--md3-neutral-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill.attn::before { background: var(--md3-tertiary); }
.pill.attn { border-color: var(--md3-tertiary); color: var(--md3-neutral-primary); }
.badge-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--md3-on-surface); color: var(--md3-on-primary); }
.tabs .dotm { margin-left: calc(-1 * var(--sp-4)); }
/* request cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); align-items: start; }
.device.is-land .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rcard { display: flex; flex-direction: column; padding: var(--sp-20); min-width: 0; gap: var(--sp-4); }
.rcard:active { background: var(--md3-surface); }
.rtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rtitle .urg { margin-left: var(--sp-4); vertical-align: -2px; }
.rmid { margin-top: var(--sp-12); gap: var(--sp-8); }
.rmid .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfoot { margin-top: auto; padding-top: var(--sp-12); border-top: 1px solid var(--line2); }
.rmid + .rfoot { margin-top: var(--sp-12); }
.photos { display: inline-flex; align-items: center; }
.thumb32 { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: inline-grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); box-shadow: 0 0 0 2px var(--md3-on-primary); }
.thumb32 + .thumb32 { margin-left: -6px; }
.thumb32 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .more { margin-left: var(--sp-8); color: var(--md3-on-surface-variant); }
/* header + status tabs: the old Help Desk tablet (Procure-v1 shared/components.css .ui-top / .ui-tabs) */
.appbar { display: none; }
.top { display: flex; align-items: center; gap: var(--sp-4); height: 72px; margin: 0 calc(-1 * var(--sp-16)); padding: 0 var(--sp-16) 0 var(--sp-12); background: var(--md3-on-primary); }
.top__title { flex: 1; min-width: 0; margin-left: var(--sp-8); color: var(--md3-on-secondary-container); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__btn { position: relative; width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; display: grid; place-items: center; color: var(--md3-on-secondary-container); }
.top__btn.on { background: var(--md3-displaybg-primary); }
.top__n { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; background: var(--md3-tertiary); color: var(--md3-on-primary); }
.stabs { display: flex; margin: 0 calc(-1 * var(--sp-16)) !important; padding: 0 var(--sp-8); background: var(--md3-on-primary); border-bottom: 1px solid var(--md3-neutral05); overflow-x: auto; scrollbar-width: none; }
.stab { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-4); min-height: 64px; padding: var(--sp-8) var(--sp-20) var(--sp-8); border: 0; background: none; color: var(--md3-on-surface-variant); }
.stab__n { position: relative; color: var(--md3-on-surface-variant); }
.stab__l { white-space: nowrap; }
.stab.on .stab__n { color: var(--md3-primary); }
.stab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px 999px 0 0; background: var(--md3-primary); }
.stab__dot { position: absolute; top: 0; right: -10px; width: 8px; height: 8px; border-radius: 50%; background: var(--md3-tertiary); }
main > .top + .stabs { margin-top: 0 !important; }
/* the request card = old Help Desk card (Procure-v1 shared/components.css .ui-card / .ui-status), Antz tokens */
.hcard { position: relative; display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; background: var(--md3-on-primary); border-radius: 12px; box-shadow: 0 2px 2px var(--md3-neutral-primary-a10); overflow: hidden; }
.hcard:active { background: var(--md3-surface); }
.hcard__top { display: flex; align-items: center; gap: var(--sp-8); min-height: 52px; padding: 10px 0 8px var(--sp-16); border-bottom: 1px solid var(--md3-neutral05); }
.hcard__ids { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-4); }
.hcard__id { color: var(--md3-on-secondary-container); }
.hcard__sub { color: var(--md3-neutral-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard__flag { flex: none; }
.hcard__body { display: flex; flex-direction: column; gap: var(--sp-8); padding: 0 var(--sp-16) var(--sp-4); }
.hcard__title { color: var(--md3-neutral-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line max (Sourav, 22 Oct) */
.hcard__line { display: flex; align-items: center; color: var(--md3-neutral-secondary); white-space: nowrap; overflow: hidden; }
.hcard__by { color: var(--md3-on-secondary-container); }
.hcard__facts { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); margin-top: var(--sp-4); }
.hcard__fact { display: flex; flex-direction: column; gap: 2px; }
.hcard__fl { color: var(--md3-neutral-secondary); }
.hcard__fv { color: var(--md3-on-surface-variant); font-variant-numeric: tabular-nums; }
.hcard .cnt { color: var(--md3-on-surface-variant); margin-left: var(--sp-8); }
.photos { display: inline-flex; align-items: center; }
.thumb32 { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: inline-grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); box-shadow: 0 0 0 2px var(--md3-on-primary); }
.thumb32 + .thumb32 { margin-left: -6px; }
.thumb32 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip { padding: 0 2px 2px; }
.strip__in { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-12) 14px; border-radius: 0 0 10px 10px; }
.strip__l { flex: 1; min-width: 0; margin-left: var(--sp-4); }
.strip__t { color: var(--md3-neutral-primary-a40); white-space: nowrap; }
.strip--wait .strip__in { background: var(--moderate-secondary-10); color: var(--md3-on-tertiary-container); }
.strip--mine .strip__in { background: var(--md3-notes); color: var(--md3-tertiary); }
.strip--approved .strip__in { background: var(--md3-on-background); color: var(--md3-on-surface); }
.strip--rejected .strip__in { background: var(--error-06); color: var(--md3-error); }
.strip--cancelled .strip__in { background: var(--md3-tertiary-a5); color: var(--md3-tertiary); }
.strip--draft .strip__in { background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); }
/* list head: the count, then sort and filter (Sourav, 22 Oct: the old list head, a little better) */
.lhead { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) var(--sp-4) 0; }
.lhead__t { flex: 1; color: var(--md3-on-surface-variant); }
.lhead__n { color: var(--md3-neutral-secondary); }
.lbtn { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); display: grid; place-items: center; color: var(--md3-on-surface); }
.lbtn.on { background: var(--md3-on-background); border-color: var(--md3-primary); }
.lbtn__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--md3-on-surface); color: var(--md3-on-primary); }
main > .lhead + .cards { margin-top: var(--sp-12); }
/* filter side sheet = Antz web FilterDrawer (src/components/FilterDrawer.js): 560 wide from the right on Background;
   groups on the left (selected = white), options on a white panel, Clear All / Apply Filter in a white footer */
.sidescrim { position: absolute; inset: 0; z-index: 25; background: var(--md3-on-primary-container-a60); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sidescrim.on { opacity: 1; pointer-events: auto; }
.side { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column; background: var(--md3-background); transform: translateX(100%); transition: transform .25s ease; }
.sidescrim.on .side { transform: none; }
.fd__h { flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-24); color: var(--md3-neutral-primary); }
.fd__b { flex: 1; min-height: 0; display: flex; }
.fd__groups { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; padding-left: var(--sp-20); }
.fd__g { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); min-height: 52px; padding: 0 var(--sp-16); border: 0; background: transparent; text-align: left; color: var(--md3-on-primary-container); }
.fd__g.on { background: var(--md3-on-primary); }
.fd__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--md3-on-surface); color: var(--md3-on-primary); }
.fd__opts { width: 300px; flex: none; overflow-y: auto; background: var(--md3-on-primary); padding: var(--sp-8) 0; }
.fd__o { width: 100%; display: flex; align-items: center; gap: var(--sp-12); min-height: 52px; padding: 0 var(--sp-20); border: 0; background: none; text-align: left; color: var(--md3-on-surface-variant); }
.fd__cb { width: 24px; height: 24px; color: var(--md3-outline); }
.fd__cb.on { color: var(--md3-on-surface); }
.fd__f { flex: none; display: flex; gap: var(--sp-12); padding: var(--sp-16) var(--sp-24) var(--sp-24); background: var(--md3-on-primary); box-shadow: 0 -2px 8px var(--md3-neutral-primary-a10); }
.fd__f .btn { flex: 1; height: 48px; }
/* modules page */
.rail[hidden] { display: none; }
.mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
.mod { display: flex; align-items: center; gap: var(--sp-16); min-height: 104px; padding: var(--sp-20); background: var(--md3-on-primary); border-radius: 12px; box-shadow: 0 2px 2px var(--md3-neutral-primary-a10); }
.mod:active { background: var(--md3-surface); }
.mod__ic { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.mod__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); color: var(--md3-neutral-primary); }
.mod__s { color: var(--md3-on-surface-variant); }
.mod__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: var(--md3-tertiary); color: var(--md3-on-primary); }
.mod .chev { color: var(--md3-outline); display: flex; }
main > .top + .mods { margin-top: var(--sp-16); }
.icount__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.icount .cnt { margin-left: var(--sp-4); }
/* ---------- New request (Antz TAB form: old Help Desk form — white sections with an icon title, tinted fields, fixed bar) ---------- */
.device.in-form main { padding-bottom: 120px; }
.nwrap { display: flex; flex-direction: column; gap: var(--sp-16); }
.nsteps { margin: 0 0 var(--sp-4); }
.nsteps > div { cursor: pointer; }
.nsec { background: var(--md3-on-primary); border-radius: 12px; padding: var(--sp-16) var(--sp-16) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-12); }
.nsec__h { display: flex; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface-variant); }
.nsec__act { margin-left: auto; }
.nsec .field { margin-bottom: 0; }
.nsec .inp { background: var(--md3-surface); border-color: var(--md3-outline-variant); }
.nsec .inp.bad { border-color: var(--md3-error); }
.nsec .g2 { gap: var(--sp-16); }
.srcsw { display: flex; gap: var(--sp-4); padding: var(--sp-4); border-radius: 12px; background: var(--md3-displaybg-primary); align-self: flex-start; }
.srcsw button { height: 44px; padding: 0 var(--sp-20); border: 0; border-radius: 8px; background: none; display: flex; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface-variant); }
.srcsw button.on { background: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.grp-l { padding: var(--sp-12) var(--sp-4) var(--sp-8); color: var(--md3-on-surface-variant); }
.nsearch { display: flex; gap: var(--sp-8); }
.nsearch .search { background: var(--md3-surface); border-color: var(--md3-outline-variant); border-radius: 8px; height: 48px; }
.nsearch .btn { height: 48px; }
.hits { border: 1px solid var(--md3-outline-variant); border-radius: 8px; padding: var(--sp-4); }
.hits .opt { min-height: 60px; border: 0; }
.hits .opt + .opt { margin-top: 0; border-top: 1px solid var(--md3-neutral05); border-radius: 0; }
.nlist { display: flex; flex-direction: column; }
.nrow { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; border-top: 1px solid var(--md3-neutral05); }
.nlist .nrow:first-child { border-top: 0; }
.nthumb { width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.nthumb img { width: 100%; height: 100%; object-fit: cover; }
.nrow .title, .rrow .title { color: var(--md3-neutral-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nflag { flex: none; }
.nqty { display: flex; align-items: center; gap: var(--sp-8); flex: none; }
.stepper { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-on-primary); overflow: hidden; }
.stepper button { width: 40px; height: 100%; border: 0; background: none; display: grid; place-items: center; color: var(--md3-on-surface-variant); }
.stepper button:disabled { opacity: .35; }
.stepper input { width: 44px; height: 100%; border: 0; text-align: center; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--md3-neutral-primary); outline: 0; background: none; font-variant-numeric: tabular-nums; }
.stepper input:focus { background: var(--md3-surface); }
.stepper.sm { height: 36px; } .stepper.sm button { width: 32px; } .stepper.sm input { width: 36px; font-size: 14px; }
.nunit { width: 48px; color: var(--md3-on-surface-variant); }
.namt { width: 112px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--md3-neutral-primary); font-variant-numeric: tabular-nums; }
.nprice { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 2px; color: var(--md3-on-secondary-container); white-space: nowrap; }
.nprice.lock { color: var(--md3-on-surface-variant); }
.nact { width: 40px; height: 40px; flex: none; border: 0; border-radius: 20px; background: none; display: grid; place-items: center; color: var(--md3-outline); }
.nact.on { background: var(--md3-error-container-a30); color: var(--md3-error); }
.nempty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); padding: var(--sp-32) var(--sp-16); border: 1px dashed var(--md3-outline-variant); }
.linkbtn { align-self: flex-start; border: 0; background: none; display: inline-flex; align-items: center; gap: var(--sp-4); color: var(--md3-on-surface); padding: var(--sp-4) 0; }
.brow { min-height: 64px; padding: var(--sp-12) var(--sp-16); gap: var(--sp-12); }
.brow.off { opacity: .45; cursor: default; }
.upload { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-20); border: 1px dashed var(--md3-outline); border-radius: 12px; background: var(--md3-secondary-container-a30); color: var(--md3-on-surface); }
.frow { display: flex; align-items: center; gap: var(--sp-12); min-height: 52px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--md3-neutral05); color: var(--md3-on-surface-variant); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); }
.rrow { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; border-bottom: 1px solid var(--md3-neutral05); }
.rtotal { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--sp-12); color: var(--md3-neutral-primary); }
.ledger { overflow-x: auto; }
.lg { display: grid; grid-template-columns: minmax(140px, 1fr) repeat(4, 104px); gap: var(--sp-12); align-items: center; padding: var(--sp-12) 0; border-bottom: 1px solid var(--md3-neutral05); color: var(--md3-on-surface-variant); font-variant-numeric: tabular-nums; }
.lg > span:not(:first-child) { text-align: right; }
.lg--h { padding: var(--sp-8) 0; color: var(--md3-neutral-secondary); }
.tl2 { display: flex; flex-direction: column; gap: var(--sp-12); }
.tl2__r { display: flex; align-items: center; gap: var(--sp-12); color: var(--md3-neutral-primary); }
.tl2__r .av { width: 40px; height: 40px; background: var(--md3-on-primary-container-a10); color: var(--md3-on-primary-container); }
.tl2__r.v { opacity: .65; }
.nfoot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-16) var(--sp-24) var(--sp-20); background: var(--md3-on-primary); box-shadow: 0 -2px 8px var(--md3-neutral-primary-a10); color: var(--md3-neutral-primary); }
.nfoot .btn { height: 48px; }
/* New request: container 1 = Items from (Store | Procurement + which store); container 2 = steps + the step's sections */
.srcrow { display: flex; align-items: flex-end; gap: var(--sp-16); flex-wrap: wrap; }
.srcrow .srcsw { align-self: flex-end; }
.srcsw button .app-icon { flex: none; }
.srcpick { flex: 1; min-width: 240px; }
.nbox { background: var(--md3-on-primary); border-radius: 12px; padding: var(--sp-16) 0 var(--sp-4); }
.nbox .nsteps { margin: 0 var(--sp-16) var(--sp-4); }
.nbox .nsec { border-radius: 0; padding-top: var(--sp-16); }
.nbox .nsec + .nsec { border-top: 1px solid var(--md3-neutral05); }
.nsec.src { padding-bottom: var(--sp-16); }
.nlink { color: var(--md3-on-surface); font-weight: 600; margin-left: var(--sp-4); }
.t-warn { color: var(--md3-on-tertiary-container); }
.nrow .t-warn { color: var(--md3-tertiary); }
.mixrow { display: flex; gap: var(--sp-8); padding-top: var(--sp-12); }
/* Items from: two equal halves, fixed height (no jump); the chosen half is outlined in Primary with a filled dot */
.srcsw2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.srcsw2__o { display: flex; align-items: center; gap: var(--sp-12); height: 64px; padding: 0 var(--sp-16); border: 1px solid var(--md3-outline-variant); border-radius: 12px; background: var(--md3-on-primary); text-align: left; color: var(--md3-on-surface-variant); }
.srcsw2__o.on { border-color: var(--md3-primary); background: var(--md3-surface); color: var(--md3-neutral-primary); box-shadow: 0 0 0 1px var(--md3-primary); }
.srcsw2__dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--md3-outline); }
.srcsw2__o.on .srcsw2__dot { border: 6px solid var(--md3-primary); }
.srcsw2__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srcsw2__t .t-minor-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcsw2__k { color: var(--md3-on-surface-variant); }
.srcsw2__o .app-icon { color: var(--md3-on-surface-variant); flex: none; }
.srcsw2__o:not(.on) .app-icon { visibility: hidden; }
/* anchored menu (V4 Select list in TAB look) */
.pop { position: absolute; inset: 0; z-index: 30; display: none; }
.pop.on { display: block; }
.menu { position: absolute; max-height: 520px; overflow-y: auto; padding: var(--sp-8); background: var(--md3-on-primary); border-radius: 12px; box-shadow: 0 0 0 1px var(--md3-neutral05), 0 12px 32px -8px var(--md3-neutral-primary-a20); }
.menu__g { padding: var(--sp-12) var(--sp-12) var(--sp-4); color: var(--md3-neutral-secondary); }
.menu__i { width: 100%; display: flex; align-items: center; gap: var(--sp-8); min-height: 44px; padding: 0 var(--sp-12); border: 0; border-radius: 8px; background: none; text-align: left; color: var(--md3-neutral-primary); }
.menu__i:hover { background: var(--md3-displaybg-primary); }
.menu__i.on { background: var(--md3-surface); color: var(--md3-on-surface); }
.menu__i .app-icon { color: var(--md3-primary); }
/* Browse sheet: pinned search + chips, white field, counts on chips, picked rows tinted */
.bhead { flex: none; padding: var(--sp-16) var(--sp-24) var(--sp-12); background: var(--md3-background); border-bottom: 1px solid var(--md3-surface-variant); }
.bsearch { background: var(--md3-on-primary) !important; border: 1px solid var(--md3-outline-variant) !important; border-radius: 8px; height: 52px; }
.bchips { margin-top: var(--sp-12); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chip__n { color: var(--md3-neutral-secondary); margin-left: var(--sp-4); }
.chip.on .chip__n { color: var(--md3-on-surface); }
.bbody { padding-top: var(--sp-16) !important; }
.brow.sel { background: var(--md3-surface); }
.bunit { width: 44px; color: var(--md3-on-surface-variant); }
/* price box (V4 RatePop in TAB look) */
.ppop { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-16); }
.ppop__l { color: var(--md3-on-surface-variant); }
.ppop__f { display: flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 var(--sp-12); border: 1px solid var(--md3-on-secondary-container); border-radius: 8px; box-shadow: 0 0 0 3px var(--md3-on-primary-container-a10); }
.ppop__f input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: inherit; font-size: 16px; color: var(--md3-neutral-primary); font-variant-numeric: tabular-nums; }
.ppop__a { display: flex; gap: var(--sp-8); margin-top: var(--sp-4); }
.ppop__a .btn { flex: 1; height: 44px; }
.menu__i:disabled { opacity: .45; cursor: default; background: none; }
/* urgent toggle = the red flag; grey and faint when off */
.nflagbtn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 22px; background: none; display: grid; place-items: center; }
.nflagbtn img { filter: grayscale(1); opacity: .35; transition: filter .15s, opacity .15s; }
.nflagbtn:hover img { opacity: .6; }
.nflagbtn.on img { filter: none; opacity: 1; }
.nbox .nsteps + .nsec { padding-top: var(--sp-8); }
/* Items from, take 3: slim switch (white thumb on a soft track) + a separate store picker on the same 48px row */
.srcline { display: flex; align-items: center; gap: var(--sp-12); min-height: 48px; }
.seg2 { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--md3-displaybg-primary); }
.seg2 button { height: 42px; padding: 0 var(--sp-20); border: 0; border-radius: 9px; background: none; color: var(--md3-on-surface-variant); transition: background .15s, box-shadow .15s; }
.seg2 button.on { background: var(--md3-on-primary); color: var(--md3-neutral-primary); box-shadow: 0 1px 3px var(--md3-neutral-primary-a10), 0 0 0 1px var(--md3-neutral05); }
.storepick { display: inline-flex; align-items: center; gap: var(--sp-8); height: 48px; min-width: 260px; padding: 0 var(--sp-12) 0 var(--sp-16); border: 1px solid var(--md3-outline-variant); border-radius: 10px; background: var(--md3-on-primary); text-align: left; color: var(--md3-neutral-primary); }
.storepick .app-icon { color: var(--md3-on-surface-variant); }
/* CTAs in Antz Primary (Sourav, 22 Oct): every primary button and the + button */
.device .btn.pri { background: var(--md3-primary); border-color: var(--md3-primary); color: var(--md3-on-primary); }
.fab { background: var(--md3-primary); }
/* store menu (V4 list) */
.smenu .menu__i { min-height: 56px; padding: var(--sp-8) var(--sp-12); align-items: center; }
.smenu__ic { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.smenu .menu__i.on { background: var(--md3-displaybg-primary); }
.smenu .menu__i.on .smenu__ic { background: var(--md3-on-primary); }
/* fields: the old Help Desk green tint again (Sourav, 22 Oct, second call) */
.nsec .inp, .nsec .pick:not(.set) { background: var(--md3-surface) !important; }
.nsearch .search { background: var(--md3-on-primary) !important; } /* search stays white (Sourav, 22 Oct) */
.nsec .inp:focus, .nsearch .search:focus-within { border-color: var(--md3-on-secondary-container); box-shadow: 0 0 0 3px var(--md3-on-primary-container-a10); }
/* Browse keeps one height whatever the filter shows (Sourav, 22 Oct): the list container fills the rest, white */
.sheet.tall { height: 88%; }
.sheet.tall .bbody { display: flex; flex-direction: column; }
.sheet.tall .bbody > .card { flex: 1; }
/* store menu, calmer (Sourav, 22 Oct): Material icons (mdi warehouse / medical-bag / silverware), the V4 picks as neutral glyphs, no green fills;
   the chosen store = a light grey row, its name in ink, a navy check */
.smenu__ic { background: var(--md3-neutral05) !important; color: var(--md3-on-surface-variant); }
.smenu__ic::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--v4) center / contain no-repeat; mask: var(--v4) center / contain no-repeat; }
.smenu .menu__i.on { background: var(--md3-neutral05); color: var(--md3-neutral-primary); }
.smenu .menu__i.on .smenu__ic { background: var(--md3-on-primary) !important; }
.smenu .menu__i .app-icon { color: var(--md3-on-secondary-container); }
.smenu .menu__i:hover:not(:disabled) { background: var(--md3-neutral05); }
/* V4 stepper (controls.js Steps), Antz tokens */
.vsteps { display: flex; align-items: center; gap: var(--sp-12); margin: 0 var(--sp-16) var(--sp-8); }
.vsteps__s { display: inline-flex; align-items: center; gap: var(--sp-12); flex: none; border: 0; background: none; padding: 0; border-radius: 8px; color: var(--md3-on-surface-variant); }
.vsteps__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--md3-neutral05); color: var(--md3-on-surface-variant); transition: background .3s, color .3s; }
.vsteps__s.cur, .vsteps__s.done { color: var(--md3-on-primary-container); }
.vsteps__s.cur .vsteps__n, .vsteps__s.done .vsteps__n { background: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.vsteps__line { width: 48px; height: 2px; flex: none; border-radius: 1px; background: var(--md3-neutral05); transition: background .3s; }
.vsteps__line.on { background: var(--md3-on-primary-container); }
/* Details step, cleaned (Sourav, 22 Oct): one rhythm — 24px between fields, 8px label→field; every field 56px with the
   same 16px text inset; the purpose is one line that grows; the upload area neutral, not teal */
.ndet { gap: var(--sp-24) !important; }
.ndet .g2 { gap: var(--sp-24) var(--sp-16); }
.ndet .field > label { margin-bottom: var(--sp-8); }
.ndet .inp { height: 56px; padding: 0 var(--sp-16); }
.ndet select.inp { padding: 0 var(--sp-12); }
.ndet textarea.inp { height: 56px; min-height: 56px; padding: 16px; overflow: hidden; resize: none; line-height: 1.4; }
.ndet .upload { flex-direction: row; justify-content: center; gap: var(--sp-12); padding: var(--sp-16); background: var(--md3-on-primary); border-color: var(--md3-outline-variant); color: var(--md3-on-surface-variant); }
.ndet .upload .app-icon { color: var(--md3-on-surface-variant); }
.ndet .upload .t-body-title { color: var(--md3-neutral-primary); }
/* confirm sheet */
.ask__b { background: var(--md3-on-primary) !important; padding-top: var(--sp-8) !important; color: var(--md3-on-surface-variant); }
.ask__f { justify-content: stretch !important; }
.ask__f .btn { flex: 1; height: 52px; }
.device .btn.danger { background: var(--md3-error); border-color: var(--md3-error); color: var(--md3-on-primary); }
/* footer facts (V4 FootFacts, Material icons: package / alarm-light / lock / plus-circle): 16px icon on the text's centre line */
.ffacts { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: 2px; }
.ffact { display: inline-flex; align-items: center; gap: var(--sp-4); height: 16px; color: var(--md3-on-surface-variant); }
.ffact i { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--v4) center / contain no-repeat; mask: var(--v4) center / contain no-repeat; }
.ffact.hot { color: var(--md3-tertiary); font-weight: 600; }
.ffact.hot i { transform: none; }
/* bottom sheet motion: the scrim fades, the sheet slides up from below with a soft ease; reversed on close */
.scrim { display: block !important; opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.scrim.on { opacity: 1; pointer-events: auto; }
.scrim .sheet { transform: translate(-50%, 104%); transition: transform .34s cubic-bezier(.2, .8, .2, 1); }
.scrim.on .sheet { transform: translate(-50%, 0); }
.side { transition: transform .3s cubic-bezier(.2, .8, .2, 1) !important; }
.menu { animation: menuIn .16s ease-out; transform-origin: top left; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scrim .sheet, .side { transition: none !important; } .menu { animation: none; } }
.vlabel { min-width: 72px; color: var(--md3-neutral-primary); }
.vrow { min-height: 60px; }
/* product placeholder glyph (V4) */
.nthumb .glyph { width: 22px; height: 22px; background: var(--md3-outline); -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.nthumb.none { background: var(--md3-outline-a10, var(--md3-neutral05)); }
/* centred confirm modal */
.mscrim { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--sp-24); background: var(--md3-on-primary-container-a60); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.mscrim.on { opacity: 1; pointer-events: auto; }
.modal { width: min(480px, 100%); padding: var(--sp-24); border-radius: 20px; background: var(--md3-on-primary); box-shadow: 0 24px 64px -16px var(--md3-neutral-primary-a30); transform: scale(.96); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.mscrim.on .modal { transform: none; }
.modal__t { color: var(--md3-neutral-primary); }
.modal__b { margin-top: var(--sp-8); color: var(--md3-on-surface-variant); }
.modal__f { display: flex; gap: var(--sp-12); margin-top: var(--sp-24); }
.modal__f .btn { flex: 1; height: 48px; }
.vmodal { width: min(560px, 100%); }
.vlist { margin-top: var(--sp-16); max-height: 420px; overflow-y: auto; border: 1px solid var(--md3-neutral05); border-radius: 12px; }
.vlist .vrow:first-child { border-top: 0; }
/* selects: no browser arrow jammed against the edge — our own chevron 16px in, text at the same 16px inset as inputs */
.device select.inp { -webkit-appearance: none; appearance: none; padding: 0 48px 0 var(--sp-16) !important; cursor: pointer;
  background-image: var(--chev); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px 20px; }
.device { --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344544A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.device select.inp:focus { border-color: var(--md3-on-secondary-container); box-shadow: 0 0 0 3px var(--md3-on-primary-container-a10); outline: 0; }
/* picker fields (old Help Desk form): a 56px field, the value or a placeholder, ⊕ to choose; a person shows as a chip */
.pick { position: relative; display: flex; align-items: center; min-height: 56px; border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-on-primary); }
.pick__b { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-12); min-height: 56px; padding: var(--sp-8) var(--sp-16); border: 0; background: none; text-align: left; color: var(--md3-neutral-primary); }
.pick__ph { color: var(--md3-on-secondary-container); }
.pick__plus { display: flex; color: var(--md3-secondary-dark); }
.pick__x { width: 44px; height: 44px; margin-right: var(--sp-4); flex: none; border: 0; border-radius: 22px; background: none; display: grid; place-items: center; color: var(--md3-on-surface-variant); }
.pick.person { background: var(--md3-displaybg-primary); border-color: transparent; }
.pav { width: 40px; height: 40px; flex: none; background: var(--md3-outline); color: var(--md3-on-primary); }
.plrow { min-height: 64px; gap: var(--sp-12); }
.plrow.on { background: var(--md3-neutral05); }
.plrow .app-icon { color: var(--md3-on-secondary-container); }
/* breathing space (Sourav, 22 Oct): stepper → search 24, search → first row 16, rows 16 tall padding */
.nbox .vsteps { margin-bottom: var(--sp-12); }
.nbox .vsteps + .nsec { padding-top: var(--sp-12) !important; }
.nsearch + .nlist, .nsearch + .hits + .nlist { margin-top: var(--sp-8); }
.nrow { padding: var(--sp-16) 0; }
.nsec > .linkbtn { margin-top: var(--sp-4); }
.pick__x { color: var(--md3-tertiary); }
.nbox .vsteps { margin-bottom: var(--sp-20) !important; }
.ndet .upload { width: 100%; }
/* attachments = the old Help Desk upload box (Sourav, 22 Oct): soft teal area, a white dashed icon tile, "Upload Files" in green, formats line */
.ndet .upload { flex-direction: column; justify-content: center; gap: 0; padding: var(--sp-24) var(--sp-16); border: 0; border-radius: 8px; background: var(--md3-secondary-container-a30); color: var(--md3-on-surface); }
.upload__tile { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: var(--sp-16); border: 1px dashed var(--md3-on-surface-variant); border-radius: 8px; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.ndet .upload .t-body-title { color: var(--md3-on-surface); font-weight: 700; }
.ndet .upload .muted { margin-top: var(--sp-4); }
/* chosen cost centre / project = the Requested by chip (Sourav, 22 Oct): tinted, no outline, icon disc, name over code */
.pick.set { background: var(--md3-displaybg-primary); border-color: transparent; }
.pick.set .pav .app-icon { color: var(--md3-on-primary); }
/* picker sheet = old Help Desk people picker: white header with ← and a bare search, tinted body, white option cards */
.psh-h { flex: none; display: flex; align-items: center; gap: var(--sp-12); height: 72px; padding: 0 var(--sp-16); border-radius: 22px 22px 0 0; background: var(--md3-on-primary); box-shadow: 0 2px 6px var(--md3-neutral-primary-a10); position: relative; z-index: 1; }
.psh-q { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: none; color: var(--md3-neutral-primary); }
.psh-q::placeholder { color: var(--md3-on-surface-variant); }
.psh-b { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-16) var(--sp-24) var(--sp-24); background: var(--md3-displaybg-primary); }
.psh-b .pcard { flex: none; flex-direction: row; justify-content: flex-start; }
.pcard { width: 100%; display: flex; align-items: center; gap: var(--sp-12); min-height: 72px; padding: var(--sp-12) var(--sp-16); border: 0; border-radius: 8px; background: var(--md3-on-primary); text-align: left; color: var(--md3-neutral-primary); }
.pcard__s { color: var(--md3-on-surface-variant); }
.pcard .pav .app-icon { color: var(--md3-on-primary); }
.pcard.on { background: var(--md3-on-primary-a50); }
.pcard.on .pav, .pcard.on .grow { opacity: .6; }
.pcard__ok { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--md3-primary); color: var(--md3-on-primary); }
.pcard__ok .app-icon { color: var(--md3-on-primary); }
.nent { display: flex; flex-direction: column; gap: var(--sp-12); }
/* ---------- Choose entity page (Egg module location page + medical-flow Animal card) ---------- */
.epg { display: flex; flex-direction: column; gap: var(--sp-16); margin: calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16)) 0; min-height: calc(100% + 120px); padding: var(--sp-16) var(--sp-24) 140px; margin-bottom: -120px; background: var(--md3-on-primary); color: var(--md3-on-primary-container); }
.epg > * { flex: none; }
.eback { width: 44px; height: 44px; margin-left: calc(-1 * var(--sp-12)); color: var(--md3-on-secondary-container); }
.elbl { padding-top: var(--sp-8); color: var(--md3-on-primary-container); }
.esrow { display: flex; gap: var(--sp-8); }
.esearch { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-12); height: 56px; padding: 0 var(--sp-8) 0 var(--sp-16); border-radius: 8px; background: var(--md3-background); color: var(--md3-on-primary-container); }
.esearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--md3-on-primary-container); font: inherit; }
.esearch--sm { height: 48px; margin-top: var(--sp-8); }
.eqr { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--md3-on-surface); color: var(--md3-on-primary); }
.eqr .app-icon { color: var(--md3-on-primary); }
.esite { display: flex; align-items: center; gap: var(--sp-16); height: 56px; padding: 0 var(--sp-16) 0 var(--sp-20); border: 0; border-radius: 8px; background: var(--md3-primary); color: var(--md3-on-primary); text-align: left; }
.esite .app-icon { color: var(--md3-on-primary); }
.esel { display: flex; align-items: center; gap: var(--sp-12); height: 56px; padding: 0 var(--sp-16) 0 var(--sp-20); border: 1px solid var(--md3-outline); border-radius: 8px; background: var(--md3-surface); color: var(--md3-on-primary-container); text-align: left; }
.esel .app-icon { color: var(--md3-neutral-primary); }
.ebox { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12) var(--sp-8) var(--sp-8); border-radius: 8px; background: var(--md3-surface-variant); }
.ebox__h { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-8); color: var(--md3-neutral-primary); }
.ebox__h button { border: 0; background: none; padding: 0; color: var(--md3-neutral-primary); }
.ebox__c { display: flex; align-items: center; gap: var(--sp-12); min-height: 56px; padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-8); border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.ebox__c.done { background: var(--md3-background); }
.ebox__c .top__btn { color: var(--md3-on-surface-variant); }
.eav { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--md3-surface-variant); color: var(--md3-outline); }
.erow { display: flex; align-items: center; gap: var(--sp-12); width: 100%; padding: var(--sp-12) var(--sp-16); border: 0; border-bottom: 1px solid var(--md3-surface-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); text-align: left; }
.erow .grow { display: flex; flex-direction: column; gap: var(--sp-4); }
.erow b { color: var(--md3-neutral-primary); }
.erow.on { background: var(--md3-neutral05); }
.erow > .app-icon { color: var(--md3-on-secondary-container); }
.echips { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.echip { padding: 2px var(--sp-8); border-radius: 4px; background: var(--md3-surface-variant); color: var(--md3-on-surface-variant); }
.echip.dk { background: var(--md3-on-surface-variant); color: var(--md3-on-primary); }
.ecards { display: flex; flex-direction: column; gap: var(--sp-12); }
.ecard { border: 1px solid var(--md3-outline-variant); text-align: left; align-items: center; }
.app-animal-card .tag { height: auto; padding: 0; background: none; border-radius: 0; }
.ecard.on { border-color: var(--md3-primary); box-shadow: 0 0 0 1px var(--md3-primary); }
.ecard__pick { width: 28px; height: 28px; flex: none; margin: 0 var(--sp-12); }
.ephoto { width: 100%; height: 100%; display: grid !important; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-outline); }
.esh-h { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8) var(--sp-24) var(--sp-16); color: var(--md3-on-primary-container); border-bottom: 1px solid var(--md3-surface-variant); }
.esh-b { padding: 0; background: var(--md3-on-primary); }
.efoot .grow { color: var(--md3-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efoot .btn { padding: 0 var(--sp-48); }
/* location sheet colours = the live Antz app (Sourav, 23 Oct): grey avatar disc, grey chips (first one a step darker),
   centred teal title, the Sec / Site lines in ink */
.eav { background: var(--md3-neutral-primary-a10); color: var(--md3-outline); }
.echip { padding: var(--sp-4) var(--sp-12); background: var(--md3-neutral05); color: var(--md3-on-surface-variant); }
.echip.dk { background: var(--md3-neutral-primary-a10); color: var(--md3-on-surface-variant); }
.erow .t-medium-medium { color: var(--md3-on-surface-variant); }
.esh-h { gap: var(--sp-8); }
.esh-h .t-major-title { align-self: center; margin-bottom: var(--sp-8); color: var(--md3-on-primary-container); }
.esh-h .t-minor-regular { color: var(--md3-neutral-primary); }
.esh-h .esearch { flex: none; height: 48px; min-height: 48px; margin-top: var(--sp-12); }
.esh-h { padding-bottom: var(--sp-16); }
.erow { padding: var(--sp-16) var(--sp-24); gap: var(--sp-16); }
.erow .grow { gap: var(--sp-8); }
/* animal = 4th level (Sourav, 23 Oct): Select Animal opens a sheet of Animal cards */
.esh-b--cards { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-16) var(--sp-24) var(--sp-24); background: var(--md3-background); }
.esh-b--cards .ecard { border-color: transparent; }
.eav--img { object-fit: cover; }
/* Review, V4 standard (Sourav, 23 Oct): purpose title, facts grid, soft 16px panels, avatar timeline */
.rv { display: flex; flex-direction: column; gap: var(--sp-32, 32px) !important; }
.rvt { margin: 0; color: var(--md3-neutral-primary); }
.rvf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-24); margin-top: calc(-1 * var(--sp-12)); }
.rvf > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rvf .t-subtext-regular { color: var(--md3-neutral-secondary); }
.rvf .t-body-medium { color: var(--md3-neutral-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvh { margin: 0 0 var(--sp-12); color: var(--md3-neutral-primary); }
.rvp { border-radius: 16px; background: var(--md3-neutral-primary-a5, rgb(0 0 0 / 3.5%)); padding: var(--sp-4) var(--sp-16); }
.rvp--flush { padding: 0; overflow: hidden; }
.rvi { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; }
.rvi + .rvi { border-top: 1px solid var(--md3-neutral05); }
.rvi .nthumb, .rvi .thumb { background: var(--md3-on-primary); }
.rvi .namt { display: flex; flex-direction: column; align-items: flex-end; text-align: right; color: var(--md3-neutral-primary); }
.rvtot { display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-12) 0 var(--sp-12); border-top: 1px solid var(--md3-neutral05); color: var(--md3-neutral-primary); }
.rvp .ledger .lg { padding-left: var(--sp-16); padding-right: var(--sp-16); }
.rvp .ledger .lg--h { border-bottom: 1px solid var(--md3-neutral05); }
.rvtl__r { display: flex; gap: var(--sp-12); }
.rvtl__rail { display: flex; flex-direction: column; align-items: center; }
.rvtl__av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--md3-on-primary-container-a10); color: var(--md3-on-primary-container); }
.rvtl__rail i { flex: 1; width: 2px; min-height: 16px; margin: var(--sp-4) 0; border-radius: 1px; background: var(--md3-neutral05); }
.rvtl__tx { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) 0 var(--sp-20); min-width: 0; }
.rvtl__r:last-child .rvtl__tx { padding-bottom: 0; }
.rvtl__tx .t-minor-title { color: var(--md3-neutral-primary); }
.rvtl__tx .t-body-regular { color: var(--md3-neutral-secondary); }
.rvtl__r.v .rvtl__av { background: var(--md3-neutral05); color: var(--md3-neutral-secondary); }
.rvtl__r.v .t-minor-title { color: var(--md3-on-surface-variant); font-weight: 500; }
.rvent { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); }
.rvent .grow { display: flex; flex-direction: column; gap: var(--sp-8); color: var(--md3-on-surface-variant); }
.rvan { background: var(--md3-neutral-primary-a5, rgb(0 0 0 / 3.5%)); border-radius: 16px; padding: var(--sp-12); }
/* review panels (Sourav, 23 Oct): 8px corners, DisplayBg primary at reduced opacity in place of grey */
.rvp, .rvan { border-radius: 8px; background: var(--md3-displaybg-primary-a60); }
.rvi + .rvi, .rvtot, .rvp .ledger .lg--h { border-color: var(--md3-on-primary-container-a10); }
.rvi .namt span { white-space: nowrap; }
.rvi .namt { width: auto; min-width: 112px; }
.rvan { box-shadow: none !important; }
/* FAB = Help Desk kit FAB (Sourav, 23 Oct): 64px, 12px corners, Secondary → Primary gradient, soft lift */
.device .fab { width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, var(--md3-secondary), var(--md3-primary)); color: var(--md3-on-primary); box-shadow: 0 4px 16px var(--md3-neutral-primary-a20), 0 1px 3px var(--md3-neutral-primary-a10); }
.device .fab .app-icon { color: var(--md3-on-primary); }

/* ---------- request page: Help Desk frame + V4 content + V3 extras (23 Oct) ---------- */
.device.in-req main { padding-bottom: 200px; }
.rqpage { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--sp-16)); }
.rqbar { display: flex; align-items: center; gap: var(--sp-8); height: 64px; padding: 0 var(--sp-12); background: var(--md3-on-primary-container); color: var(--md3-on-primary); border-bottom: 1px solid var(--md3-primarywhite20); text-align: center; }
.rqbar .top__btn, .rqbar .top__btn .app-icon { color: var(--md3-on-primary); }
.rqh { padding: var(--sp-12) 0 var(--sp-16) var(--sp-24); background: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.rqh__row { display: flex; align-items: center; gap: var(--sp-16); }
.rqh__tile { width: 44px; height: 44px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--md3-primarywhite20); }
.rqh__tile .app-icon { color: var(--md3-on-primary); }
.rqh-flag { flex: none; }
.rqh__when { margin: var(--sp-12) 0 !important; }
.rqh__who { display: flex; align-items: center; gap: var(--sp-8); }
.rqchip { display: inline-flex; align-items: center; gap: var(--sp-8); height: 44px; padding: 0 var(--sp-12) 0 0; border: 0; background: none; color: var(--md3-on-primary); }
.rqchip .app-icon { color: var(--md3-on-primary); opacity: .8; }
.rqchip__av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--md3-primarywhite20); color: var(--md3-on-primary); }
.rqchip__av.big { width: 48px; height: 48px; background: var(--md3-on-primary-container); }
.rqrb { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--md3-primarywhite20); }
.rqrb .app-icon { color: var(--md3-on-primary); }
.rqnote { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-16) var(--sp-16) 0; padding: var(--sp-12) var(--sp-16); border-radius: 8px; background: var(--md3-notes); color: var(--md3-on-error-container); }
.rqnote p { margin: 0; }
.rqnote .t-subtext-regular { opacity: .75; }
.rqnote--bad { margin: 0; background: rgb(from var(--md3-error) r g b / 8%); color: var(--md3-error); }
.rqrows { background: var(--md3-background); }
.rqrow { display: flex; gap: var(--sp-16); padding: var(--sp-16) var(--sp-24); border-bottom: 1px solid var(--md3-outline-variant); }
.rqrow__i { width: 24px; flex: none; display: flex; justify-content: center; padding-top: 2px; color: var(--md3-neutral-primary); }
.rqrow__l { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 28px; margin-bottom: var(--sp-12); color: var(--md3-neutral-primary); }
.rqcount { margin-left: var(--sp-4); color: var(--md3-neutral-secondary); }
.rq-purpose { margin: 0 0 var(--sp-12) !important; color: var(--md3-neutral-primary); }
.rqfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12) var(--sp-24); }
.rqfacts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rqfacts .t-subtext-regular { color: var(--md3-neutral-secondary); }
.rqfacts .t-body-medium { color: var(--md3-neutral-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqtag { height: 24px; padding: 0 var(--sp-8); border-radius: 4px; display: inline-flex; align-items: center; }
.rqtag.ok { background: rgb(from var(--md3-secondary) r g b / 12%); color: var(--md3-secondary-dark); }
.rqtag.bad { background: rgb(from var(--md3-error) r g b / 10%); color: var(--md3-error); }
.rqcard { border-radius: 8px; background: var(--md3-on-primary); padding: var(--sp-4) var(--sp-16); }
.rqcard--pad { padding: var(--sp-12) var(--sp-16); }
.rqcard--flush { padding: 0; overflow: hidden; }
.rqent { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); }
.rqent .grow { display: flex; flex-direction: column; gap: var(--sp-8); color: var(--md3-on-surface-variant); }
.rqan { box-shadow: none !important; border-radius: 8px; }
.rqi { width: 100%; display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; border: 0; background: none; text-align: left; color: var(--md3-neutral-primary); }
.rqi + .rqi { border-top: 1px solid var(--md3-neutral05); }
.rqi .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rqi .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqi .namt { width: auto; min-width: 96px; display: flex; flex-direction: column; align-items: flex-end; }
.rqi .namt span { white-space: nowrap; }
.rqi > .app-icon { color: var(--md3-neutral-secondary); flex: none; }
.rqi.off { opacity: .5; }
.rqi.off .title { text-decoration: line-through; }
.rqcard .rvtot { border-top: 1px solid var(--md3-neutral05); }
.rqlink { border: 0; background: none; padding: 0; min-height: 28px; color: var(--md3-on-primary-container); }
.rqstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.rqcard--flush .rqstats { padding: var(--sp-12) var(--sp-16); border-bottom: 1px solid var(--md3-neutral05); }
.rqstats > div { display: flex; flex-direction: column; gap: 2px; }
.rqstats .t-subtext-regular { color: var(--md3-neutral-secondary); }
.rqstats .t-minor-title { color: var(--md3-neutral-primary); }
.rqstats .bad .t-minor-title { color: var(--md3-error); }
.rqstats .warn .t-minor-title { color: var(--md3-tertiary); }
.rqcard .ledger .lg { padding-left: var(--sp-16); padding-right: var(--sp-16); }
.lg--btn { width: 100%; border: 0; border-top: 1px solid var(--md3-neutral05); background: none; text-align: right; color: var(--md3-neutral-primary); }
.lg--btn > span:first-child { text-align: left; }
.rqtl .rvtl__av { background: var(--md3-on-primary); }
.rqtl .rvtl__r.v .rvtl__av { background: var(--md3-neutral05); }
.rqst { align-self: flex-start; margin-top: var(--sp-4); padding: 2px var(--sp-8); border-radius: 4px; background: var(--md3-neutral05); color: var(--md3-on-surface-variant); }
.rqst.ok { background: rgb(from var(--md3-secondary) r g b / 12%); color: var(--md3-secondary-dark); }
.rqst.bad { background: rgb(from var(--md3-error) r g b / 10%); color: var(--md3-error); }
.rqst.wait { background: rgb(from var(--md3-tertiary) r g b / 12%); color: var(--md3-tertiary); }
.rqsec { background: var(--md3-on-primary); padding: var(--sp-16) var(--sp-24) var(--sp-20); border-bottom: 1px solid var(--md3-outline-variant); }
.rqsec__h { display: flex; align-items: center; gap: var(--sp-16); margin-bottom: var(--sp-16); color: var(--md3-neutral-primary); }
.rqsec__h h2 { margin: 0; }
.rqsec__h > .app-icon { color: var(--md3-on-surface-variant); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-12); }
.fcx { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-8); padding: var(--sp-8); border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-on-primary); text-align: left; }
.fcx-th { height: 124px; border-radius: 8px; display: grid; place-items: center; }
.fcx-th.pdf { background: rgb(from var(--md3-tertiary-container) r g b / 20%); color: var(--md3-tertiary); }
.fcx-th.doc { background: rgb(from var(--md3-add-primary) r g b / 10%); color: var(--md3-add-primary); }
.fcx-th.img { background: var(--md3-displaybg-primary); color: var(--md3-outline); }
.fcx-th .app-icon { color: inherit; }
.fcx-n { color: var(--md3-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcx-m { display: flex; justify-content: space-between; gap: var(--sp-8); color: var(--md3-neutral-secondary); }
.dact { border-bottom: 0; }
.afilter { display: inline-flex; align-items: center; gap: var(--sp-4); border: 0; background: none; padding: 0; min-height: 44px; color: var(--md3-on-primary-container); }
.afilter .app-icon { color: var(--md3-on-primary-container); }
.acompose { display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-8); }
.rbtn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--md3-on-primary-container); }
.rbtn.big { width: 56px; height: 56px; background: var(--md3-displaybg-primary); color: var(--md3-add-primary); }
.rbtn .app-icon { color: inherit; }
.abox-in { flex: 1; display: flex; align-items: center; gap: var(--sp-8); height: 64px; padding: 0 var(--sp-8) 0 var(--sp-12); border-radius: 8px; background: var(--md3-displaybg-primary); }
.abox-in input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--md3-neutral-primary); font: inherit; }
.pav { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--md3-secondary); color: var(--md3-on-primary); }
.abox-in .pav { width: 36px; height: 36px; background: var(--md3-on-primary-container); }
.aitem { padding: var(--sp-16) 0; border-bottom: 1px solid var(--md3-neutral05); }
.aitem:last-child { border-bottom: 0; }
.ahead { display: flex; align-items: center; gap: var(--sp-12); color: var(--md3-neutral-primary); }
.abox { margin-top: var(--sp-12); padding: var(--sp-12) var(--sp-16); border-radius: 8px; background: var(--md3-background); color: var(--md3-neutral-primary); }
.abox p { margin: 0; }
.abox.note { background: var(--md3-notes); color: var(--md3-on-error-container); }
.abox.st { display: flex; flex-direction: column; gap: var(--sp-8); }
.abox.st.ok { background: rgb(from var(--md3-secondary) r g b / 6%); }
.abox.st.bad { background: rgb(from var(--md3-error) r g b / 6%); }
.abox.st.plain { background: var(--md3-neutral05); }
.abox.st.proc { background: var(--md3-primary-a5); gap: var(--sp-4); }
.atrans { display: flex; align-items: center; gap: var(--sp-8); }
.atrans .muted { color: var(--md3-neutral-secondary); }
.abox.st.ok .to { color: var(--md3-secondary-dark); }
.abox.st.bad .to { color: var(--md3-error); }
.akv .muted { margin-right: var(--sp-4); }
.rqfoot { flex-direction: column; align-items: stretch; gap: var(--sp-12); padding: var(--sp-16) var(--sp-24) var(--sp-20); border-radius: 16px 16px 0 0; }
.rqfoot__s p { margin: 0; }
.rqfoot__h { display: flex; gap: var(--sp-4); color: var(--md3-neutral-secondary); }
.rqfoot__w { margin-top: var(--sp-4) !important; color: var(--md3-on-surface-variant); }
.rqfoot__w.mine, .rqfoot__w.warn { color: var(--md3-tertiary); }
.rqfoot__w.ok { color: var(--md3-secondary-dark); }
.rqfoot__w.bad { color: var(--md3-error); }
.rqfoot__t { margin-top: var(--sp-4) !important; color: var(--md3-neutral-secondary); }
.rqfoot__b { display: flex; gap: var(--sp-8); }
.rqfoot__b .btn { flex: 1; height: 48px; }
.rqfoot__b .grow2 { flex: 2; }
.device .btn.warnbtn { background: var(--md3-tertiary); border-color: var(--md3-tertiary); color: var(--md3-on-primary); }
.device .btn .app-icon { color: inherit; }
.rqmenu { position: absolute; min-width: 220px; }
.menu__i.bad, .menu__i.bad .app-icon { color: var(--md3-error); }
.rqh2 { margin: var(--sp-20) 0 var(--sp-8); color: var(--md3-neutral-primary); }
.rqisb { background: var(--md3-background); }
.rqish { gap: var(--sp-12); align-items: center; }
.rqkv { display: flex; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-8) 0; color: var(--md3-neutral-primary); }
.rqkv + .rqkv { border-top: 1px solid var(--md3-neutral05); }
.rqkv .t-body-regular { color: var(--md3-neutral-secondary); }
.rqtrack { display: flex; gap: var(--sp-8); }
.rqtrack__s { flex: 1; display: flex; flex-direction: column; gap: var(--sp-8); color: var(--md3-neutral-secondary); }
.rqtrack__d { height: 24px; border-radius: 12px; display: grid; place-items: center; background: var(--md3-neutral05); }
.rqtrack__s.done .rqtrack__d { background: var(--md3-on-primary-container); }
.rqtrack__s.done .rqtrack__d .app-icon { color: var(--md3-on-primary); }
.rqtrack__s.cur .rqtrack__d { background: var(--md3-on-primary-container-a10); box-shadow: inset 0 0 0 2px var(--md3-on-primary-container); }
.rqtrack__s.cur, .rqtrack__s.done { color: var(--md3-neutral-primary); }
.rqstmt > div { display: flex; justify-content: space-between; padding: var(--sp-8) 0; color: var(--md3-neutral-primary); }
.rqstmt > div.b { border-top: 1px solid var(--md3-neutral05); font-weight: 600; }
.rqstmt .big { border-top: 1px solid var(--md3-neutral05); align-items: baseline; padding-top: var(--sp-12); }
.rqstmt .big.bad { color: var(--md3-error); }
.rqpc { width: 440px; display: flex; flex-direction: column; gap: var(--sp-12); }
.rqpc .flex { gap: var(--sp-12); align-items: center; }
.rqpc__r { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) var(--sp-12); border-radius: 8px; background: var(--md3-background); color: var(--md3-neutral-primary); }
.rqpc__r .btn { height: 36px; }
.mt16 { margin-top: var(--sp-16); }
/* item sheet = V4 ItemSheet on the tablet (23 Oct) */
.isheet { display: flex; flex-direction: column; flex: 1; min-height: 0; touch-action: pan-y; }
.isheet__bar { display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-16) 0 var(--sp-12); }
.isheet__x { background: var(--md3-neutral05); }
.isheet__head { padding: var(--sp-16) var(--sp-24) var(--sp-16); border-bottom: 1px solid var(--md3-surface-variant); }
.isheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-20) var(--sp-24) var(--sp-32, 32px); }
.inR { animation: irIn .28s cubic-bezier(.2, .8, .2, 1); } .inL { animation: ilIn .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes irIn { from { opacity: 0; transform: translateX(28px); } } @keyframes ilIn { from { opacity: 0; transform: translateX(-28px); } }
.ihead { display: flex; align-items: center; gap: var(--sp-16); margin-bottom: var(--sp-20); color: var(--md3-neutral-primary); }
.ihead .grow { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ihead .rqst { margin-top: var(--sp-4); }
.ink { color: var(--md3-neutral-primary); }
.ithumb { width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--md3-displaybg-primary); }
.ithumb img { width: 100%; height: 100%; object-fit: cover; }
.ithumb .glyph { width: 32px; height: 32px; background: var(--md3-outline); -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.itabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--md3-neutral05); }
.itab { flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); border: 0; border-radius: 8px; background: none; color: var(--md3-neutral-secondary); font-weight: 500; white-space: nowrap; }
.itab.on { background: var(--md3-on-primary); color: var(--md3-on-surface-variant); font-weight: 600; box-shadow: 0 1px 2px var(--md3-neutral-primary-a10); }
.itab__w { display: inline-flex; align-items: center; gap: var(--sp-4); color: var(--md3-tertiary); }
.itab__w i { width: 6px; height: 6px; border-radius: 50%; background: var(--md3-tertiary); }
.isub { margin-bottom: var(--sp-8); color: var(--md3-neutral-secondary); letter-spacing: .04em; text-transform: uppercase; }
.ipanel { padding: var(--sp-16); border-radius: 8px; background: var(--md3-displaybg-primary-a60); color: var(--md3-neutral-primary); }
.ipanel.warn { background: rgb(from var(--md3-notes) r g b / 60%); }
.ipanel.warn > .t-body-title { color: var(--md3-on-error-container); }
.ichart { display: block; width: 100%; height: 132px; margin-top: var(--sp-12); overflow: visible; }
.ichart__l { fill: none; stroke: var(--md3-on-primary-container); stroke-width: 2; }
.ichart.warn .ichart__l { stroke: var(--md3-tertiary); }
.ichart circle.f { fill: var(--md3-on-primary-container); }
.ichart circle.o { fill: var(--md3-on-primary); stroke: var(--md3-on-primary-container); stroke-width: 2; }
.ichart circle.now { fill: var(--md3-on-primary); stroke: var(--md3-tertiary); stroke-width: 3; }
.ichart:not(.warn) circle.now { stroke: var(--md3-primary); }
.ichart__x { display: flex; justify-content: space-between; margin: var(--sp-4) calc(28px / 640 * -100%) 0; color: var(--md3-neutral-secondary); text-align: center; }
.ichart__x span { flex: 1; } .ichart__x b { font-weight: 500; color: var(--md3-neutral-primary); }
.ichart__x span.now, .ichart__x span.now b { color: var(--md3-tertiary); font-weight: 600; }
.ilegend { display: flex; gap: var(--sp-16); margin-top: var(--sp-12); color: var(--md3-neutral-secondary); }
.ilegend span { display: inline-flex; align-items: center; gap: var(--sp-8); }
.ilegend i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--md3-on-primary-container); box-sizing: border-box; }
.ilegend i.f { background: var(--md3-on-primary-container); }
.itoggle { width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-8); padding: 0 var(--sp-4); border: 0; border-radius: 8px; background: none; color: var(--md3-neutral-primary); text-align: left; }
.itoggle .app-icon { color: var(--md3-neutral-secondary); }
.ilist__r { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-4); border-bottom: 1px solid var(--md3-neutral05); color: var(--md3-neutral-primary); }
.ilist__r:last-child { border-bottom: 0; }
.ilist__r > .t-subtext-regular { width: 52px; flex: none; }
.ilist__r .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ilist__r .flex { gap: var(--sp-8); align-items: center; }
.ilist__r .rqst { margin: 0; }
.ilist__q { display: flex; flex-direction: column; align-items: flex-end; }
.isep { margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--md3-neutral05); }
.ibud { padding: var(--sp-16); border-radius: 8px; border: 1px solid var(--md3-outline-variant); color: var(--md3-neutral-primary); }
.ibar { position: relative; height: 8px; margin: var(--sp-12) 0; border-radius: 4px; background: var(--md3-neutral05); overflow: hidden; }
.ibar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgb(from var(--md3-on-primary-container) r g b / 70%); }
.ibar i.bad { background: var(--md3-tertiary); }
.ikv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-8) 0; color: var(--md3-neutral-primary); }
.ikv span { min-width: 0; } .ikv b { font-weight: 500; white-space: nowrap; }
.ikv.strong span, .ikv.strong b { font-weight: 600; }
.ikv.hot span, .ikv.hot b { color: var(--md3-tertiary); }
.ikv.row { border-bottom: 1px solid var(--md3-neutral05); }
.ikv .me { font-weight: 600; }
.t-warn { color: var(--md3-tertiary); }
.iline { margin-top: var(--sp-12); border-radius: 8px; background: var(--md3-displaybg-primary); overflow: hidden; }
.iline.bad { background: rgb(from var(--md3-tertiary) r g b / 10%); }
.iline.open { background: var(--md3-on-primary); box-shadow: 0 0 0 1px var(--md3-neutral-primary-a10); }
.iline__h { width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-12); border: 0; background: none; text-align: left; color: var(--md3-on-surface); }
.iline.bad .iline__h, .iline.bad .iline__h .app-icon { color: var(--md3-tertiary); }
.iline__h .app-icon { color: inherit; }
.iline__b { margin: 0 var(--sp-12); padding: var(--sp-4) 0 var(--sp-12); border-top: 1px solid var(--md3-neutral05); }
.iline__b .tot { border-top: 1px solid var(--md3-neutral05); margin-top: var(--sp-4); }
.ihere { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16); border-radius: 8px; background: var(--md3-displaybg-primary-a60); color: var(--md3-neutral-primary); margin-bottom: var(--sp-24); }
.ihere.short { background: rgb(from var(--md3-tertiary) r g b / 10%); }
.ihere__i { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.ihere.short .ihere__i, .ihere.short .ihere__n { color: var(--md3-tertiary); }
.ihere__i .app-icon { color: inherit; }
.ihere__n { display: flex; flex-direction: column; align-items: flex-end; }
.istore { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; border-bottom: 1px solid var(--md3-neutral05); color: var(--md3-neutral-primary); }
.istore__b { width: 96px; height: 6px; border-radius: 3px; background: var(--md3-neutral05); overflow: hidden; }
.istore__b i { display: block; height: 100%; background: rgb(from var(--md3-on-primary-container) r g b / 60%); }
.istore__n { width: 80px; text-align: right; }
.itl__r { position: relative; display: flex; gap: var(--sp-12); padding-bottom: var(--sp-20); color: var(--md3-neutral-secondary); }
.itl__r:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--md3-neutral05); }
.itl__r.done:not(:last-child)::before { background: rgb(from var(--md3-on-primary-container) r g b / 35%); }
.itl__d { width: 32px; height: 32px; flex: none; z-index: 1; border-radius: 50%; display: grid; place-items: center; background: var(--md3-on-primary); border: 1.5px solid var(--md3-outline-variant); color: var(--md3-outline-variant); box-sizing: border-box; }
.itl__d .app-icon { color: inherit; }
.itl__r.done .itl__d { background: var(--md3-on-primary-container); border-color: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.itl__r.now .itl__d { border: 2px solid var(--md3-on-primary-container); color: var(--md3-on-primary-container); }
.itl__r.done, .itl__r.now { color: var(--md3-neutral-primary); }
.itl__r .grow { padding-top: 5px; min-width: 0; }
.iq { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); }
.iq__r { display: grid; grid-template-columns: minmax(0, 1fr) 110px 80px; gap: var(--sp-8); align-items: center; }
.iq__r > :last-child { text-align: right; }
.iq__b { height: 6px; border-radius: 3px; background: var(--md3-neutral05); overflow: hidden; }
.iq__b i { display: block; height: 100%; background: var(--md3-outline-variant); }
.iq__b i.lo { background: var(--md3-on-primary-container); }
.ichip { display: inline-flex; flex-direction: column; margin-top: var(--sp-8); padding: var(--sp-8) var(--sp-12); border-radius: 8px; background: var(--md3-neutral05); color: var(--md3-on-surface-variant); }
.ichip.ok { background: var(--md3-displaybg-primary); color: var(--md3-on-surface); }
.ichip.warn { background: rgb(from var(--md3-notes) r g b / 60%); color: var(--md3-on-error-container); }
.ichip .t-subtext-regular { color: var(--md3-neutral-secondary); }
.ichart__x { position: relative; display: block; height: 36px; margin: var(--sp-4) 0 0; }
.ichart__x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rqv { margin: -4px 0 0 !important; color: var(--md3-neutral-primary); }
.rqv2 { margin: 2px 0 0 !important; color: var(--md3-neutral-secondary); }
.rqrows .rqrow:has(.rqv) .rqrow__l { margin-bottom: var(--sp-8); min-height: 24px; }
.rq-purpose { margin: -4px 0 0 !important; }
/* ---------- Figma "Requests - Task" Section 5 (4707:32312): status, end card, approver container, decision buttons, menu, reason overlay, banners — ported from Procure-v1 rq.js (23 Oct) ---------- */
.rq-ic { display: block; flex: none; }
.rq-ava { display: inline-grid; place-items: center; flex: none; border-radius: 30px; background: var(--md3-outline); color: var(--md3-on-primary); }

/* Bottom Section: white, radius 16 at the top, soft shadow above (4665:32210) */
.rq-foot { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-16) var(--sp-24) var(--sp-24); background: var(--md3-on-primary); border-radius: 16px 16px 0 0; box-shadow: 0 -2px 6px var(--md3-neutral-primary-a10); }
.rq-foot__hint { margin: 0; color: var(--md3-neutral-secondary); }
.rq-foot__b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-12); }
.rq-status { display: flex; flex-direction: column; gap: var(--sp-4); }
.rq-status__h { display: flex; gap: var(--sp-4); margin: 0; color: var(--md3-neutral-secondary); }
.rq-status__t { margin: 0; color: var(--md3-on-surface-variant); }
.rq-status .rq-end { margin-top: var(--sp-12); }

/* Request End statuses (274:39025): tinted card, coloured title, person, reason */
.rq-end { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-12); border: 1px solid; border-radius: 8px; box-shadow: 0 1px 12px var(--black-04); }
.rq-end--reject { background: var(--md3-error-a5); border-color: var(--md3-error); }
.rq-end--cancel { background: var(--md3-tertiary-a5); border-color: var(--md3-tertiary); }
.rq-end__t, .rq-end__r { margin: 0; }
.rq-end--reject .rq-end__t { color: var(--md3-error); }
.rq-end--cancel .rq-end__t { color: var(--md3-tertiary); }
.rq-person { display: flex; align-items: flex-start; gap: var(--sp-8); min-width: 0; }
.rq-person--sm { gap: var(--sp-4); }
.rq-person__d { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; color: var(--md3-on-surface-variant); }
.rq-person--sm .rq-person__d { gap: 0; }
.rq-person__n { display: inline-flex; align-items: center; gap: var(--sp-4); }
.rq-when { display: inline-flex; align-items: center; gap: var(--sp-4); }

/* Approver Container (4665:32471 · 32374 · 32300): Surface, hairline on top, status icon, approver, mark */
.rq-appr { display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-16); background: var(--md3-surface); border-top: 1px solid var(--md3-neutral05); }
.rq-appr__d { flex: 1; display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.rq-appr__u { display: flex; align-items: center; gap: var(--sp-12); }
.rq-appr__u > .rq-person { flex: 1; }
.rq-appr__why { color: var(--md3-error); }
.rq-quiet { color: var(--md3-neutral-secondary); }

/* Button Container (4665:32674): Approve in Primary, Reject in Error, 48 high, radius 8 */
.rq-decide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.k-actionbar .rq-decide { display: flex; }
.k-actionbar .rq-btn { min-width: 160px; }
.rq-btn { height: 48px; padding: 0 var(--sp-24); border: 0; border-radius: 8px; color: var(--md3-on-primary); cursor: pointer; }
.rq-btn--sm { width: 100%; height: 42px; }
.rq-btn--approve { background: var(--md3-primary); }
.rq-btn--reject { background: var(--md3-error); }
.rq-btn--cancel { background: var(--md3-tertiary); }
.rq-btn--neutral { background: var(--md3-on-primary-container); }
.rq-btn:focus-visible { outline: 2px solid var(--md3-on-primary-container); outline-offset: 2px; }

/* Menu Options (4665:32509 · 32637) */
.rq-menu { display: flex; flex-direction: column; gap: 1px; overflow: hidden; background: var(--md3-background); border-radius: 8px; box-shadow: 0 4px 14px var(--md3-neutral-primary-a20); }
.rq-menu__i { display: flex; align-items: center; gap: var(--sp-8); min-width: 180px; padding: var(--sp-12) var(--sp-16); background: var(--md3-on-primary); border: 0; text-align: left; cursor: pointer; }
.rq-menu__i--plain { color: var(--md3-on-primary-container); }
.rq-menu__i--cancel { color: var(--md3-tertiary); }
.rq-menu__i--reject { color: var(--md3-error); }
.rq-menu__i:hover { background: var(--md3-surface); }

/* Reason Overlay (4665:32508 · 32638): white, radius 16, heading + close, tinted box, full-width button */
.rq-reason { width: 326px; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-16) var(--sp-16) 20px; background: var(--md3-on-primary); border-radius: 16px; }
.rq-reason__h { display: flex; align-items: center; justify-content: space-between; color: var(--md3-on-surface-variant); }
.rq-reason__x { display: grid; padding: 0; border: 0; background: none; cursor: pointer; }
.rq-reason__sub { margin: calc(-1 * var(--sp-8)) 0 0; }
.rq-reason__box { min-height: 96px; box-sizing: border-box; padding: var(--sp-12); border: 1px solid; border-radius: 4px; box-shadow: 0 1px 12px var(--black-04); resize: vertical; }
.rq-reason__box::placeholder { color: inherit; opacity: .8; }
.rq-reason__box:focus { outline: none; border-width: 2px; padding: calc(var(--sp-12) - 1px); }
.rq-reason--cancel .rq-reason__box { background: var(--md3-tertiary-a10); border-color: var(--md3-tertiary); color: var(--md3-on-tertiary-container); }
.rq-reason--reject .rq-reason__box { background: var(--md3-error-a10); border-color: var(--md3-error); color: var(--md3-on-error-container); }
.rq-reason--neutral .rq-reason__box { background: var(--md3-surface); border-color: var(--md3-outline-variant); color: var(--md3-on-surface-variant); }
.rq-reason__err { margin: calc(-1 * var(--sp-8)) 0 0; color: var(--md3-error); }

/* BottomSheet banners (4665:32657 · 32531 · 32586): radius 24 at the top, white 20 / 600 text */
.rq-banner { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 56px; padding: var(--sp-16) var(--sp-24) var(--sp-24); border-radius: 24px 24px 0 0; color: var(--md3-on-primary); box-shadow: 0 -1px 0 var(--md3-neutral-primary-a10); }
.rq-banner--approved { background: var(--md3-primary); }
.rq-banner--canceled { background: var(--md3-tertiary); }
.rq-banner--rejected { background: var(--md3-error); }
.rq-decide--3 { grid-template-columns: 1fr 1.4fr 1.4fr; }
/* Figma parts placed in the page */
.rqappr .rq-appr:first-child { border-top: 0; }
.rqappr .rq-appr { background: var(--md3-surface); }
.rqview { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-12) var(--sp-16) var(--sp-12) 48px; border-top: 1px solid var(--md3-neutral05); color: var(--md3-neutral-secondary); }
.rqview .grow { display: flex; flex-direction: column; min-width: 0; }
.rqview .t-body-medium { color: var(--md3-on-surface-variant); }
.rqview .rq-ava { background: var(--md3-outline-variant); }
.rqfoot { gap: var(--sp-16); }
.rqfoot .rq-status__t.mine, .rqfoot .rq-status__t.warn { color: var(--md3-tertiary); }
.rqfoot .rq-status__t.ok { color: var(--md3-secondary-dark); }
.rqfoot .rq-status__t { margin-top: 0; }
.rqfoot__t { margin: calc(-1 * var(--sp-12)) 0 0 !important; }
.rqfoot .rq-decide--3 .btn { height: 48px; }
.rqfull { width: 100%; }
.rqfoot--banner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; padding: 0; box-shadow: none; background: none; }
.rqmenu { position: absolute; }
#modal .rq-reason { width: 440px; }
.rq-btn .app-icon { color: inherit; }
/* fixed bottom sheets keep curved corners at the bottom too (Sourav, 23 Oct), same 20px as the tablet frame */
.rqfoot, .rqfoot--banner, .rqfoot--banner .rq-banner { border-radius: 16px 16px 20px 20px; overflow: hidden; }
.nfoot { border-radius: 16px 16px 20px 20px; }
/* Figma Request Details Top Section (4811:32312) */
.rqbar { display: grid; grid-template-columns: 24px 1fr 24px; align-items: end; gap: var(--sp-8); height: 68px; padding: 0 var(--sp-16) 12px; border-bottom: 0; background: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.rqbar__b { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--md3-on-primary); }
.rqbar__b .app-icon { color: var(--md3-on-primary); }
.rqbar__t { text-align: center; line-height: 24px; }
.rqh { padding: 0; }
.rqh__row { height: 62px; gap: var(--sp-12); padding-left: var(--sp-16); }
.rqh__tile { width: 32px; height: 32px; border-radius: 4px; }
.rqh-flag { align-self: center; margin-right: 0; }
.rqh__req { padding: 0 var(--sp-16) 12px; }
.rqh__when { margin: 0 0 4px !important; color: var(--md3-on-primary); }
.rqh__who { gap: 0; height: 38px; }
.rqchip { height: 30px; gap: var(--sp-4); padding: 0; }
.rqchip__av { width: 30px; height: 30px; }
.rqrb { width: 28px; height: 28px; margin-left: var(--sp-8); background: rgb(0 0 0 / 22%); }
.rqh__who .rqchip + .rqrb { margin-left: var(--sp-4); }
/* status word in the fixed bottom sheet = Figma Bottom Section only: OnSurfaceVariant for every status (Sourav, 23 Oct) */
.rqfoot .rq-status__t, .rqfoot .rq-status__t.mine, .rqfoot .rq-status__t.warn, .rqfoot .rq-status__t.ok { color: var(--md3-on-surface-variant); }
.rqfoot .rq-status__h { color: var(--md3-neutral-secondary); }
.rqfoot__t { color: var(--md3-neutral-secondary); }
/* item sheet clean-up (Sourav, 23 Oct): Antz type ladder only, 24px outer / 16px inner padding, 24px between blocks,
   one ink colour for figures, orange only when something is off */
.isheet__bar { height: 56px; padding: 0 var(--sp-16) 0 var(--sp-12); gap: 0; }
.isheet__bar .top__btn { color: var(--md3-on-surface-variant); }
.isheet__bar .top__btn:disabled { opacity: .35; }
.isheet__n { margin-left: var(--sp-8); color: var(--md3-neutral-secondary); }
.isheet__x { width: 40px; height: 40px; }
.isheet__head { padding: var(--sp-8) var(--sp-24) var(--sp-16); }
.ihead { margin-bottom: var(--sp-16); }
.ihead .t-medium-medium { color: var(--md3-neutral-primary); }
.ihead .t-body-regular { color: var(--md3-neutral-secondary); }
.ihead .ink { color: var(--md3-neutral-primary); font-weight: 600; }
.itab { font-size: 14px; }
.itab.on { color: var(--md3-neutral-primary); }
.itab:not(.on) { color: var(--md3-on-surface-variant); font-weight: 500; }
.isheet__body { padding: var(--sp-24); }
.isub { margin: 0 0 var(--sp-12); color: var(--md3-neutral-primary); letter-spacing: 0; text-transform: none; }
.ipanel { padding: var(--sp-16); }
.ipanel > .t-body-title { color: var(--md3-neutral-primary); }
.ipanel > .t-subtext-regular { margin-top: 2px; color: var(--md3-neutral-secondary); }
.ichart { margin-top: var(--sp-16); }
.ichart__x { font-size: 12px; }
.ichart__x b { font-size: 12px; font-weight: 600; }
.ichart__x span.now, .ichart__x span.now b { color: var(--md3-on-primary-container); }
.ipanel.warn .ichart__x span.now, .ipanel.warn .ichart__x span.now b { color: var(--md3-tertiary); }
.ichart:not(.warn) circle.now { stroke: var(--md3-on-primary-container); }
.ilegend { margin-top: var(--sp-8); font-size: 12px; }
.itoggle { min-height: 48px; margin-top: var(--sp-8); padding: 0 var(--sp-16); }
.itoggle .t-body-medium { color: var(--md3-on-primary-container); }
.ilist__r { padding: var(--sp-12) var(--sp-16); }
.ilist__r .t-body-medium { color: var(--md3-neutral-primary); }
.isep { margin-top: var(--sp-24); padding-top: var(--sp-24); }
.ibud { padding: var(--sp-16); }
.ibud > .t-body-title { color: var(--md3-neutral-primary); }
.ibud > .t-subtext-regular { margin-top: 2px; }
.ibar { margin: var(--sp-16) 0 var(--sp-8); }
.ikv { padding: var(--sp-8) 0; font-size: 14px; font-weight: 400; color: var(--md3-on-surface-variant); }
.ikv b { font-size: 14px; font-weight: 500; color: var(--md3-neutral-primary); }
.ikv.strong span, .ikv.strong b { font-weight: 600; color: var(--md3-neutral-primary); }
.ikv.hot span, .ikv.hot b { color: var(--md3-tertiary); }
.iline { margin-top: var(--sp-12); }
.iline__h { padding: 0 var(--sp-12) 0 var(--sp-16); font-size: 14px; }
.ihere { margin-bottom: var(--sp-24); }
.ihere .t-minor-title { color: var(--md3-neutral-primary); }
.ihere__n .t-major-title { color: var(--md3-neutral-primary); line-height: 1.1; }
.ihere__n .t-subtext-regular { color: var(--md3-neutral-secondary); }
.ihere.short .ihere__n .t-major-title, .ihere.short .ihere__n .t-subtext-regular { color: var(--md3-tertiary); }
.istore { padding: var(--sp-12) 0; }
.istore .t-body-regular { color: var(--md3-neutral-primary); }
.istore__n { color: var(--md3-neutral-primary); }
.itl__r .t-body-title { color: var(--md3-neutral-primary); }
.iq__r .t-subtext-regular, .iq__r .t-subtext-title { color: var(--md3-neutral-primary); }
.itl__r .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.itl__r .grow > br { display: none; }
.itl__r .ichip { margin-top: var(--sp-8); }
.itl__r .iq, .itl__r .ibar { align-self: stretch; }
.itl__r .ibar { margin: var(--sp-8) 0 var(--sp-4); }
.itl__r .t-subtext-regular.muted { color: var(--md3-neutral-secondary); }
/* Material icons: colours for the status marks (same set everywhere) */
.fgst, .fgmk, .strip__ic { display: inline-flex; flex: none; }
.strip__ic { color: inherit; }
.fgst.approved, .strip--approved .strip__ic { color: var(--md3-primary); }
.fgst.awaiting { color: var(--md3-tertiary); }
.fgst.rejected { color: var(--md3-error); }
.fgmk { color: var(--md3-outline-variant); }
.fgmk.approved { color: var(--md3-primary); }
.fgmk.rejected { color: var(--md3-error); }
.ffact .app-icon { flex: none; }
.isheet { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.isheet__head, .isheet__body { will-change: transform; }
/* item timeline, roomier (Sourav, 23 Oct) */
.itl__r { gap: var(--sp-16); padding-bottom: var(--sp-32, 32px); }
.itl__r:last-child { padding-bottom: 0; }
.itl__d { width: 36px; height: 36px; }
.itl__r:not(:last-child)::before { left: 17px; top: 40px; bottom: 4px; }
.itl__r .grow { padding-top: 7px; gap: var(--sp-4); }
.itl__r .ichip { margin-top: var(--sp-12); padding: var(--sp-12) var(--sp-16); }
.itl__r .iq { margin-top: var(--sp-12); gap: var(--sp-12); }
.itl__r .ibar { margin: var(--sp-12) 0 var(--sp-8); }
.strip--wait .strip__ic, .strip--mine .strip__ic { color: var(--md3-tertiary); }
/* no bottom curves on the fixed bottom sheets (Sourav, 23 Oct) — top corners only */
.rqfoot, .rqfoot--banner, .rqfoot--banner .rq-banner, .nfoot { border-radius: 16px 16px 0 0; }
/* Figma Approver Container (4813:32470): one card per step, every approver a row */
.rqappr .rq-appr__d { gap: var(--sp-12); }
.rqappr .rq-appr__u { align-items: flex-start; }
.rqappr .rq-appr__u .fgmk { padding-top: 6px; }
.fgstar { display: inline-flex; margin-left: var(--sp-4); color: var(--md3-moderate-secondary); }
.fgst.awaiting { color: var(--md3-moderate-secondary); }
.rq-appr__why { margin-top: var(--sp-4); }
/* Figma Approver Container (4665:32300 / 32471 / 32374), full width: Surface fill, 16px top and bottom; the status icon
   sits in the page's 24px icon column so the names line up with the other rows' text */
.fgappr { display: flex; gap: var(--sp-16); padding: var(--sp-16) var(--sp-24); background: var(--md3-surface); border-bottom: 1px solid var(--md3-outline-variant); }
.fgappr > .fgst { width: 24px; flex: none; justify-content: center; padding-top: 0; }
.fgappr__d { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.fgappr__l { color: var(--md3-on-surface-variant); }
.fgu { display: flex; align-items: flex-start; gap: var(--sp-12); }
.fgu__p { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--sp-4); }
.fgu__d { display: flex; flex-direction: column; min-width: 0; color: var(--md3-on-surface-variant); }
.fgu__n { display: inline-flex; align-items: center; color: var(--md3-on-surface-variant); }
.fgu__why { margin-top: var(--sp-4); color: var(--md3-error); }
.fgu .fgmk { padding-top: 6px; }
.fgappr--view { background: var(--md3-background); }
.fgst.view { color: var(--md3-neutral-secondary); }
.fgappr--view .rq-ava { background: var(--md3-outline-variant); }
/* Approver Container, exact Figma values (4813:32583 design context): Surface fill, Neutral05 top hairline, 16px padding,
   12px gaps, 8px between lines; Subtext Regular state word; 24px Outline avatar with Subtext Title initials; Body Medium
   name + 20px star (moderateSecondary); Subtext Regular role; Error reason; all text OnSurfaceVariant */
.fgappr { gap: 12px; padding: 16px var(--sp-24); background: var(--md3-surface); border-top: 1px solid var(--md3-neutral05); border-bottom: 0; }
.fgappr > .fgst { width: 20px; height: 20px; }
.fgappr__d { gap: 8px; }
.fgappr__l { color: var(--md3-on-surface-variant); line-height: 1; }
.fgu { align-items: center; gap: 12px; }
.fgu__p { gap: 4px; align-items: flex-start; }
.fgu .rq-ava { width: 24px; height: 24px; background: var(--md3-outline); color: var(--md3-on-primary); }
.fgu__d { justify-content: center; gap: 0; }
.fgu__n { gap: 4px; color: var(--md3-on-surface-variant); line-height: 1.2; }
.fgu__d > .t-subtext-regular { color: var(--md3-on-surface-variant); }
.fgu__why { margin-top: 0; color: var(--md3-error) !important; }
.fgstar { margin-left: 0; color: var(--md3-moderate-secondary); }
.fgu .fgmk { padding-top: 0; align-self: center; }
.fgmk.awaiting { color: var(--md3-outline-variant); }
.fgmk.approved, .fgst.approved { color: var(--md3-primary); }
.fgmk.rejected, .fgst.rejected { color: var(--md3-error); }
.fgst.awaiting { color: var(--md3-moderate-secondary); }
.rqrows > .fgappr:last-child { border-bottom: 1px solid var(--md3-outline-variant); }
.rqnew { color: var(--md3-moderate-secondary); } /* new (unlisted) item: bold, Antz moderateSecondary yellow, listed last (Sourav, 23 Oct) */
.rqnew { color: color-mix(in srgb, var(--md3-moderate-secondary) 68%, #000); } /* darker yellow (Sourav, 23 Oct): Antz moderateSecondary taken down ~1/3 — no darker yellow token exists */
/* request page ledger: a › on every line, it opens that line's sheet (Sourav, 23 Oct) */
.rqcard .ledger .lg { grid-template-columns: minmax(140px, 1fr) repeat(4, 96px) 20px; }
.rqcard .ledger .lg--btn > .app-icon { color: var(--md3-neutral-secondary); justify-self: end; }
.rqcard .ledger .lg--btn:active { background: var(--md3-neutral05); }
/* Approver Container, measured against Figma 4813:32583: 16px padding all round, state word at normal line height
   (15px, so the first approver starts at 16 + 15 + 8), no bottom border */
.fgappr { padding: 16px; border-bottom: 0 !important; }
.fgappr__l { line-height: normal; }
.rqrows > .fgappr:last-child { border-bottom: 0 !important; }
.fgappr { background: var(--md3-surface-variant); } /* Figma 4813:32470 updated 23 Oct: SurfaceVariant #DAE7DF for every state */
.fgappr { background: var(--md3-background); } /* Sourav, 23 Oct: the approval container takes the Antz Background colour */
.device .fab { box-shadow: 0 4px 16px var(--md3-neutral-primary-a20), 0 1px 3px var(--black-08); } /* exact Help Desk kit .k-fab shadow */
/* FAB = Help Desk .hd-newfab exactly (Procure-v1/helpdesk/views.css, Sourav 23 Oct): 56px, 16px corners, the Figma
   116.5° Secondary → Primary gradient, 0 10px 4px 15% shadow, the 40px Figma "fab-add" (circled plus) */
.device .fab { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(116.5deg, #00D6C9 8.77%, #37BD69 101.99%); box-shadow: 0 10px 4px rgba(0, 0, 0, .15); }
.device .fab img { width: 40px; height: 40px; display: block; }
/* review step approval = the request page's Figma approver container */
.rvappr { border-radius: 8px; border-top: 0; padding: 16px; }

/* ---------- Home (landing) — medical flow home 88:3492, Antz tokens (Sourav, 23 Oct) ---------- */
.device.is-home #main { padding: 0; background: var(--md3-surface-variant); }
.home { min-height: 100%; padding-bottom: var(--sp-24); background: var(--md3-surface-variant); }
.home__top { display: flex; flex-direction: column; gap: var(--sp-16); padding: 17px var(--sp-24) 0; }
.home__bar { display: flex; align-items: flex-start; justify-content: space-between; }
.home__site { display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; text-align: left; color: var(--md3-on-primary-container); font: inherit; }
.home__row { display: flex; align-items: flex-start; gap: 38px; }
.home__name { display: flex; align-items: center; gap: var(--sp-8); }
.home__site .app-icon { color: var(--md3-on-primary-container); }
.home__bell { position: relative; width: 41px; height: 27px; padding: 0; border: 0; background: none; color: var(--md3-on-surface-variant); }
.home__bell > .app-icon { position: absolute; left: 0; top: 3px; }
.home__badge { position: absolute; left: 14px; top: 0; min-width: 27px; height: 16px; padding: 0 var(--sp-4); display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; background: var(--md3-error); color: var(--md3-on-primary); }
.home__search { display: flex; align-items: center; height: 60px; border-radius: 28px; background: var(--md3-surface); color: var(--md3-on-surface-variant); }
.home__search .ib { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--md3-on-surface-variant); }
.home__search .lead { margin-left: var(--sp-4); }
.home__search .text { flex: 1; min-width: 0; margin-left: var(--sp-4); letter-spacing: .5px; }
.home__feed { display: flex; flex-direction: column; gap: var(--sp-16); padding: 22px var(--sp-24) var(--sp-24); }
.home__posts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.hpend { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-16); border-radius: 12px; background: var(--md3-on-primary); color: inherit; text-decoration: none; }
.hpend__ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--md3-moderate-primary); color: var(--md3-tertiary); }
.hpend__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); margin-left: 2px; }
.hpend__title { color: var(--md3-on-secondary-container); }
.hpend__sub { color: var(--md3-neutral-secondary); letter-spacing: .25px; }
.hpend__n { color: var(--md3-tertiary); }
.hpost { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--md3-on-primary); }
.hpost__head { display: flex; align-items: center; gap: var(--sp-16); height: 72px; padding: var(--sp-12) var(--sp-4) var(--sp-12) var(--sp-16); }
.hpost__mono { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--md3-error); color: var(--md3-on-primary); }
.hpost__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hpost__name { color: var(--md3-on-primary-container); line-height: 24px; }
.hpost__when { color: var(--md3-outline); line-height: 20px; }
.hpost__more { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--md3-on-surface-variant); }
.hpost__media { display: block; width: 100%; height: 212px; object-fit: cover; }
.hpost__text { margin: 0; padding: var(--sp-16); color: var(--md3-on-surface-variant); line-height: 20px; }
/* bottom nav Home · Menu (medical mf-bnav) */
.rail.hbn { gap: var(--sp-8); padding: 0 var(--sp-8); background: var(--md3-surface); box-shadow: none; }
.hbn__seg { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-12) 0 var(--sp-16); color: var(--md3-on-secondary-container); text-decoration: none; }
.hbn__ic { width: 64px; height: 32px; display: grid; place-items: center; border-radius: 16px; color: var(--md3-on-secondary-container); }
.hbn__seg.on .hbn__ic { background: var(--md3-secondary-container); }
/* Home FAB sits 38px above the 80px nav (medical 88:3616) */
.device.is-home .fab { bottom: 118px; right: var(--sp-24); }
/* Quick Actions sheet (medical mf-qa) */
.qa { background: var(--md3-surface); }
.qa__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-24) var(--sp-24) var(--sp-16); border-bottom: 1px solid var(--md3-surface-variant); background: var(--md3-on-primary); }
.qa__head h2 { margin: 0; color: var(--md3-neutral-primary); }
.qa__x { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--md3-on-surface-variant); }
.qa__grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-32); padding: var(--sp-24) var(--sp-24) var(--sp-40); }
.qa__tile { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); padding: 0; border: 0; background: none; color: var(--md3-neutral-primary); font: inherit; }
.qa__ring { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--md3-on-surface); color: var(--md3-on-surface); }

/* ---------- Home v2: after the ANTZ Home page redesign (Design Links home/antz-home), only what the TAB needs ---------- */
.device.is-home #main { padding: 0; background: var(--md3-background); }
.hh { min-height: 100%; padding-bottom: 120px; color: var(--md3-on-secondary-container); }
.hh > * + * { margin-top: 0; }
.hh__top { display: flex; align-items: center; gap: 14px; padding: 40px 24px 20px; background: var(--md3-surface-variant); }
.hh__av { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--md3-secondary); color: var(--md3-on-primary); }
.hh__hi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh__hi .t-minor-regular { color: var(--md3-on-secondary-container); opacity: .82; }
.hh__name { font-size: 28px; line-height: 34px; font-weight: 600; color: var(--md3-on-secondary-container); }
.hh__ib { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--md3-on-primary); color: var(--md3-on-secondary-container); }
.hh__dot { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--md3-error); color: var(--md3-on-primary); }
.hh__search { display: flex; gap: 12px; padding: 0 24px 24px; background: var(--md3-surface-variant); }
.hh__q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border-radius: 12px; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.hh__q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--md3-neutral-primary); }
/* Recents band: tabs sit on the tint; the active tab joins the white box below */
.hfav { padding: 0 24px 20px; border-radius: 0 0 20px 20px; background: var(--md3-surface-variant); }
.hfav__tabs { display: flex; gap: 12px; }
.hfav__tab { flex: 1; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; background: var(--md3-on-primary-a50); color: var(--md3-on-primary-container); margin-bottom: 8px; }
.hfav__tab .app-icon { color: var(--md3-on-primary-container); }
.hfav__tab.on { background: var(--md3-on-primary); border-radius: 12px 12px 0 0; margin-bottom: 0; height: 70px; }
.hfav__box { border-radius: 12px; background: var(--md3-on-primary); padding: 20px; }
.hfav__tabs:has(.hfav__tab.on:first-child) + .hfav__box { border-top-left-radius: 0; }
.hfav__row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.hfav__none { padding: 40px 0; text-align: center; color: var(--md3-neutral-secondary); }
.hh .hcard { position: relative; flex: none; width: 176px; height: 188px; border-radius: 12px; overflow: hidden; background: var(--md3-displaybg-primary); text-decoration: none; }
.hh .hcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh .hcard__ph { position: absolute; inset: 0 0 60px; display: grid; place-items: center; color: var(--md3-on-primary-container); }
.hh .hcard::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(from var(--md3-on-secondary-container) r g b / 85%)); }
.hh .hcard__tag { position: absolute; z-index: 1; top: 10px; right: 10px; padding: 4px 8px; border-radius: 8px; background: var(--md3-on-primary); color: var(--md3-on-primary-container); }
.hh .hcard__t { position: absolute; z-index: 1; left: 14px; right: 12px; bottom: 12px; display: flex; flex-direction: column; color: var(--md3-on-primary); }
.hh .hcard__t .t-subtext-regular { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
/* alert strip */
.hstrip { display: flex; align-items: center; gap: 16px; margin: 20px 24px 0; padding: 0 16px; min-height: 48px; border-radius: 8px; border: 1px solid var(--md3-moderate-secondary-a40); background: var(--md3-moderate-primary-a20); overflow-x: auto; scrollbar-width: none; }
.hstrip__i { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--md3-neutral-primary); text-decoration: none; }
.hstrip__i .app-icon { color: var(--md3-tertiary); }
.hstrip__i b { color: var(--md3-tertiary); }
.hstrip__sep { width: 1px; height: 20px; flex: none; background: var(--md3-moderate-secondary-a40); }
/* Modules */
.hmods { padding: 28px 24px 0; scroll-margin-top: 16px; }
.hmods__h h2 { margin: 0 0 16px; color: var(--md3-neutral-primary); }
.hhero { position: relative; display: flex; align-items: flex-end; height: 164px; padding: 20px 24px; border-radius: 12px; overflow: hidden; color: var(--md3-on-primary); text-decoration: none; }
.hhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hhero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(from var(--md3-on-secondary-container) r g b / 80%), transparent 75%); }
.hhero__t { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.hhero__title { font-size: 32px; line-height: 38px; font-weight: 600; }
.hhero__ic { position: absolute; z-index: 1; top: 20px; right: 24px; color: var(--md3-on-primary); }
.hhero__ic .app-icon { color: var(--md3-on-primary); }
.hgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.htile { position: relative; height: 164px; padding: 16px; border-radius: 12px; display: flex; flex-direction: column; color: var(--md3-on-primary); text-decoration: none; }
.htile .app-icon { color: var(--md3-on-primary); }
.htile__n { margin-top: auto; display: flex; flex-direction: column; font-size: 32px; line-height: 36px; font-weight: 600; }
.htile__n .t-subtext-regular { opacity: .9; }
.htile__l { margin-top: 8px; }
.htile__n + .htile__l { margin-top: 4px; }
.htile:not(:has(.htile__n)) .htile__l { margin-top: auto; }
.htile.g1 { background: linear-gradient(128deg, #8EBEA5 6%, #3E8E66 100%); }
.htile.g2 { background: linear-gradient(128deg, #6FA3A8 6%, #2F6C73 100%); }
.htile.g3 { background: linear-gradient(128deg, #5E7F95 6%, var(--md3-on-secondary-container) 100%); }
.htile.g4 { background: var(--md3-tertiary-container-a30, #FFE3D9); color: var(--md3-neutral-primary); }
.htile.g4 .app-icon { color: var(--md3-tertiary); }
/* floating Modules · Quick Actions bar (frosted pills) */
.hbar { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 12; display: flex; justify-content: center; gap: 12px; pointer-events: none; }
.hpill { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 55%); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 2px 4px rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 75%); color: var(--md3-neutral-primary); }
.hpill .app-icon { color: var(--md3-neutral-primary); }
.hbar .hpill:last-child { background: rgb(from var(--md3-secondary) r g b / 30%); }
/* Quick Actions card */
.hqa { position: absolute; inset: 0; z-index: 40; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 68px; background: rgb(from var(--md3-on-surface) r g b / 35%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hqa.on { display: flex; }
.hqa__card { width: 100%; max-height: 80%; display: flex; flex-direction: column; gap: 20px; padding: 32px 28px 28px; border-radius: 28px; background: var(--md3-on-primary); overflow: hidden; }
.hqa__card h2 { margin: 0; color: var(--md3-on-surface-variant); font-size: 24px; line-height: 30px; font-weight: 500; }
.hqa__q { height: 52px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--md3-background); outline: 0; font: inherit; color: var(--md3-neutral-primary); }
.hqa__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; overflow-y: auto; align-content: start; }
.hqa__grid.one { grid-template-columns: 1fr; }
.qaf { padding: 12px; border-radius: 16px; background: var(--md3-on-background); }
.qaf:nth-child(2) { background: var(--md3-displaybg-primary); }
.qaf:nth-child(3) { background: var(--md3-background); }
.qaf.one { background: var(--md3-on-background); }
.qaf__h { display: flex; align-items: center; gap: 10px; padding: 8px 6px 14px; color: var(--md3-on-surface-variant); }
.qaf__h .app-icon { color: var(--md3-on-surface-variant); }
.qaf__rows { display: flex; flex-direction: column; border-radius: 12px; background: var(--md3-on-primary); overflow: hidden; }
.qaf__r { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; border: 0; background: none; text-align: left; color: var(--md3-on-surface-variant); text-decoration: none; font: inherit; }
.qaf__r + .qaf__r::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--md3-background); }
.qaf__ic { width: 28px; flex: none; display: grid; place-items: center; color: var(--md3-primary-dark, #006D35); }
.qaf__ic .app-icon { color: var(--md3-primary-dark, #006D35); }
.qaf__r > .grow { flex: 1; }
.qaf__r > .app-icon { color: var(--md3-outline); }
.qaf__r:active { background: var(--md3-background); }
.qab { display: flex; align-items: center; gap: 12px; padding: 4px 0; border: 0; background: none; color: var(--md3-on-surface-variant); text-align: left; }
.hqa__x { pointer-events: auto; }
/* Master settings page = the same list */
.mlist2 { margin-top: var(--sp-24) !important; }
.mlist2 .qaf__r { min-height: 64px; color: var(--md3-neutral-primary); }
/* Home = the ANTZ Home page copy in a frame, edge to edge */
.device.is-home #main { padding: 0; overflow: hidden; }
.hxframe { display: block; width: 100%; height: 100%; border: 0; flex: 1; }

/* ---------- MOCKUP · request details in the V4 layout, TAB style (#/rv/<id>) ---------- */
.rvpage { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--sp-16)); min-height: 100%; background: var(--md3-surface-variant); }
.rvpage > .top { margin: 0; }
.rvhero { display: flex; gap: var(--sp-16); padding: var(--sp-8) var(--sp-24) var(--sp-16); background: var(--md3-on-primary); }
.rvhero__ic { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.rvhero__t { margin: 2px 0 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--md3-on-secondary-container); }
.rvmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: var(--sp-8) 0 0; color: var(--md3-on-surface-variant); }
.rvmeta > span + span:not(.rvmeta__flag)::before { content: '·'; margin-right: 10px; color: var(--md3-outline); }
.rvmeta > .rvpill + span::before { content: none; }
.rvmeta__flag { color: var(--md3-tertiary); font-weight: 500; }
.rvmeta__flag::before { content: '·'; margin-right: 10px; color: var(--md3-outline); }
.rvpill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; }
.rvpill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rvpill.ok { background: var(--md3-on-background); color: var(--md3-primary-dark, #006D35); }
.rvpill.wait { background: var(--md3-moderate-primary-a30); color: var(--md3-on-tertiary-container); }
.rvpill.mine { background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.rvpill.bad { background: var(--md3-tertiary-container-a30, #FFE3D9); color: var(--md3-error); }
/* tracker: one segment per stage, filled up to now */
.rvtrack { list-style: none; margin: 0; padding: 0 var(--sp-24) var(--sp-16); display: flex; gap: 6px; background: var(--md3-on-primary); }
.rvtrack li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--md3-neutral-secondary); }
.rvtrack__bar { height: 6px; border-radius: 3px; background: var(--md3-surface-variant); margin-bottom: 6px; }
.rvtrack li.done .rvtrack__bar { background: var(--md3-primary); }
.rvtrack li.now .rvtrack__bar { background: linear-gradient(90deg, var(--md3-primary) 50%, var(--md3-surface-variant) 50%); }
.rvtrack li.done, .rvtrack li.now { color: var(--md3-on-secondary-container); }
.rvtrack li .t-subtext-regular { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md3-neutral-secondary); }
.rvtrack.bad li.now .rvtrack__bar { background: var(--md3-error); }
.rvtrack.bad li.now .t-subtext-regular { color: var(--md3-error); }
.rvtabs { position: sticky; top: 0; z-index: 4; }
.rvbody { flex: 1; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-24) var(--sp-24) 140px; }
/* V4 panel: tinted container, white card inside */
.rvp { border-radius: 12px; background: var(--md3-background); padding: 4px; }
.rvp__h { display: flex; align-items: center; gap: var(--sp-8); min-height: 52px; padding: 0 var(--sp-16); color: var(--md3-on-surface-variant); }
.rvp__h > .app-icon { color: var(--md3-outline); }
.rvp__b { border-radius: 10px; background: var(--md3-on-primary); padding: var(--sp-16); }
.rvsum { display: flex; align-items: baseline; gap: var(--sp-8); color: var(--md3-neutral-primary); }
.rvfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-24); }
.rvf { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; }
.rvf > .grow { display: flex; flex-direction: column; min-width: 0; color: var(--md3-neutral-primary); }
.rvf__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--md3-background); color: var(--md3-on-surface-variant); }
.rvav { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--md3-secondary); color: var(--md3-on-primary); }
.rvlink { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.rvlink::after { content: ' ›'; color: var(--md3-outline); }
/* items table */
.rvt { margin: calc(-1 * var(--sp-8)) calc(-1 * var(--sp-8)); }
.rvt__h, .rvt__r { display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 96px 20px; align-items: center; column-gap: var(--sp-12); }
.rvt__h { grid-template-columns: minmax(0, 1fr) 96px 80px 96px 20px; padding: 10px var(--sp-12) 10px 68px; border-radius: 8px; background: var(--md3-background); color: var(--md3-on-surface-variant); }
.rvt__h > span:nth-child(n+2):nth-child(-n+4), .rvt__r > span:nth-child(n+3):nth-child(-n+5) { text-align: right; }
.rvt__r { width: 100%; min-height: 64px; padding: 10px var(--sp-12); border: 0; border-top: 1px solid var(--md3-background); background: none; text-align: left; color: var(--md3-neutral-primary); font: inherit; }
.rvt__h + .rvt__r { border-top: 0; }
.rvt__r .nthumb, .rvt__r .nthumb img { width: 44px; height: 44px; border-radius: 8px; }
.rvt__r > .app-icon { color: var(--md3-outline); }
.rvt__r.off { opacity: .5; }
.rvt__n { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.rvst { color: var(--md3-neutral-secondary); }
.rvst.ok { color: var(--md3-primary-dark, #006D35); }
.rvst.warn { color: var(--md3-on-tertiary-container); }
.rvchip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 6px; }
.rvchip.warn { background: var(--md3-moderate-primary-a40); color: var(--md3-on-tertiary-container); }
.rvappr > * { margin-top: 0; }
/* fulfilment rows: stage | its records */
.rvfl { display: grid; grid-template-columns: 40px 180px minmax(0, 1fr); gap: var(--sp-16); align-items: start; padding: var(--sp-16) 0; border-top: 1px solid var(--md3-background); }
.rvfl:first-child { border-top: 0; padding-top: var(--sp-4); }
.rvfl__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--md3-background); color: var(--md3-on-secondary-container); }
.rvfl__t { padding-top: 10px; color: var(--md3-neutral-primary); }
.rvfl__v { display: flex; flex-direction: column; gap: var(--sp-12); padding-top: 4px; }
.rvfl__v > div { display: flex; flex-direction: column; gap: 2px; color: var(--md3-neutral-primary); }
.rvmeta > span.rvpill + span::before { content: none; }
.device.in-req #main:has(.rvpage) { padding-bottom: 0; background: var(--md3-surface-variant); }
/* V4 tabs on the request page: grey rounded track, white pill for the picked tab */
.rvtabs { position: sticky; top: 0; z-index: 4; padding: 0 var(--sp-24) var(--sp-16); background: var(--md3-on-primary); box-shadow: 0 1px 0 var(--md3-surface-variant); }
.rvseg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--md3-background); }
.rvseg__t { height: 44px; padding: 0 var(--sp-16); border: 0; border-radius: 999px; background: none; color: var(--md3-on-surface-variant); }
.rvseg__t.on { background: var(--md3-on-primary); color: var(--md3-neutral-primary); font-weight: 600; box-shadow: 0 1px 3px var(--md3-neutral-primary-a20); }
.rvseg__n { color: var(--md3-neutral-secondary); font-weight: 400; margin-left: 2px; }
/* tabs sit in the tinted section below the header, not in the white header (Sourav, 23 Oct) */
.rvtabs { padding: var(--sp-24) var(--sp-24) 0; background: var(--md3-surface-variant); box-shadow: none; }
.rvseg { background: rgb(from var(--md3-on-primary) r g b / 55%); }
.rvtabs + .rvbody { padding-top: var(--sp-16); }
.rvtrack { padding-bottom: var(--sp-24); }
.rvseg2 { background: var(--md3-displaybg-primary); } .rvseg2 .rvseg__n { color: var(--md3-neutral-secondary); }
/* breathing space in the request panels (Sourav, 23 Oct) */
.rvp { padding: 6px; }
.rvp__h { min-height: 56px; padding: 4px var(--sp-16) 6px; }
.rvp__b { padding: var(--sp-24); }
.rvfacts { row-gap: var(--sp-24); column-gap: var(--sp-32); }
.rvf { gap: var(--sp-16); align-items: flex-start; }
.rvf > .grow { gap: 2px; padding-top: 1px; }
.rvt { margin: calc(-1 * var(--sp-12)); }
/* facts: two lines, every row the same height, icon centred on the pair */
.rvf { align-items: center; min-height: 48px; }
.rvf__ic:has(.rvav) { background: none; }
.rvf__v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvf__s { color: var(--md3-neutral-secondary); font-weight: 400; }
/* approval panel: same two-line rows as the facts */
.rvas { display: flex; flex-direction: column; }
.rva { display: flex; align-items: center; gap: var(--sp-16); min-height: 56px; padding: var(--sp-12) 0; }
.rva + .rva { border-top: 1px solid var(--md3-background); }
.rva:first-child { padding-top: 0; } .rva:last-child { padding-bottom: 0; }
.rva > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--md3-neutral-primary); }
.rva__why { margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: var(--md3-tertiary-container-a20, #FFF1EC); color: var(--md3-neutral-primary); }
.rva__d { flex: none; width: 150px; display: flex; align-items: center; gap: var(--sp-8); }
.rva__d > .grow { display: flex; flex-direction: column; }
.rva__d.ok, .rva__d.ok .app-icon { color: var(--md3-primary-dark, #006D35); }
.rva__d.bad, .rva__d.bad .app-icon { color: var(--md3-error); }
.rva__d.wait .app-icon { color: var(--md3-moderate-secondary); }
.rva__d .t-body-medium { color: inherit; }
.rvp__h .rvsum { gap: var(--sp-12); }
.rvhero { padding-bottom: var(--sp-24); }
/* the approver container we built, sitting inside the panel's white card */
.rvappr { display: flex; flex-direction: column; gap: var(--sp-16); }
.rvappr .fgappr { margin: 0; padding: 0; background: none; border-radius: 0; }
.rvappr .fgappr + .fgappr { padding-top: var(--sp-16); border-top: 1px solid var(--md3-background); }
.rvpill.draft { background: var(--md3-background); color: var(--md3-on-surface-variant); }
.rvappr .fgappr { border: 0 !important; box-shadow: none !important; } .rvappr .fgappr::before, .rvappr .fgappr::after { display: none !important; } .rvappr .fgappr + .fgappr { border-top: 1px solid var(--md3-background) !important; }

/* ---------- urgent = a round badge with the flame (Sourav, 23 Oct), not the flag ---------- */
.vurg { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; vertical-align: -4px; border-radius: 50%; background: var(--md3-tertiary-container-a30, #FFE3D9); color: var(--md3-error); }
.vurg .app-icon { color: var(--md3-error); }

/* ---------- request page budget card (V4) ---------- */
.rvb { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--md3-neutral-primary); }
.rvb__v { display: flex; align-items: center; gap: var(--sp-12); }
.rvb__v .t-minor-title { flex: 1; }
.rvb__v > .app-icon { color: var(--md3-outline); transition: transform .2s; }
.rvb[aria-expanded="true"] .rvb__v > .app-icon { transform: rotate(180deg); }
.rvb__v.bad .t-minor-title { color: var(--md3-tertiary); }
.rvb__s { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); padding: var(--sp-16) var(--sp-20); border-radius: 12px; background: var(--md3-background); }
.rvb__s > span { display: flex; flex-direction: column; gap: 2px; }
.rvb__n { font-size: 20px; line-height: 26px; font-weight: 500; color: var(--md3-on-surface-variant); }
.rvb__n.bad { color: var(--md3-tertiary); } .rvb__n.warn { color: var(--md3-on-tertiary-container); }
.vtone { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--md3-outline-variant); }
.vtone.ok { background: var(--md3-primary); } .vtone.warn { background: var(--md3-moderate-secondary); } .vtone.bad { background: var(--md3-tertiary); }
.rvl { margin-top: var(--sp-16); }
.rvl__h, .rvl__r { display: grid; grid-template-columns: minmax(0, 1fr) 100px 96px 110px 110px 20px; gap: var(--sp-12); align-items: center; }
.rvl__h { padding: 10px 0; border-bottom: 1px solid var(--md3-surface-variant); color: var(--md3-on-surface-variant); }
.rvl__h > span:nth-child(n+2), .rvl__r > span:nth-child(n+2):nth-child(-n+5) { text-align: right; }
.rvl__r { width: 100%; min-height: 64px; padding: var(--sp-12) 0; border: 0; border-bottom: 1px solid var(--md3-background); background: none; text-align: left; font: inherit; color: var(--md3-neutral-primary); }
.rvl__r > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.rvl__r > .app-icon { color: var(--md3-outline); }
.rvl__a.over, .rvl__a.none { color: var(--md3-tertiary); } .rvl__a.near { color: var(--md3-on-tertiary-container); }

/* ---------- item sheet = V4 ItemSheet (procurement-v3 …/v4/ItemSheet.js), same sizes; MUI spacing 1 = 4px ---------- */
.vi-scrim { position: absolute; inset: 0; z-index: 30; background: rgb(from var(--md3-on-surface-variant) r g b / 6%); opacity: 0; pointer-events: none; transition: opacity .2s; }
.vi-scrim.on { opacity: 1; pointer-events: auto; }
.vi { position: absolute; top: 8px; right: 8px; bottom: 8px; width: 480px; display: flex; flex-direction: column; border-radius: 24px; background: var(--md3-on-primary); box-shadow: 0 0 0 1px rgb(from var(--md3-on-surface-variant) r g b / 6%), 0 24px 64px -16px rgb(from var(--md3-on-surface-variant) r g b / 35%); transform: translateX(calc(100% + 16px)); transition: transform .28s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; color: var(--md3-on-surface-variant); }
.vi-scrim.on .vi { transform: none; }
.vi .muted { color: var(--md3-neutral-secondary); }
/* top bar: px 16, pt 16; 36px buttons, radius 10 */
.vi-top { display: flex; align-items: center; gap: 4px; padding: 16px 16px 0; }
.vi-top .grow { margin-left: 4px; font-variant-numeric: tabular-nums; }
.vi-ib { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--md3-on-surface-variant); }
.vi-ib:disabled { opacity: .35; }
.vi-x { background: rgb(0 0 0 / 3%); }
/* the item: px 24; pt 16 pb 20; thumb 64 r16; name 20/500/28; sub 14 mt 2; status mt 8 */
.vi-head { padding: 0 24px; }
.vi-item { display: flex; align-items: center; gap: 16px; padding: 16px 0 20px; }
.vi-item .nthumb, .vi-item .nthumb img { width: 64px; height: 64px; border-radius: 16px; }
.vi-item > .grow { min-width: 0; }
.vi-name { display: flex; align-items: center; gap: 6px; }
.vi-name h2 { margin: 0; font-size: 20px; font-weight: 500; line-height: 28px; color: var(--md3-on-surface-variant); }
.vi-name .vurg { margin-left: 0; }
.vi-item .t-body-regular { margin-top: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.vi-amt { font-weight: 600; color: var(--md3-on-surface-variant); }
.vi-item .vstage { display: inline-block; margin-top: 8px; }
/* tab track: p 3, gap 2, r 12, black 4.5%; tab h 36, r 9, 14px, 600 on / 500 off */
.vi-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(0 0 0 / 4.5%); }
.vi-tabs button { flex: 1; height: 36px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--md3-neutral-secondary); transition: background-color .15s; }
.vi-tabs button.on { background: var(--md3-on-primary); font-weight: 600; color: var(--md3-on-surface-variant); box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 2px 6px rgb(0 0 0 / 6%); }
.vi-w { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--md3-tertiary); }
.vi-w i { width: 6px; height: 6px; border-radius: 50%; background: var(--md3-tertiary); }
/* panel: px 24 pb 24, scrolls; a block starts pt 20 */
.vi-body { flex: 1; overflow-y: auto; padding: 20px 24px 24px; }
.vi-lbl { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--md3-neutral-secondary); }
.vi-lbl--gap { margin-top: 24px; }
.vi-price { padding: 16px; border-radius: 16px; background: rgb(0 0 0 / 3%); }
.vi-price.warn { background: var(--md3-moderate-primary-a40); }
.vi-price.warn > .t-body-title { color: var(--md3-on-tertiary-container); }
.vi-price > .t-body-title { font-size: 14px; font-weight: 600; color: var(--md3-on-surface-variant); }
.vi-price .ichart { margin-top: 12px; }
.vi-leg { display: flex; gap: 16px; margin-top: 8px; color: var(--md3-neutral-secondary); }
.vi-leg span { display: inline-flex; align-items: center; gap: 6px; }
.vi-leg i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--md3-on-secondary-container); }
.vi-leg i.f { background: var(--md3-on-secondary-container); border: 0; }
.vi-fold { width: 100%; min-height: 48px; margin-top: 8px; padding: 0 4px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; color: var(--md3-on-surface-variant); }
.vi-fold .t-body-medium { font-size: 14px; font-weight: 500; }
.vi-fold > .app-icon { color: var(--md3-neutral-secondary); transition: transform .2s; }
.vi-fold[aria-expanded="true"] > .app-icon { transform: rotate(180deg); }
.vi-reqs .vi-req { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--md3-surface-variant); }
.vi-reqs .vi-req:last-child { border-bottom: 0; }
.vi-req .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--md3-on-surface-variant); }
.vi-req .flex { display: flex; align-items: center; gap: 8px; }
.vi-req__q { display: flex; flex-direction: column; align-items: flex-end; color: var(--md3-on-surface-variant); }
/* budget: mt 24 pt 24 hairline; card p 16 r 16 hairline; bar 8 r 4 mb 12; rows py 6, 14px */
.vi-sep { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--md3-surface-variant); }
.vi-bud { padding: 16px; border-radius: 16px; border: 1px solid var(--md3-surface-variant); }
.vi-bud > .t-body-title { font-size: 14px; font-weight: 600; color: var(--md3-on-surface-variant); }
.vi-bud > .t-subtext-regular { margin-bottom: 12px; }
.vi-bar { position: relative; height: 8px; margin-bottom: 12px; border-radius: 4px; overflow: hidden; background: rgb(0 0 0 / 3%); }
.vi-bar i { position: absolute; inset: 0 auto 0 0; background: rgb(from var(--md3-on-secondary-container) r g b / 70%); }
.vi-bar i.bad { background: var(--md3-tertiary); }
.vi-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--md3-on-surface-variant); }
.vi-row > span { flex: 1; min-width: 0; }
.vi-row > b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vi-row.strong, .vi-row.strong > b { font-weight: 600; }
.vi-row.hot, .vi-row.hot > b { color: var(--md3-tertiary); }
.vi-row .me { font-weight: 600; }
.vi-line { margin-top: 12px; border-radius: 12px; overflow: hidden; background: var(--md3-on-background); transition: background-color .2s, box-shadow .2s; }
.vi-line.bad { background: var(--md3-tertiary-container-a20, #FFEBE5); }
.vi-line.open { background: var(--md3-on-primary); box-shadow: 0 0 0 1px rgb(0 0 0 / 7%), 0 8px 20px -10px rgb(0 0 0 / 25%); }
.vi-line > button { width: 100%; min-height: 48px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--md3-on-surface); }
.vi-line.bad > button { color: var(--md3-on-tertiary-container); }
.vi-line > button > .app-icon:first-child { color: var(--md3-on-surface); }
.vi-line.bad > button > .app-icon:first-child, .vi-line.bad .vi-line__v { color: var(--md3-tertiary); }
.vi-line > button > .app-icon:last-child { color: var(--md3-neutral-secondary); transition: transform .2s; }
.vi-line.open > button > .app-icon:last-child { transform: rotate(180deg); }
.vi-line__v { font-size: 14px; font-weight: 600; }
.vi-line__b { margin: 0 12px; padding: 6px 0 12px; border-top: 1px solid var(--md3-surface-variant); }
.vi-line__b .vi-row { padding: 4px 0; }
.vi-line__b .vi-row.tot { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--md3-surface-variant); }
/* stock: card p 16 r 16 gap 16; icon 44 r 12 white; number 24/500/32; other stores rows py 10 hairline; bar 80×6; qty w 72 */
.vi-here { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: rgb(0 0 0 / 3%); }
.vi-here.short { background: var(--md3-tertiary-container-a20, #FFEBE5); }
.vi-here__i { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.vi-here.short .vi-here__i, .vi-here.short .vi-here__n { color: var(--md3-tertiary); }
.vi-here > .grow { display: flex; flex-direction: column; min-width: 0; }
.vi-here .t-minor-title { font-size: 16px; font-weight: 600; color: var(--md3-on-surface-variant); }
.vi-here__n { display: flex; flex-direction: column; align-items: flex-end; color: var(--md3-on-surface-variant); }
.vi-here__n .t-major-title { font-size: 24px; font-weight: 500; line-height: 32px; }
.vi-store { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--md3-surface-variant); color: var(--md3-on-surface-variant); }
.vi-store:last-child { border-bottom: 0; }
.vi-store__b { width: 80px; height: 6px; border-radius: 3px; overflow: hidden; background: rgb(0 0 0 / 3%); }
.vi-store__b i { display: block; height: 100%; background: rgb(from var(--md3-on-secondary-container) r g b / 45%); }
.vi-store__n { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
/* timeline: 32px node, column gap 12, pb 20; rail left 15 top 34; title 14, sub 12 */
.vi-tl { list-style: none; margin: 0; padding: 0; }
.vi-tl li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding-bottom: 20px; }
.vi-tl li:last-child { padding-bottom: 0; }
.vi-tl li:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; border-radius: 1px; background: rgb(0 0 0 / 8%); }
.vi-tl li.done:not(:last-child)::before { background: rgb(from var(--md3-on-secondary-container) r g b / 35%); }
.vi-tl__n { z-index: 1; width: 32px; height: 32px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; background: var(--md3-on-primary); border: 1.5px solid rgb(0 0 0 / 14%); color: var(--md3-outline-variant); }
.vi-tl li.done .vi-tl__n { background: var(--md3-on-secondary-container); border: 0; color: var(--md3-on-primary); }
.vi-tl li.now .vi-tl__n { border: 2px solid var(--md3-on-secondary-container); color: var(--md3-on-secondary-container); }
.vi-tl__n .app-icon { color: inherit; }
.vi-tl li > .grow { min-width: 0; padding-top: 2px; display: flex; flex-direction: column; align-items: flex-start; }
.vi-tl .t-body-title { font-size: 14px; font-weight: 600; color: var(--md3-on-surface-variant); }
.vi-tl .t-body-regular { font-size: 14px; color: var(--md3-neutral-secondary); }
.vi-chip { display: inline-flex; flex-direction: column; margin: 8px 8px 0 0; padding: 6px 12px; border-radius: 10px; background: rgb(0 0 0 / 4%); font-size: 14px; font-weight: 600; color: var(--md3-on-surface-variant); }
.vi-chip.ok { background: var(--md3-on-background); color: var(--md3-on-surface); }
.vi-chip.warn { background: var(--md3-moderate-primary-a50); color: var(--md3-on-tertiary-container); }
.vi-chip .t-subtext-regular { font-weight: 400; color: var(--md3-neutral-secondary); }
.vi-qs { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.vi-q { display: grid; grid-template-columns: minmax(0, 1fr) 96px 72px; column-gap: 8px; align-items: center; color: var(--md3-on-surface-variant); }
.vi-q > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.vi-q__b { height: 6px; border-radius: 3px; overflow: hidden; background: rgb(0 0 0 / 3%); }
.vi-q__b i { display: block; height: 100%; background: rgb(0 0 0 / 18%); }
.vi-q__b i.low { background: var(--md3-on-secondary-container); }
.vi-recv { width: 100%; margin-top: 8px; }
.vi-recv .vi-bar { margin-bottom: 4px; }
.vi-recv .vi-bar i { background: var(--md3-on-secondary-container); }
.t-tert { color: var(--md3-tertiary); }
.ichart__a { fill: rgb(from var(--md3-on-secondary-container) r g b / 8%); stroke: none; } .ichart.warn .ichart__a { fill: rgb(from var(--md3-tertiary) r g b / 10%); }
/* item sheet = a normal side sheet (Sourav, 23 Oct): edge to edge on the right, full height, square, the app's side scrim */
.vi-scrim { background: var(--md3-on-primary-container-a60); }
.vi { top: 0; right: 0; bottom: 0; width: min(560px, 100%); border-radius: 0; box-shadow: -8px 0 24px var(--md3-neutral-primary-a10); transform: translateX(100%); transition: transform .25s ease; }
.vi-top { padding: 0 16px; min-height: 64px; border-bottom: 1px solid var(--md3-surface-variant); }
.vi-head { padding-top: 4px; }
/* item stage chip (item side sheet header) */
.vstage { padding: 3px 10px; border-radius: 8px; background: var(--md3-background); color: var(--md3-on-surface-variant); }
.vstage.ok { background: var(--md3-on-background); color: var(--md3-primary-dark, #006D35); }
.vstage.warn { background: var(--md3-moderate-primary-a30); color: var(--md3-on-tertiary-container); }
.vmodal .vlabel { min-width: 120px; display: inline-block; }
.vmodal .vrow .meta { font-size: 14px; line-height: 20px; }   /* price on the size picker: body size, not 12px (Sourav, 23 Oct) */
/* size picker: header · product card · options · buttons */
.vmodal .vm-h { display: flex; align-items: center; justify-content: space-between; margin: -4px -8px 0 0; }
.vmodal .vm-h .t-medium-medium { color: var(--md3-neutral-primary); }
.vmodal .vm-p { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-16); padding: var(--sp-12); border-radius: 12px; background: var(--md3-background); }
.vmodal .vm-p > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--md3-neutral-primary); }
.vmodal .vm-p .nthumb, .vmodal .vm-p .nthumb img { width: 48px; height: 48px; border-radius: 10px; }
/* form: the urgent toggle = the round flame badge (same as request details) — grey outline off, red on */
.nflagbtn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; }
.nflagbtn .vurg { width: 32px; height: 32px; margin: 0; }
.vurg.off { background: none; box-shadow: inset 0 0 0 1.5px var(--md3-outline-variant); }
.vurg.off .app-icon { color: var(--md3-outline); }
/* deal slip on the form */
.srcline { flex-wrap: wrap; }
.dspick { min-width: 320px; }
.dsfact { margin-top: var(--sp-12); padding: var(--sp-12) var(--sp-16); border-radius: 10px; background: var(--md3-background); display: flex; flex-direction: column; gap: var(--sp-8); }
.dsfact__r { display: flex; align-items: baseline; gap: var(--sp-12); color: var(--md3-neutral-primary); }
.dsfact__r > span:first-child { flex: 1; min-width: 0; color: var(--md3-on-surface-variant); }
.dsfact__r b { font-weight: 600; color: var(--md3-neutral-primary); }
.dsfact__l { display: flex; justify-content: space-between; }
.dsbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--md3-on-primary); }
.dsrv .dsbar { background: var(--md3-background); margin: var(--sp-12) 0 var(--sp-8); }
.dsbar i { display: block; height: 100%; background: var(--md3-outline); }
.dsbar i.me { background: var(--md3-primary); } .dsbar i.me.bad { background: var(--md3-tertiary); }
.dsmenu .menu__i { align-items: center; }
.dsm__r { text-align: right; color: var(--md3-on-surface-variant); margin-right: var(--sp-8); white-space: nowrap; }
.dstot { border-top: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; color: var(--md3-on-surface-variant); }
.dsrv { padding: var(--sp-16) !important; }
.dsrv__h > .grow { display: flex; flex-direction: column; gap: 2px; color: var(--md3-neutral-primary); }
.nprice__k { font-weight: 600; color: var(--md3-on-secondary-container); margin-right: 2px; }
.srcline { align-items: center; gap: var(--sp-12); }
.dstgl { width: auto; min-height: 48px; padding: 0 var(--sp-16); gap: var(--sp-12); border: 1px solid var(--md3-outline-variant) !important; border-radius: 8px; background: var(--md3-on-primary); font: inherit; color: var(--md3-neutral-primary); }
.dspick { min-width: 300px; }
/* deal slip card, cleaner (Sourav, 23 Oct) */
.dsfact { gap: var(--sp-12); padding: var(--sp-16) var(--sp-20); border-radius: 12px; }
.dsfact__top { display: flex; align-items: flex-end; gap: var(--sp-16); }
.dsfact__top .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--md3-neutral-primary); }
.dsfact__cap { display: flex; flex-direction: column; align-items: flex-end; color: var(--md3-neutral-primary); }
.dsfact .dsbar { height: 6px; border-radius: 3px; }
.dsfact__leg { display: flex; align-items: center; gap: var(--sp-16); color: var(--md3-on-surface-variant); }
.dsfact__leg i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--md3-outline); }
.dsfact__leg i.me { background: var(--md3-primary); }
.dsfact__leg .grow { flex: 1; }
/* item sheet, softer colours (Sourav, 23 Oct: "too contrasty") — Antz tints instead of navy / solid orange */
.vi-scrim { background: rgb(from var(--md3-on-primary-container) r g b / 32%); }
.vi { box-shadow: -6px 0 24px var(--md3-neutral-primary-a10); }
/* chart */
.vi .ichart__l { stroke: rgb(from var(--md3-on-primary-container) r g b / 55%); }
.vi .ichart__a { fill: rgb(from var(--md3-primary) r g b / 8%); }
.vi .ichart circle.f, .vi .ichart circle.o { stroke: rgb(from var(--md3-on-primary-container) r g b / 60%); }
.vi .ichart circle.f { fill: rgb(from var(--md3-on-primary-container) r g b / 60%); }
.vi .ichart.warn .ichart__l { stroke: rgb(from var(--md3-tertiary) r g b / 55%); }
.vi .ichart.warn .ichart__a { fill: rgb(from var(--md3-tertiary) r g b / 7%); }
.vi-leg i { border-color: rgb(from var(--md3-on-primary-container) r g b / 60%); } .vi-leg i.f { background: rgb(from var(--md3-on-primary-container) r g b / 60%); }
.vi-price { background: var(--md3-background); }
.vi-price.warn { background: var(--md3-moderate-primary-a20); }
/* budget: soft bars, a light warning tint */
.vi-bar { background: var(--md3-surface-variant); }
.vi-bar i { background: rgb(from var(--md3-primary) r g b / 55%); }
.vi-bar i.bad { background: var(--md3-tertiary-container); }
.vi-bud { border-color: var(--md3-surface-variant); }
.vi-row.hot, .vi-row.hot > b { color: rgb(from var(--md3-tertiary) r g b / 85%); }
.vi-line { background: var(--md3-background); }
.vi-line.bad { background: rgb(from var(--md3-tertiary-container) r g b / 30%); }
.vi-line.bad > button { color: var(--md3-on-surface-variant); }
.vi-line.bad > button > .app-icon:first-child, .vi-line.bad .vi-line__v { color: rgb(from var(--md3-tertiary) r g b / 85%); }
.vi-w, .vi-w i { color: rgb(from var(--md3-tertiary) r g b / 85%); } .vi-w i { background: rgb(from var(--md3-tertiary) r g b / 70%); }
/* stock */
.vi-here { background: var(--md3-background); }
.vi-here.short { background: rgb(from var(--md3-tertiary-container) r g b / 30%); }
.vi-store__b { background: var(--md3-surface-variant); }
.vi-store__b i { background: rgb(from var(--md3-primary) r g b / 45%); }
/* timeline: light green nodes, soft rail, green bars */
.vi-tl li.done .vi-tl__n { background: var(--md3-on-background); color: var(--md3-primary-dark, #006D35); border: 1.5px solid rgb(from var(--md3-primary) r g b / 45%); }
.vi-tl li.now .vi-tl__n { border: 2px solid var(--md3-primary); color: var(--md3-primary-dark, #006D35); }
.vi-tl li:not(:last-child)::before { background: var(--md3-surface-variant); }
.vi-tl li.done:not(:last-child)::before { background: rgb(from var(--md3-primary) r g b / 35%); }
.vi-q__b { background: var(--md3-surface-variant); } .vi-q__b i { background: var(--md3-outline-variant); } .vi-q__b i.low { background: rgb(from var(--md3-primary) r g b / 70%); }
.vi-recv .vi-bar i { background: rgb(from var(--md3-primary) r g b / 60%); }
.vi-chip { background: var(--md3-background); }
.vi-tabs { background: var(--md3-background); }
.vi-line.open.bad { background: var(--md3-on-primary); }
.hcard__ds { font-weight: 600; color: var(--md3-on-secondary-container); }
.rvdst { margin: var(--sp-12) calc(-1 * var(--sp-12)) calc(-1 * var(--sp-12)); padding: var(--sp-8) var(--sp-16) var(--sp-12); border-top: 1px solid var(--md3-background); }
.rvdst > div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; color: var(--md3-on-surface-variant); }
.rvdst > div.tot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--md3-background); color: var(--md3-neutral-primary); }
/* New request · Review = the request details page (Sourav, 23 Oct): same hero + panels; the steps sit where the tabs do */
.device.in-form #main:has(.rvpage) { padding-bottom: 0; background: var(--md3-surface-variant); }
.nrrv__steps .vsteps { margin: 0; }
.rvp__b > .dsrv { padding: 0 !important; display: flex; flex-direction: column; gap: 2px; color: var(--md3-neutral-primary); }
.rvp__b > .dsrv .dsbar { margin: var(--sp-12) 0 var(--sp-8); }
/* deal slip card: collapsible */
.dsfact__top { width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.dsfact__top > .app-icon { align-self: center; color: var(--md3-outline); transition: transform .2s; }
.dsfact.open .dsfact__top > .app-icon { transform: rotate(180deg); }
.dsfact:not(.open) { gap: 0; }
.rvdst > div.tot:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }
.nrrv__what { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-20); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--md3-background); color: var(--md3-neutral-primary); }
.nrrv__steps { padding-top: var(--sp-16) !important; }
/* Items from: switch · deal slip toggle · deal slip dropdown stay on one row; the dropdown shrinks and ellipsises */
.srcline { flex-wrap: nowrap !important; min-width: 0; }
.srcline > .seg2, .srcline > .dstgl { flex: none; }
.srcline > .dspick { flex: 1 1 auto; min-width: 0 !important; max-width: 360px; }
.srcline > .dspick .grow { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dstgl { white-space: nowrap; }
/* on Review, the Items from card sits on the tint like the details page panels */
.nrrv__src { padding: var(--sp-16) var(--sp-24) 0; }
.nrrv__src .nsec.src { margin: 0; }

/* Review inside the one step container, rows not tappable (Sourav, 23 Oct) */
.nrrvbox { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-4) var(--sp-16) var(--sp-16); }
.nrrv__t .rvt__h { grid-template-columns: minmax(0, 1fr) 96px 80px 96px; }
.nrrv__t .rvt__r { grid-template-columns: 44px minmax(0, 1fr) 96px 80px 96px; cursor: default; }
.nrrv__l .rvl__h, .nrrv__l .rvl__r { grid-template-columns: minmax(0, 1fr) 100px 96px 110px 110px; }
/* the Total lines up with the Amount column (Sourav, 23 Oct): request page rows end with a › (20px + gap) */
.rvdst { padding-right: 44px; }
.nrrvbox .rvdst { padding-right: 12px; }

/* Request wise | Item wise on the requests list (Sourav, 23 Oct) */
.lhead .lwise { margin-left: auto; margin-right: var(--sp-8); }
.lhead .lwise button { height: 36px; padding: 0 var(--sp-16); }
.icard { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; text-align: left; font: inherit; cursor: pointer; }
.icard__top { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-16) var(--sp-8); }
.icard__top .grow { min-width: 0; }
.icard__n { color: var(--md3-neutral-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard .hcard__facts { padding: var(--sp-8) var(--sp-16) var(--sp-16); }
.icard__r { align-items: flex-end; text-align: right; }
.icard__amt { display: flex; flex-direction: column; align-items: flex-end; margin-right: var(--sp-4); }
.icard .hcard__facts { width: 100%; box-sizing: border-box; }
.ireq { padding: var(--sp-20) !important; gap: var(--sp-16); align-items: center; }
.ireq__l { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ireq__t { color: var(--md3-neutral-primary); line-height: 1.3; }
.ireq__s { margin-top: 4px; }
.ireq .icard__amt { gap: 2px; }

/* the approvers card, as on the web (Sourav, 23 Oct): all on the left, more space */
.apc { display: flex; flex-direction: column; gap: var(--sp-20); padding: var(--sp-20); border-radius: 8px; background: var(--md3-background); }
.apc + .apc { margin-top: var(--sp-12); }
.apc__h { display: flex; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface-variant); }
.apc__h.wait > .app-icon { color: var(--md3-moderate-secondary); } .apc__h.ok > .app-icon { color: var(--md3-primary); } .apc__h.bad > .app-icon { color: var(--md3-error); }
.apc__p { display: flex; align-items: flex-start; gap: var(--sp-12); }
.apc__av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--md3-outline); color: var(--md3-on-primary); }
.apc__d { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--md3-on-surface-variant); }
.apc__st { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--md3-neutral-secondary); }
.apc__st.ok { color: var(--md3-primary-dark, #006D35); } .apc__st.bad { color: var(--md3-error); }
.apc__why { margin-top: 4px; color: var(--md3-on-surface-variant); }
.rvappr .apc { margin: 0; }
.apc__p { align-items: center; }
.apc__d { flex: 1; }
.apc__mk { margin-left: auto; align-self: center; }

/* the approvers sit straight in the panel's white body: no tinted box, no inner padding (Sourav, 23 Oct: "yes like that") */
.rvappr { padding: 0 !important; }
.rvappr .apc { background: none; padding: 0; border-radius: 0; }
.rvappr .apc + .apc { margin-top: var(--sp-20); padding-top: var(--sp-20); border-top: 1px solid var(--md3-background); }