/* app/static/tap2-app.css -- MMD Recruiting (TA P2)'s OWN component library.
   NOT part of the central design system. app/static/_design-system/ is now a
   byte-exact copy of mmd-portal-shell's public/_design-system/ package
   (Red Plate 0.3.61, MMDB-2628) -- every rule the shell owns lives ONLY
   there, never duplicated here.

   This file carries exactly the rules ta-p2 needed that the central package
   does not define: the app's own page-shell/nav/tab chrome (tap2-shell,
   tap2-nav, tap2-tabs, tap2-tab...) and every genuinely page-specific
   component (pipeline board, careers site, service-desk-style candidate
   window, JD editor, interview guide, document proposals, etc). These
   classes are additive to the central manifest's allowed_classes, declared
   in app/static/tap2-app.manifest.json and unioned in at test time
   (tests/test_template_contracts.py) -- exactly the pattern the shell
   itself uses for its own per-module CSS (module-hr-people.css etc).

   History: through 0.3.30 (the old letterbox era) this app forked the
   WHOLE central package -- generic primitives and its own bespoke
   component classes lived together in one _design-system/components.css
   copy. Adopting 0.3.61 Red Plate byte-exact meant separating the two:
   this file is everything from that old copy this app actually owns.

   One rename made while extracting (2026-09-05, MMDB-2628): the app's own
   page-shell family was prefixed "ds-oms-*" (a leftover from forking an
   early copy of the shell's own Order-Management-System module design).
   The shell's REAL "ds-oms-*" classes are a different, incompatible
   component (single-column OMS layout, no sidebar) -- loading the central
   package's components.css would have silently applied ITS grid/tab rules
   to this app's own two-column shell+rail layout. Renamed ds-oms-* -> tap2-*
   throughout templates/CSS/JS/tests to remove the collision permanently. */

:root {
  /* This app's own page-shell layout tokens (values unchanged from the old
     shell.css root -- only the names moved from --ds-oms-* to --tap2-* for
     the same collision reason as the class rename above). */
  --tap2-rail-width: 236px;
  --tap2-section-rail-width: 196px;
  --tap2-copy-max: 760px;
  --tap2-copy-min: 220px;
  --tap2-process-thumb-size: 96px;
  --tap2-process-thumb-stripe-angle: -45deg;
  --tap2-process-thumb-stripe-base: var(--paper-2);
  --tap2-process-thumb-stripe-base-stop: 8px;
  --tap2-process-thumb-stripe-line: var(--hairline);
  --tap2-process-thumb-stripe-line-stop: 9px;
  --tap2-screen-gap: 8px;
}


/* A vertical run of fieldsets/fields that has to be one swappable region --
   the new-hiring-request body is re-rendered whole when a role is picked, so
   it needs a real element of its own rather than a bare div. */
.ds-field-stack{display:flex;flex-direction:column;gap:var(--ds-space-4, 16px)}


.ds-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;flex:0 0 auto;background:var(--paper);border:1px solid var(--hairline);border-radius:2px;color:var(--ink-soft);font-size:11px;line-height:1;cursor:pointer;transition:border-color var(--ds-motion-fast) ease-out,color var(--ds-motion-fast) ease-out}


.ds-btn-icon:hover{border-color:var(--ink);color:var(--ink)}


.ds-btn-text{background:none;border:0;padding:2px 0;color:var(--ink-soft);font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:color var(--ds-motion-fast) ease-out}


.ds-btn-text:hover{color:var(--baobab)}


/* A four-across field row, and the compact form density a long request form
   needs so it reads as one screen instead of a scroll. */
.ds-field-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start}


.ds-form-compact .ds-fieldset{padding:10px 12px 12px;margin-bottom:10px}


.ds-form-compact .ds-field-row-2,.ds-form-compact .ds-field-row-3,.ds-form-compact .ds-field-row-4{gap:10px;margin-bottom:8px}


.ds-form-compact .ds-field{margin-bottom:0}


.ds-form-compact .ds-label{margin-bottom:2px}


.ds-form-compact .ds-input,.ds-form-compact .ds-select{padding-top:5px;padding-bottom:5px}


.ds-form-compact .ds-field-stack{gap:10px}

@media (max-width: 900px) {
.ds-field-row-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 560px) {
.ds-field-row-4{grid-template-columns:1fr}
}


/* Inside a record window a field row must stay a row: every field going full
   width made the edit window a column of stacked inputs (Ben, 2026-08-01). */
.ds-modal--dialog .ds-field-row-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width: 1000px) {

  .ds-modal--dialog .ds-field-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}


.ds-searchbar-compact{flex:1 1 560px;flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}


.ds-searchbar-compact>.ds-input{flex:1 1 180px;width:auto;max-width:280px}


.ds-searchbar-compact>.ds-select{flex:1 1 130px;width:auto;min-width:0;max-width:180px}


.ds-searchbar-compact>.ds-button{flex:0 0 auto}



/* Auth shell + card (2026-07-30): a standalone password-login page (no nav
   rail, no app shell) previously rendered .ds-app-signin's brand lockup
   directly against the bare page background -- full body width, pinned to
   the top of the viewport, no card boundary. Correct for an EMBEDDED sign-in
   prompt inside an existing app shell, wrong as an entire page: it read as
   unfinished. .ds-auth-shell centers a single bounded card both axes of the
   viewport on the app's own canvas color; .ds-auth-card is the elevated paper
   surface (same border/shadow language as .ds-modal--dialog) that contains the
   existing .ds-app-signin lockup plus the form. Composes existing tokens only. */
.ds-auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--paper-2)}


.ds-auth-card{width:100%;max-width:380px;background:var(--paper);border:1px solid var(--hairline);border-radius:4px;box-shadow:0 12px 40px rgba(14,14,12,.16);padding:8px 32px 32px}


.ds-auth-card .ds-app-signin{padding-top:32px}



/* ds-summary-footer--flow (MMD TA P2 funnel/billing report, 2026-07-30):
   .ds-summary-footer was authored for the OMS transaction panel, where it sits
   inside a height-bounded, internally-scrolling box and "sticky in its scroll
   box" pins it neatly below the visible rows of THAT box. A page-level report
   section has no such bounded box -- its containing block is the ordinary
   document flow, so position:sticky;bottom:0 instead pins the footer to the
   VIEWPORT bottom as the whole page scrolls, permanently overlapping whatever
   rows happen to render underneath (verified live: the funnel table's last two
   rows were unreadable behind the totals bar). Opt in with this modifier
   wherever a summary footer's parent is a normal in-flow page section rather
   than a fixed-height scroll panel -- it reverts to a plain static footer that
   renders once, in its own space, after the table. */
.ds-summary-footer--flow{position:static}


.tap2-shell{display:grid;grid-template-columns:var(--tap2-rail-width) minmax(0,1fr);min-height:100%;background:var(--paper-2);color:var(--ink-soft)}


.tap2-shell-embedded{grid-template-columns:minmax(0,1fr)}


.tap2-nav{position:sticky;top:0;align-self:start;height:100dvh;overflow:auto;display:flex;flex-direction:column;gap:var(--ds-space-16);padding:var(--ds-space-22) var(--ds-space-16);background:var(--ink);color:var(--paper)}


.tap2-nav-group{display:flex;flex-direction:column;gap:var(--ds-space-4)}


.tap2-nav-label{margin:0 0 var(--ds-space-4);padding:0 var(--ds-space-12);color:var(--ink-faint);font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));font-weight:600;letter-spacing:.12em;text-transform:uppercase}


.tap2-nav-link{display:flex;align-items:center;min-height:var(--ds-control-compact);padding:var(--ds-space-9) var(--ds-space-12);border-radius:var(--ds-radius-sm);color:var(--ink-faint);font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));text-decoration:none;transition:background var(--ds-motion-fast) ease-out,color var(--ds-motion-fast) ease-out}


button.tap2-nav-link{width:100%;background:none;border:0;font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));text-align:left;cursor:pointer}


.tap2-nav-link:hover{background:var(--ink-soft);color:var(--paper)}


.tap2-nav-link-active{background:var(--paper);color:var(--ink);font-weight:700}


.tap2-nav-link-active:hover{background:var(--paper);color:var(--ink)}


.tap2-main{min-width:0;background:var(--paper-2)}


.tap2-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--ds-space-24);padding:var(--ds-space-24) var(--ds-space-30) var(--ds-space-16);border-bottom:var(--ds-rule) solid var(--hairline);background:var(--paper)}


.tap2-header-copy{flex:1 1 var(--tap2-copy-min);min-width:var(--tap2-copy-min);max-width:var(--tap2-copy-max)}


/* wrap, never clip: with the external-portal tabs after the country filter the
   bar can outgrow a narrow embedded canvas; a scrolled bar hides the tail links
   entirely (2026-08-19 defect: Candidate portal invisible at 1280px). */
.tap2-tabs{display:flex;flex-wrap:nowrap;align-items:center;min-width:0;padding:0 var(--ds-space-14);border-bottom:var(--ds-rule) solid var(--ink);background:var(--ink);overflow:hidden}


.tap2-tab{display:inline-flex;align-items:center;min-height:var(--ds-control-tab);padding:0 var(--ds-space-10);border-bottom:var(--ds-rule-active) solid transparent;color:var(--paper-2);opacity:.62;font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));font-weight:600;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;white-space:nowrap;transition:border-color var(--ds-motion-fast) ease-out,color var(--ds-motion-fast) ease-out,opacity var(--ds-motion-fast) ease-out}


.tap2-tab:hover{color:var(--paper);opacity:1}


.tap2-tab-active{border-bottom-color:var(--baobab);color:var(--paper);opacity:1}


.tap2-tabs-country{display:inline-flex;align-items:center;margin-left:var(--ds-space-14)}


.tap2-tabs-select{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid rgba(244,241,234,.35);border-radius:2px;color:var(--paper);font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 22px 3px 8px;min-width:150px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23F4F1EA'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}


.tap2-tabs-select option{background:var(--paper);color:var(--ink)}


.tap2-tabs-select:focus-visible{outline:var(--ds-rule-active) solid var(--baobab);outline-offset:var(--ds-focus-offset)}


.tap2-tabs-spacer{flex:1 1 auto;min-width:var(--ds-space-14)}


.tap2-tab-external{gap:5px;opacity:.78}


.tap2-tab-external-mark{font-size:11px;line-height:1}


/* Rail variant of the external-link mark: rail links have no flex gap, so the
   mark carries its own left space. */
.tap2-nav-external-mark{margin-left:5px;font-size:11px;line-height:1}


.tap2-canvas{min-width:0;padding:var(--ds-space-24) var(--ds-space-30) var(--ds-space-30)}


.tap2-screen{display:flex;flex-direction:column;min-width:0;gap:var(--tap2-screen-gap)}


.tap2-mobile-strip{display:none}


.tap2-nav-link:focus-visible,.tap2-tab:focus-visible,.tap2-section-link:focus-visible{outline:var(--ds-rule-active) solid var(--baobab);outline-offset:var(--ds-focus-offset)}


.tap2-shell :is(.ds-input,.ds-select,.ds-textarea,.ds-button):focus-visible{outline:var(--ds-rule-active) solid var(--baobab);outline-offset:var(--ds-focus-offset)}

@media(max-width:760px) {

  .tap2-shell{grid-template-columns:minmax(0,1fr)}


  .tap2-nav{display:none}


  .tap2-mobile-strip{display:flex;align-items:center;gap:var(--ds-space-8);min-height:var(--ds-control-touch);overflow-x:auto;padding:var(--ds-space-6) var(--ds-space-14);border-bottom:var(--ds-rule) solid var(--hairline);background:var(--ink);color:var(--paper)}


  .tap2-header{align-items:flex-start;flex-direction:column;padding:var(--ds-space-18) var(--ds-space-16) var(--ds-space-12)}


  .tap2-tabs{padding:0 var(--ds-space-8)}


  .tap2-canvas{padding:var(--ds-space-18) var(--ds-space-16) var(--ds-space-24)}
}

@media(prefers-reduced-motion:reduce) {

  .tap2-nav-link,.tap2-tab,.tap2-table tbody tr,.tap2-section-link{transition-duration:var(--ds-motion-none)}
}



/* Compact checkbox row for prose-length consent labels.  Keep the label and
   control as separate objects: .ds-choice is also a legacy checkbox atom. */
.ds-check-row{display:flex;align-items:flex-start;gap:var(--ds-space-8);width:100%;color:var(--ink-soft);font-size:calc(12px * var(--fs-scale, 1));line-height:1.35;cursor:pointer}


.ds-check-row>input{width:var(--ds-space-14);height:var(--ds-space-14);margin:1px 0 0;flex:none;accent-color:var(--baobab)}


.ds-check-row>span{min-width:0}



/* === TA P2 arrangement pass (2026-08-01) — DS additions, manifest 0.3.19 === */

/* Working-surface width cap (Ben 2026-08-01): a datagrid stretched across a
   full 1920/3456px viewport is harder to read than a bounded column. Screens
   cap at a working width; tables inside stop sprawling. */
.tap2-screen{max-width:1240px;width:100%;margin:0 auto}



/* Record-detail fact grid: fields flow into as many columns as the dialog
   affords (3-4 in a wide dialog), tight rows — the one-field-per-row list
   wasted half the width and doubled the scroll. Long-text rows
   (.ds-infolist-value-block) span the full width. */
.ds-infolist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));column-gap:22px;padding:0 12px;border:1px solid var(--hairline);border-radius:4px;background:var(--paper)}


