/* MMD Portal — components. All classes here must appear in design-system.manifest.json */ /* ===== Cards ===== */ .card{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:32px;display:flex;flex-direction:column;gap:14px} .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px} /* KPI summary strip (LeaveList.tsx, P2-40.1 orphan sweep) -- same auto-fit grid shape as .card-grid, narrower min-column and tighter gap for compact summary tiles rather than full content cards. */ .ds-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .card-title{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:calc(22px * var(--fs-scale, 1));line-height:1.15;letter-spacing:-0.015em;color:var(--ink);margin:0} .card-body{font-family:var(--font-ui);font-weight:500;font-size:calc(14.5px * var(--fs-scale, 1));line-height:1.55;color:var(--ink-soft);margin:0} .card-cta{margin-top:auto;padding-top:10px} /* ===== Buttons ===== */ .ds-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:calc(12.5px * var(--fs-scale, 1));letter-spacing:0.04em;cursor:pointer;transition:background 0.14s ease, color 0.14s ease, border-color 0.14s ease;text-decoration:none;border:1px solid transparent;line-height:1;white-space:nowrap;text-transform:uppercase} .ds-button-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)} .ds-button-primary:hover{background:var(--baobab);border-color:var(--baobab);color:var(--baobab-on, var(--paper))} .ds-button-secondary{background:transparent;color:var(--ink);border-color:var(--ink)} .ds-button-secondary:hover{background:var(--ink);color:var(--paper)} /* Destructive-secondary weight (2026-07-28) -- ds-button-danger was already referenced by several TA step dialogs (reject/return/no-hire controls) with no matching rule anywhere in this file, so those buttons silently rendered as plain unstyled buttons. Same structure as ds-button-secondary (transparent, outlined, inverts solid on hover) with baobab red standing in for ink -- the same token .ds-menu-item-danger already uses for destructive semantics, never a new color. */ .ds-button-danger{background:transparent;color:var(--baobab);border-color:var(--baobab)} .ds-button-danger:hover{background:var(--baobab);color:var(--paper)} /* MMDB-1785 round 2 (2026-08-28) -- inline-style sweep: small semantic modifiers so app code never needs style={{...}} on a button-like element. All reuse existing tokens; zero new hex. */ .ds-button-accent{background:var(--baobab);color:var(--paper);border-color:var(--baobab)} .ds-button-accent:hover{background:var(--baobab-2);border-color:var(--baobab-2)} .ds-button-accent:disabled,.ds-button-accent.ds-button-disabled{background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)} .ds-button-followup{margin-top:16px} .ds-button-full{width:100%} .ds-button-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;white-space:nowrap;line-height:1;border-radius:2px} .ds-pf-block-act-end{margin-left:auto} .md-ghost-on-dark{color:var(--paper-2)} .ds-select-left{text-align:left} .ds-ctl-btn:hover{background:rgba(255,255,255,.18)} .ds-titlebar-front .ds-ctl-btn:hover{background:rgba(0,0,0,.07)} /* Zoom-level pips in the HR document viewer's dark image toolbar -- values relocated verbatim from the inline style they replace (MMDB-1785 round 2), not new colors: a scoped, non-DS-token pair specific to this one dark overlay widget. */ .docviewer-zoom-btn{background:#3f3f46;color:#ffffff;border:none;padding:0.15rem 0.4rem;border-radius:3px;font-size:0.7rem;cursor:pointer} .docviewer-zoom-btn.active{background:#3b82f6} .ds-button-on-dark-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)} .ds-button-on-dark-primary:hover{background:var(--baobab);color:var(--paper);border-color:var(--baobab)} .ds-button-on-dark-ghost{background:transparent;color:var(--paper);border-color:var(--paper)} /* .ds-btn/.ds-btn-quiet (2026-08-15, P2-40.1 orphan sweep) -- a second, older button-class name (StaffBoards.tsx's board-error retry control) with no matching rule at all, not even a bare .ds-btn base. Authored as a minimal, deliberately quiet variant distinct from .ds-button-secondary's bold outline -- this control sits under an inline error message and should read as a low-emphasis retry, not a primary CTA. */ .ds-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:calc(12px * var(--fs-scale, 1));cursor:pointer;border:1px solid var(--hairline);background:var(--paper);color:var(--ink)} .ds-btn:hover{border-color:var(--ink)} .ds-btn-quiet{background:transparent;color:var(--ink-mute)} .ds-btn-quiet:hover{color:var(--ink);border-color:var(--hairline)} .ds-button-on-dark-ghost:hover{background:var(--paper);color:var(--ink)} /* Compact size (2026-08-15, TASK-P2-30.2a fix round) -- a DS-level size need, not a dealer-specific one: the base .ds-button's 11px/18px padding is too tall for a toolbar-row primary action sitting beside 30-36px inputs (first consumer: DealerCockpit.tsx's "+ Create New Price Enquiry" button, which previously carried this as an inline style). Additive to any color variant, e.g. `ds-button ds-button-primary ds-button-compact`. */ .ds-button-compact{font-weight:700;padding:8px 16px;height:36px} /* Tiny size (2026-08-15, TASK-P2-staffboards-inline-style fix round) -- a DS-level size need, not an OMS-specific one: a table-row secondary action (e.g. "Manage Logins" beside a dense DataGrid row) needs a smaller footprint than even .ds-button-compact provides -- 8px/16px at 36px height still overflows a compact row. First consumer: StaffBoards.tsx's dealer-directory "Manage Logins" button, which previously carried this as an inline style. Additive to any color variant, e.g. `ds-button ds-button-secondary ds-button-tiny`. */ .ds-button-tiny{padding:3px 8px;font-size:11px} .ds-button:focus-visible{outline:2px solid var(--baobab);outline-offset:4px} .ds-button:disabled,.ds-button-disabled,.ds-button.ds-button-disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)} .ds-button-primary:disabled,.ds-button-primary.ds-button-disabled,.ds-button-primary:disabled:hover,.ds-button-primary.ds-button-disabled:hover{background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)} .ds-button-secondary:disabled,.ds-button-secondary.ds-button-disabled,.ds-button-secondary:disabled:hover,.ds-button-secondary.ds-button-disabled:hover{background:var(--paper-2);color:var(--ink-mute);border-color:var(--hairline)} .chat-quick-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px 0;max-width:720px;width:100%;margin-left:auto;margin-right:auto} .chat-quick-actions .quick-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:calc(11.5px * var(--fs-scale, 1));letter-spacing:0.03em;cursor:pointer;transition:background 0.14s ease, color 0.14s ease, border-color 0.14s ease;text-decoration:none;border:1px solid var(--hairline);background:transparent;color:var(--ink);line-height:1;white-space:nowrap;text-transform:uppercase} .chat-quick-actions .quick-action-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .chat-quick-actions .quick-action-btn:focus-visible{outline:2px solid var(--baobab);outline-offset:2px} .chat-quick-actions .quick-action-btn:disabled{opacity:0.5;cursor:not-allowed} /* ===== Forms ===== */ .ds-form{display:flex;flex-direction:column;gap:32px;margin-top:40px} .ds-fieldset{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:28px 32px;display:flex;flex-direction:column;gap:18px;margin:0} .ds-legend{font-family:var(--font-mono);font-weight:500;font-size:calc(11px * var(--fs-scale, 1));letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);padding:0 6px;margin-left:-6px} .ds-field{display:flex;flex-direction:column;gap:6px} .ds-field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .ds-field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start} /* defect D4b (2026-08-14) -- a grid item's default min-width is `auto` (its own content size), not 0; a plain .ds-field used directly as a .ds-field-row-2/-3 grid cell (e.g. every enum cell (priority) alongside the existing cells — same full-width-in-cell treatment. */ .lines-table select.ds-select { width: 100%; min-width: 120px; } /* ===== FINREP dense financial-table numerics (2026-07-08) ===== .ds-mono-num: right-aligned tabular-figure amount cell for td AND th — additive sibling to .ds-mono (which stays left-aligned for codes/hashes/ids elsewhere). Applied to numeric columns (opening/debit/credit/closing/balance/aging buckets) on GL reporting + FINREP report tables. .ds-mono-num-negative is a modifier (combine both classes) giving a negative amount the same "danger" ink the DS already uses for .ds-menu-item-danger. */ .ds-mono-num{font-family:var(--font-mono);font-weight:500;font-size:calc(11.5px * var(--fs-scale, 1));letter-spacing:0.02em;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .ds-mono-num-negative{color:var(--baobab)} th.ds-mono-num{font-weight:500} /* .ds-records-compact-sticky: opt-in modifier (combine with .ds-records-compact on the same ) that pins the header row to the top of the page as a long report table scrolls. Scoped to the modifier so every OTHER .ds-records-compact table in the app (which does not add this class) is completely unaffected. */ .ds-records-compact-sticky thead th{position:sticky;top:0;z-index:3;background:var(--paper);border-bottom:1px solid var(--ink);padding:8px 12px;text-align:left;font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute)} .ds-records-compact-sticky thead th.ds-mono-num{text-align:right} /* ===== FINREP design-review fixes (2026-07-08, review C2 + I1) ===== C2: `.module-workbench .ds-filterbar .ds-input{flex:0 1 200px}` assumes the input sits directly in the ROW-direction filterbar. Inside a `.ds-field` wrapper (COLUMN direction — the labeled-input pattern the reporting filter rows use) that 200px flex-basis applies to the vertical axis, blowing the input up to a 200px-tall card (verified via live computed styles: height:200px, flex:0 1 200px). Neutralize the basis in the ds-field context so the input keeps its natural compact height; width stays content-sized with the same 120px floor the row-direction rule uses. */ .module-workbench .ds-filterbar .ds-field .ds-input{flex:0 0 auto;min-width:120px} /* I1: the union-merged file carries two conflicting `.ds-button-secondary:hover` rules — an earlier one sets {background:ink; color:paper}, a later one resets background to transparent but NOT color. Net computed hover state: paper-colored text on a transparent background = the button label disappears on hover (verified live: color rgb(250,250,246), bg transparent). Re-assert readable hover ink last so it wins; background/border keep the later rule's transparent/ink treatment. */ .ds-button-secondary:hover{color:var(--ink)} /* ===== Reporting UX audit fixes (2026-07-09) ===== ds-table-scroll: NEW opt-in wrapper (wrap `
`) giving a report table a horizontal scrollbar when it's wider than its container. Review C3: Stock Valuation's Items table clipped 49.7px off the right edge of a 1440px viewport with `document.body.scrollWidth === window.innerWidth` exactly — i.e. there was NO scroll mechanism anywhere on the page; the overflow was simply unreachable, not just visually tight. `.ds-table-section`/`.ds-records-compact` never had an overflow rule at all, so ANY report table wider than its container has this same latent failure mode — applied across every report table in Reporting, not only the one the audit happened to catch. min-width:0 makes the wrapper a real overflow boundary: without it a grid/flex descendant defaults to min-width:auto and refuses to shrink below its table's intrinsic width, so overflow-x:auto has nothing to clip and never produces a scrollbar. */ .ds-table-scroll{overflow-x:auto;min-width:0} /* Wave 6 UX finding 13 (bom-consumption: last column truncated mid-word, NO scrollbar, no gradient -- clip was total, not just visually tight). Root cause: `.ds-table-section` (the DIRECT child of `.module-workbench`, a `display:grid` container with one implicit auto track) is a grid ITEM. Per the CSS Grid "automatic minimum size" algorithm, a grid item that is not itself a scroll container keeps its content-based (min-content) minimum size regardless of any `minmax(0,1fr)` cap on the track -- `[data-eid="reporting-section"] .module-workbench{grid-template-columns: minmax(0,1fr)}` above caps the TRACK, not this item's own auto minimum. A wide `.ds-records-compact` table (nowrap `.ds-mono-num` cells refusing to shrink) can still force `.ds-table-section` -- and so the grid track and `.module-workbench-reporting` itself -- wider than the viewport. `.module-workbench.module-workbench-reporting{overflow-x:clip}` then silently CROPS that overflow with zero affordance (no scrollbar, no shadow -- `clip` has neither) before `.ds-table-scroll`'s own overflow-x:auto below ever gets a bounded box to scroll. Giving `.ds-table-section` an explicit min-width:0 makes it a real shrinkable grid item, so `.ds-table-scroll` inside it is the one that overflows and scrolls -- with the visible scrollbar + edge-fade below -- instead of the ancestor silently clipping it. max-width:100% on `.ds-table-scroll` itself is belt-and-suspenders: the wrapper can never grow past its own containing block regardless of what its table child wants. */ .ds-table-section{min-width:0} .ds-table-scroll{max-width:100%} /* Review C3 (root cause): `.module-workbench` is `display:grid` with an IMPLICIT `auto` column. A grid item's default `min-width:auto` lets the single auto track grow to the widest item's min-content — so a report table wider than the page (Stock Valuation's Items table: intrinsic 1158px inside a 1080px `.page-inner`) forced the whole track to 1158px, breaking out of the page and pushing the last column ~50px off the right edge of the viewport with `document.body.scrollWidth === window.innerWidth` (no page scroll to reach it) — the exact unreachable-overflow the audit caught. Verified live post-first-deploy: the `.ds-table-scroll` wrapper alone was inert (clientWidth === scrollWidth === 1158, never scrolled) because this outer track was still growing under it. Capping the column at `minmax(0,1fr)` floors the track at 0 and caps it at the container width, so every table section stays page-width and the `.ds-table-scroll` wrapper inside finally has something to clip + scroll. The header defines its own inner grid and is unaffected. SCOPED to the reporting surface (`[data-eid="reporting-section"]`, the reporting layout wrapper) rather than `.module-workbench` globally: the same class backs OMS / procurement / other workbench pages, and capping their grid track could clip a wide table that today overflows-visibly on a page WITHOUT a `.ds-table-scroll` wrapper. Reporting is the only surface that (a) was audited for this and (b) wraps every table in `.ds-table-scroll`, so the cap is safe and complete here and touches nothing else. */ [data-eid="reporting-section"] .module-workbench{grid-template-columns:minmax(0,1fr)} /* Review C2: two independently-reproduced cases of an ACTIVE filter chip rendering with identical text/background color (`color: rgb(14,14,12)` == `background-color: rgb(14,14,12)`, both --ink) instead of the correct paper-on-ink. components.css carries .ds-filter-chip/.ds-filter-chip-active defined 5 separate times at different points in this file (lines ~77, ~271, ~1796, ~1916, ~3281 as of this fix) — all currently agree on the paper/ink values, but that many duplicate definitions of the same class is exactly the kind of specificity/ordering hazard that produces a black-on-black bug the moment any ONE copy drifts (as already happened to `.ds-filter-chip` itself: the padding/border-radius already differ between copies). Re-assert the correct active-chip colors as the unconditionally last word in the cascade for the reporting surface, same pattern as the C2/I1 fix directly above. Review C1: the period-preset chips (This month/This quarter/YTD/Prior year) never computed an active class AT ALL — clicking correctly updated from/to but gave zero visual confirmation, which reads as a dead button (worst on days the quarter and month ranges coincide). Fixed at the source in ReportingFilterBar.tsx / SaleReportReport.tsx / StatementReport.tsx / SalesSummaryReport.tsx (now compute the active class the same way the country/currency chips already did) — this rule is the CSS-side backstop for that class. */ .module-workbench .ds-filterbar .ds-filter-chip-active{color:var(--paper);background:var(--ink);border-color:var(--ink)} /* Review I1: without a fixed table-layout, a report table's column widths are content-driven — expanding the Trial Balance tree deep enough (5+ levels) changed the Name column's effective width, which reflowed UNRELATED sibling rows elsewhere in the same table (a root row wrapping to two lines with no change to its own content or the viewport). .ds-records-compact-fixed is an opt-in modifier (combine with .ds-records-compact on the same
, alongside an explicit giving each column a percentage width) that makes column widths independent of cell content, so one row's content can never perturb another row's layout. Scoped to the modifier so every OTHER .ds-records-compact table (no explicit colgroup) is unaffected. */ .ds-records-compact-fixed{table-layout:fixed} /* --- TA Recruitment breadcrumb + kanban main nav (TaMainNav.tsx) — TAR-R-061 / TAR-R-062. 12-column dense board (11 live phases + Completed) sized to fit on screen without page scroll; each column scrolls internally instead. Breadcrumb crumbs double as a phase filter/focus toggle for the board below them. -------------------------------------- */ .ta-nav{display:flex;flex-direction:column;gap:8px} .ta-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm)} .ta-crumb-wrap{display:inline-flex;align-items:center;gap:2px} .ta-crumb-sep{color:var(--ink-faint);font-size:11px} .ta-crumb{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid transparent;border-radius:3px;padding:3px 7px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);cursor:pointer} .ta-crumb:hover{background:var(--paper);border-color:var(--hairline)} .ta-crumb-current{background:var(--baobab-bg);border-color:var(--baobab);color:var(--baobab)} .ta-crumb-n{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute);background:var(--paper);border:1px solid var(--hairline);border-radius:8px;padding:0 5px} .ta-crumb-current .ta-crumb-n{border-color:var(--baobab);color:var(--baobab)} /* ROOT-CAUSE FIX (2026-07-21, sideload-measured): this is the canonical, manifest-registered .ta-kanban rule. Two prior fix attempts edited a `kanban-2row` modifier class in the SHELL'S OWN globals.css instead of this file, so their 6-col/2-row grid never reliably won the cascade -- this rule (equal specificity, loaded after globals.css on the page) always overrode it back to a stale 12-col single-row grid left over from an earlier board design. Fixed here, at the actual DS source of truth, and the app no longer needs a separate override class. */ /* R12 (2026-07-24) -- 10 live kanban phases (onboarding + completed moved out, R10/R11/R14) fit a clean 5-wide x 2-row grid -- wider columns than the old 6-wide/12-phase layout. */ .ta-kanban{display:grid;width:100%;grid-template-columns:repeat(5, minmax(0, 1fr));grid-auto-rows:minmax(220px, 1fr);gap:8px} @media (max-width:900px){.ta-kanban{grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:minmax(200px, 1fr)}} /* R8 -- filter row above the board. */ .ta-filterbar{display:flex;gap:8px;margin-bottom:10px} .ta-filterbar .ds-select{width:auto;min-width:160px} /* R17 -- compact supplier-portal indicator on a card. */ .ta-badge-supplier{align-self:flex-start;font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:.03em;color:var(--signal-amber);border:1px solid var(--signal-amber);border-radius:8px;padding:1px 5px;text-decoration:none;white-space:nowrap} .ta-badge-supplier:hover{background:var(--signal-amber-bg)} .ta-badge-supplier--on-dark{margin-left:8px;align-self:center} /* R11/R14 -- Previous transactions: wider table-row layout, consistent (non-white) styling matching the kanban's own --paper-2/--ink vocabulary. */ .ta-prev{margin-top:16px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);overflow:hidden} .ta-prev-h{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--ink)} .ta-prev-t{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--paper)} .ta-prev-list{display:flex;flex-direction:column} .ta-prev-row{display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr 1fr;gap:10px;align-items:center;padding:8px 10px;background:var(--paper);border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit} .ta-prev-row:last-child{border-bottom:0} .ta-prev-row:hover{background:var(--paper-2)} .ta-prev-title{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ta-prev-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ta-prev-phase{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft)} .ta-prev-age{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);text-align:right} .ta-col{min-width:0;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);overflow:hidden} .ta-col-focused{border-color:var(--baobab);box-shadow:inset 0 0 0 1px var(--baobab)} .ta-col-completed{background:var(--paper)} .ta-col-dimmed{opacity:0.4} .ta-col-drop-advance{border-color:var(--signal-grass);box-shadow:inset 0 0 0 2px var(--signal-grass);background:var(--signal-grass-bg)} .ta-col-drop-demote{border-color:var(--signal-amber);box-shadow:inset 0 0 0 2px var(--signal-amber);background:var(--signal-amber-bg)} .ta-card[draggable="true"]{cursor:grab} .ta-card-dragging{opacity:0.45} /* R13 (2026-07-24) -- column headers were the same weak --paper-2 tint as the body; strong dark band instead, matching the dialog dark titlebar treatment (var(--ink)). */ .ta-col-h{display:flex;align-items:center;gap:4px;padding:6px 6px;border-bottom:0;background:var(--ink)} .ta-col-t{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--paper);flex:1;line-height:1.2} .ta-col-n{font-family:var(--font-mono);font-size:9px;color:var(--paper);background:transparent;border:1px solid color-mix(in srgb,var(--paper) 40%,transparent);border-radius:8px;padding:0 4px} /* R7 (2026-07-24) -- board holds dozens of cards; tighter row rhythm. */ .ta-col-b{padding:4px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1;min-height:0} .ta-card{text-align:left;background:var(--paper);border:1px solid var(--hairline);border-left:2px solid var(--baobab);border-radius:3px;padding:4px 6px;cursor:pointer;display:flex;flex-direction:column;gap:1px} .ta-card{transition:border-color 0.12s ease,background 0.12s ease} .ta-card:hover{border-color:var(--ink-faint);background:var(--paper-2)} /* R8 -- single-line truncation with ellipsis, not a 2-line wrap, so a long title never pushes a card taller than its neighbors. */ .ta-card-title{font-size:10.5px;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ta-card-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:1px;padding-top:3px;border-top:1px solid var(--hairline)} .ta-card-id{font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ta-card-age{font-family:var(--font-mono);font-size:8px;color:var(--ink-faint);flex:none} .ta-col-empty{color:var(--ink-faint);font-size:10px;text-align:center;padding:4px 0} .ta-col-note{display:block;width:100%;font-family:var(--font-mono);font-size:8px;color:var(--ink-mute);text-align:center;padding:3px 4px;border-top:1px solid var(--hairline);background:var(--paper-2)} .ta-col-note-action{appearance:none;cursor:pointer;border-left:0;border-right:0;border-bottom:0} .ta-col-note-action:hover{color:var(--baobab);background:var(--paper)} .ta-nav-refresh{align-self:flex-end;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-mute);background:transparent;border:1px solid var(--hairline);border-radius:3px;padding:3px 8px;cursor:pointer} .ta-nav-refresh:hover{color:var(--ink);border-color:var(--ink-faint)} /* BA-R2-005/BA-R2-006/UX-R2-003: row for the refresh action + the synthetic-case visibility toggle so the data-hygiene control sits next to the control it's paired with, not stacked as its own bar. */ .ta-nav-footer{display:flex;justify-content:flex-end;align-items:center;gap:6px} .ta-nav-footer .ta-nav-refresh{align-self:auto} /* ===== Generic Kanban family 2026-08-03 (sales-crm-oms-merge): denser, domain-agnostic board primitives for any horizontally-scrolling column board (Sales CRM pipeline, OMS case board, etc.) that isn't the fixed 5-column .ta-kanban grid or the HR-specific .h2r-* board. Composes only existing tokens (--ink/--paper/--paper-2/--hairline/--baobab/ --signal-grass/--signal-grass-bg/--font-mono/--radius-sm). */ .ds-kanban{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;align-items:flex-start} .ds-kanban-col{flex:0 0 188px;min-width:0;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);max-height:100%;overflow:hidden} .ds-kanban-col-head{display:flex;flex-direction:column;gap:3px;padding:7px 10px;background:var(--paper-manila,#EDE6D2);border-bottom:2px solid var(--ink,#111110)} .ds-kanban-col-head-row{display:flex;align-items:center;gap:5px} .ds-kanban-col-title{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink,#111110);flex:1;line-height:1.25} .ds-kanban-col-count{font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--ink,#111110);background:#DDD5BF;border:1px solid #B8AF98;border-radius:3px;padding:1px 5px} /* Per-column value totals — one chip per currency present in that column, so a mixed-currency stage never sums two currencies into one misleading number (see .ds-kanban-col-total). Caller-computed; the board only lays them out. */ .ds-kanban-col-totals{display:flex;flex-wrap:wrap;gap:4px} .ds-kanban-col-total{font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:0.02em;color:var(--ink-soft,#2E2D28)} .ds-kanban-col-body{padding:5px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1;min-height:0} .ds-kanban-card{text-align:left;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--baobab);border-radius:var(--ds-radius-sm);padding:5px 8px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .12s ease,background .12s ease} .ds-kanban-card:hover{border-color:var(--ink-faint);background:var(--paper-2)} .ds-kanban-card-title{font-size:11px;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ds-kanban-card-meta{display:flex;justify-content:space-between;align-items:center;gap:5px} .ds-kanban-card-chip{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:1px 4px} .ds-kanban-empty{color:var(--ink-faint);font-size:11px;text-align:center;padding:4px 0} .ds-kanban-drop-active{border-color:var(--signal-grass);box-shadow:inset 0 0 0 2px var(--signal-grass);background:var(--signal-grass-bg)} .ds-kanban-card-dragging{opacity:0.45} /* Card meta line: one muted, single-line, ellipsised run of secondary facts (customer / owner / value) sitting left of the age chip in .ds-kanban-card-meta. Kept text, not chips, so the chip row below stays the only place carrying signal colour. */ .ds-kanban-card-metatext{flex:1;min-width:0;font-size:10px;line-height:1.3;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Chip tones. The base .ds-kanban-card-chip already reads as the muted tone; -muted only drops it a further step for genuinely inert values. */ .ds-kanban-card-chip-ok{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)} .ds-kanban-card-chip-warn{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)} .ds-kanban-card-chip-muted{color:var(--ink-faint)} /* Closed — Lost strip: records that left the funnel without winning (a dropped lead or a lost opportunity), shown OUTSIDE the active board so they stop occupying a working column, but never hidden entirely. Reuses .ds-kanban-card at reduced emphasis rather than a second card skin. */ .ds-kanban-closed{margin-top:10px;padding-top:8px;border-top:1px solid var(--hairline)} .ds-kanban-closed-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px} .ds-kanban-closed-strip{display:flex;flex-wrap:wrap;gap:6px} .ds-kanban-closed-strip>.ds-kanban-card{flex:0 0 188px;border-left-color:var(--ink-faint);opacity:0.88} .ds-kanban-closed-strip>.ds-kanban-card:hover{opacity:1} /* Full-height board region. .ds-kanban-col already declares max-height:100% and an internally scrolling body, which only bites inside a parent with a bounded height — without one the columns grow to their content and the whole page scrolls, so a long column pushes every other column's cards off screen. This wrapper is that bounded height: the board fills the shell's scrolling body (100vh less its 28px/64px padding and the .ds-page-head banner above the board), the columns stretch to it, and each column scrolls its own cards. Below the min-height the region stops shrinking and the page's own scroll takes over. */ .ds-kanban-fill{display:flex;height:calc(100vh - 168px);min-height:320px} .ds-kanban-fill>.ds-kanban{flex:1;min-width:0;min-height:0;align-items:stretch} /* The board component wraps its columns (and the optional drag-to drop zone) in .ds-kanban-frame; the fill region sizes the frame and the frame passes the bounded height through to the columns. */ .ds-kanban-frame{display:flex;flex-direction:column;min-width:0} .ds-kanban-fill>.ds-kanban-frame{flex:1;min-width:0;min-height:0} .ds-kanban-fill>.ds-kanban-frame>.ds-kanban{flex:1;min-width:0;min-height:0;align-items:stretch} /* Below the shell's own layout breakpoint the body stops being a fixed-height scrolling region (it becomes height:auto and the page scrolls), so pinning the board to the viewport there would trap it in a short window under the stacked navigation. The board goes back to sizing to its tallest column and the page scrolls, which is the DS default. */ @media(max-width:820px){.ds-kanban-fill{display:block;height:auto;min-height:0} .ds-kanban-fill>.ds-kanban{align-items:flex-start} .ds-kanban-fill>.ds-kanban-frame>.ds-kanban{align-items:flex-start}} /* Board-page bounded shell (Ben, 2026-08-09 3rd pipeline v2 rejection): a page that also renders a closed/lost bar below the board used to let that bar's own height simply add on top of .ds-kanban-fill's fixed viewport height, pushing the whole page past 100vh into scroll -- the board fit, the closed bar did not. This wraps head+ratenote+board+closed-bar in one flex column, still sized off the viewport (same 168px shell chrome budget .ds-kanban-fill already used), but now every child is FLEX inside that one fixed height instead of the fixed height living only on the board: the head/ratenote/closed-bar take their natural (flex:none) height and the board (.ds-kanban-fill) flexes to fill whatever's left, so the closed bar is guaranteed inside the same viewport, never pushed below it. */ .ds-crm-board-shell{display:flex;flex-direction:column;height:calc(100vh - 168px);min-height:320px} .ds-crm-board-shell>.ds-page-head, .ds-crm-board-shell>.ds-crm-ratenote, .ds-crm-board-shell>.ds-hint, .ds-crm-board-shell>.ds-empty-state{flex:none} .ds-crm-board-shell>.ds-kanban-fill{flex:1 1 auto;min-height:120px;height:auto} .ds-crm-board-shell>.ds-kanban-closed{flex:none} /* If the user expands the closed strip, let IT scroll internally rather than grow the shell past the viewport -- the collapsed bar (the thing that must stay visible per the design contract) never moves. */ .ds-crm-board-shell>.ds-kanban-closed>.ds-kanban-closed-strip{max-height:180px;overflow-y:auto} @media(max-width:820px){.ds-crm-board-shell{display:block;height:auto;min-height:0} .ds-crm-board-shell>.ds-kanban-fill{height:auto}} /* Uniform board mode (MMDB-2009): every column head is one fixed height — two rows always, title+count over the value line — so heads never grow or shrink with their content; the value line is the stage's money, set in display italics at a size a human reads without leaning in. */ .ds-kanban-uniform .ds-kanban-col-head{height:60px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;align-items:center;column-gap:8px;padding:6px 12px;background:var(--paper-manila,#EDE6D2);border-bottom:2px solid var(--ink,#111110)} .ds-kanban-uniform .ds-kanban-col-head-row{display:contents} .ds-kanban-uniform .ds-kanban-col-title{font-family:var(--font-mono);font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--ink,#111110);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-row:1;grid-column:1} .ds-kanban-uniform .ds-kanban-col-count{grid-row:1;grid-column:2;justify-self:end;font-family:var(--font-mono);font-size:9.5px;font-weight:800;color:var(--ink,#111110);background:#DDD5BF;border:1px solid #B8AF98;border-radius:3px;padding:1px 5px} .ds-kanban-uniform .ds-kanban-col-totals{grid-row:2;grid-column:1/-1;justify-self:end} .ds-kanban-uniform .ds-kanban-col-total{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:18px;letter-spacing:.01em;color:var(--ink,#111110);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-height:20px;text-align:right} /* Equal-width working columns (design contract sales-pipeline-v2.html .board/.col): the pipeline always shows exactly 3 working stages, so they share the row evenly instead of the fixed-width scroll-strip columns the generic kanban (HR/IT boards) uses. */ .ds-kanban-uniform .ds-kanban{gap:9px} .ds-kanban-uniform .ds-kanban-col{flex:1;min-width:0} /* Uniform quadrant card grid (MMDB-2009, design contract sales-pipeline-v2.html .card): a true 2x2 grid — name+value share the top row (value is the loudest line on the card, set in display italics), marker+person / weight share the bottom row. An explicit dash renders where a slot is empty. */ .ds-kanban-uniform .ds-kanban-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;min-height:68px;column-gap:12px;row-gap:0;align-items:center;padding:8px 10px} .ds-kanban-uniform .ds-kanban-card-title{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-row:1;grid-column:1;align-self:center} .ds-kanban-uniform .ds-kanban-card-value{grid-row:1;grid-column:2;align-self:center;justify-self:end;font-size:16.5px;text-align:right;white-space:nowrap} .ds-kanban-uniform .ds-kanban-card-sub{grid-row:2;grid-column:1;min-width:0;overflow:hidden;white-space:nowrap;flex:none} .ds-kanban-uniform .ds-kanban-card-person{font-size:10.5px} .ds-kanban-uniform .ds-kanban-card-weight{grid-row:2;grid-column:2;justify-self:end;font-size:10px} .ds-kanban-card-value{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:13.5px;line-height:1.2;color:var(--ink)} .ds-kanban-card-grid-foot{display:flex;justify-content:space-between;align-items:baseline;gap:6px} .ds-kanban-card-person{flex:1;min-width:0;font-size:9.5px;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-kanban-card-weight{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute);letter-spacing:.02em;white-space:nowrap} /* Drag-to drop zone (MMDB-2011): appears under the board only while a card is in flight; dropping hands the card to the caller for confirmation. */ .ds-kanban-dropzone{margin-top:8px;border:1.5px dashed var(--baobab);border-radius:var(--ds-radius-sm);color:var(--baobab);background:var(--baobab-bg);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-align:center;padding:13px 10px} /* Closed — Lost collapsed bar (MMDB-2009): hundreds of closed records hide behind one line — count and lost value — until deliberately expanded. */ .ds-kanban-closedbar{display:flex;align-items:baseline;gap:10px;width:100%;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);padding:8px 12px;cursor:pointer;text-align:left;font-family:inherit} .ds-kanban-closedbar:hover{border-color:var(--ink-faint)} .ds-kanban-closedbar-title{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)} .ds-kanban-closedbar-count{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint)} .ds-kanban-closedbar-value{margin-left:auto;font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--ink-mute)} .ds-kanban-closedbar-chev{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint)} /* Dialog lede (MMDB-2010): the record popup opens on its money — the deal volume as a display figure — beside the stage control, above the facts. */ .ds-dialog-lede{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;border-bottom:1px solid var(--hairline);padding-bottom:12px;margin-bottom:12px} .ds-dialog-lede-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:3px} .ds-dialog-lede-fig{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:24px;line-height:1;color:var(--ink)} .ds-dialog-lede-cur{font-size:13px;color:var(--ink-mute);margin-right:4px} .ds-dialog-lede-field{min-width:200px} /* Mono group label between fact groups inside a record dialog. */ .ds-dialog-sect{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin:12px 0 4px} /* --- UX-R1-001: message threads (candidate signals/notes, case notes, interview cockpit transcript) — .msg-item-in = agent/system-authored, .msg-item-out = human-authored, distinguished by accent-bar side/color so a thread reads left-to-right without needing to re-read the author line on every row. -------------------------------------------------------- */ .msg-thread{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:320px;overflow-y:auto} .msg-item{background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--ink-faint);border-radius:var(--ds-radius-sm);padding:7px 10px} .msg-item-in{border-left-color:var(--baobab)} .msg-item-out{border-left-color:var(--ink-soft)} .msg-item-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px} .msg-item-author{font-family:var(--font-mono);font-weight:600;font-size:calc(10px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft)} .msg-item-time{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));color:var(--ink-faint);flex:none} .msg-item-body{font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.45;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere} /* --- UX-R1-001: requirement checklist — candidate multi-select (TaCaseDetail) and interview requirement-coverage (TaInterviewCockpit) share this family. .req-item-{covered,partial,gap} apply to either the row (coverage, state already known) or directly to the .req-item-state dot (candidate toggle, selected = covered) — both combinations are styled below. ------------- */ .req-checklist{display:flex;flex-direction:column;gap:4px;margin-top:8px} .req-item{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);padding:7px 9px;font:inherit} button.req-item{cursor:pointer} button.req-item:hover{border-color:var(--ink-faint)} .req-item-head{display:flex;align-items:center;gap:7px} .req-item-state{width:8px;height:8px;flex:none;border-radius:50%;background:var(--paper-2);border:1px solid var(--hairline)} .req-item-state.req-item-covered,.req-item.req-item-covered .req-item-state{background:var(--signal-grass);border-color:var(--signal-grass)} .req-item.req-item-partial .req-item-state{background:var(--signal-amber);border-color:var(--signal-amber)} .req-item.req-item-gap .req-item-state{background:transparent;border-color:var(--baobab)} .req-item-label{flex:1;font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)} .req-item-tag{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:2px 6px;flex:none} .req-item-evidence{font-family:var(--font-ui);font-size:calc(11.5px * var(--fs-scale, 1));line-height:1.4;color:var(--ink-mute);padding-left:15px} /* --- UX-R1-001: inline supplier search (TaCaseDetail SupplierInlineSearch) — reuses the exact visual language ResolvingSelect's .rsel-* family already established (see below) rather than a third dropdown style. --- */ .inline-search{position:relative} .inline-search-input{width:100%;font-family:var(--font-ui);font-size:13px;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);padding:7px 9px} .inline-search-input:focus{outline:none;border-color:var(--baobab)} .inline-search-results{position:absolute;z-index:20;top:calc(100% + 2px);left:0;right:0;max-height:260px;overflow-y:auto;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);box-shadow:0 4px 12px rgba(14,14,12,0.12)} .inline-search-result{display:block;width:100%;text-align:left;padding:6px 9px;font-family:var(--font-ui);font-size:12.5px;color:var(--ink-soft);background:transparent;border:0;border-bottom:1px solid var(--hairline);cursor:pointer} .inline-search-result:last-child{border-bottom:0} .inline-search-result:hover{background:var(--paper-2);color:var(--ink)} .inline-search-empty{padding:8px 9px;font-family:var(--font-ui);font-size:12px;color:var(--ink-faint)} /* --- UX-R1-001: onboarding/contract document-request rows (TaOnboardingSection) --- */ .doc-request-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid var(--hairline)} .doc-request-row:last-of-type{border-bottom:0} .doc-request-type{flex:1;font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)} .doc-request-state{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-mute);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:2px 6px;flex:none} .doc-request-state-shared{color:var(--signal-grass);border-color:var(--signal-grass)} .doc-request-state-received{color:var(--signal-grass);border-color:var(--signal-grass)} .doc-request-state-pending{color:var(--signal-amber);border-color:var(--signal-amber)} .doc-request-link{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));color:var(--baobab);text-decoration:none;flex:none} .doc-request-link:hover{text-decoration:underline} /* --- UX-R1-001: interview cockpit live-hint strip (TaInterviewCockpit) --- */ .hint-strip{margin-top:6px;padding:8px 10px;background:var(--paper-2);border:1px solid var(--hairline);border-left:3px solid var(--baobab);border-radius:var(--ds-radius-sm);font-family:var(--font-ui);font-size:calc(12px * var(--fs-scale, 1));line-height:1.45;color:var(--ink-soft)} /* --- TAR-R-056 resolving dropdown (ResolvingSelect.tsx / CountrySelect) — type-ahead + near-match suggestions + create-new, extends the existing .inline-search visual language rather than inventing a new one. --------- */ .rsel{position:relative} /* R2 (2026-07-24) -- rsel-input must be IDENTICAL geometry to .ds-input/ .ds-select/.ds-textarea (same font-size/weight/line-height/padding/ border-radius/background) so a text field and a typeahead field are never visually distinguishable by height/shape inside the same form. */ .rsel-input{width:100%;font-family:var(--font-ui);font-weight:500;font-size:calc(14.5px * var(--fs-scale, 1));line-height:1.4;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:10px 12px;transition:border-color 0.14s ease, background 0.14s ease} .rsel-input:hover{border-color:var(--ink-mute)} .rsel-input:focus{outline:none;border-color:var(--baobab)} .rsel-input:disabled{background:var(--paper-2);color:var(--ink-faint)} .rsel-note{display:block;font-size:10.5px;color:var(--ink-mute);margin-top:2px} .rsel-note-err{color:var(--baobab)} .rsel-results{position:absolute;z-index:20;top:calc(100% + 2px);left:0;right:0;max-height:260px;overflow-y:auto;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);box-shadow:0 4px 12px rgba(14,14,12,0.12)} /* Dialog-safe variant (RselResults component, ResolvingSelect.tsx) -- fixed-position, coordinates from --rsel-x/--rsel-y/--rsel-w so the dropdown escapes any scrollable ancestor's clip (e.g. .ds-modal-dialog-body), same mechanism as .ds-hover-preview's --hp-x/--hp-y. */ .rsel-results--fixed{position:fixed;z-index:1200;top:var(--rsel-y,-9999px);left:var(--rsel-x,-9999px);right:auto;width:var(--rsel-w,auto)} .rsel-option{display:flex;width:100%;text-align:left;justify-content:space-between;gap:8px;padding:6px 9px;font-size:12.5px;color:var(--ink-soft);background:transparent;border:0;border-bottom:1px solid var(--hairline);cursor:pointer} .rsel-option:last-child{border-bottom:0} .rsel-option:hover{background:var(--paper-2);color:var(--ink)} /* Defect 2 (2026-07-28) -- keyboard highlight, same visual weight as :hover so ArrowDown navigation reads identically to a mouse hover (CountrySelect in ResolvingSelect.tsx: typing + Enter had no keyboard path at all). */ .rsel-option--active{background:var(--paper-2);color:var(--ink)} .rsel-empty{padding:8px 9px;font-size:12px;color:var(--ink-faint)} .rsel-create{border-top:1px solid var(--hairline)} .rsel-warn{padding:6px 9px;font-size:10.5px;color:var(--signal-amber);background:var(--signal-amber-bg)} .rsel-option-create{color:var(--baobab);font-weight:600} .rsel-option-create:hover{background:var(--baobab-bg)} .rsel-country-group{display:flex;flex-direction:column} .rsel-country-head{font-weight:600} .rsel-country-count{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute)} .rsel-entity-option{padding-left:20px;font-size:12px;color:var(--ink-soft)} /* --- TAR-R-057 ASAP-or-date start-date control ------------------------- */ /* defect D2 (2026-07-24) -- keep the ASAP checkbox + date input on ONE line even in a narrow 3-col grid cell; without this the row wraps and blows the grid row height. */ .rsel-startdate{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;height:42px} .rsel-startdate .ds-input{flex:1;min-width:0;height:100%} .rsel-asap-toggle{flex:none;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);white-space:nowrap} .rsel-startdate .ds-input{flex:1} /* --- category-nav: collapsible left-nav category folders (IT Service Desk accordion, S9). Header is a real button (aria-expanded/aria-controls); body only mounts while open. Dense — no extra vertical padding beyond what a single-line category row needs. */ .category-nav-header{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;padding:12px 20px;font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);transition:color .12s ease} .category-nav-header:hover{color:var(--ink)} .category-nav-header svg{width:13px;height:13px;color:var(--ink-faint);flex:none} .category-nav-label{flex:1;min-width:0} .category-nav-count{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint);flex:none} .category-nav-chevron{display:inline-flex;flex:none;transition:transform .14s ease} .category-nav-chevron svg{width:12px;height:12px;color:var(--ink-faint)} .category-nav-chevron[data-state="open"]{transform:rotate(90deg)} .category-nav-body{padding-bottom:4px} /* ===== FinancialMatrix — management reporting matrix (2026-07-10) ===== */ .ds-financial-matrix-wrap{max-width:100%;overflow:auto;border:1px solid var(--hairline);background:var(--paper)} .ds-financial-matrix{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-ui);font-size:12px;line-height:1.25} .ds-financial-matrix-caption{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hairline);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper-2)} .ds-financial-matrix thead th{position:sticky;top:0;z-index:4;padding:9px 10px;border-bottom:1px solid var(--ink);background:var(--paper);color:var(--ink-mute);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .ds-financial-matrix tbody th,.ds-financial-matrix tbody td{padding:8px 10px;border-bottom:1px solid var(--hairline);background:var(--paper);white-space:nowrap} .ds-financial-matrix tbody tr:last-child th,.ds-financial-matrix tbody tr:last-child td{border-bottom:0} .ds-financial-matrix-row-label{position:sticky;left:0;z-index:2;min-width:230px;max-width:300px;text-align:left} .ds-financial-matrix thead .ds-financial-matrix-row-label{z-index:6} .ds-financial-matrix-row-parent th,.ds-financial-matrix-row-parent td{font-weight:700;background:var(--paper-2)} .ds-financial-matrix-row-parent .ds-financial-matrix-row-label{background:var(--paper-2)} .ds-financial-matrix-row-child .ds-financial-matrix-row-label{padding-left:32px;color:var(--ink-soft)} .ds-financial-matrix-toggle{display:flex;align-items:flex-start;gap:8px;width:100%;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer} .ds-financial-matrix-toggle:hover{color:var(--baobab)} .ds-financial-matrix-sub{display:block;margin-top:2px;color:var(--ink-mute);font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.03em} .ds-financial-matrix-cell{display:block;width:100%;min-width:62px;margin:-8px -10px;padding:8px 10px;border:0;background:transparent;color:inherit;font:inherit;text-align:right;cursor:pointer} .ds-financial-matrix-cell:hover{background:var(--baobab-bg);color:var(--baobab)} .ds-financial-matrix-cell:disabled{cursor:default;color:var(--ink-faint)} .ds-financial-matrix-cell:disabled:hover{background:transparent;color:var(--ink-faint)} .ds-financial-matrix-cell-selected{background:var(--baobab-bg);color:var(--baobab);box-shadow:inset 0 -2px 0 var(--baobab)} .ds-financial-matrix-total{position:sticky;right:0;z-index:3;border-left:1px solid var(--hairline);background:var(--paper)} .ds-financial-matrix thead .ds-financial-matrix-total{z-index:7} .ds-financial-matrix-row-parent .ds-financial-matrix-total{background:var(--paper-2)} .ds-financial-matrix-empty{padding:28px;text-align:center;color:var(--ink-mute)} @media(max-width:640px){ .ds-financial-matrix-row-label{min-width:180px;max-width:210px} .ds-financial-matrix tbody th,.ds-financial-matrix tbody td{padding-top:10px;padding-bottom:10px} } /* Reporting workbench modifiers: fixed-shell clearance and owned wide-content overflow. */ .module-workbench.module-workbench-reporting{grid-template-columns:minmax(0,1fr)} .ds-page-below-topbar{padding-top:88px} @media(max-width:640px){.ds-page-below-topbar{padding-top:72px}} /* --- Our Values (STEEL) page (values/page.tsx) — paper hero, STEEL letter strip, value grid, culture band. Baobab red stays a SCARCE accent: only the framed baobab mark + the 5 STEEL strip letters carry it; the value-grid letter badges use ink/paper so red does not flood the page. ------ */ .values-topbar{margin-bottom:0} .values-page{display:flex;flex-direction:column;gap:28px} .values-hero{display:flex;justify-content:space-between;align-items:center;gap:32px;padding-bottom:24px;border-bottom:1px solid var(--hairline);flex-wrap:wrap} .values-hero-copy{max-width:560px} .values-hero-copy h1{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:42px;letter-spacing:-0.02em;color:var(--ink);margin:6px 0 10px} .values-hero-copy p{color:var(--ink-mute);font-size:14px;line-height:1.55;margin:0} .values-baobab{display:flex;align-items:center;gap:16px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 20px;max-width:360px} .values-baobab-mark{flex:none;width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--hairline)} .values-baobab span{display:block;font-size:13px;color:var(--ink);line-height:1.4} .values-baobab strong{display:block;margin-top:4px;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:13px;color:var(--ink-soft)} .values-strip{display:flex;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden} .values-letter-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:18px 8px;border-right:1px solid var(--hairline);background:var(--paper)} .values-letter-card:last-child{border-right:0} .values-letter-card span{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:32px;line-height:1;color:var(--baobab)} .values-letter-card small{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-faint)} .values-grid{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden} .values-card{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;background:var(--paper);padding:22px 24px;border-bottom:1px solid var(--hairline)} .values-card:last-child{border-bottom:0} .values-card-letter{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-weight:800;font-size:64px;line-height:1;color:var(--baobab);border-right:1px solid var(--hairline);min-height:76px} .values-card h2{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-0.01em;margin:4px 0 6px} .values-card p{color:var(--ink-mute);font-size:13px;line-height:1.5;margin:0} .values-culture{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:24px;border-top:1px solid var(--hairline);flex-wrap:wrap} .values-culture h2{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:21px;color:var(--ink);margin:6px 0} .values-culture p{max-width:480px;color:var(--ink-mute);font-size:13px;line-height:1.55;margin:0} /* Sticky-note launcher glyph: central CDS object, never page-owned styling. */ .win-launcher-sticky-icon{position:relative;display:block;width:15px;height:17px;margin:auto;background:var(--paper);border:1px solid currentColor;border-radius:2px} .win-launcher-sticky-icon::after{content:"";position:absolute;right:-1px;top:-1px;width:6px;height:6px;background:var(--ink);border-left:1px solid var(--paper);border-bottom:1px solid var(--paper)} @media(max-width:860px){.values-card{grid-template-columns:64px 1fr;padding:18px 16px;gap:14px}.values-card-letter{font-size:48px;min-height:60px}} /* Reporting workbench overflow ownership at narrow widths. */ .module-workbench.module-workbench-reporting{overflow-x:clip} /* Revised 2026-08-01: with the portal sidebar back on the reporting worksurface the one-row scrolling filterbar clipped its tail chips at 1280px — the bar now wraps; chips never break internally. */ .module-workbench-reporting>.ds-filterbar{max-width:100%;flex-wrap:wrap} .module-workbench-reporting .ds-filter-chip{white-space:nowrap} .module-workbench-reporting .ds-datagrid-wrap{max-width:100%;min-width:0;overflow-x:auto} .module-workbench-reporting .ds-financial-matrix-wrap{contain:inline-size} /* Wave 6 UX finding 11a: report pages sit under a subnav that already names the report, so the title is a label, not a hero -- tighter title/header so the data table starts high on screen. Moved from app-level globals.css into the DS (was a non-allowlisted class styled outside the design system); combines with .module-workbench-reporting (grid/overflow layout), a distinct, non-overlapping concern. */ .module-workbench-report .module-title{font-size:clamp(20px,2vw,26px);line-height:1.1;letter-spacing:-0.01em} .module-workbench-report .module-workbench-header{margin-bottom:10px;align-items:center} .module-workbench-report .eyebrow{margin-bottom:2px} main.body .module-workbench-report .module-title,.portal-main .module-workbench-report .module-title{font-size:clamp(19px,1.8vw,24px)!important;line-height:1.15!important} /* Finance reporting has nine reports plus two utility panels. Keep that library as one compact working row at desktop widths and a deliberate horizontal scroller on narrow screens instead of wrapping a single orphaned tab. */ .ds-reporting-subnav{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:thin} .ds-reporting-subnav a,.ds-reporting-subnav button.subnav-item{flex:none;padding-inline:8px;font-size:calc(9.5px * var(--fs-scale, 1));letter-spacing:.06em} .ds-reporting-subnav .subnav-sep{flex:none;margin-inline:3px} .ds-reporting-subnav .spacer{min-width:8px} /* Wave 6 UX finding 11b: the vertical stack of report filter/mode controls sitting directly under the module-workbench-header, above the data table. Replaces the bare `.col` utility-soup class (display:flex;flex-direction: column;gap:12px) that app code was using -- same visual rule, a real semantic DS name instead of an atom. */ .ds-report-filters{display:flex;flex-direction:column;gap:12px} /* Business names are decision-critical data. Show the complete value instead of relying on hover-only ellipsis disclosure. */ .ds-records-name{display:block;max-width:260px;white-space:normal;overflow-wrap:anywhere;line-height:1.25} /* A compact, explicit instruction for reports that need filter input before data can load. This is an idle state, not an error or a large dashboard. */ .ds-reporting-idle{margin:0;padding:12px 14px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink-mute);font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale, 1));line-height:1.35} /* Finance Reporting R-014..018: compact working toolbar plus a left tree drawer. These are central DS objects because the app may not own layout, color, spacing, or state styling. */ .ds-reporting-toolbar{display:flex;align-items:center;gap:10px;min-height:48px;margin:0 0 10px;padding:6px 10px;border-bottom:1px solid var(--hairline);background:var(--paper)} .ds-reporting-toolbar-current{display:flex;align-items:baseline;gap:7px;min-width:0;padding-right:10px;border-right:1px solid var(--hairline)} .ds-reporting-toolbar-title{overflow:hidden;color:var(--ink);font-family:var(--font-ui);font-size:calc(14px * var(--fs-scale,1));font-weight:700;text-overflow:ellipsis;white-space:nowrap} .ds-reporting-toolbar-source{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink-mute);font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale,1));letter-spacing:.02em;white-space:nowrap} .ds-reporting-toolbar-source>span+span{padding-left:8px;border-left:1px solid var(--hairline)} /* Wave 6 UX finding 11c: push the "Manage" link to the toolbar's right edge. Replaces ``, which matched no rule inside `.ds-reporting-toolbar` (the only scoped `.spacer` rule targets `.ds-reporting-subnav .spacer` above, a different container) -- so the spacer was dead CSS and Manage sat immediately after the source-info block instead of right-aligning. Both a compliance fix and a real visual-bug fix. */ .ds-reporting-toolbar-spacer{flex:1 1 auto;min-width:8px} .ds-reporting-drawer-backdrop{position:fixed;inset:0;z-index:210;display:flex;justify-content:flex-start;background:color-mix(in srgb,var(--ink) 34%,transparent)} .ds-reporting-drawer{display:flex;flex-direction:column;width:min(390px,94vw);height:100dvh;overflow-y:auto;border-right:1px solid var(--ink);background:var(--paper);box-shadow:10px 0 28px color-mix(in srgb,var(--ink) 18%,transparent)} .ds-reporting-drawer-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ink);background:var(--paper)} .ds-reporting-drawer-title{margin:2px 0 0;color:var(--ink);font-family:var(--font-display);font-size:calc(19px * var(--fs-scale,1));letter-spacing:-.01em} .ds-reporting-tree{display:flex;flex-direction:column;border-bottom:1px solid var(--ink)} .ds-reporting-tree-domain{display:block;border-bottom:1px solid var(--hairline)} .ds-reporting-tree-domain:last-child{border-bottom:0} .ds-reporting-tree-domain-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:38px;padding:7px 14px;border:0;border-left:3px solid transparent;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale,1));font-weight:700;text-align:left;cursor:pointer} /* Fix (MAJOR, round-2 adversarial UX review, 2026-07-31): ReportingNav.tsx used to combine this base class with a bare "active"/"pending" token that was never added to the manifest's allowed_classes -- a real, reproducible allowlist violation shipping in every reporting page's nav chrome. Renamed to component-scoped combined tokens (same convention as .ds-filter-chip-active / .ds-oms-nav-link-active / .ds-tabbar-item-active elsewhere in this file), each added to allowed_classes below. */ .ds-reporting-tree-domain-button:hover,.ds-reporting-tree-domain-button-active{border-left-color:var(--baobab);background:var(--paper-2)} .ds-reporting-tree-children{display:flex;flex-direction:column;padding:0 0 4px 18px;background:var(--paper)} .ds-reporting-tree-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;padding:6px 14px;border-left:2px solid var(--hairline);color:var(--ink-soft);font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale,1));text-decoration:none} .ds-reporting-tree-link:hover,.ds-reporting-tree-link-active,.ds-reporting-tree-link-pending{border-left-color:var(--baobab);background:var(--paper-2);color:var(--ink)} .ds-reporting-tree-link-active{font-weight:700} .ds-button-secondary-active{background:var(--ink);color:var(--paper);border-color:var(--ink)} .ds-reporting-drawer-section{padding:10px 0;border-bottom:1px solid var(--hairline)} .ds-reporting-views{display:flex;flex-direction:column;gap:7px;padding:8px 14px 14px} .ds-reporting-management-table th,.ds-reporting-management-table td{vertical-align:middle} .ds-reporting-management-table .ds-input{min-width:76px;max-width:96px} .ds-reporting-management-table .ds-select{min-width:155px} .ds-reporting-access-add{padding:8px 10px;border-bottom:1px solid var(--hairline)} .ds-reporting-access-add .ds-input{max-width:360px} @media(max-width:900px){.ds-reporting-toolbar{align-items:flex-start;flex-wrap:wrap}.ds-reporting-toolbar-source{order:3;width:100%;overflow-x:auto}.ds-reporting-management-table{min-width:860px}} /* ===================================================================== IT Service Desk — execution-first two-pane surface (sd-*) + ServiceFlow next-steps layer (sf-*). Ported from the approved v8 interaction reference. Uses ONLY central design-system tokens (globals.css :root); the ds-* component classes come from the central DS (public/_design-system/ components.css). Candidate DS primitives: "app-shell", "category-nav", "assistant-video", "process-strip", "draft-note", "install-list", "request-strip". ============================================================================ */ .sd-app{display:flex;flex-direction:column;height:calc(100vh - 96px);min-height:520px;background:var(--paper-2);color:var(--ink-soft);font-family:var(--font-ui);font-weight:500;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;border:1px solid var(--ink)} .sd-top{display:flex;align-items:center;gap:30px;padding:13px 26px;background:var(--paper);border-bottom:1px solid var(--ink);flex:none} .sd-brand{display:flex;flex-direction:column;gap:2px;flex:none;max-width:none;cursor:pointer;background:transparent;border:0;text-align:left;padding:0} .sd-title{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:27px;line-height:1;letter-spacing:-0.02em;color:var(--ink);margin:0} .sd-body{flex:1;display:flex;min-height:0} .sd-menu{width:284px;flex:none;border-right:1px solid var(--ink);background:var(--paper);overflow-y:auto;padding:8px 0 34px} .sd-group{border-bottom:1px solid var(--hairline)} .sd-group:last-child{border-bottom:0} /* S9: category header/count/chevron/body are central DS classes (category-nav-*, public/_design-system/components.css) — accordion nav. */ .sd-task{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-left:2px solid transparent;padding:8px 20px 8px 22px;font-family:var(--font-ui);font-weight:500;font-size:13.5px;color:var(--ink-soft);cursor:pointer;line-height:1.3;transition:background .12s ease,color .12s ease} .sd-task:hover{background:var(--paper-2);color:var(--ink)} .sd-task-active{background:var(--paper-2);color:var(--ink);border-left-color:var(--baobab);font-weight:600} .sd-task-dot{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);flex:none} .sd-task-active .sd-task-dot{background:var(--baobab)} .sd-menu-empty{padding:22px 20px;font-family:var(--font-ui);font-size:13px;color:var(--ink-mute)} .sd-pane{flex:1;overflow-y:auto;background:var(--paper-2)} .sd-detail{max-width:720px;margin:0 auto;padding:20px 36px 52px;animation:sd-fade .26s ease both} @keyframes sd-fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* ServiceFlow video+voice panel. Video: the real ServiceFlow Video Agent LiveKit track (room "serviceflow-demo") renders into .sf-av-video once subscribed; the branded canvas presence is the idle/not-yet-connected state and is hidden once video arrives. There is exactly ONE recording control (.sf-mic-orb — central DS, see components.css); "Read aloud" and the assistant-voice mute button below are voice OUTPUT only and never touch the microphone. Avatar stage sized as the panel centrepiece (not a small tile) while staying inside the dense two-pane layout. */ /* Frameless: the video sits directly in the page, not inside a boxed card — no border/radius/background/padding on the outer wrapper or the video stage itself. Sized to hug the video + its status column instead of stretching the full .sd-detail width — the status/ON-toggle side has little content, so an unbounded flex:1 there used to leave a wide dead strip on the right. */ .sd-assistant{display:flex;gap:20px;align-items:stretch;max-width:560px} /* Left column: avatar video stage stacked with the prominent live-mic orb (central DS .sf-mic-orb, see components.css) so the "press and talk" control always reads as centered directly under the avatar's face. */ .sd-avatar-col{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:400px} /* No border/border-radius (that's the boxed-tile look Ben removed) — the radial-gradient stays as the idle-avatar canvas's own rendering surface (the canvas only strokes transparent rings/face, not a filled backdrop), not "frame chrome" around a finished video. */ .sd-avatar{position:relative;width:400px;height:300px;background:radial-gradient(circle at 50% 40%,var(--paper) 0%,var(--paper-2) 82%);overflow:hidden} .sf-av-canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .sf-av-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--ink)} .sd-avatar[data-has-video="true"] .sf-av-canvas{display:none} .sd-avatar:not([data-has-video="true"]) .sf-av-video{display:none} .sd-avatar-tag{position:absolute;bottom:0;left:0;right:0;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;text-align:center;padding:2px 0;z-index:3} .sd-assistant-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center} .sf-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-mute)} .sf-status b{color:var(--ink);font-weight:500} .sf-status .sf-dot{width:6px;height:6px;border-radius:50%;background:var(--signal-grass);flex:none} .sf-status .sf-state{color:var(--ink-mute)} .sd-assistant[data-state="speaking"] .sf-dot{background:var(--baobab)} .sd-assistant[data-state="speaking"] .sf-state{color:var(--baobab)} .sd-assistant[data-state="listening"] .sf-dot{background:var(--signal-amber);animation:sd-micpulse 1.3s ease-in-out infinite} .sd-assistant[data-state="listening"] .sf-state{color:var(--signal-amber)} .sd-assistant[data-state="muted"] .sf-dot{background:var(--ink-faint)} .sf-caption{font-family:var(--font-ui);font-size:13px;line-height:1.35;color:var(--ink-soft);margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .sf-caption q{font-style:italic;color:var(--ink)} .sd-assistant-controls{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap} .sf-ctl{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--hairline);border-radius:22px;padding:6px 12px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:border-color .14s ease,color .14s ease} .sf-ctl:hover{border-color:var(--ink-mute);color:var(--ink)} .sf-ctl svg{width:14px;height:14px} .sf-ctl-off{color:var(--ink-faint);border-style:dashed} .sf-speak-ind{display:inline-flex;align-items:flex-end;gap:2px;height:13px;margin-left:2px} .sf-speak-ind i{width:2.5px;height:4px;background:var(--baobab);border-radius:1px;display:block} .sd-assistant[data-state="speaking"] .sf-speak-ind i{animation:sf-eq .6s ease-in-out infinite} .sf-speak-ind i:nth-child(2){animation-delay:.15s} .sf-speak-ind i:nth-child(3){animation-delay:.3s} .sf-speak-ind i:nth-child(4){animation-delay:.45s} @keyframes sf-eq{0%,100%{height:4px}50%{height:12px}} @keyframes sd-micpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--baobab) 34%,transparent)}50%{box-shadow:0 0 0 5px transparent}} @media (max-width:640px){.sd-avatar{display:none}} .sd-taskhead{margin:14px 0 0} .sd-task-title{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(20px,2.1vw,27px);line-height:1.06;letter-spacing:-0.015em;color:var(--ink);margin:5px 0 0;text-wrap:balance} .sd-stage{margin:24px 0 0} .sd-cta-row{display:flex;gap:13px;align-items:center;flex-wrap:wrap} .sd-primary{padding:13px 22px;font-size:12.5px} .sd-primary svg{width:15px;height:15px} .sd-cta-note{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;align-items:center;gap:6px} .sd-cta-note svg{width:12px;height:12px;color:var(--ink-faint)} .sd-run-line{display:flex;align-items:center;gap:12px;font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);padding:6px 0 16px} .sd-run-line b{color:var(--ink);font-weight:600} .sd-spin{width:18px;height:18px;border:2px solid var(--hairline);border-top-color:var(--baobab);border-radius:50%;flex:none;animation:sd-spin .7s linear infinite} @keyframes sd-spin{to{transform:rotate(360deg)}} .sd-ok-glyph{width:20px;height:20px;border-radius:50%;background:var(--signal-grass);color:var(--paper);display:grid;place-items:center;flex:none} .sd-ok-glyph svg{width:13px;height:13px} .sd-field-labelrow{display:flex;align-items:center;justify-content:space-between;gap:8px} .sd-dictate{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);padding:1px 3px} .sd-dictate:hover{color:var(--baobab)} .sd-dictate svg{width:12px;height:12px} .sd-dictate-live{color:var(--baobab)} .sd-prefill{display:inline-flex;align-items:center;align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:0.02em;color:var(--ink-mute);background:var(--paper-2);border:1px dashed var(--hairline);border-radius:3px;padding:3px 8px} .sd-priority{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--baobab);background:var(--baobab-bg);border:1px solid color-mix(in srgb,var(--baobab) 28%,var(--hairline));border-radius:3px;padding:7px 11px;margin:15px 0 0} .sd-priority svg{width:14px;height:14px;flex:none} .sd-catalog{display:flex;flex-direction:column;border-top:1px solid var(--hairline);margin:16px 0 0} .sd-cat-row{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--hairline)} .sd-cat-ico{width:26px;height:26px;flex:none;color:var(--ink-mute);display:grid;place-items:center} .sd-cat-ico svg{width:19px;height:19px} .sd-cat-h{flex:1;min-width:0} .sd-cat-name{display:block;font-family:var(--font-ui);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2} .sd-cat-meta{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.03em;color:var(--ink-faint);margin-top:2px} .sd-cat-state{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--signal-grass)} .sd-cat-state svg{width:13px;height:13px} .sd-done-title{display:flex;align-items:center;gap:10px;margin-bottom:5px} .sd-reset{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);padding:0;margin-top:18px} .sd-reset:hover{color:var(--baobab)} .sd-reset svg{width:13px;height:13px} /* validation flag (replaces the reference's inline borderColor set) */ .sd-flag-err{border-color:var(--baobab)} .sf-action .ds-button:disabled{opacity:.45;pointer-events:none} /* ===================================================================== next-steps layer — process strip + prefilled draft note. ============================================================================ */ .sf-preview{display:flex;flex-direction:column;gap:15px;margin:16px 0 0;animation:sd-fade .24s ease both} .sf-target{display:flex;flex-direction:column;gap:11px} .sf-target .ds-field{max-width:360px} .sf-target .ds-field-row-2{max-width:440px} .sf-chiprow{margin:0;padding:0;border:0} .sf-chip.ds-filter-chip-active{color:var(--paper);background:var(--baobab);border-color:var(--baobab)} .sf-more{display:flex;flex-direction:column;gap:6px;max-width:300px} .sf-more .ds-label{color:var(--ink-faint)} .sf-happens{display:flex;flex-direction:column;gap:9px} .sf-happens-h{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin:0} .sf-strip{display:flex;align-items:flex-start;flex-wrap:wrap;max-width:560px} .sf-node{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;flex:0 0 auto;min-width:0;max-width:118px;padding:0 3px;transition:opacity .3s ease} .sf-node-ico{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--hairline);background:var(--paper);font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);transition:background .3s ease,border-color .3s ease,color .3s ease} .sf-node-ico svg{width:15px;height:15px} .sf-node-label{font-family:var(--font-ui);font-size:11.5px;line-height:1.22;color:var(--ink-mute);max-width:15ch;transition:color .3s ease} .sf-conn{flex:0 0 30px;width:30px;min-width:16px;height:1.5px;background:var(--hairline);margin-top:12px;position:relative;overflow:hidden} .sf-conn::after{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s ease} .sf-conn--on::after{transform:scaleX(1)} .sf-node--here .sf-node-ico{border-color:var(--baobab);border-width:2px} .sf-node--here .sf-node-label{color:var(--ink);font-weight:600} .sf-here-dot{width:9px;height:9px;border-radius:50%;background:var(--baobab);animation:sf-hi 2.1s ease-in-out infinite} @keyframes sf-hi{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--baobab) 40%,transparent)}55%{box-shadow:0 0 0 5px transparent}} .sf-here-tag{font-family:var(--font-mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--baobab);margin-top:-2px} .sf-node--next{opacity:.55} .sf-node--done .sf-node-ico{border-color:var(--ink);background:var(--ink);color:var(--paper)} .sf-node--done .sf-node-label{color:var(--ink-soft)} .sf-node--active .sf-node-ico{border-color:var(--baobab)} .sf-node--active .sf-node-label{color:var(--ink);font-weight:600} .sf-node-spin{width:15px;height:15px;border:2px solid var(--baobab-bg);border-top-color:var(--baobab);border-radius:50%;animation:sd-spin .7s linear infinite} .sf-node--waiting .sf-node-ico{border-color:var(--signal-amber);color:var(--signal-amber)} .sf-node--waiting .sf-node-label{color:var(--ink);font-weight:600} .sf-wait-dot{width:9px;height:9px;border-radius:50%;background:var(--signal-amber);animation:sf-hi 2.1s ease-in-out infinite} .sf-note,.sf-summary{padding:15px 17px;display:flex;flex-direction:column;gap:13px} .sf-note-head{display:flex;flex-wrap:wrap;gap:6px 30px;padding-bottom:12px;border-bottom:1px solid var(--hairline)} .sf-note-row{display:flex;align-items:baseline;gap:10px;min-width:0} .sf-note-k{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint);flex:none} .sf-note-v{font-family:var(--font-ui);font-size:13.5px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap} .sf-note-v b{color:var(--ink-faint);font-weight:400} .sf-msg{font-family:var(--font-ui);font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0} .sf-fill{color:var(--ink);font-weight:600;box-shadow:inset 0 -0.42em 0 var(--baobab-bg)} .sf-blank{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-mute);background:var(--paper-2);border:1px dashed var(--hairline);border-radius:3px;padding:1px 7px;white-space:nowrap} .sf-reason{display:flex;flex-direction:column;gap:6px} .sf-summary .sf-msg{font-size:15px} .sf-prefill-line{display:flex} .sf-agentq{display:flex;flex-direction:column;gap:13px} .sf-agent-line{font-family:var(--font-ui);font-size:17px;line-height:1.45;color:var(--ink);margin:0;padding-left:13px;border-left:2px solid var(--baobab);text-wrap:balance;max-width:60ch} .sf-ask-row{display:flex;gap:10px;align-items:center;max-width:540px;flex-wrap:wrap} .sf-ask-in{flex:1;min-width:220px} .sf-suggest{display:flex;flex-direction:column;gap:7px} .sf-suggest-h{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint)} .sf-branch{display:flex;gap:11px;flex-wrap:wrap} .sf-sample{font-family:var(--font-mono);font-size:10px;letter-spacing:0.02em;color:var(--ink-mute);background:var(--paper-2);border:1px dashed var(--hairline);border-radius:3px;padding:5px 9px;margin:0;align-self:flex-start;max-width:60ch;line-height:1.4} .sf-action{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:2px} .sf-hint{font-family:var(--font-ui);font-size:12.5px} .sf-note-done{margin:2px 0 0} .sf-note-done .sd-reset{margin-top:12px} /* desk "My requests" — session-local + honest: only items started this session, each backed by a real ticket / process transaction. */ .sf-myreq{display:flex;flex-direction:column;gap:9px;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--hairline)} .sf-myreq .sf-happens-h{margin:0;display:flex;align-items:center;gap:8px} .sf-myreq-n{font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;color:var(--paper);background:var(--ink);border-radius:20px;padding:1px 7px} .sf-myreq-list{display:flex;flex-direction:column;border-top:1px solid var(--hairline)} .sf-myreq-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--hairline)} .sf-myreq-t{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--ink);flex:none} .sf-myreq-s{flex:1;min-width:0;font-family:var(--font-mono);font-size:11px;letter-spacing:0.02em;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-myreq-row .ds-tag{flex:none} .sf-amend{display:flex;flex-direction:column;gap:6px;max-width:440px} .sf-done-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center} @media (prefers-reduced-motion:reduce){ .sd-detail,.sf-preview{animation:none} .sd-spin,.sf-node-spin,.sf-here-dot,.sf-wait-dot,.sf-speak-ind i,.sd-assistant[data-state="listening"] .sf-dot{animation:none} .sf-mic-orb[data-state="listening"]::after,.sf-mic-orb[data-state="speaking"]::after{animation:none} } @media (max-width:860px){ .sd-body{flex-direction:column;overflow-y:auto} .sd-menu{width:100%;max-height:32vh;border-right:0;border-bottom:1px solid var(--ink);padding-bottom:0} .sd-pane{overflow:visible} .sd-detail{max-width:none;padding:16px 20px 28px} .sd-assistant{max-width:100%} .sd-avatar-col{width:min(400px,100%)} .sd-avatar{width:100%;max-width:400px;height:auto;aspect-ratio:4/3} .sd-app .ds-field-row-2{grid-template-columns:1fr} } @media (max-width:640px){ .sd-menu{max-height:26vh} .sd-detail{padding:12px 14px 24px} .sd-assistant{flex-direction:column;gap:10px} .sd-avatar-col,.sd-assistant-body{width:100%} } /* Portal mobile navigation: compact trigger plus a scrollable CDS panel. */ .portal-mobile-nav-trigger{display:none} /* Reporting worksurface (revised 2026-08-01, Ben: "you did not show me the nav"): the portal sidebar STAYS visible on /app/reporting — reports now size their tables to content (.ds-report-table) and genuinely wide ones scroll inside .ds-table-scroll, so the full-track takeover and its floating Menu trigger are retired. The workbench still spans its whole grid track rather than the 1080px page-inner column. */ .portal-shell-frame.portal-shell-reporting .module-workbench-reporting{width:100%;max-width:none;padding-inline:18px} @media (max-width:860px){ .portal-shell-frame.portal-shell-reporting .module-workbench-header .module-title-block{flex:0 0 auto} .portal-shell-frame>.portal-mobile-nav-trigger{display:inline-flex;position:fixed;top:10px;right:10px;z-index:121;width:auto} .portal-shell-frame.portal-mobile-nav-open>.sb{display:flex;position:fixed;inset:0;z-index:120;height:100vh;max-height:100vh;overflow-y:auto;flex-direction:column;align-items:stretch;flex-wrap:nowrap;padding:54px 12px 20px;background:var(--ink);border-right:0} .portal-shell-frame.portal-mobile-nav-open>.sb .sb-brand{padding:0 0 10px} .portal-shell-frame.portal-mobile-nav-open>.sb .sb-group-label{display:block} .portal-shell-frame.portal-mobile-nav-open>.sb .sb-folders{display:block} .portal-shell-frame.portal-mobile-nav-open>.sb .sb-nav{display:flex;flex-direction:column} /* .sb-nav is now always-mounted (Loop-3 accordion fix, 2026-07-18) and relies on the [hidden] attribute to hide collapsed folder bodies. The rule above unconditionally sets display:flex on every .sb-nav while the mobile drawer is open, which outranks the UA [hidden]{display:none} default and made every folder body show at once. Add the explicit [hidden] override at higher specificity, matching the codebase's own pattern (.ds-window[hidden]/.upload-list[hidden]) so a collapsed folder body stays hidden even while the drawer is open. */ .portal-shell-frame.portal-mobile-nav-open>.sb .sb-nav[hidden]{display:none} .portal-shell-frame.portal-mobile-nav-open>.sb .sb-who{display:flex} } /* ===== Evidence-photo thumbnail (WBO capture, MMDB-0266 / WBO-R-007 AC2, 2026-07-11) ===== A bounded preview of a captured evidence photo (weighbridge ticket) shown before submit, with an adjacent Retake control (.ds-button). The captured image is client-downscaled to <=1280px; this caps the on-screen preview to a legible-but-compact thumbnail so it never blows the mobile capture form. Token-only styling — no hardcoded color. */ .ds-evidence-thumb{display:block;max-width:220px;width:100%;height:auto;border:1px solid var(--hairline);border-radius:4px;background:var(--paper-2)} /* Cowork mobile file attachment & folder mapping — CoFlow features */ .upload-list{max-width:720px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px} .upload-list[hidden]{display:none} .upload-chip{display:inline-flex;align-items:center;max-width:100%;min-height:28px;border:1px solid var(--hairline);border-radius:6px;background:var(--paper-2);color:var(--ink-soft);font-family:var(--font-ui);font-weight:600;font-size:12px;line-height:1.2;padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .upload-input{display:none} .chat-attach-sheet{position:absolute;left:0;bottom:calc(100% + 8px);z-index:46;display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--hairline);border-radius:8px;box-shadow:0 12px 32px rgba(14,14,12,0.16);padding:6px;width:168px} .chat-attach-sheet[hidden]{display:none} .chat-attach-option{min-height:44px;text-align:left;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:13px;padding:0 10px;cursor:pointer} .chat-attach-option:hover{background:var(--paper-2);border-color:var(--hairline)} .chat-attach-option:disabled{opacity:0.55} .chat-upload{min-width:48px;min-height:48px;border:1px solid var(--hairline);border-radius:8px;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:18px;letter-spacing:0.04em;padding:0} .chat-upload:disabled{opacity:0.55} .folder-chip{cursor:pointer} .folder-chip:hover{border-color:var(--baobab);color:var(--baobab)} .folder-unmap{display:inline-flex;align-items:center;justify-content:center;min-height:28px;border:1px solid var(--hairline);border-radius:6px;background:var(--paper);color:var(--ink-soft);font-family:var(--font-ui);font-weight:600;font-size:12px;line-height:1.2;padding:5px 8px;cursor:pointer} .folder-unmap:hover{border-color:var(--baobab);color:var(--baobab)} .artifact-save{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid var(--hairline);border-radius:6px;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:13px;line-height:1.2;padding:8px 10px;cursor:pointer} .artifact-save:hover{border-color:var(--baobab);color:var(--baobab)} .artifact-save:disabled{opacity:0.6} /* Expenses claim detail — receipt image preview (MMDB-0945/0952/0953). */ .ds-receipt-preview{max-width:320px;border:1px solid var(--hairline);border-radius:3px} /* --- Flowchart canvas: process lanes of linked node cards ------------------ Generic building block for any "swimlane of live screens" canvas (first used by the procurement process flowchart). A lane is a labelled row; each node is a plain card so the whole card navigates to the live screen — no bespoke per-app styling, token-only. */ .ds-flowchart{overflow-x:auto;padding-bottom:4px} .ds-flowchart-lane{display:flex;flex-direction:column;gap:8px;padding:10px 2px;border-bottom:1px solid var(--hairline)} .ds-flowchart-lane:last-child{border-bottom:0} /* Inner row for the label+track pair, so a lane can also carry a full-width ds-notice (hand-off banner) as a sibling block above it instead of the notice being squeezed into the same row (UX review 2026-07-18). Label stays top-anchored per PR #245. */ .ds-flowchart-lane-row{display:flex;align-items:stretch;gap:10px} .ds-flowchart-lane-label{flex:0 0 132px;display:flex;align-items:flex-start;padding-top:2px;font-family:var(--font-mono);font-weight:600;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft)} .ds-flowchart-track{display:flex;align-items:stretch;gap:0;flex:1;width:max-content} .ds-flow-node{display:flex;flex-direction:column;gap:6px;width:224px;flex:0 0 auto;padding:8px;background:var(--paper);border:1px solid var(--hairline);border-radius:4px;text-decoration:none;color:var(--ink);transition:border-color .14s ease,transform .14s ease} .ds-flow-node:hover{border-color:var(--baobab);transform:translateY(-2px)} .ds-flow-node:focus-visible{outline:2px solid var(--baobab);outline-offset:2px} /* Normalize native inside a .ds-records-compact (or any records) table — heavier ink + a top rule so the foot/bold line reads as a total. .ds-records-section: a divider/section-header within the same table (e.g. costing block headers), rendered as a muted mono uppercase band so it is clearly a structural break, not a data row. Both are additive: apply to a . Token-only. Replaces the undefined .fin-total/.fin-num classes the finance pages had been using before the QA/UX review. */ .ds-records-compact tbody th:not(.ds-mono-num){font-family:var(--font-ui)!important;font-weight:500!important;font-size:calc(13px * var(--fs-scale, 1))!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;text-align:left!important} .ds-records-compact tbody th.ds-records-title{font-family:var(--font-display)!important;font-weight:700!important;font-size:calc(16px * var(--fs-scale, 1))!important;letter-spacing:-0.015em!important;line-height:1.2!important;color:var(--ink)!important;text-transform:none!important} .ds-records-total td,.ds-records-total th{font-weight:700!important;color:var(--ink)!important;border-top:1px solid var(--ink)} .ds-records-section td,.ds-records-section th{font-family:var(--font-mono)!important;font-weight:600!important;font-size:calc(10.5px * var(--fs-scale, 1))!important;letter-spacing:0.1em!important;text-transform:uppercase!important;color:var(--ink-mute)!important;background:var(--paper-2);border-top:1px solid var(--hairline)} /* ===================================================================== TA supplier portal — review-fix wave 2 (2026-07-17) Closes a pre-existing drift: candidate-table/score-badge were added directly to mmd-ta-portal's VENDORED copy on 2026-07-08 and never landed here in the canonical DS. Migrating them in now (with the D2 fix already applied) so the "authored in shell, synced to app" rule holds going forward. ============================================================================ */ /* --- Candidate pipeline table --------------------------------------------- */ .candidate-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px} .candidate-table thead tr{border-bottom:1px solid var(--ink)} .candidate-table th{text-align:left;padding:6px 10px;font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap} .candidate-row{border-top:1px solid var(--hairline);cursor:pointer;transition:background .1s ease} .candidate-row:hover{background:var(--paper-2)} .candidate-row:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px} .candidate-row td{padding:8px 10px;vertical-align:middle;color:var(--ink);line-height:1.35} .candidate-row-select{width:15px;height:15px;accent-color:var(--baobab);cursor:pointer} /* D2: single-line ellipsis truncation moved onto each text node individually. The old .candidate-cell{max-width:1px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} only ever worked for one line — candidate-name (inline) plus candidate-role (display:block) are two lines, so the second line was being hard-clipped with no ellipsis. */ .candidate-cell{width:26%;max-width:260px;min-width:180px} .candidate-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);font-weight:600;color:var(--ink)} .candidate-role{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--ink-mute);margin-top:1px} .candidate-row-toggle{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:0;background:transparent;color:var(--ink-faint);cursor:pointer;padding:0} .candidate-row-toggle::before{content:"▸";font-size:9px;display:block;transition:transform .12s ease} .candidate-row[data-expanded="true"] .candidate-row-toggle::before{transform:rotate(90deg);color:var(--ink)} .candidate-row-detail{background:var(--paper-2)} .candidate-row-detail td{padding:12px 16px 16px 34px;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--ink-soft);line-height:1.55} /* --- Score badge — 0-100, 3 severity steps on existing signal tokens ------ */ .score-badge{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:20px;padding:0 6px;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:0.01em;border-radius:var(--ds-radius-sm);border:1px solid transparent;line-height:1} .score-badge-high{color:var(--signal-grass);background:var(--signal-grass-bg);border-color:color-mix(in srgb, var(--signal-grass) 35%, transparent)} .score-badge-mid{color:var(--signal-amber);background:var(--signal-amber-bg);border-color:color-mix(in srgb, var(--signal-amber) 35%, transparent)} .score-badge-low{color:var(--baobab);background:var(--baobab-bg);border-color:color-mix(in srgb, var(--baobab) 35%, transparent)} /* D4: recommendation-tag sentiment tones, consistent with score-badge-high/low. None of the existing ds-tag-* variants (open/progress/waiting/resolved/ closed/error) express a positive/negative read — they're status-lifecycle tones. "Maybe" reuses the existing neutral ds-tag-waiting. */ .ds-tag-positive{color:var(--signal-grass);border-color:color-mix(in srgb, var(--signal-grass) 55%, transparent)} .ds-tag-negative{color:var(--baobab);border-color:color-mix(in srgb, var(--baobab) 55%, transparent)} /* D3: fixed topbar is 72px tall (position:fixed, z-index:50). In-page hash anchors (#screening, #messages, etc.) must not land their target under it. Generic rule — any id-carrying anchor target gets breathing room above. */ [id]{scroll-margin-top:80px} /* D1: the 8-column candidate-table has expand/collapse row state (.candidate-row[data-expanded]) and a colspan detail row, so it doesn't survive the block-stacking transform used by `.module-table-section .ds-records` on narrow viewports. Reuse the existing `.ds-table-scroll` opt-in wrapper instead (already proven for the Reporting overflow fix) — app wraps `
` in `
`. */ .ds-process-thumb-compact{height:120px} .ds-process-node-static{opacity:1;background:var(--paper-2)} /* ===================================================================== TA Supplier Admin modal chrome — TaSupplierEditModal.tsx (2026-07-21) Moved from src/app/globals.css into the canonical DS per adversarial review on PR #298: app-local CSS for a bespoke modal pattern (portal-user section divider, inline delete-confirm row, generated-password reveal + copy control) is a CDS violation even when TA-module-specific — every visual pattern is a named DS class, never authored in app code. ============================================================================ */ .ta-supplier-users-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline)} .ta-supplier-confirm-row{display:flex;align-items:center;gap:10px;font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)} .ta-supplier-password-reveal{display:flex;align-items:center;gap:10px} .ta-supplier-password-copy{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);background:transparent;border:1px solid var(--hairline);border-radius:2px;padding:4px 8px;cursor:pointer} .ta-supplier-password-copy:hover{color:var(--ink);border-color:var(--ink)} .ta-supplier-password-copy[data-copied="true"]{color:var(--signal-grass);border-color:var(--signal-grass)} /* ===================================================================== Agent-approval components — ds-agent-card / ds-node-status / ds-node-who / ds-disclosure (2026-07-18) Agentic-approval model: for each human step an AGENT TASK pre-computes and pre-fills the proposed decision, the numbers, the routing, and plain- English reasoning; the human only APPROVES/REJECTS/ADJUSTS with all of that context visible on one screen. ds-agent-card is that single-screen approval surface; ds-node-status marks a step's approval state; ds-node-who attributes a field or action to the agent or the human; ds-disclosure holds the supporting context/reasoning collapsed by default so the proposal stays dense and scannable. Tokens only: --ink, --ink-mute, --paper-2, --hairline, --baobab, --signal-grass(-bg), --signal-amber(-bg), --font-mono. No new hex, no inline style. ============================================================================ */ /* --- ds-agent-card: the human-gated, agent-prepared approval surface ------ */ .ds-agent-card{background:var(--paper-2);border:1px solid var(--hairline);border-top:2px solid var(--ink);border-radius:4px;padding:20px 24px;display:flex;flex-direction:column;gap:14px} .ds-agent-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .ds-agent-card-reasoning{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.5;color:var(--ink-mute)} .ds-agent-card[data-readiness="blocked"]{border-top-color:var(--signal-amber)} .ds-agent-card[data-readiness="partial"]{border-top-color:var(--signal-amber)} .ds-agent-card-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);display:block;margin:0 0 4px} .ds-agent-card-title{font-family:var(--font-mono);font-weight:600;font-size:calc(16.5px * var(--fs-scale, 1));letter-spacing:-0.005em;line-height:1.25;color:var(--ink);margin:0} .ds-agent-card-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto} .ds-agent-card-proposal{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:12px 0;display:flex;flex-direction:column;gap:5px} .ds-agent-card-proposal-label{font-family:var(--font-mono);font-weight:500;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)} .ds-agent-card-proposal-value{font-family:var(--font-mono);font-weight:600;font-size:calc(21px * var(--fs-scale, 1));letter-spacing:-0.01em;color:var(--ink)} .ds-agent-card-context{display:flex;flex-direction:column} .ds-agent-card-context-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--hairline)} .ds-agent-card-context-row:last-child{border-bottom:0} .ds-agent-card-context-label{font-family:var(--font-mono);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);flex:0 0 auto} .ds-agent-card-context-value{font-family:var(--font-mono);font-weight:500;font-size:calc(13px * var(--fs-scale, 1));color:var(--ink);text-align:right} .ds-agent-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:2px} /* --- ds-node-status: the step's approval state -------------------------- */ .ds-node-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:600;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.1em;text-transform:uppercase;padding:3px 9px;border-radius:2px;border:1px solid var(--hairline);color:var(--ink-mute);background:var(--paper-2);line-height:1.4} .ds-node-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .ds-node-status-prepared{color:var(--ink-mute);border-color:var(--hairline)} .ds-node-status-pending{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)} .ds-node-status-approved{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)} .ds-node-status-adjusted{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)} .ds-node-status-rejected{color:var(--baobab);border-color:var(--baobab)} /* --- ds-node-who: attributes a field/action to the agent or the human ---- */ .ds-node-who{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.04em;color:var(--ink-mute)} .ds-node-who-icon{width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:calc(8px * var(--fs-scale, 1));font-weight:700;flex:none;border:1px solid var(--hairline);color:var(--ink-mute);background:var(--paper-2)} .ds-node-who-agent{color:var(--ink-mute)} .ds-node-who-agent .ds-node-who-icon{color:var(--ink-mute);border-color:var(--hairline)} .ds-node-who-human{color:var(--ink)} .ds-node-who-human .ds-node-who-icon{color:var(--paper-2);background:var(--ink);border-color:var(--ink)} /* --- ds-disclosure: supporting context/reasoning, collapsed by default --- */ .ds-disclosure{border-top:1px solid var(--hairline)} .ds-disclosure-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 0;background:transparent;border:0;cursor:pointer;font-family:var(--font-mono);color:var(--ink-mute);text-align:left} .ds-disclosure-trigger:focus-visible{outline:2px solid var(--baobab);outline-offset:2px} .ds-disclosure-label{font-weight:500;font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:0.12em;text-transform:uppercase;color:inherit} .ds-disclosure-icon{font-size:calc(9px * var(--fs-scale, 1));color:var(--ink-mute);transition:transform .12s ease;flex:none} .ds-disclosure[data-open="true"] .ds-disclosure-icon{transform:rotate(90deg)} .ds-disclosure-panel{display:none;padding:0 0 14px;font-family:var(--font-mono);font-weight:500;font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.55;color:var(--ink-mute)} .ds-disclosure[data-open="true"] .ds-disclosure-panel{display:block} /* Process-owner review atlas (JML, 2026-07-18): the second column of .ds-process-modal-body is meant for either a live .ds-embed-frame iframe OR, where no live iframe embed is appropriate, a scrollable stack of real captured screens / honest BLOCKED cards. .ds-process-modal-main is that scrollable wrapper -- .ds-process-modal-body already sets overflow:hidden on itself so something inside must own the scroll. .ds-review-screenshot renders a real captured screenshot at full, uncropped width (unlike the existing .ds-process-thumb-img/.ds-preview-thumb crops, which are deliberately small thumbnails, not a complete-screen review surface). .ds-flowchart-lane-governance visually separates governance/oversight lanes (GLPI intake, GLPI Workbench) from the two numbered operational execution lanes in the same diagram. */ .ds-process-modal-main{overflow:auto;min-height:0;padding:20px;display:flex;flex-direction:column;gap:16px} .ds-review-screenshot{display:block;width:100%;height:auto;border:1px solid var(--hairline);border-radius:var(--ds-radius-sm);background:var(--paper-2)} .ds-flowchart-lane-governance{border-top:2px dashed var(--hairline);margin-top:8px;padding-top:16px;background:var(--paper-2)} /* TA-R2607-1 — visible, space-efficient gap between the shell topbar/subnav and TA recruitment page content (the board sat flush under the subnav). */ [data-eid="ta-cases-list"]{margin-top:14px} /* ===== TA step dialogs (Ben-approved designs 2026-07-22) ===== Semantic classes mirroring the four approved mocks 1:1: JD, Approval, Supplier-assignment, Candidate-intake (+quick review). Consumed by src/app/app/ta-recruitment/stepDialogs/*. */ .ds-step-legend{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:16px} .ds-step-legend-kicker{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)} .ds-step-legend-pos{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:19px} .ds-step-legend-chip{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--hairline);border-radius:8px;padding:1px 7px;background:var(--paper);white-space:nowrap} /* R3 -- align-items:start so a field with a hint line (taller) doesn't stretch a shorter sibling field's input to fill the row, which read as a dead gap under the shorter field. */ .ds-step-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;margin-bottom:14px;align-items:start} .ds-step-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:14px;align-items:start} .ds-step-row-full{margin-bottom:14px} .ds-step-section{margin-bottom:22px} .ds-step-section:last-of-type{margin-bottom:0} /* R3 -- section headers must read stronger than field sub-labels (.ds-label: 12px/weight 600/var(--ink)). Bigger, bolder, heavier rule. */ .ds-step-section-title{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:16px;font-family:var(--font-mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)} .ds-step-section-title-hint{margin-left:auto;font-family:var(--font-ui);font-size:11px;text-transform:none;letter-spacing:0;color:var(--ink-mute);white-space:nowrap} .ds-modal.ds-modal--dialog.ds-modal--dialog-wide{width:min(clamp(880px,76vw,1800px),calc(100vw - 48px));max-width:calc(100vw - 48px)} .ds-step-packet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-bottom:14px} .ds-step-fact{background:var(--paper);padding:8px 10px} .ds-step-fact-k{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin-bottom:3px} .ds-step-fact-v{font-size:13px} .ds-step-fact-sub{color:var(--ink-mute);font-size:11px} .ds-step-fact--risk{background:var(--signal-amber-bg)} .ds-step-fact--risk .ds-step-fact-v{color:var(--signal-amber);font-weight:600} .ds-step-agentnote{display:flex;gap:10px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--signal-amber);padding:10px 12px;margin-bottom:14px} .ds-step-agentnote-tag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-amber);white-space:nowrap} .ds-step-agentnote-body{font-size:12.5px;line-height:1.5} .ds-step-refrow{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--hairline);padding:8px 12px;margin-bottom:14px} .ds-step-refrow-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);white-space:nowrap} .ds-step-refrow-excerpt{font-size:12px;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1} .ds-step-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px} .ds-step-actions-spacer{flex:1} .ds-step-table{border:1px solid var(--hairline);margin-bottom:4px;overflow-x:auto} .ds-step-table table{width:100%;border-collapse:collapse} .ds-step-table th{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);text-align:left;padding:7px 9px;background:var(--paper-2);border-bottom:1px solid var(--hairline);white-space:nowrap;cursor:pointer} .ds-step-table th.ds-num,.ds-step-table td.ds-num{text-align:right;font-variant-numeric:tabular-nums} .ds-step-table td{font-size:12.5px;padding:7px 9px;background:var(--paper);border-bottom:1px solid var(--hairline);cursor:pointer;vertical-align:top} .ds-step-table tr:last-child td{border-bottom:0} .ds-step-table tr.ds-row-sel td{background:var(--signal-grass-bg)} .ds-step-table tr.ds-row-sel td:first-child{box-shadow:inset 3px 0 0 var(--signal-grass)} .ds-step-table tr.ds-row-dim td{opacity:.55} .ds-step-table-nm{font-weight:600} .ds-step-table-sub{color:var(--ink-mute);font-size:10.5px} .ds-step-tickcell{width:30px;text-align:center;padding-left:8px;padding-right:2px} .ds-tickmark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid var(--ink-faint);border-radius:2px;font-size:11px;color:transparent;background:var(--paper)} .ds-tickmark--on{background:var(--signal-grass);border-color:var(--signal-grass);color:var(--paper)} .ds-step-selall{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:8px 10px;background:var(--signal-grass-bg);border:1px solid var(--hairline);border-top:0;margin-bottom:4px;cursor:pointer} .ds-step-selall-count{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--signal-grass)} .ds-step-tablehint{font-size:11px;color:var(--ink-mute);margin-bottom:14px} .ds-step-agentbox{border:1px solid var(--hairline);border-left:3px solid var(--signal-amber);background:var(--paper);padding:10px 12px;margin-bottom:12px} .ds-step-agentbox-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px} .ds-step-agentbox-title{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-amber)} .ds-step-agentbox-saved{font-family:var(--font-mono);font-size:9px;color:var(--signal-grass)} .ds-step-agentbox-btns{margin-left:auto;display:flex;gap:8px} .ds-step-agentbox textarea{width:100%;font-family:var(--font-ui);font-size:12.5px;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);border-radius:2px;padding:8px 10px;resize:vertical;line-height:1.45} .ds-step-uploadrow{display:flex;align-items:center;gap:12px;border:1px dashed var(--ink-faint);background:var(--paper);padding:8px 12px;margin-bottom:12px} .ds-step-uploadrow-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)} .ds-step-uploadrow-files{font-size:12px;color:var(--ink-mute);flex:1} .ds-step-filters{display:flex;align-items:center;gap:8px;margin-bottom:8px} .ds-filterchip{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.03em;border:1px solid var(--hairline);border-radius:10px;background:var(--paper);color:var(--ink-soft);padding:3px 11px;cursor:pointer} .ds-filterchip--on{background:var(--ink);border-color:var(--ink);color:var(--paper)} .ds-step-filters-note{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--ink-mute)} .ds-natexp{display:inline-block;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.03em;border-radius:8px;padding:1px 7px;white-space:nowrap;background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--hairline)} .ds-natexp--expat{color:var(--baobab);border-color:var(--baobab)} .ds-natexp--rejected{color:var(--ink-mute);border-color:var(--ink-mute)} .ds-matchscore{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;border-radius:2px;padding:2px 7px;min-width:34px;text-align:center} .ds-matchscore--hi{background:var(--signal-grass-bg);color:var(--signal-grass)} .ds-matchscore--mid{background:var(--signal-amber-bg);color:var(--signal-amber)} .ds-matchscore--none{background:var(--paper-2);color:var(--ink-mute);border:1px solid var(--hairline)} .ds-matchwhy{font-size:10.5px;color:var(--ink-mute);display:block;max-width:220px} .ds-step-review{display:grid;grid-template-columns:1.2fr 1fr;gap:16px} .ds-step-cv{border:1px solid var(--hairline);background:var(--paper);padding:14px 16px;font-size:12.5px;line-height:1.5;overflow-y:auto;max-height:60vh} .ds-step-cv h3{font-family:var(--font-display);font-style:italic;font-size:16px;margin-bottom:2px} .ds-step-cv-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-mute);margin-bottom:10px} .ds-step-cv-sec{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin:10px 0 3px} .ds-step-matchpanel{display:flex;flex-direction:column;gap:10px} .ds-step-matchhead{display:flex;align-items:center;gap:10px;border:1px solid var(--hairline);background:var(--paper);padding:10px 12px} .ds-step-matchhead-big{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--signal-grass)} .ds-step-matchhead-lbl{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;color:var(--ink-mute)} .ds-step-matchwhy{border:1px solid var(--hairline);border-left:3px solid var(--signal-grass);background:var(--paper);padding:10px 12px;font-size:12.5px;line-height:1.55} .ds-step-matchwhy-t{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-grass);margin-bottom:5px} .ds-step-matchwhy ul{margin:0 0 0 16px} .ds-step-matchwhy li{margin-bottom:3px} .ds-step-matchwhy li.ds-neg{color:var(--baobab)} .ds-step-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline)} .ds-step-facts-f{background:var(--paper);padding:7px 10px} .ds-step-numstep{display:grid;grid-template-columns:1fr 44px;border:1px solid var(--hairline);border-radius:2px;background:var(--paper)} .ds-step-numstep input{border:0;background:transparent;text-align:right;font-variant-numeric:tabular-nums;padding:8px 10px;font-size:13px;font-family:var(--font-ui);width:100%} .ds-step-numstep-btns{display:grid;grid-template-rows:1fr 1fr;border-left:1px solid var(--hairline)} .ds-step-numstep-btns button{font-family:var(--font-mono);font-size:8px;background:var(--paper-2);border:0;cursor:pointer;color:var(--ink-soft)} .ds-step-numstep-btns button:first-child{border-bottom:1px solid var(--hairline)} /* ===== ds-rag — red/amber/green compliance status chip (HR data-protection summary, reusable for any RAG compliance/health cell). Semantic DS object; app code must never recolor these. ===== */ .ds-rag{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;padding:2px 8px;border-radius:var(--ds-radius-sm);border:1px solid transparent;cursor:default} .ds-rag-red{color:var(--baobab);background:var(--baobab-bg);border-color:var(--baobab)} .ds-rag-amber{color:var(--signal-amber);background:var(--signal-amber-bg);border-color:var(--signal-amber)} .ds-rag-green{color:var(--signal-grass);background:var(--signal-grass-bg);border-color:var(--signal-grass)} button.ds-rag{cursor:pointer} button.ds-rag:hover{filter:brightness(0.94)} /* ds-cell-link — in-table text trigger that opens a detail popup. */ .ds-cell-link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:2px;cursor:pointer;text-align:left} .ds-cell-link:hover{text-decoration-color:var(--baobab);color:var(--baobab)} /* ec-table-roomy — spread variant of ec-table for reading-heavy compliance/ reference tables: larger type, taller rows, more cell air. */ .ec-table-roomy{font-size:13.5px;line-height:1.55} .ec-table-roomy thead th{font-size:10px;padding:8px 14px} .ec-table-roomy tbody th,.ec-table-roomy tbody td{padding:12px 14px;vertical-align:top} /* ===== ds-toast — transient confirmation/error message for an action that just completed (e.g. "Candidate submitted"). Per the approved TA supplier portal artifact's own interaction contract: "zero window.prompt/confirm/ alert -- in-page editor + toast instead". Fixed bottom-right, stacks multiple, JS owns mount/auto-dismiss timing; this file owns appearance only. Semantic variants only -- app code picks -ok or -error, never an inline color. ===== */ .ds-toast-stack{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;gap:8px;pointer-events:none} .ds-toast{pointer-events:auto;min-width:220px;max-width:360px;padding:10px 14px;border-radius:var(--ds-radius-sm);border:1px solid var(--hairline);background:var(--paper);box-shadow:0 4px 16px rgba(0,0,0,0.14);font-family:var(--font-mono);font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink)} .ds-toast-ok{border-color:var(--signal-grass);background:var(--signal-grass-bg)} .ds-toast-error{border-color:var(--baobab);background:var(--baobab-bg)} /* ===== ds-page-head — kicker + italic title + right-aligned live count, border-bottom under it. Literal port of the approved TA supplier portal artifact's .page-head (kicker/h1/count on every page: Demand, Candidates, Interviews, Reporting, Account) -- every page in that artifact opens with this banner and none of the TA portal pages had it. Semantic DS object, reusable anywhere a page needs the same "kicker + title + live count" opening banner. ===== */ .ds-page-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:6px;margin-bottom:14px} .ds-page-head-title{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:19px;color:var(--ink)} .ds-page-head-count{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)} /* ===== ds-urgency — urgency label color, ported from the approved TA artifact's .urg-high/.urg-normal. ===== */ .ds-urgency-high{color:var(--baobab)} .ds-urgency-normal{color:var(--ink-mute)} /* ===== ds-pill / ds-pill-fit — rounded inline chip for a role/country/ status summary line, ported from the approved TA artifact's .pill/ .pill-fit (Candidates page "Roles" column: "92% QA Engineer · Angola — Shortlisted"). Neutral border only -- the artifact's decorative per-country hue variants aren't backed by a real semantic distinction, so this stays one consistent style rather than an arbitrary color map. */ .ds-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.02em;padding:4px 10px;border-radius:11px;border:1px solid var(--hairline);background:var(--paper)} .ds-pill-fit{font-weight:600} /* ===== ds-chip — small yes/no/unknown status pill for a prep checklist row (Interviews "Prep" column: Invite sent / Confirmed / CV shared / JD briefed), ported from the approved TA artifact's .chip/.chip-yes/ .chip-no. -unknown is real: not every signal is tracked in FlowMaster yet, and this must read as "not tracked", never a fabricated no. ===== */ .ds-chip{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.03em;padding:2px 7px;border-radius:8px;border:1px solid var(--hairline);display:inline-block} .ds-chip-yes{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)} .ds-chip-no{color:var(--baobab);border-color:var(--baobab);background:var(--baobab-bg)} .ds-chip-unknown{color:var(--ink-faint);border-color:var(--hairline);background:var(--paper-2)} /* ===== ds-stage — colored pipeline-stage pills, literal port of the approved TA supplier artifact's .stage-*/.status-* (rounded 9px pills, tinted per stage: sourcing=red, screening=amber, interview=green, offer=neutral-dark, pool=muted, hired=solid green, outcome pass/fail = solid green/red). Ben's live complaint 2026-07-22: shipped pills were monochrome ds-tag variants — "they are not green!". These are the approved colored shapes. ===== */ .ds-stage{display:inline-block;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:0.04em;padding:3px 8px;border-radius:9px;border:1px solid var(--hairline)} .ds-stage-sourcing{color:var(--baobab-deep, var(--baobab));border-color:var(--baobab-deep, var(--baobab));background:var(--baobab-bg)} .ds-stage-screening{color:var(--signal-amber);border-color:var(--signal-amber);background:var(--signal-amber-bg)} .ds-stage-interview{color:var(--signal-grass);border-color:var(--signal-grass);background:var(--signal-grass-bg)} .ds-stage-offer{color:var(--ink-soft);border-color:var(--ink);background:var(--paper-3)} .ds-stage-pool{color:var(--ink-mute);border-color:var(--hairline);background:var(--paper-3)} .ds-stage-hired{color:#fff;border-color:var(--signal-grass);background:var(--signal-grass)} .ds-stage-pass{color:#fff;border-color:var(--signal-grass);background:var(--signal-grass)} .ds-stage-fail{color:#fff;border-color:var(--baobab-deep, var(--baobab));background:var(--baobab-deep, var(--baobab))} /* ===== ds-app* — MOBILE-FIRST APPLICATION SHELL ===== Authored for the OMS dealer app (dealer.baobab-ts.com + its Capacitor native shell), which is a phone-first product, not a desk surface: the existing module-workbench header + ds-filterbar "nav" collapsed into a ~600px dead gap at 390px wide and put a 5-way navigation into a wrapping row of buttons. Semantic app-shell objects, so app code points at a component instead of composing a phone layout out of table/filterbar atoms. Everything below is safe-area aware (iOS notch / Android gesture bar) and keeps every tap target at or above 44px. Above 720px the same markup centres in a reading column — one component, both form factors, no app-side media queries. */ .ds-app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--canvas, var(--paper-2))} .ds-appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--paper);border-bottom:1px solid var(--hairline)} /* The square group mark is deliberately NOT a themable token: THM-R-004/005 fix the themable set to accent + wide logo, and the monogram is the group mark, not a per-country asset. */ .ds-appbar-brand{display:block;width:96px;height:22px;flex:0 0 auto;background-image:var(--ds-logo-asset);background-repeat:no-repeat;background-position:left center;background-size:contain} .ds-appbar-titles{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto} .ds-appbar-eyebrow{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute)} .ds-appbar-title{font-family:var(--font-ui);font-weight:700;font-size:calc(15px * var(--fs-scale, 1));line-height:1.2;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ds-appbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto} .ds-appbar-back{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:-10px;border:0;background:transparent;color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:calc(13px * var(--fs-scale, 1));cursor:pointer} .ds-appbar-back:focus-visible{outline:2px solid var(--baobab);outline-offset:2px} .ds-app-body{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:14px 16px calc(84px + env(safe-area-inset-bottom));width:100%;max-width:760px;margin:0 auto} .ds-app-body>.ds-form{margin-top:0;gap:16px} .ds-app-body>.ds-table-section,.ds-app-body>section{margin-top:0} /* Bottom tab bar — the app's primary navigation on a phone. */ .ds-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;background:var(--paper);border-top:1px solid var(--hairline);padding-bottom:env(safe-area-inset-bottom)} .ds-tabbar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;border:0;border-top:2px solid transparent;background:transparent;color:var(--ink-mute);font-family:var(--font-ui);font-weight:600;font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.02em;cursor:pointer} .ds-tabbar-item-active{color:var(--ink);border-top-color:var(--baobab)} .ds-tabbar-item:focus-visible{outline:2px solid var(--baobab);outline-offset:-2px} .ds-tabbar-glyph{font-size:17px;line-height:1} .ds-tabbar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* Record list — the phone form of a records table. One tappable card per row. */ .ds-cardlist{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none} .ds-cardlist-item{display:flex;flex-direction:column;gap:6px;width:100%;min-height:44px;padding:12px 14px;text-align:left;background:var(--paper);border:1px solid var(--hairline);border-radius:4px;color:var(--ink);font-family:var(--font-ui);cursor:pointer} .ds-cardlist-item:focus-visible{outline:2px solid var(--baobab);outline-offset:2px} .ds-cardlist-static{cursor:default} .ds-cardlist-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .ds-cardlist-title{font-weight:700;font-size:calc(14px * var(--fs-scale, 1));line-height:1.25;color:var(--ink)} .ds-cardlist-id{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));color:var(--ink-mute);white-space:nowrap} .ds-cardlist-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:calc(12px * var(--fs-scale, 1));color:var(--ink-soft)} .ds-cardlist-foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .ds-cardlist-price{font-family:var(--font-mono);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink)} /* Label/value display list — company information, order facts, app details. */ .ds-infolist{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hairline);border-radius:4px} .ds-infolist-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:11px 14px;border-bottom:1px solid var(--hairline)} .ds-infolist-row:last-child{border-bottom:0} .ds-infolist-label{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-mute);flex:0 0 38%} .ds-infolist-value{font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale, 1));line-height:1.45;color:var(--ink);text-align:right;flex:1 1 auto;overflow-wrap:anywhere} .ds-infolist-value-block{text-align:left} .ds-infolist-link{color:var(--ink);text-decoration:underline;text-underline-offset:2px} /* Sticky filter/search row that survives a scrolling list. */ .ds-searchbar{position:sticky;top:calc(54px + env(safe-area-inset-top));z-index:20;display:flex;gap:8px;padding:8px 0;background:var(--canvas, var(--paper-2))} .ds-searchbar>.ds-input{flex:1 1 auto;min-width:0} .ds-searchbar>.ds-select{flex:0 0 auto;max-width:44%} /* Section heading inside the app body (replaces ds-table-header on phone). */ .ds-app-section{display:flex;flex-direction:column;gap:8px} .ds-app-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .ds-app-section-title{font-family:var(--font-ui);font-weight:700;font-size:calc(13.5px * var(--fs-scale, 1));letter-spacing:0.01em;color:var(--ink);margin:0} .ds-app-section-count{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));color:var(--ink-mute)} /* Sticky primary action bar for long phone forms (submit stays reachable). */ .ds-app-actionbar{position:sticky;bottom:calc(60px + env(safe-area-inset-bottom));display:flex;gap:8px;padding:10px 0;background:var(--canvas, var(--paper-2))} .ds-app-actionbar>.ds-button{flex:1 1 0;min-height:44px} /* Full-bleed brand lockup for the sign-in screen. */ .ds-app-signin{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 0 6px} .ds-app-signin-mark{display:block;width:120px;height:44px;background-image:var(--ds-logo-asset);background-repeat:no-repeat;background-position:center;background-size:contain} .ds-app-signin-title{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:calc(21px * var(--fs-scale, 1));color:var(--ink);margin:0} .ds-app-signin-sub{font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink-soft);text-align:center;margin:0} /* Phone-width overrides for atoms that were authored desk-first. */ @media (max-width: 560px){ .ds-app-body>.ds-fieldset,.ds-app-body .ds-fieldset{padding:16px 14px;gap:14px} .ds-app-body .ds-field-row-2,.ds-app-body .ds-field-row-3{grid-template-columns:1fr} .ds-app-body .ds-actions{flex-wrap:wrap} .ds-app-body .ds-actions>.ds-button{flex:1 1 46%;min-height:44px} .ds-app-body .ds-input,.ds-app-body .ds-select,.ds-app-body .ds-textarea{min-height:44px;font-size:16px} } @media (min-width: 721px){ .ds-tabbar{max-width:760px;left:50%;transform:translateX(-50%);border-left:1px solid var(--hairline);border-right:1px solid var(--hairline)} } /* ===== Remote canvas frame — in-flow host for an embedded remote module ===== The