.ds-infolist--grid>.ds-infolist-row{border-bottom:1px solid var(--hairline);padding:5px 0;gap:10px}


.ds-infolist--grid>.ds-infolist-row:has(.ds-infolist-value-block){grid-column:1 / -1;flex-direction:column;align-items:stretch;gap:4px}


/* Long-text facts are prose, not a right-aligned value: left-aligned, source
   line breaks kept (a JD is written in blocks — collapsing them into one run
   made it unreadable, seen live 2026-08-01), sensible measure. */
.ds-infolist--grid .ds-infolist-value-block{text-align:left;white-space:pre-line;line-height:1.5;max-width:none}


.ds-infolist--grid>.ds-infolist-row:has(.ds-infolist-value-block)>.ds-infolist-label{text-align:left}



/* Two-pane dialog body: facts/actions left, related tables right — halves
   dialog height versus a single stacked column. Collapses on narrow. */
.ds-dialog-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:10px 22px;align-items:start}


.ds-dialog-col{display:flex;flex-direction:column;gap:10px;min-width:0}

@media(max-width:1100px) {
.ds-dialog-cols{grid-template-columns:minmax(0,1fr)}
}


/* Fact labels never wrap into the value (seen live: CANDIDATE PORTAL
   colliding with its value in a narrow pane); long values wrap instead. */
.ds-infolist--grid .ds-infolist-label{white-space:nowrap;flex:none}


.ds-infolist--grid .ds-infolist-value{overflow-wrap:anywhere;text-align:right}


/* …except long-text prose, which is left-aligned (declared after the value
   rule so it wins regardless of class order on the element). */
.ds-infolist--grid .ds-infolist-value.ds-infolist-value-block,
.ds-infolist--grid .ds-infolist-value-block{text-align:left}


/* Fact cells in the grid variant stack label-over-value. Side-by-side with a
   right-aligned value put each value hard against the NEXT column's label
   (live 2026-08-01: "G6 STATUS Sourcing SCORED 0"), so a reader paired the
   value with the wrong label. Stacking removes the ambiguity without a
   column rule. */
.ds-infolist--grid>.ds-infolist-row{flex-direction:column;align-items:stretch;gap:2px}


.ds-infolist--grid .ds-infolist-label{flex:none;text-align:left}


.ds-infolist--grid .ds-infolist-value{text-align:left}


/* A two-column summary table stretched across the full working column puts
   its number a screen-width away from its label. Summary tables cap short. */
.ds-table-section--summary{max-width:none}


/* Long-form record text (a job description on the public careers page) kept
   its source line breaks in the record dialog but collapsed into one
   run-on paragraph everywhere it was rendered as plain prose, at the full
   1240px working width. This is the block that renders it as written. */
.ds-longform{white-space:pre-line;max-width:68ch;font-family:var(--font-ui);font-size:calc(14px * var(--fs-scale, 1));line-height:1.6;color:var(--ink)}


.ds-careers-match{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--baobab-red, #c8102e);text-align:right}


/* the datagrid sets its own cell colour, so the score has to say it inside a cell */
.ds-datagrid td.ds-careers-match{font-family:var(--font-mono);font-weight:700;color:var(--baobab-red, #c8102e);text-align:right}


.ds-datagrid td.ds-careers-place{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-mute)}


.ds-careers-place{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-mute);white-space:nowrap}


.ds-jd{display:flex;flex-direction:column;gap:18px;max-width:78ch}


.ds-jd-section{display:flex;flex-direction:column;gap:6px}


.ds-jd-section-title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);border-bottom:1px solid var(--hairline);padding-bottom:4px}


.ds-jd-lede{font-family:var(--font-ui);font-size:calc(15px * var(--fs-scale, 1));line-height:1.55;color:var(--ink)}


.ds-jd-text{font-family:var(--font-ui);font-size:calc(14px * var(--fs-scale, 1));line-height:1.6;color:var(--ink)}


.ds-jd-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}


.ds-jd-list-item{position:relative;padding-left:16px;font-family:var(--font-ui);font-size:calc(14px * var(--fs-scale, 1));line-height:1.55;color:var(--ink)}


.ds-jd-list-item::before{content:"";position:absolute;left:3px;top:.58em;width:4px;height:4px;border-radius:50%;background:var(--baobab-red, #c8102e)}


/* Related tables inside a dialog pane stay height-bounded; the pane keeps
   its no-scroll target and the table scrolls in place. */
.ds-dialog-col .ds-table-viewport{max-height:40vh}


/* Narrow dialog panes: three-across form rows drop to two columns so
   inputs keep a usable width. */
.ds-dialog-col .ds-field-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}



/* Inline review-control group (document proposals): tag + accept/reject/edit
   on ONE line at control height — the stacked forms previously blew the row
   to ~6x normal height. */
.ds-review-controls{display:flex;flex-wrap:wrap;align-items:center;gap:5px}


.ds-review-controls .ds-form-tight{flex-direction:row;align-items:center;margin-top:0;gap:5px}


.ds-review-controls .ds-button{padding:3px 8px;font-size:10px;letter-spacing:.03em}


.ds-review-controls .ds-input{width:120px;padding:3px 6px;font-size:11px}



/* ds-searchbar was authored as a sticky in-page filter band with its own
   canvas background. Inside the white .tap2-header that band rendered as
   a floating beige block, misaligned with the header's own baseline. In the
   header it is a plain inline control group. */
.tap2-header .ds-searchbar{position:static;background:transparent;padding:0;z-index:auto}



/* Signed-in session identity in the OMS side nav: the uppercase mono
   nav-label forced long e-mail addresses to break mid-word. Session identity
   keeps its natural case and wraps at sensible boundaries. */
.tap2-nav-session{display:block;margin:0 0 var(--ds-space-4);padding:0 var(--ds-space-12);color:var(--ink-faint);font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:.02em;text-transform:none;overflow-wrap:anywhere}



/* App-shell brand row: the MMD logomark sits with the wordmark (screens were
   shipping with no company logo at all — Ben 2026-08-01). */
.tap2-brand{display:flex;align-items:center;gap:9px}


.tap2-brand-logo{height:20px;width:auto;flex:none;display:block}



/* Full-page forms read as a bounded column, not a sheet floating in an
   empty canvas; their action row is a right-aligned pair, not stacked
   full-width bars. */
.tap2-screen .ds-form{max-width:860px}


.ds-subm-formrow-form .ds-btn-text,.ds-subm-formrow-form .ds-btn-sym{margin-left:auto;flex:0 0 auto}



/* Round detail row: the second table row under each round's
   Round/Status/When/Score row, carrying Mode/Panel/Feedback and the round's
   actions. Keeps the table itself to 4 columns so it never overflows its
   pane; nothing that used to be visible is dropped, it just wraps onto its
   own line instead of forcing 4 more columns sideways. */
.ds-subm-round-detail td{padding:2px 10px 10px;border-top:0;background:var(--paper-2)}


.ds-subm-round-detail-inner{display:flex;flex-direction:column;gap:6px;padding:6px 0 2px}


.ds-subm-round-detail-item{display:inline-flex;align-items:baseline;gap:6px;margin-right:16px;font-size:calc(12px * var(--fs-scale, 1));color:var(--ink-soft)}


.ds-subm-round-detail-item .ds-infolist-label{flex:none}


.tap2-actionsrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:var(--ds-space-14) var(--ds-space-30) 0}


.ds-subm-dialog .ds-dialog-cols{flex:1 1 auto;min-height:0}


.ds-subm-dialog .ds-dialog-col{min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ink-mute) var(--paper-2);padding-right:2px}



/* ===== round-3: the new-hiring-request dialog fits the viewport without
   whole-dialog scrolling -- compact fieldsets, capped JD textarea. ===== */
.ds-modal.ds-modal--dialog.ds-newreq-dialog{width:94vw;max-width:1180px;max-height:88vh}


.ds-newreq-dialog .ds-modal-dialog-body{padding:12px 20px 14px}


.ds-newreq-dialog .ds-form{gap:10px}


.ds-newreq-dialog .ds-fieldset{padding:10px 14px;gap:8px}


.ds-newreq-dialog .ds-field{gap:2px}


.ds-newreq-dialog .ds-textarea{max-height:120px;min-height:64px}


.ds-newreq-dialog .ds-actions{margin-top:2px}


.ds-newreq-dialog .ds-newreq-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}

@media(max-width:1000px) {
.ds-newreq-dialog .ds-newreq-body{grid-template-columns:minmax(0,1fr)}
}


.ds-newreq-dialog .ds-newreq-body .ds-field-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}


.ds-newreq-inline4{display:grid;grid-template-columns:1.1fr 1.3fr 1.2fr 1.2fr;gap:12px;align-items:start}


.ds-newreq-dialog .ds-newreq-body .ds-newreq-inline4{grid-template-columns:repeat(2,minmax(0,1fr))}


.ds-newreq-dialog .ds-newreq-body .ds-fieldset{min-width:0}


.ds-newreq-dialog .ds-newreq-body .ds-field-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}


.ds-newreq-dialog .ds-newreq-body .ds-input,.ds-newreq-dialog .ds-newreq-body .ds-select{min-width:0;max-width:100%}


.ds-newreq-jdsave{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px;min-width:0}


.ds-newreq-jdsave .ds-label{font-size:10px}


.ds-subm-addround-row .ds-btn-icon{height:30px;width:30px;font-size:14px}



/* ===== all-screens polish (2026-08-09) ===== */
.ds-newreq-jdhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}


.ds-newreq-jdsave--attached{justify-content:flex-start}


.ds-docprop-values{min-width:0}


.ds-docprop-values .ds-records-sub{display:block;overflow-wrap:anywhere}


.ds-docprop-proposed{display:block;font-weight:700;color:var(--ink);overflow-wrap:anywhere}


.ds-docprop-editrow{flex:1 1 100%;min-width:0}


.ds-docprop-editrow .ds-input{flex:1 1 auto;min-width:0}


.ds-review-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}


.ds-dialog-col .ds-datagrid{table-layout:fixed;width:100%}


.ds-dialog-col .ds-datagrid td{overflow-wrap:anywhere}



/* ===== Mill-sheet layer (2026-08-11) =========================================
   The recruiting surfaces are read the way a works order is read: reference
   first, role second, everything else in a fixed order that never moves. These
   components carry that. Nothing here is app-local styling -- templates point
   at these class names and hold no style of their own. */

/* The title block. Every posting and every requirement carries the same strip
   of labelled fields, in the same order, so the eye lands in the same place on
   a list row, in a window and on a printed sheet. */
.ds-specblock{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--ink);border-radius:2px;background:var(--paper);overflow:hidden}


.ds-specblock-field{flex:1 1 120px;min-width:110px;padding:7px 12px 8px;border-left:1px solid var(--hairline)}


.ds-specblock-field:first-child{border-left:0}


.ds-specblock-field--wide{flex:2 1 220px}


.ds-specblock-label{display:block;font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}


.ds-specblock-value{display:block;margin-top:2px;font-family:var(--font-mono);font-size:calc(12.5px * var(--fs-scale, 1));font-weight:500;color:var(--ink);word-break:break-word}



/* A reference number is a machine value: mono, tight, never wrapped mid-token. */
.ds-ref{font-family:var(--font-mono);font-size:calc(11.5px * var(--fs-scale, 1));font-weight:500;letter-spacing:.04em;color:var(--ink-mute);white-space:nowrap}



/* Conformance: a match is a measured figure, so it reads as one -- number plus
   a thin bar, never a coloured badge on its own. */
.ds-conformance{display:flex;align-items:center;gap:8px;justify-content:flex-end}


.ds-conformance-value{font-family:var(--font-mono);font-size:calc(12.5px * var(--fs-scale, 1));font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}


.ds-conformance-bar{position:relative;width:52px;height:4px;background:var(--paper-3);border-radius:0;overflow:hidden}


.ds-conformance-fill{position:absolute;inset:0 auto 0 0;background:var(--ink-mute)}


.ds-conformance--none .ds-conformance-value{color:var(--ink-faint);font-weight:500}



/* Sign-in: a works pass, not a marketing card. */
.ds-auth-card{max-width:412px;border-radius:2px;border:1px solid var(--ink);box-shadow:none;padding:0}


.ds-auth-card .ds-app-signin{padding:26px 30px 18px;border-bottom:1px solid var(--hairline);background:var(--paper)}


.ds-auth-card form{padding:20px 30px 4px}


.ds-auth-card .ds-hint{padding:0 30px}


.ds-auth-card .ds-hint:last-child{padding-bottom:22px}



/* ----- Sheet layout ---------------------------------------------------------
   Work sits on a sheet: white paper, hard border, laid on the mill-grey
   canvas, with a measured maximum width so a table never sprawls the full
   width of a 27-inch screen. */
.tap2-main > .tap2-header{background:var(--ink);border-bottom:0;padding:var(--ds-space-14) var(--ds-space-24)}


.tap2-main > .tap2-header .ds-appbar-eyebrow{color:var(--ink-faint)}


.tap2-main > .tap2-header .ds-appbar-title{font-family:var(--font-display);font-weight:900;font-size:calc(19px * var(--fs-scale, 1));letter-spacing:-.015em;color:var(--paper)}


.tap2-canvas{padding:var(--ds-space-18) var(--ds-space-24) var(--ds-space-24)}


.tap2-screen{max-width:1180px;gap:var(--ds-space-18)}


.tap2-screen > .ds-table-section{margin-top:0;padding:var(--ds-space-16) var(--ds-space-18) var(--ds-space-18);background:var(--paper);border:1px solid var(--hairline);border-top:2px solid var(--ink)}


.tap2-screen > .ds-table-section > .ds-page-head:first-child{margin-top:0}



/* Rail: grouped like a directory, session pinned at the foot. */
.tap2-nav{padding:var(--ds-space-18) var(--ds-space-12);gap:var(--ds-space-18)}


.tap2-nav-group + .tap2-nav-group{padding-top:var(--ds-space-14);border-top:1px solid var(--hairline-on-ink)}


.tap2-nav-group:last-child{margin-top:auto;padding-top:var(--ds-space-14)}


.tap2-nav-session{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));color:var(--ink-faint);padding:0 var(--ds-space-12) var(--ds-space-4);word-break:break-all}


.tap2-brand{margin-bottom:var(--ds-space-4);padding-bottom:var(--ds-space-14);border-bottom:1px solid var(--hairline-on-ink);color:var(--paper)}



/* Sign-in card, second pass: square-cut fields, a single red edge as the one
   accent on the screen, and the secondary links ranged left under the form
   instead of inheriting the card's centred masthead. */
.ds-auth-card{border-top:3px solid var(--baobab)}


.ds-auth-card :is(.ds-input,.ds-select){border-radius:2px}


.ds-auth-card .ds-button{border-radius:2px}


.ds-auth-card .ds-hint{text-align:left;margin:0;padding:0 30px 14px;font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1))}


.ds-auth-card .ds-hint:last-child{padding-bottom:24px}



/* Square-cut controls everywhere on these surfaces: a spec sheet has no
   rounded corners, and the search row is part of the sheet, not a tray on it. */
.tap2-shell :is(.ds-input,.ds-select,.ds-textarea,.ds-button,.ds-filter-input){border-radius:2px}


.tap2-screen .ds-searchbar{background:transparent;border:0;padding:var(--ds-space-12) 0 var(--ds-space-4)}



/* ----- Phone navigation ------------------------------------------------------
   The rail is hidden under 760px (see above) -- without this strip a phone
   user has NO navigation at all, which is what shipped. The strip carries the
   same destinations as the rail, scrolls sideways, and keeps a 44px target. */
.tap2-mobile-strip-brand{display:inline-flex;align-items:center;gap:var(--ds-space-6);flex:none;padding-right:var(--ds-space-10);border-right:1px solid var(--hairline-on-ink);color:var(--paper);font-family:var(--font-display);font-weight:900;font-size:calc(13px * var(--fs-scale, 1));text-decoration:none}


.tap2-mobile-strip-brand img{height:16px;width:auto}


.tap2-mobile-strip-link{flex:none;display:inline-flex;align-items:center;min-height:var(--ds-control-compact);padding:var(--ds-space-6) var(--ds-space-10);border-radius:2px;color:var(--ink-faint);font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));text-decoration:none;white-space:nowrap}


.tap2-mobile-strip-link:hover{color:var(--paper)}


.tap2-mobile-strip-link-active{background:var(--paper);color:var(--ink);font-weight:700}

@media(max-width:640px) {

  .ds-datagrid td .ds-conformance{justify-content:flex-start}


  .ds-specblock-field{flex:1 1 45%;border-left:0;border-top:1px solid var(--hairline)}
}



/* ----- Confirmation banner ---------------------------------------------------
   Pressing Apply, Save or Upload used to change the screen and say nothing.
   This is the one place a candidate is told what just happened; it sits at the
   top of the sheet stack, states the outcome, and offers the next step. */
.ds-confirm{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ds-space-10);margin:0 0 var(--ds-space-14);padding:var(--ds-space-10) var(--ds-space-14);background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--signal-grass)}


.ds-confirm-label{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}


.ds-confirm-text{font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale, 1));color:var(--ink);margin:0}


.ds-confirm-next{font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale, 1));font-weight:700;color:var(--baobab);text-decoration:underline}

@media(max-width:640px) {

  .tap2-main > .tap2-header{padding:var(--ds-space-12) var(--ds-space-16);gap:var(--ds-space-4)}


  .tap2-header-copy{flex:0 1 auto;min-width:0;max-width:100%}


  .tap2-header:has(> :only-child){min-height:0}


  .tap2-screen .ds-searchbar{position:static;top:auto;padding:var(--ds-space-10) 0 0}


  .tap2-screen .ds-searchbar > *{flex:0 0 auto;width:100%;height:auto;min-height:var(--ds-control-compact)}


  .ds-searchbar-compact{flex:0 0 auto;justify-content:flex-start}


  .tap2-canvas{padding:var(--ds-space-12) var(--ds-space-12) var(--ds-space-18)}


  .tap2-screen > .ds-table-section{padding:var(--ds-space-12) var(--ds-space-12) var(--ds-space-14)}
}

@media(max-width:640px) {

  .ds-datagrid td.ds-careers-match{text-align:left}
}



/* ===== Careers top bar =======================================================
   A job board is not an internal workspace. The 236px rail gave a third of a
   laptop screen and most of a small window to a handful of links -- on the
   public page, three of them -- while the jobs sat in a box beside it. The
   candidate site gets one slim bar instead and the full width for work. */
.ds-careers-shell{display:flex;flex-direction:column;min-height:100%;background:var(--paper-2)}


.ds-careers-bar{display:flex;align-items:center;gap:var(--ds-space-16);padding:0 var(--ds-space-18);min-height:52px;background:var(--ink);color:var(--paper);border-bottom:2px solid var(--baobab)}


.ds-careers-bar-brand{display:inline-flex;align-items:center;gap:var(--ds-space-8);flex:none;color:var(--paper);text-decoration:none;font-family:var(--font-display);font-weight:900;font-size:calc(15px * var(--fs-scale, 1));letter-spacing:-.01em}


.ds-careers-bar-brand img{height:20px;width:auto}


.ds-careers-bar-nav{display:flex;align-items:center;gap:var(--ds-space-4);flex:1 1 auto;min-width:0;overflow-x:auto}


.ds-careers-bar-link{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:var(--ds-space-6) var(--ds-space-10);border-radius:2px;color:var(--ink-faint);font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));text-decoration:none;white-space:nowrap}


.ds-careers-bar-link:hover{color:var(--paper)}


.ds-careers-bar-actions{display:flex;align-items:center;gap:var(--ds-space-8);flex:none}


.ds-careers-bar-session{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));color:var(--ink-faint);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}


.ds-careers-bar-cta{appearance:none;background:transparent;cursor:pointer;flex:none;display:inline-flex;align-items:center;min-height:32px;padding:var(--ds-space-6) var(--ds-space-12);border:1px solid var(--paper);border-radius:2px;color:var(--paper);font-family:var(--font-ui);font-weight:700;font-size:calc(12px * var(--fs-scale, 1));text-decoration:none;white-space:nowrap}


.ds-careers-bar-cta--solid{background:var(--baobab);border-color:var(--baobab);color:var(--baobab-on)}


.ds-careers-bar-form{display:inline-flex;margin:0}


.ds-careers-body{flex:1 1 auto;min-width:0;padding:var(--ds-space-18) var(--ds-space-18) var(--ds-space-30)}


.ds-careers-body > .tap2-screen{max-width:1240px;margin:0 auto}


.ds-careers-foot{display:flex;flex-wrap:wrap;gap:var(--ds-space-14);padding:var(--ds-space-14) var(--ds-space-18);border-top:1px solid var(--hairline);background:var(--paper)}


.ds-careers-foot-link{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));color:var(--ink-mute);text-decoration:none}


.ds-careers-foot-link:hover{color:var(--ink)}

@media(max-width:640px) {

  .ds-careers-bar{gap:var(--ds-space-8);padding:0 var(--ds-space-12)}


  .ds-careers-bar-session{display:none}


  .ds-careers-body{padding:var(--ds-space-12) var(--ds-space-12) var(--ds-space-18)}
}



/* The page title is one line above the work, not an ink band across the top. */
.ds-careers-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ds-space-10);margin:0 0 var(--ds-space-12)}


.ds-careers-title{margin:0;font-family:var(--font-display);font-weight:900;font-size:calc(20px * var(--fs-scale, 1));letter-spacing:-.015em;color:var(--ink)}


.ds-careers-head-note{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale, 1));color:var(--ink-mute)}


.ds-careers-intake-link{color:var(--baobab);text-decoration:underline}



/* Twelve rows, then scroll -- a 60-row dump is not a list anyone reads. */
.ds-datagrid-wrap--capped{max-height:calc(12 * 37px + 34px);overflow-y:auto}


.ds-datagrid-wrap--capped thead th{position:sticky;top:0;z-index:2;background:var(--paper)}

@media(max-width:640px) {
.ds-datagrid-wrap--capped{max-height:none;overflow-y:visible}
}



/* ----- Job action bar --------------------------------------------------------
   A posting exists so somebody can apply. The controls were at the bottom of a
   long description, off screen, while the right half of the page was empty --
   a candidate had to scroll blind to find the only action that matters. */
.ds-jobbar{position:sticky;top:0;z-index:15;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-10);margin:0 0 var(--ds-space-14);padding:var(--ds-space-10) var(--ds-space-14);background:var(--paper);border:1px solid var(--hairline);border-top:2px solid var(--ink)}


.ds-jobbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-8)}


/* The description reads at a comfortable measure instead of a narrow column
   with half the page blank beside it. */
.ds-jd{max-width:78ch}

@media(max-width:640px) {

  .ds-datagrid--jobboard td[data-label="Ref"]{display:none}


  .ds-datagrid--jobboard td[data-label="Role"]::before{display:none}


  .ds-datagrid--jobboard td[data-label="Role"] .ds-records-title{font-size:calc(15px * var(--fs-scale, 1))}


  .ds-datagrid--jobboard td[data-label="Country"],
  .ds-datagrid--jobboard td[data-label="City"],
  .ds-datagrid--jobboard td[data-label="Function"],
  .ds-datagrid--jobboard td[data-label="Published"]{display:inline-block;padding-right:var(--ds-space-8)}


  .ds-datagrid--jobboard td[data-label="Country"]::before,
  .ds-datagrid--jobboard td[data-label="City"]::before,
  .ds-datagrid--jobboard td[data-label="Function"]::before,
  .ds-datagrid--jobboard td[data-label="Published"]::before{display:none}


  .ds-datagrid--jobboard td[data-label="Country"]::after{content:"·";padding-left:var(--ds-space-8);color:var(--ink-faint)}


  .ds-datagrid--jobboard td[data-label="City"]::after{content:none}


  .ds-datagrid--jobboard td[data-label="Function"]::after{content:none}


  .ds-datagrid--jobboard tr.ds-datagrid-row{padding:var(--ds-space-12)}
}



/* ----- Careers chrome, second pass -------------------------------------------
   (1) The MMD mark is a full logo with the wordmark inside it, so setting the
   words "MMD Careers" next to it printed MMD twice and the two collided.
   (2) The bar and the footer stay put while the work scrolls between them, at
   every window size. (3) Bigger type and looser rows: many candidates are not
   confident readers of dense tables on small screens. */
.ds-careers-shell{padding-top:56px;padding-bottom:40px}


.ds-careers-bar{position:fixed;top:0;left:0;right:0;z-index:60;min-height:56px}


.ds-careers-bar-brand{gap:var(--ds-space-10)}


.ds-careers-bar-brand img{height:24px;width:auto;display:block}


.ds-careers-bar-brand-word{font-family:var(--font-display);font-weight:900;font-size:calc(16px * var(--fs-scale, 1));line-height:1}


.ds-careers-foot{position:fixed;bottom:0;left:0;right:0;z-index:55;padding:var(--ds-space-10) var(--ds-space-18);min-height:40px;align-items:center;border-top:1px solid var(--hairline)}


.ds-careers-body{padding-bottom:var(--ds-space-24)}


/* Anything sticky inside the page hangs below the fixed bar, not under it. */
.ds-jobbar{top:60px}


.ds-datagrid-wrap--capped thead th{top:0}



/* Readability: this is a public site read by people on cheap phones, not an
   internal grid for operators who stare at it all day. */
.ds-careers-shell .ds-datagrid{font-size:calc(14px * var(--fs-scale, 1))}


.ds-careers-shell .ds-datagrid td{padding-top:var(--ds-space-10);padding-bottom:var(--ds-space-10)}


.ds-careers-shell .ds-jd-text,.ds-careers-shell .ds-jd-lede{font-size:calc(15.5px * var(--fs-scale, 1));line-height:1.6}


.ds-careers-shell .ds-hint{font-size:calc(13px * var(--fs-scale, 1))}


/* A table wider than the eye can track is unreadable; the board holds its
   measure and the description column takes the slack. */
.ds-careers-body > .tap2-screen{max-width:1080px}


.ds-careers-shell .ds-datagrid td[data-label="Role"]{width:34%}


.ds-careers-shell .ds-datagrid td[data-label="Ref"]{width:15%}



/* Language switcher and the "More" menu: four things in the bar instead of
   eight, because most candidates here are not confident with software. */
.ds-careers-lang{display:inline-flex;align-items:center;gap:var(--ds-space-6);margin:0}


.ds-careers-lang-label{font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}


.ds-careers-lang-select{appearance:none;background:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23FAFAF8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;min-width:96px;border:1px solid rgba(250,250,248,.35);border-radius:2px;color:var(--paper);font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));padding:5px 8px;min-height:32px;cursor:pointer}


.ds-careers-lang-select option{background:var(--paper);color:var(--ink)}


.ds-careers-more{position:relative;flex:none}


.ds-careers-more > summary{list-style:none;cursor:pointer}


.ds-careers-more > summary::-webkit-details-marker{display:none}


.ds-careers-more-menu{position:absolute;left:0;top:100%;z-index:70;min-width:220px;display:flex;flex-direction:column;padding:var(--ds-space-4);background:var(--paper);border:1px solid var(--ink);border-radius:2px;box-shadow:0 10px 28px rgba(20,22,26,.22)}


.ds-careers-more-link{padding:var(--ds-space-10) var(--ds-space-12);color:var(--ink);font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale, 1));text-decoration:none;min-height:var(--ds-control-touch);display:flex;align-items:center}


.ds-careers-more-link:hover{background:var(--wash)}

@media(max-width:640px) {

  .ds-careers-lang-label{display:none}


  .ds-careers-more-menu{position:fixed;left:0;right:0;top:56px;min-width:0}
}



/* ----- Careers editorial blocks ----------------------------------------------
   A careers page that is only tables tells a candidate nothing about the place.
   Photographs are MMD's own, served from our host at phone size (under 70KB
   each) with width/height set so the layout does not jump on a slow line. */
.ds-careers-hero{position:relative;margin:0 0 var(--ds-space-18);border:1px solid var(--hairline);border-top:2px solid var(--ink);background:var(--ink)}


.ds-careers-hero-img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover;opacity:.92}


.ds-careers-hero-copy{padding:var(--ds-space-14) var(--ds-space-18)}


.ds-careers-hero-lede{margin:0;color:var(--paper);font-family:var(--font-display);font-weight:700;font-size:calc(19px * var(--fs-scale, 1));line-height:1.35;max-width:60ch}


.ds-careers-split{display:flex;flex-wrap:wrap;gap:var(--ds-space-18);align-items:flex-start}


.ds-careers-split-copy{flex:1 1 340px;min-width:0}


.ds-careers-split-img{flex:0 0 240px;width:240px;height:auto;border:1px solid var(--hairline);background:var(--paper-3)}

@media(max-width:640px) {

  .ds-careers-split{flex-direction:column}


  .ds-careers-split-img{flex:1 1 auto;width:100%;order:2}


  .ds-careers-split-img--first{order:0}


  .ds-careers-hero-lede{font-size:calc(16px * var(--fs-scale, 1))}
}


.ds-careers-map-svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}


.ds-careers-map-land{fill:var(--paper-3);stroke:var(--ink-mute);stroke-width:1.5}


.ds-careers-map-dot{fill:var(--baobab)}


.ds-careers-map-text{font-family:var(--font-mono);font-size:11px;fill:var(--ink)}



/* Each operating company carries its own two-letter mark. */
.ds-careers-entity{display:inline-flex;align-items:center;gap:var(--ds-space-8)}


.ds-careers-entity-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em}

@media(max-width:760px) {

  .ds-careers-shell{padding-top:0;padding-bottom:0}


  .ds-careers-foot{position:static;flex-wrap:wrap;overflow:visible;gap:var(--ds-space-8) var(--ds-space-12);padding:var(--ds-space-10) var(--ds-space-12);min-height:0}


  .ds-careers-foot-link{white-space:nowrap;font-size:calc(10.5px * var(--fs-scale, 1))}


  .ds-careers-bar-cta{padding:var(--ds-space-6) var(--ds-space-8);font-size:calc(11.5px * var(--fs-scale, 1))}


  .ds-careers-lang-select{padding:4px 22px 4px 6px;min-height:30px;min-width:0;font-size:calc(11.5px * var(--fs-scale, 1));background-position:right 6px center}
}



/* The datagrid script injects an English "N records" line; on the careers site
   the page title already carries the count in the reader's language. */
.ds-careers-shell [data-tap2-injected]{display:none}

@media(max-width:400px) {

  /* Keep Create an account visible -- it is the single highest-value action on
     the site and folding it into the Menu hid it on first paint. Log in is the
     one that can wait, and it is in the Menu. */
  .ds-careers-bar-cta--quiet{display:none}


  .ds-careers-bar-brand-word{display:none}
}



/* ----- Careers review round two ---------------------------------------------
   Two independent reviewers, one UX one visual, on the same screens. */

/* "Under review" wore the same red as "Not proceeding": a candidate skimming
   colour in a second language read good news as a rejection. Red now means
   one thing on the candidate's side -- this application is over. */
.ds-careers-shell .ds-stage-sourcing{color:var(--ink-mute);border-color:var(--ink-mute);background:var(--paper-2)}


.ds-careers-shell .ds-stage-screening{color:var(--ink-soft);border-color:var(--ink-mute);background:var(--paper-2)}


.ds-careers-shell .ds-stage-interview{color:var(--ink);border-color:var(--ink);background:var(--paper-2)}


.ds-careers-shell .ds-stage-offer{color:var(--ink);border-color:var(--ink);background:var(--paper-2)}



/* The section image floated against the last line of the paragraph instead of
   starting where the text starts. */
.ds-careers-split-img{align-self:flex-start}



/* The map stays because it was asked for, so it earns its place: a pin opens
   that country's jobs, and so does the company name in the table above it. */
.ds-careers-map-pin{cursor:pointer}


.ds-careers-map-pin:hover .ds-careers-map-dot{fill:var(--ink)}


.ds-careers-map-pin:hover .ds-careers-map-text{font-weight:700}


a.ds-careers-entity{text-decoration:none}


a.ds-careers-entity:hover .ds-records-title{text-decoration:underline}



/* One stage label wrapped to two lines and made its row taller than the seven
   around it. */
.ds-careers-shell .ds-stage{white-space:nowrap}



/* The section photo was shorter than its paragraph, leaving a grey strip. */
.ds-careers-split-img{height:100%;max-height:260px;object-fit:cover}


.ds-careers-shell{height:100dvh;min-height:0;padding-top:0;padding-bottom:0;display:flex;flex-direction:column;overflow:hidden}


.ds-careers-bar{position:static;flex:0 0 auto}


.ds-careers-foot{position:static;flex:0 0 auto}


.ds-careers-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--ds-space-12)}


.ds-careers-body > .tap2-screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}


/* Sheets keep their own height; only the one holding the list grows. */
.tap2-screen > .ds-table-section{flex:0 0 auto}


.tap2-screen > .ds-table-section:has(.ds-datagrid-wrap--capped){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}


.ds-datagrid-wrap--capped{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}


/* A short page must not leave the footer floating mid-window. */
.ds-careers-body > .tap2-screen > :last-child{margin-bottom:0}

@media(max-width:760px) {

  .ds-careers-shell{padding-top:0;padding-bottom:0}


  .ds-careers-head{margin-bottom:var(--ds-space-8)}
}

@media(max-width:760px) {

  .ds-careers-head{gap:var(--ds-space-6)}


  .ds-careers-head-note{font-size:calc(10.5px * var(--fs-scale, 1))}


  .ds-careers-title{font-size:calc(17px * var(--fs-scale, 1))}
}



/* The hiring company on every job. A candidate in Kigali applies to SteelRwa
   and in Bamako to IMAFER; the group name alone leaves them guessing which
   company the offer will come from. Real logo artwork is public only for
   Fabrimetal, so the others carry their wordmark rather than an invented mark. */
.ds-careers-unit{display:inline-flex;align-items:center;gap:var(--ds-space-6);min-width:0}


.ds-careers-unit-name{font-family:var(--font-ui);font-weight:700;font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink);white-space:nowrap}



/* The trust band is not a .ds-table-section, so the one-screen flex column was
   shrinking it and cutting its sentence in half. */
.tap2-screen > .ds-careers-trust{flex:0 0 auto;overflow:visible}

@media(max-width:640px) {

  .ds-careers-unit{margin:var(--ds-space-2) 0}
}

@media(max-width:760px) {

  .tap2-screen > .ds-table-section{padding:var(--ds-space-10)}


  .ds-careers-body{padding:var(--ds-space-8) var(--ds-space-10) var(--ds-space-8)}
}

@media (max-width: 760px) {

  .ds-careers-foot{padding-top:var(--ds-space-8);padding-bottom:var(--ds-space-8)}


  .ds-careers-foot-link{white-space:normal}
}


.ds-careers-head{margin-bottom:var(--ds-space-8)}



/* On a row a wide logo reduced to 22px reads as a smudge; the board names the
   company in one consistent weight and the posting carries the real mark. */
.ds-careers-unit-name{display:inline;font-weight:700}

@media (max-width: 420px), (max-height: 700px) {

  .ds-careers-head{margin-bottom:var(--ds-space-8)}


  .ds-careers-head-note{font-size:calc(11px * var(--fs-scale, 1))}


  .ds-careers-foot{gap:var(--ds-space-4) var(--ds-space-10);padding:var(--ds-space-6) var(--ds-space-12)}


  .ds-careers-foot-link{font-size:calc(10px * var(--fs-scale, 1));line-height:1.4}
}


.ds-jobbar-unit .ds-careers-unit-name{color:var(--paper);font-family:var(--font-display);font-weight:700;font-size:calc(14px * var(--fs-scale, 1))}


.ds-jobbar-unit--paper .ds-careers-unit-name{color:var(--ink)}



/* Between a phone and a full desk the bar wraps: the nav becomes its own
   swipeable strip row under the brand row (rules at the end of this file). */

/* The board is a job board: a search line and a filter strip, then jobs. The
   photo band and the stacked labels above them were pushing the first row of
   work below the fold on a laptop. */
.ds-jobsearch{display:flex;flex-direction:column;gap:var(--ds-space-8);margin-bottom:var(--ds-space-10)}


.ds-jobsearch-form{display:flex;align-items:center;gap:var(--ds-space-8)}


.ds-jobsearch-field{flex:1 1 auto;min-width:0}


.ds-careers-head{margin-bottom:var(--ds-space-8)}

@media (max-width: 760px) {

  .ds-jobsearch-form{flex-wrap:wrap}


  .ds-jobsearch-field{flex:1 1 100%}
}

@media (max-width: 760px) {

  .ds-jobsearch{gap:var(--ds-space-6);margin-bottom:var(--ds-space-8)}


  .ds-jobsearch-form{gap:var(--ds-space-6)}


  .ds-jobsearch-form .ds-button{flex:0 0 auto}
}



/* A vacancy whose employing company is not yet fixed says so in words rather
   than showing the same dash a broken row would. */
.ds-careers-unit-name--tbc{font-weight:400;color:var(--ink-mute)}



/* Board controls: a search line whose filters are dropdowns, and the filters
   that are ON shown as pills you can switch off. The old strip of bordered
   chips carried every country and every function at once, filtered without
   saying so, and left no way back to the full board. */
.ds-pillselect{border-radius:999px;padding:var(--ds-space-6) var(--ds-space-14);min-height:36px;background-position:right 10px center}


.ds-jobsearch-state{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-8);margin:0}


.ds-pill--filter{background:var(--ink);border-color:var(--ink);color:var(--paper)}



/* A dropdown inside a scrolling nav is a dropdown nobody can see: the More
   menu opened into the clipped overflow of its own bar. */
.ds-careers-bar-nav{overflow:visible}



/* The intake sits over the board, because the only sane way into a profile is
   a CV: a job seeker types nothing that the document already says. */
.ds-intake{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--ds-space-16);background:rgba(20,22,26,.55)}


.ds-intake-card{width:min(560px, 100%);display:flex;flex-direction:column;gap:var(--ds-space-10);padding:var(--ds-space-18);background:var(--paper);border:1px solid var(--ink);border-top:3px solid var(--baobab);border-radius:2px;box-shadow:0 18px 48px rgba(20,22,26,.32)}


.ds-intake-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:calc(20px * var(--fs-scale, 1));color:var(--ink)}


.ds-intake-lede{margin:0;font-family:var(--font-ui);font-size:calc(13.5px * var(--fs-scale, 1));line-height:1.45;color:var(--ink-mute)}


.ds-intake-row{display:flex;flex-wrap:wrap;gap:var(--ds-space-8)}


.ds-intake-row > *{flex:1 1 220px;min-width:0}


.ds-intake-file{padding:var(--ds-space-8)}


.ds-intake-actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-8)}

@media (max-width: 760px) {

  .ds-intake{align-items:flex-start;padding:var(--ds-space-10)}


  .ds-intake-card{padding:var(--ds-space-12);gap:var(--ds-space-8)}


  .ds-intake-title{font-size:calc(17px * var(--fs-scale, 1))}
}


.ds-careers-shell{height:auto;min-height:100dvh}


.ds-careers-body > .tap2-screen{overflow:visible}



/* The dialog was landing against the black top bar, so two dark edges merged
   into one and the card looked cut off. It opens below the bar, on its own. */
.ds-intake{align-items:flex-start;padding-top:calc(64px + var(--ds-space-16))}


.ds-intake-card{border-top:1px solid var(--hairline);box-shadow:0 24px 60px rgba(20,22,26,.42)}

@media (max-width: 760px) {

  .ds-intake{padding-top:calc(56px + var(--ds-space-10))}
}



/* The drawn coastline was read as an island somewhere that is not Africa when
   it sat in the page as a picture. It belongs behind the list of plants, faint,
   where it reads as a backdrop rather than as a claim about geography. */
.ds-careers-where{position:relative;overflow:hidden}


.ds-careers-where-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:var(--ds-space-16);pointer-events:none;opacity:.07}


.ds-careers-where-bg .ds-careers-map-svg{height:100%;width:auto;max-height:420px}


.ds-careers-where > *:not(.ds-careers-where-bg){position:relative}


.ds-careers-where-bg .ds-careers-map-text{display:none}

@media (max-width: 760px) {
 .ds-careers-where-bg{display:none}
}



/* Show the candidate the document we hold, not a sentence claiming we hold it. */
.ds-cvview{display:block;width:100%;height:min(70vh, 720px);margin-top:var(--ds-space-12);border:1px solid var(--hairline);background:var(--paper)}

@media (max-width: 760px) {
 .ds-cvview{height:60vh}
}



/* Scrolling: the board list scrolls with the page like everything else, so a
   phone flick moves the jobs instead of catching an inner pane. */
.tap2-screen > .ds-table-section:has(.ds-datagrid-wrap--capped){overflow:visible}


.ds-datagrid-wrap--capped{max-height:none;overflow:visible}



/* Design pass, 2026-08-12: the board card was stretching to the window, so ten
   rows were followed by a field of empty paper with the Next button stranded
   at the bottom of it. The card ends where the jobs end. */
.tap2-screen > .ds-table-section{flex:0 0 auto}



/* And the dialog was landing on the search row, hiding the controls it sits
   over. It centres, so the toolbar and the first jobs stay readable behind it. */
.ds-intake{align-items:center;padding-top:var(--ds-space-16)}

@media (max-width: 760px) {
 .ds-intake{align-items:flex-start;padding-top:calc(56px + var(--ds-space-10))}
}


.tap2-screen > .ds-table-section:has(.ds-datagrid-wrap--capped){flex:0 0 auto;overflow:visible}



/* Sign-in: the card led with a logo and a two-line uppercase mono sentence,
   then dropped a small dark button in the right corner with three differently
   indented links under it. One column, one primary action across the card,
   one row of links. */
.ds-auth-card{max-width:392px}


.ds-auth-card .ds-app-signin{padding:22px 28px 16px;text-align:left}


.ds-auth-card .ds-app-signin-mark{margin:0 0 10px}


.ds-auth-card form{padding:18px 28px 6px}


.ds-actions-wide{display:block}


.ds-button-wide{width:100%;justify-content:center}


.ds-auth-links{display:flex;flex-wrap:wrap;gap:var(--ds-space-14);padding:var(--ds-space-14) 28px var(--ds-space-18);margin:0;border-top:1px solid var(--hairline)}


.ds-auth-link{font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink-mute);text-decoration:none}


.ds-auth-link:hover{color:var(--ink);text-decoration:underline}


.ds-auth-card .ds-app-signin, .ds-auth-card .ds-app-signin-title, .ds-auth-card .ds-app-signin-sub{text-align:left}


.ds-auth-card .ds-app-signin-mark{margin-left:0;margin-right:auto}


.ds-auth-card .ds-app-signin h1.ds-app-signin-title{text-align:left;margin-top:10px}


/* The header is a flex column that centres its children, so text-align could
   never move the headline. Start the column at the left edge instead. */
.ds-auth-card .ds-app-signin{align-items:flex-start}


/* Browsing without an account and signing in to a test candidate are two
   different things; the test lane's own row says which environment it is. */
.ds-auth-links--test{border-top:1px dashed var(--hairline);color:var(--ink-faint)}



/* ===========================================================================
   Interview guide + interview workspace (feat/recruiting-interviews-i18n).
   Semantic classes; no inline styles in the templates that consume them.
   =========================================================================== */
.ds-interview-guide{display:flex;flex-direction:column;gap:calc(10px * var(--fs-scale,1))}


.ds-guide-langbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--hairline)}


.ds-guide-langbar-label{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale,1));letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}


.ds-guide-langbar-spacer{flex:1}


.ds-guide-lang{display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--hairline);border-radius:2px;font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale,1));letter-spacing:.06em;text-decoration:none;color:var(--ink-soft);background:var(--paper)}


.ds-guide-lang:hover{border-color:var(--ink);color:var(--ink)}


.ds-guide-lang--active{background:var(--ink);color:var(--paper);border-color:var(--ink)}


.ds-guide-autotag{margin-left:8px;font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale,1));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);border:1px dashed var(--hairline);border-radius:2px;padding:1px 6px}


.ds-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(16px * var(--fs-scale,1))}

@media (max-width:720px) {
.ds-guide-grid{grid-template-columns:1fr}
}


.ds-guide-col{display:flex;flex-direction:column;gap:6px;min-width:0}


.ds-guide-facts td{padding:5px 8px;font-size:calc(12px * var(--fs-scale,1));line-height:1.35;vertical-align:top}


.ds-guide-facts-key{color:var(--ink-mute);white-space:nowrap;width:34%}


.ds-guide-questions{margin:4px 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:calc(12.5px * var(--fs-scale,1));line-height:1.4;color:var(--ink)}


.ds-guide-rubric td{padding:4px 8px;font-size:calc(11.5px * var(--fs-scale,1));line-height:1.3}


.ds-guide-prose{font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale,1));line-height:1.5;color:var(--ink-soft);white-space:pre-wrap;margin:2px 0 8px}


.ds-guide-prose--scroll{max-height:200px;overflow-y:auto;background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:8px}


.ds-guide-prose--jd{max-height:340px;overflow-y:auto;background:var(--paper-2);border:1px solid var(--hairline);border-radius:3px;padding:10px}


.ds-guide-round{border:1px solid var(--hairline);border-radius:3px;padding:8px 10px;margin-bottom:8px}


.ds-guide-round-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}


.ds-guide-round-when{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale,1));color:var(--ink-mute)}


.ds-guide-round-panel{font-size:calc(11px * var(--fs-scale,1));color:var(--ink-mute)}


.ds-guide-round-block{margin-top:4px}


.ds-guide-round-label{display:block;font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale,1));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:2px}

@media print {

  .tap2-nav,.tap2-sidebar,.tap2-mobile-strip,.ds-guide-langbar .ds-button,.ds-guide-langbar .ds-guide-lang{display:none !important}


  .ds-guide-prose--scroll,.ds-guide-prose--jd{max-height:none;overflow:visible}
}



/* JD language versions dialog (feat/recruiting-interviews-i18n) */
.ds-jdlang-dialog{max-width:760px;width:92vw;max-height:88vh}


.ds-jdlang-body{padding:14px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}


.ds-jdlang-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}


.ds-jdlang-current-tag{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale,1));letter-spacing:.06em;color:var(--ink-mute)}


.ds-jdlang-edit{display:flex;flex-direction:column;gap:5px}


.ds-jdlang-textarea{width:100%;font-family:var(--font-ui);font-size:calc(12.5px * var(--fs-scale,1));line-height:1.5;resize:vertical}


.ds-jdlang-editfoot{display:flex;justify-content:flex-end}


.ds-jdlang-history{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}


.ds-jdlang-history-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 8px;border:1px solid var(--hairline);border-radius:3px}


.ds-jdlang-history-when{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale,1));color:var(--ink-mute);flex:1}



/* Free-slot pills + live guidance (feat/ta-p2-scheduling-slots-guidance) */
.ds-slots{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0}


.ds-slots-target{width:100%}


.ds-slots-label{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale,1));color:var(--ink-mute)}


.ds-slot-pill{font-family:var(--font-mono);font-size:calc(11px * var(--fs-scale,1));padding:2px 8px;border:1px solid var(--hairline);border-radius:999px;background:var(--paper);cursor:pointer}


.ds-slot-pill:hover{border-color:var(--ink)}


.ds-slots-note{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale,1));color:var(--ink-mute);width:100%}


.ds-guide-guidance{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}


.ds-guide-gaps{margin:2px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}



/* Live interview transcription panel (feat/ta-p2-live-interview-transcription) */
.ds-live{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;border:1px solid var(--hairline);border-radius:3px;padding:8px 10px}


.ds-live-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}


.ds-live-round{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale,1));color:var(--ink-mute);margin-left:auto}


.ds-live-status{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale,1));color:var(--ink-mute)}


.ds-live-transcript{max-height:180px;overflow-y:auto;font-family:var(--font-ui);font-size:calc(12px * var(--fs-scale,1));line-height:1.5;white-space:pre-wrap}


.ds-live-transcript:empty{display:none}



/* ===== Careers spec-sheet pass (2026-08-20) ==================================
   Ben's direction, verbatim intent: the job as a spec sheet. Mill-grey canvas,
   paper-white sheet, blue-cast ink, steel for secondary text, MMD red held to
   the bar rule and the one primary action. AI/document processing is covered
   by the accepted terms -- no consent chrome anywhere. Everything visible:
   all nav items on the bar (a swipeable strip on phones), forms sized to fit
   a small screen without scrolling. */

/* Palette: the letterbox tokens remapped inside the candidate lane only. */
.ds-careers-shell,.ds-auth-shell--careers{
  --paper:#FAFAF8;--paper-2:#E9EAE5;--paper-3:#EFF0EC;
  --ink:#14161A;--ink-soft:#3A414C;--ink-mute:#5A6672;--ink-faint:#9AA2AC;
  --hairline:#C7CAC3;--wash:#EFF0EC;--baobab:#C8102E;--baobab-on:#FAFAF8;
}


/* Red discipline: the map dots and inline links step back to ink. */
.ds-careers-map-dot{fill:var(--ink)}


.ds-careers-intake-link{color:var(--ink)}



/* Nav: denser links so the full set sits on the bar on a laptop. */
.ds-careers-bar{gap:var(--ds-space-10)}


.ds-careers-bar-nav{gap:2px}


.ds-careers-bar-link{padding:var(--ds-space-6) var(--ds-space-8);font-size:calc(12px * var(--fs-scale, 1))}



/* Spec title block: the industrial header row on a posting. */
.ds-specblock{display:flex;flex-wrap:wrap;gap:0;margin:0 0 var(--ds-space-10);border:1px solid var(--hairline);background:var(--paper)}


.ds-specblock-cell{flex:1 1 auto;min-width:96px;display:flex;flex-direction:column;gap:2px;padding:var(--ds-space-6) var(--ds-space-10);border-right:1px solid var(--hairline)}


.ds-specblock-cell:last-child{border-right:0}


.ds-specblock-label{margin:0;font-family:var(--font-mono);font-size:calc(9.5px * var(--fs-scale, 1));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}


.ds-specblock-value{margin:0;font-family:var(--font-ui);font-size:calc(13px * var(--fs-scale, 1));color:var(--ink)}

@media(max-width:640px) {
.ds-specblock-cell{min-width:33%}
}



/* Uploaded file: name + open action, then the document itself. */
.ds-intake-note{margin:0;font-family:var(--font-ui);font-size:calc(11.5px * var(--fs-scale, 1));color:var(--ink-mute)}


.ds-docfile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-10);margin-top:var(--ds-space-8)}


.ds-docfile-name{font-family:var(--font-mono);font-size:calc(11.5px * var(--fs-scale, 1));color:var(--ink);overflow-wrap:anywhere}


.ds-docfile-open{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}


.ds-docfile-remove{color:var(--ink-mute)}


.ds-cvview{height:min(58vh, 620px);margin-top:var(--ds-space-8)}


.ds-doccard-date{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));color:var(--ink-mute)}



/* Forms fit the screen: tighter gaps and shorter controls in the candidate
   lane; the auth card carries no dead air above the fold. */
.ds-careers-shell .ds-form-tight{gap:var(--ds-space-8)}


.ds-careers-shell .ds-intake-row{gap:var(--ds-space-6)}


.ds-careers-shell .ds-input,.ds-careers-shell .ds-select{min-height:34px;padding-top:5px;padding-bottom:5px}


.ds-careers-shell .ds-table-section{margin-top:var(--ds-space-12)}


.ds-auth-shell--careers{padding:var(--ds-space-12);background:var(--paper-2)}


.ds-auth-shell--careers .ds-auth-card{max-width:400px;padding-left:var(--ds-space-18);padding-right:var(--ds-space-18);padding-bottom:var(--ds-space-14)}


.ds-auth-shell--careers .ds-app-signin{padding:var(--ds-space-12) 0 2px;gap:3px}


.ds-auth-shell--careers .ds-app-signin-mark{height:32px;width:92px}


.ds-auth-shell--careers .ds-app-signin-title{font-size:calc(19px * var(--fs-scale, 1))}


.ds-auth-shell--careers .ds-app-signin-sub{margin-top:2px;font-size:calc(12px * var(--fs-scale, 1))}


.ds-auth-shell--careers .ds-form-tight{gap:var(--ds-space-8);margin-top:var(--ds-space-6)}


.ds-auth-shell--careers .ds-field{gap:3px}


.ds-auth-shell--careers .ds-input,.ds-auth-shell--careers .ds-select{min-height:34px;padding-top:5px;padding-bottom:5px}


.ds-auth-shell--careers .ds-hint{font-size:calc(11.5px * var(--fs-scale, 1));margin:2px 0 0}


.ds-auth-shell--careers .ds-check-row{font-size:calc(11.5px * var(--fs-scale, 1))}

@media(max-height:820px) {
.ds-auth-shell--careers{align-items:flex-start;overflow-y:auto}
}



/* Intake dialog sized to a phone without scrolling. */
.ds-intake-card{gap:var(--ds-space-8);padding:var(--ds-space-14)}


.ds-intake-lede{font-size:calc(12.5px * var(--fs-scale, 1));line-height:1.4}


/* Inline remove-form beside a document caption. */
.ds-doccard-form{display:inline-flex;margin:0}



/* Phone navigation (2026-08-20, Ben's review): the wrapped strip is retired.
   One 44px bar (brand, page name, language, log out) and a permanent bottom
   tab bar -- every section one thumb-tap, nothing hidden, nothing to swipe. */
.ds-careers-tabbar{display:none;flex:0 0 auto;border-top:1px solid var(--ink);background:var(--paper)}

@media(max-width:960px) {

  .ds-careers-bar-nav{display:none}


  .ds-careers-bar{gap:var(--ds-space-8)}


  .ds-careers-tabbar{display:flex}
}


.ds-careers-tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:var(--ds-space-6) 0 var(--ds-space-8);color:var(--ink-mute);text-decoration:none;font-family:var(--font-mono);font-size:calc(8.5px * var(--fs-scale, 1));letter-spacing:.05em;text-transform:uppercase;min-height:var(--ds-control-touch)}


.ds-careers-tab-glyph{font-family:var(--font-ui);font-size:calc(15px * var(--fs-scale, 1));line-height:1}


/* Secondary pages stay visible one tap deep: a plain links row on Profile. */
.ds-careers-secondary{display:flex;flex-wrap:wrap;gap:var(--ds-space-4) var(--ds-space-14);margin:0 0 var(--ds-space-10)}


.ds-careers-secondary-link{font-family:var(--font-mono);font-size:calc(10.5px * var(--fs-scale, 1));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);text-decoration:underline}

@media(min-width:961px) {
.ds-careers-secondary{display:none}
}


/* Register: the primary action stays grey until the terms are ticked; the
   server still validates -- this is presentation, not the gate. */
.ds-reg-submit .ds-button-primary{transition:opacity var(--ds-motion-fast) ease-out}


form:not(:has(input[name="notice_ack"]:checked)) .ds-reg-submit .ds-button-primary{background:var(--hairline);border-color:var(--hairline);color:var(--ink-mute);pointer-events:none}


form:has(input[name="notice_ack"]:checked) .ds-reg-submit-note{visibility:hidden}


/* Openings: the fitment ask when no CV is on file. */
.ds-fitask{display:inline-flex;align-items:center;gap:7px}


.ds-fitask-q{font-family:var(--font-mono);font-weight:700;width:20px;height:20px;border:1px solid var(--hairline);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--wash);color:var(--ink-mute)}


.ds-fitask-cta{font-size:calc(11.5px * var(--fs-scale, 1));color:var(--ink);text-decoration:underline;white-space:nowrap}


/* Privacy: acceptance-by-use sheet -- collapsed notice rows + action rows. */
.ds-priv-notice{border-bottom:1px solid var(--wash)}


.ds-priv-notice summary{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));letter-spacing:.1em;text-transform:uppercase;padding:var(--ds-space-8) 0;cursor:pointer;color:var(--ink-soft);list-style:none}


.ds-priv-notice summary::-webkit-details-marker{display:none}


.ds-priv-notice[open] summary{color:var(--ink)}


.ds-priv-notice-body{font-size:calc(12.5px * var(--fs-scale, 1));color:var(--ink-soft);padding:0 0 var(--ds-space-10)}


.ds-priv-row{display:flex;align-items:center;gap:var(--ds-space-10);margin:var(--ds-space-10) 0 0;padding:var(--ds-space-8) var(--ds-space-10);border:1px solid var(--hairline);background:var(--wash)}


.ds-priv-row--danger{border-color:var(--baobab)}


.ds-priv-row-title{font-weight:700;font-size:calc(12.5px * var(--fs-scale, 1))}


.ds-priv-row-sub{color:var(--ink-mute);font-size:calc(11.5px * var(--fs-scale, 1))}


.ds-priv-row-action{margin-left:auto}


.ds-specblock-sub{color:var(--ink-mute);font-size:calc(11px * var(--fs-scale, 1))}



/* Application state band: the first thing on a posting you applied for. */
.ds-appstate{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-10);margin:0 0 var(--ds-space-12);padding:var(--ds-space-8) var(--ds-space-12);background:var(--ink);color:var(--paper);border-left:4px solid var(--baobab)}


.ds-appstate-label{font-family:var(--font-mono);font-size:calc(9px * var(--fs-scale, 1));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}


.ds-appstate-stage{font-family:var(--font-display);font-weight:700;font-size:calc(15px * var(--fs-scale, 1))}


.ds-appstate-when{font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));color:var(--ink-faint)}


.ds-appstate-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ds-space-10)}


.ds-appstate-link{color:var(--paper);font-size:calc(11.5px * var(--fs-scale, 1));text-decoration:underline}


.ds-appstate-withdraw{border-color:var(--paper);color:var(--paper);background:transparent}



/* One document list under the CV viewer -- rows, not a second gallery. */
.ds-doclist{margin-top:var(--ds-space-10);border-top:1px solid var(--hairline)}


.ds-doclist-row{display:flex;align-items:center;gap:var(--ds-space-10);padding:var(--ds-space-6) 0;border-bottom:1px solid var(--wash)}


.ds-doclist-name{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:calc(11.5px * var(--fs-scale, 1));color:var(--ink);text-decoration:underline;text-align:left;overflow-wrap:anywhere}


.ds-docmodal-pdf{display:block;width:100%;height:min(72vh, 760px);border:1px solid var(--hairline);background:var(--paper)}



/* The alert bell beside the job search: one press = alert for these criteria. */
.ds-alertbell-form{display:inline-flex;margin:0}


.ds-alertbell{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--ink);border-radius:2px;padding:6px 12px;font-family:var(--font-mono);font-size:calc(10px * var(--fs-scale, 1));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}


.ds-alertbell:hover{background:var(--wash)}


.ds-alertbell-glyph{font-size:calc(12px * var(--fs-scale, 1));line-height:1}

@media(max-width:960px) {

  .ds-careers-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;padding-bottom:env(safe-area-inset-bottom, 0)}


  .ds-careers-shell{padding-bottom:calc(52px + env(safe-area-inset-bottom, 0))}
}


/* An empty page heading must not cost a header row of dead space. */
.ds-careers-head:not(:has(.ds-careers-title:not(:empty))){display:none}


/* Withdraw is a two-step: the summary opens an inline confirm. */
.ds-appstate-confirm{position:relative}


.ds-appstate-confirm > summary{list-style:none;cursor:pointer;display:inline-flex}


.ds-appstate-confirm > summary::-webkit-details-marker{display:none}


.ds-appstate-confirm[open] > summary{display:none}


.ds-appstate-confirm .ds-doccard-form{display:inline-flex;align-items:center;gap:var(--ds-space-8)}


.ds-appstate-confirm-note{font-size:calc(11px * var(--fs-scale, 1));color:var(--ink-faint);max-width:34ch}


/* Compact field variants: used across dialogs and toolbars app-wide; defined
   here so the allowlisted names are real DS objects, not phantoms. */
.ds-input--compact{min-height:26px;padding:3px 8px;font-size:calc(12px * var(--fs-scale,1))}


.ds-select--compact{min-height:26px;padding:2px 6px;font-size:calc(12px * var(--fs-scale,1))}


/* Sourcing pipeline v4 (Ben 2026-08-20): two chrome rows, single-line
   segmented stage strip, contextual bulk bar, next-action column. */
.ds-pipe{display:flex;flex-direction:column;gap:8px}


.ds-pipe-cmd{display:flex;align-items:stretch;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--hairline)}


.ds-pipe-cmd .ds-select--compact{flex:0 1 200px;max-width:220px}


.ds-pipe-rolebox{flex:1 1 360px;min-width:240px;display:flex;align-items:center;gap:8px;border:1px solid var(--ink-soft);background:var(--paper);padding:0 10px}


.ds-pipe-roleinput{flex:1 1 auto;min-width:160px;border:0;background:none;font:inherit;font-size:13px;padding:7px 0;outline:none}


.ds-pipe-rolemeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;color:var(--ink-mute);font-size:10px}


.ds-pipe-strip{display:flex;align-items:stretch;border-bottom:2px solid var(--ink)}


.ds-pipe-seg{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px 4px;border-right:1px solid var(--hairline);text-decoration:none;color:var(--ink)}


.ds-pipe-seg:last-child{border-right:0}


.ds-pipe-seg:hover{background:var(--paper-2)}


.ds-pipe-seg small{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;max-width:100%}


.ds-pipe-seg b{font-size:15px;line-height:1.1}


.ds-pipe-seg i{font-style:normal;font-family:var(--font-mono);font-size:8.5px;color:var(--baobab);white-space:nowrap;overflow:hidden;max-width:100%;min-height:10px}


.ds-pipe-seg--active{background:var(--ink)}


.ds-pipe-seg--active:hover{background:var(--ink)}


.ds-pipe-seg--active small,.ds-pipe-seg--active b{color:var(--paper)}


.ds-pipe-seg--active i{color:#FFB3B3}


.ds-pipe-seg--exit small,.ds-pipe-seg--exit b{color:var(--ink-mute)}


.ds-pipe-seg--exit.ds-pipe-seg--active small,.ds-pipe-seg--exit.ds-pipe-seg--active b{color:var(--paper)}


.ds-pipe-bulkbar{display:none;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:5px 12px;margin-bottom:6px}


.ds-pipe--sel .ds-pipe-bulkbar{display:flex}


.ds-pipe-bulkbar .ds-button{border-color:var(--paper);background:transparent;color:var(--paper)}


.ds-pipe-bulkbar .ds-button:hover{background:var(--paper);color:var(--ink)}


.ds-pipe-bulkcount{font-size:11px;color:var(--paper)}


.ds-pipe-rejectwhy{flex:1 1 200px;background:transparent;border:0;border-bottom:1px solid var(--paper-2);color:var(--paper)}


.ds-pipe-rejectwhy::placeholder{color:var(--paper-2)}


.ds-pipe-bulkhint{margin-left:auto;color:var(--paper-2);font-size:10px}


.ds-pipe-table td{padding-top:4px;padding-bottom:4px}


.ds-pipe-col-sel{width:36px}


.ds-pipe-selcell{padding:0}


.ds-pipe-selhit{display:flex;align-items:center;justify-content:center;min-height:30px;padding:4px 8px;cursor:pointer}


.ds-pipe-select,.ds-pipe-selectall{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}


.ds-pipe-col-fit{width:48px}


.ds-pipe-col-src{width:112px}


.ds-pipe-col-age{width:56px}


.ds-pipe-col-act{width:150px}


.ds-pipe-cand b{font-weight:600}


.ds-pipe-cand span{color:var(--ink-mute);font-size:11.5px}


.ds-pipe-table td.ds-mono{white-space:nowrap}


.ds-pipe-age--hot{color:var(--baobab);font-weight:600}


.ds-pipe-next{display:inline-block;font:inherit;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.03em;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);padding:3px 9px;white-space:nowrap;cursor:pointer}


.ds-pipe-next:hover{border-color:var(--ink)}


.ds-pipe-next--due{border-color:var(--baobab);color:var(--baobab)}


/* Candidate record popup v4: paper header, sticky section nav, scrolling body */
.ds-sd{max-height:92vh;display:flex;flex-direction:column;width:920px;max-width:95vw}


.ds-sd-head{display:flex;align-items:baseline;gap:12px;padding:10px 16px;background:var(--paper-2);border-bottom:2px solid var(--ink)}


.ds-sd-head-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink)}


.ds-sd-head-sub{font-size:10.5px;color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.ds-sd-head-x{margin-left:auto;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:15px;line-height:1;padding:2px 9px;cursor:pointer}


.ds-sd-nav{display:flex;border-bottom:1px solid var(--hairline);background:var(--paper)}


.ds-sd-nav a{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;padding:7px 14px;color:var(--ink-soft);text-decoration:none;border-right:1px solid var(--hairline)}


.ds-sd-nav a:hover{background:var(--ink);color:var(--paper)}


.ds-sd-nav a.ds-sd-nav-on{background:var(--ink);color:var(--paper)}


.ds-sd-body{flex:1;overflow-y:auto;padding:0 16px 14px}


.ds-sd-body::after{content:"";position:sticky;bottom:-14px;display:block;height:20px;margin:0 -16px;background:linear-gradient(to bottom, rgba(250,250,246,0), var(--paper))}


.ds-sd-sec{margin-top:14px}


.ds-sd-sec-title{font-family:var(--font-mono);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--hairline);padding-bottom:3px;margin:0 0 8px;font-weight:500}


.ds-sd-kv{display:grid;grid-template-columns:repeat(4,1fr);gap:7px 16px;font-size:12px}


.ds-sd-kv div b{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mute);font-weight:400}


.ds-sd-kv-wide{grid-column:1 / -1}


.ds-sd-rationale{border-left:3px solid var(--hairline);padding:5px 10px;margin-top:10px;font-size:12px}


.ds-sd-rationale .ds-mono{display:block;font-size:9.5px;color:var(--ink-mute);margin-bottom:2px}


.ds-sd-rationale p{margin:0}


.ds-sd-docs{display:flex;flex-wrap:wrap;gap:6px}


.ds-sd-doc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline);background:var(--paper);padding:4px 10px;font:inherit;font-size:11.5px;color:var(--ink);text-decoration:none;cursor:pointer}


.ds-sd-doc:hover{border-color:var(--ink)}


.ds-sd-doc .ds-mono{font-size:9px;color:var(--ink-mute)}


.ds-sd-note{border-left:3px solid var(--hairline);padding:5px 10px;margin:5px 0;font-size:12px}


.ds-sd-note .ds-mono{display:block;font-size:9.5px;color:var(--ink-mute);margin-bottom:1px}


.ds-sd-note--reject{border-left-color:var(--baobab);color:var(--baobab);font-weight:600}


.ds-sd-addnote{display:flex;gap:8px;align-items:flex-end;margin-top:8px}


.ds-sd-addnote textarea{flex:1}


.ds-sd-toolrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}


.ds-sd-toolrow form{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}


.ds-sd-toolrow .ds-select--compact{flex:0 1 320px;max-width:340px}


.ds-sd-toolrow .ds-input--compact{flex:0 1 260px}


.ds-sd-lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}


.ds-sd-questions{margin:6px 0;padding-left:20px;font-size:12px}


.ds-sd-questions li{margin:3px 0}


.ds-sd-round{border:1px solid var(--hairline);background:var(--paper);padding:6px 10px;margin:8px 0}


.ds-sd-round-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}


.ds-sd-history p{font-size:11px;margin:3px 0;color:var(--ink-mute)}


.ds-sd-foot{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;border-top:2px solid var(--ink);background:var(--paper-2)}


.ds-sd-foot form{margin:0}


.ds-sd-rejectbox{display:none;padding:8px 16px;background:var(--paper-2);border-top:1px solid var(--baobab)}


.ds-sd-rejectbox form{display:flex;align-items:center;gap:8px;width:100%}


.ds-sd-rejectbox .ds-input{flex:1}


.ds-sd-stack{display:none;position:fixed;inset:0;background:rgba(14,14,12,0.55);z-index:9999;align-items:center;justify-content:center}


.ds-sd-cvwin{width:800px;max-width:90vw;height:600px;max-height:90vh;background:var(--paper);display:flex;flex-direction:column;overflow:hidden}


.ds-sd-cvbar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--paper-2);border-bottom:2px solid var(--ink);font-weight:600;font-size:13px}


.ds-sd-cvbar span{flex:1}


.ds-sd-cvbody{flex:1;background:var(--paper-2)}


.ds-sd-cvbody iframe{width:100%;height:100%;border:0}


.ds-sd-cvbody .ds-hint{padding:20px}


.ds-sd-assign{width:480px;max-width:90vw;background:var(--paper);overflow:hidden}


.ds-sd-assignbody{display:flex;flex-direction:column;gap:12px;padding:14px}


.ds-sd-assignbody form{display:flex;align-items:center;gap:8px}


.ds-sd-assignbody .ds-select{flex:1}


.ds-modal--fixed-add-candidate{width:720px;height:560px;max-height:85vh;resize:both;overflow:hidden;display:flex;flex-direction:column}


.ds-field-control--narrow{max-width:260px}



/* ==========================================================================
   Design System: Semantic Classes for Table, Datagrid, Dialog & Form Patterns
   (Removed inline-style debt across templates)
   ========================================================================== */

/* Page action toolbar */
.ds-page-toolbar{display:flex;align-items:center;gap:12px;width:100%;flex-wrap:wrap}



/* Datagrid & Table scrolling and sizing modifiers */
.ds-datagrid-wrap--scroll{overflow-x:auto}


.ds-datagrid-wrap--full{width:100%;min-width:100%}


.ds-table-viewport--scroll{width:100%;overflow-x:auto}


.ds-datagrid--full{width:100%}


.ds-datagrid--fixed-wide{table-layout:fixed;width:100%;min-width:1100px}



/* Semantic column widths */
.ds-col-country{width:130px}


.ds-col-country-sm{width:125px}


.ds-col-source{width:150px}


.ds-col-status{width:125px}


.ds-col-role{width:170px}


.ds-col-location{width:140px}


.ds-col-candidate-name{width:180px}


.ds-col-signals{width:110px}


.ds-col-subs{width:80px}


.ds-col-ref-age{width:110px}


.ds-col-family{width:130px}


.ds-col-demand-status{width:135px}


.ds-col-hiring-manager{width:140px}


.ds-col-hr-contact{width:130px}


.ds-col-submissions{width:110px}



/* Datagrid filter header stack & controls */
.ds-datagrid-filter-col{display:flex;flex-direction:column;gap:4px}


.ds-datagrid-th-label--strong{font-weight:600}


.ds-datagrid-th-label--dotted{text-decoration:underline dotted}


.ds-select--filter,.ds-input--filter{font-size:11px;padding:3px 6px;height:26px;width:100%}



/* Cell truncation, nowrap, and typography */
.ds-cell-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.ds-nowrap{white-space:nowrap}


.ds-text-strong{font-weight:600}


.ds-hint--inline-spaced{display:inline-block;margin-left:4px;white-space:nowrap}


.ds-hint--subtle-spaced{font-size:10px;margin-left:2px}


.ds-urgency-high--spaced{margin-left:4px}



/* Pagination bar and controls */
.ds-pagination-bar{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:12px 16px;border-top:1px solid var(--hairline)}


.ds-pagination-controls{display:flex;align-items:center;gap:6px}


.ds-button--pagination{padding:6px 12px;font-size:11px}


.ds-button--current{cursor:default}



/* Candidate modal dialog and titlebar modifiers */
.ds-modal.ds-modal--dialog.ds-candidate-dialog{width:90vw;max-width:1100px;max-height:88vh}


.ds-modal-dialog-titlebar--draggable{cursor:move;padding:10px 18px}


.ds-modal-dialog-titlebar-pos--lg{font-size:18px}


.ds-modal-dialog-titlebar-chip--primary{font-size:10px;padding:2px 8px;background:var(--baobab);border-color:var(--baobab);font-weight:700}


.ds-modal-dialog-titlebar-chip--sm{font-size:10px;padding:2px 8px}


.ds-modal-dialog-body--compact{padding:14px 18px}



/* Candidate warning banners & key info strip */
.ds-banner-dnc{background:var(--baobab-bg);border:1px solid var(--baobab);color:var(--baobab-deep);padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:13px;font-weight:600}


.ds-hint--sm-spaced{font-size:11px;margin-bottom:8px}


.ds-key-info-strip{display:flex;flex-wrap:wrap;gap:10px 16px;padding:8px 12px;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);margin-bottom:12px;font-size:12px}


.ds-key-info-label{color:var(--ink-mute);font-weight:600}


.ds-dialog-cols--equal{grid-template-columns:1fr 1fr;gap:12px}



/* Demand request form fieldset & compact controls */
.ds-fieldset--condensed{padding:16px 20px;gap:14px}


.ds-select--compact-pad{font-size:12px;padding:6px 10px;height:34px}


.ds-input--compact-pad{font-size:12px;padding:6px 8px;height:34px}


.ds-field-control--split{display:flex;gap:4px}


.ds-input--flex{flex:1}


.ds-select--currency{font-size:11px;padding:6px 4px;height:34px;width:75px}


.ds-input--file-compact{font-size:11px;padding:4px 6px;height:34px}


.ds-label--sm{font-size:11px}



/* Candidate fields alignment & span */
.ds-field-control--align-check{padding-top:22px}


.ds-label--danger-check{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;color:var(--baobab-deep)}


.ds-field-span-3{grid-column:span 3}


.ds-matchsubmit{white-space:nowrap;vertical-align:middle}


/* The pinned tab bar stays clickable above a dialog backdrop: one tap both
   dismisses the window and navigates. */
.ds-careers-tabbar{z-index:1010}


/* Session email in the bar truncates politely. */
.ds-careers-bar-session{max-width:200px;overflow:hidden;text-overflow:ellipsis}

@media(max-width:960px) {

  body:has(.ds-modal-backdrop) .ds-careers-tabbar{opacity:.45}
}



/* ----- Recruiter phone density pass (Ben's annotated Mobile PDF, 2026-08-21) --
   All six phone screens FAILED for looseness: cards must shrink to roughly 40%
   of their height, every label:value pair sits on ONE line, the CANDIDATE/NAME
   label above a name is noise, the stage-filter chips wrap into four rows, the
   footer eats a screen of space, and the dialog title wraps into the chip.
   Scoped to .ds-careers-shell--recruiter so the signed-off candidate careers
   site keeps its reviewed look. */
.ds-cvview--wide-only{display:block}


.ds-matchsubmit-glyph{display:none}

@media(max-width:960px) {

  .ds-careers-shell--recruiter .ds-careers-foot{display:none}


  .ds-careers-shell--recruiter .ds-careers-body{padding-bottom:64px}
}

@media(max-width:640px) {

  .ds-careers-shell--recruiter .tap2-screen{gap:6px}


  .ds-careers-shell--recruiter .ds-careers-head{margin:4px 0 2px}


  .ds-careers-shell--recruiter .ds-careers-title{font-size:16px}


  .ds-careers-shell--recruiter .ds-table-section{margin:0;padding:0}


  .ds-careers-shell--recruiter .ds-page-head{margin:4px 0 2px;padding:0}


  /* one-line stage-filter chip rail */
  .ds-careers-shell--recruiter .ds-filterbar{flex-wrap:nowrap;overflow-x:auto;gap:3px;padding:2px 0;margin:0 0 4px;scrollbar-width:none}


  .ds-careers-shell--recruiter .ds-filter-chip{white-space:nowrap;font-size:9px;padding:2px 7px;flex:none}


  /* dense cards: one line per value, label left / value right, no card padding bloat */
  .ds-careers-shell--recruiter tr.ds-datagrid-row{padding:4px 8px;margin:0 0 4px}


  .ds-careers-shell--recruiter .ds-datagrid td{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:1px 0;font-size:11px;line-height:1.35}


  .ds-careers-shell--recruiter .ds-datagrid td::before{margin:0;font-size:7.5px;line-height:1.35;flex:none}


  .ds-careers-shell--recruiter .ds-datagrid td[data-label="Candidate"]::before,
  .ds-careers-shell--recruiter .ds-datagrid td[data-label="Name"]::before{display:none}


  .ds-careers-shell--recruiter .ds-datagrid td[data-label="Candidate"],
  .ds-careers-shell--recruiter .ds-datagrid td[data-label="Name"]{font-size:12.5px;padding-top:0}


  .ds-careers-shell--recruiter .ds-records-title{font-size:12.5px}


  .ds-careers-shell--recruiter .ds-records-sub{font-size:10px}


  .ds-careers-shell--recruiter .ds-stage,.ds-careers-shell--recruiter .ds-chip,.ds-careers-shell--recruiter .ds-tag{font-size:8.5px;padding:1px 6px}


  .ds-careers-shell--recruiter .ds-matchscore{font-size:10px;padding:1px 6px}


  /* suggested-candidates cards: dense, full rationale, icon submit */
  .ds-careers-shell--recruiter td.ds-matchwhy{display:block;font-size:9.5px;line-height:1.4;overflow-wrap:anywhere;max-width:none;min-width:0;padding:1px 0}


  .ds-careers-shell--recruiter td.ds-matchwhy::before{display:none}


  .ds-careers-shell--recruiter .ds-matchsubmit{justify-content:flex-end}


  .ds-careers-shell--recruiter .ds-matchsubmit::before{display:none}


  .ds-careers-shell--recruiter .ds-matchsubmit-btn{padding:3px 9px;font-size:10px}


  .ds-careers-shell--recruiter .ds-matchsubmit-glyph{display:inline}


  .ds-careers-shell--recruiter .ds-matchsubmit-word{display:none}


  /* candidate window: hide the inline PDF on phone -- the Open CV (PDF) button is the popup path */
  .ds-careers-shell--recruiter .ds-cvview--wide-only{display:none}


  /* one line per infolist row */
  .ds-careers-shell--recruiter .ds-infolist--grid>.ds-infolist-row{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 0}


  .ds-careers-shell--recruiter .ds-infolist--grid .ds-infolist-value{text-align:right}


  .ds-careers-shell--recruiter .ds-infolist-label{flex:none;font-size:8px}


  .ds-careers-shell--recruiter .ds-infolist-value{text-align:right;font-size:11px;min-width:0;overflow-wrap:anywhere}


  .ds-careers-shell--recruiter .ds-infolist--grid>.ds-infolist-row:has(.ds-infolist-value-block){flex-direction:column;align-items:stretch}


  .ds-careers-shell--recruiter .ds-modal-dialog-body{padding:8px 10px}


  .ds-careers-shell--recruiter .ds-fieldset-tight{padding:6px 8px;margin:4px 0}
}



/* ----- Recruiter demand window, web round (Ben's annotated Web PDF, 2026-08-21) --
   The window sat flush under the top bar; the JD lived inside the facts list as
   one heavy block; the right panel wasted space (two-line candidate rows, wide
   paddings); the "submit a new candidate" block displaced a pool search. */
.ds-jdframe{border:1px solid var(--hairline);background:var(--paper);margin-top:10px}


.ds-jdframe-head{font-family:var(--font-mono);font-size:calc(9px * var(--fs-scale, 1));letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:6px 10px;border-bottom:1px solid var(--hairline)}


.ds-jdframe-body{padding:8px 10px;font-size:calc(11.5px * var(--fs-scale, 1));line-height:1.5;color:var(--ink-soft);white-space:pre-line;max-height:340px;overflow-y:auto;scrollbar-width:thin}

@media(min-width:961px) {

  .ds-careers-shell--recruiter .ds-modal-backdrop--dialog{padding-top:72px;align-items:flex-start}


  .ds-careers-shell--recruiter .ds-modal--dialog{max-height:calc(100vh - 96px)}


  .ds-careers-shell--recruiter .ds-modal-dialog-body{padding:10px 14px}


  .ds-careers-shell--recruiter .ds-modal--dialog .ds-datagrid td{padding:4px 8px;font-size:12px}


  .ds-careers-shell--recruiter .ds-modal--dialog td.ds-matchwhy{font-size:10.5px;line-height:1.4;min-width:0;max-width:none;width:48%}


  .ds-careers-shell--recruiter .ds-modal--dialog .ds-matchsubmit{white-space:nowrap;text-align:right}


  .ds-careers-shell--recruiter .ds-modal--dialog .ds-records-sub{display:block;font-size:10px}
}

@media(min-width:961px) {

  .ds-datagrid--suggest th:nth-child(1){width:18%}


  .ds-datagrid--suggest th:nth-child(2){width:7%}


  .ds-datagrid--suggest th:nth-child(3){width:13%}


  .ds-datagrid--suggest th:nth-child(4){width:47%}


  .ds-datagrid--suggest th:nth-child(5){width:15%}
}

/* Central Red Plate components.css (0.3.61) dropped this compound override
   that the OLD letterbox copy had: a .ds-datagrid td containing
   .ds-records-sub renders as a real table-cell (inheriting size/line-height)
   instead of .ds-records-sub's own default display:block. Ta-p2's tables
   depend on the sub-line staying IN the cell's flow. Restored verbatim
   (MMDB-2628, 2026-09-05). */
.ds-datagrid td.ds-records-sub{display:table-cell;margin-top:0;font-size:inherit;line-height:inherit}

/* Central Red Plate components.css (0.3.61) also dropped this [hidden]
   attribute-selector companion to .ds-datagrid-filter -- restored verbatim
   (MMDB-2628, 2026-09-05): a closed column filter must collapse instead of
   occupying/covering the first data row. */
.ds-datagrid-filter[hidden]{display:none}