/* ── The job shell (09-Oct-2026): what every step of a job wears ────────────────────────────
   The notices (closed, read-only), the step tracker and the run chip in the top bar. Rendered by
   Views/Shared/_WizardProgress.cshtml (notices, tracker), _DemoJobStrip.cshtml and _Layout.cshtml
   (the chip). Built to DESIGN.md at the umbrella root: green is a FILL with charcoal on top and
   never a letterform; a marked surface is marked by its EDGE; every shadow is a --ttp-elev step;
   every round thing is the one .tdx-disc construction from site.css, in a size from here.

   Loads after site.css. Every selector is tdx- prefixed (frontend rule: a bare class here would
   repaint the whole application). Motion is covered by site.css's broad reduced-motion block,
   which matches any [class*="tdx-"]. Verify a change by reading cssRules.length in the browser. */

/* ── Disc sizes. The base .tdx-disc (2.3rem) and its fills live in site.css. ── */
.tdx-disc.is-sm { width: 1.55rem; height: 1.55rem; font-size: .78rem; font-weight: 700; }
.tdx-disc.is-md { width: 1.85rem; height: 1.85rem; font-size: .9rem; }
.tdx-disc.is-plain {
    color: var(--mv-graphite);
    background: var(--mv-white);
    border: 1px solid var(--mv-silver);
    box-shadow: var(--ttp-elev-1);
}

/* ── Pills: a level or a state in words. The tone is the fill and its edge; the words are the
   ink, never the bright hue (amber text is about 2:1, the light red 3.8:1, green 1.97:1).
   Ok is the one green FILL, with charcoal on it (8.85:1). Information is quiet and neutral:
   the palette has no blue. Used by the results grid (results-grid.js) and the Dry Run page. ── */
.tdx-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border: 1px solid var(--mv-silver);
    border-radius: 50rem;
    background: var(--mv-white);
    color: var(--mv-graphite);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.45;
    white-space: nowrap;
}
.tdx-pill.is-bad  { background: var(--mv-danger-lt);  border-color: var(--mv-danger-edge);  color: var(--mv-danger-ink); }
.tdx-pill.is-warn { background: var(--mv-warning-lt); border-color: var(--mv-warning-edge); color: var(--mv-warning-ink); }
.tdx-pill.is-ok   { background: var(--mv-blue);       border-color: var(--mv-blue);         color: var(--mv-ink); }
.tdx-pill.is-ink  { background: var(--mv-ink);        border-color: var(--mv-ink);          color: var(--mv-white); }
.tdx-pill.is-none { background: var(--mv-snow); }

/* ── Job notices: closed, read-only. The words carry the meaning; the closed notice is quiet
   because nothing is wrong, the read-only one is marked by an amber EDGE (never a side stripe). ── */
.tdx-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    background: var(--mv-white);
    border: 1px solid var(--mv-silver);
    border-top-color: var(--ttp-edge-lit);
    border-radius: .75rem;
    box-shadow: var(--ttp-elev-1);
}
.tdx-notice.is-caution { border: 2px solid var(--mv-warning-edge); }
.tdx-notice.is-danger { border: 2px solid var(--mv-danger-edge); }
.tdx-notice.is-ok { border: 2px solid var(--mv-success); }
/* The layout's flash messages (save / refusal): the notice plus a close button. */
.tdx-notice-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -.25rem -.4rem 0 0;
    padding: 0;
    font-size: 1.2rem;
    color: var(--mv-graphite);
    background: transparent;
    border: 0;
    border-radius: 50%;
}
.tdx-notice-close:hover { color: var(--mv-ink); background: var(--mv-snow); }
.tdx-notice-close:focus-visible { outline: 2px solid var(--mv-ink); outline-offset: 2px; }
.tdx-flash .tdx-notice-body p { margin: .35rem 0 0; }
.tdx-notice-body {
    flex: 1 1 0;
    min-width: 0;
    font-size: .86rem;
    color: var(--mv-graphite);
}
.tdx-notice-title {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-size: .94rem;
    font-weight: 700;
    color: var(--mv-ink);
}
.tdx-notice-body p { margin: .15rem 0 0; }
.tdx-notice-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tdx-notice-more { margin-top: .25rem; }
.tdx-notice-more > summary {
    cursor: pointer;
    width: fit-content;
    font-weight: 600;
    color: var(--mv-graphite);
    text-decoration: underline;
    text-decoration-color: var(--mv-silver);
    text-underline-offset: 3px;
}
.tdx-notice-more > summary:hover { color: var(--mv-ink); text-decoration-color: var(--mv-ink); }

/* ── The step tracker ──
   Sticky under the dark navbar (--mv-navbar-h). The band bleeds to the page edges by cancelling
   main's --tt-page-gutter, so content scrolling under it never shows beside the card. */
.tdx-steps-bar {
    position: sticky;
    top: var(--mv-navbar-h, 57px);
    z-index: 1030;
    margin: 0 calc(-1 * var(--tt-page-gutter, 1.5rem)) 1.1rem;
    padding: .5rem var(--tt-page-gutter, 1.5rem);
    background: var(--bs-body-bg, #F9FAFB);
}
.tdx-steps-card {
    padding: .65rem 1rem .55rem;
    background: var(--mv-white);
    border: 1px solid var(--mv-silver);
    border-top-color: var(--ttp-edge-lit);
    border-radius: .875rem;
    box-shadow: var(--ttp-elev-2);
}
.tdx-steps {
    display: grid;
    grid-template-columns: repeat(var(--tdx-step-count, 9), minmax(3.75rem, 1fr));
    margin: 0;
    padding: .2rem 0 .1rem;
    list-style: none;
    overflow-x: auto;
}
.tdx-step { position: relative; display: flex; justify-content: center; text-align: center; }
/* The connector runs from the previous step's centre to this one's; green up to "you are here". */
.tdx-step::before {
    content: "";
    position: absolute;
    top: calc(1.05rem - 1px);
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--mv-silver);
}
.tdx-step:first-child::before { display: none; }
.tdx-step.is-done::before,
.tdx-step.is-here::before { background: var(--mv-blue); }

.tdx-step-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
}
.tdx-step .tdx-disc { margin-top: .275rem; }
.tdx-step.is-here .tdx-disc {
    width: 2.1rem;
    height: 2.1rem;
    margin-top: 0;
    font-size: .86rem;
    box-shadow: 0 0 0 5px rgba(0, 214, 57, .22), 0 5px 14px -4px rgba(16, 24, 40, .35);
}
.tdx-step.is-reached .tdx-disc {
    color: var(--mv-ink);
    background: var(--mv-white);
    border: 1px solid var(--mv-graphite);
    box-shadow: var(--ttp-elev-1);
}
.tdx-step.is-todo .tdx-disc {
    color: var(--mv-iron);
    background: var(--mv-white);
    border: 1px dashed var(--mv-mist);
    box-shadow: none;
}
.tdx-step-label {
    max-width: 7rem;
    padding: 0 .15rem;
    font-size: .78rem;
    line-height: 1.2;
    color: var(--mv-graphite);
}
.tdx-step.is-here .tdx-step-label { font-weight: 700; color: var(--mv-ink); }
.tdx-step.is-todo .tdx-step-label { color: var(--mv-iron); }
a.tdx-step-link:hover .tdx-step-label {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--mv-ink);
}
a.tdx-step-link:focus-visible { outline: 3px solid var(--mv-blue); outline-offset: 2px; border-radius: .4rem; }

/* A run in progress on this step: a breathing green halo and the word under the label. The
   halo never fades to nothing (DESIGN.md section 7: a pulse holds its floor). */
.tdx-step-running {
    display: none;
    margin-top: -.15rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mv-graphite);
}
.tdx-step.is-running .tdx-step-running { display: block; }
.tdx-step.is-running .tdx-disc { animation: tdx-step-halo 4.5s var(--ttp-ease) infinite; }
@keyframes tdx-step-halo {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 214, 57, .18), 0 5px 14px -4px rgba(16, 24, 40, .35); }
    50%      { box-shadow: 0 0 0 9px rgba(0, 214, 57, .42), 0 5px 14px -4px rgba(16, 24, 40, .35); }
}

/* ── The run chip in the top bar (_Layout.cshtml, run-chip.js) ──
   A dry run or a Master Data run carries on in the background; this says one is busy, on every page,
   and links back to it. On the charcoal navbar: a darker surface, white words, the breathing green
   dot and the percentage on a white pill. Never green letters. */
.tdx-run-chip {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .3rem .75rem .3rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mv-white);
    text-decoration: none;
    background: #1F2A22;
    border: 1px solid #2F4A36;
    border-radius: 50rem;
    transition: background 260ms var(--ttp-ease);
}
.tdx-run-chip:hover, .tdx-run-chip:focus-visible { color: var(--mv-white); background: #28382C; }
.tdx-run-chip:focus-visible { outline: 3px solid var(--mv-blue); outline-offset: 2px; }
.tdx-run-chip[hidden], .tdx-run-chip-pct[hidden] { display: none; }
.tdx-run-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mv-blue);
    box-shadow: 0 0 0 3px rgba(0, 214, 57, .25);
    animation: tdx-run-breathe 4.5s var(--ttp-ease) infinite;
}
@keyframes tdx-run-breathe { 0%, 100% { opacity: .18; } 50% { opacity: .85; } }
.tdx-run-chip-pct {
    padding: 0 .45rem;
    color: var(--mv-ink);
    background: var(--mv-white);
    border-radius: 50rem;
    font-variant-numeric: tabular-nums;
}

/* ── The stock ledger vs GL stock control report (09-Oct-2026; per company blocks 10-Oct-2026) ──
   Views/Shared/_StockLedgerVsGlReport.cshtml, rendered on Discovery > Inventory, Take-On and Sign-Off, so its
   styles live here rather than on one page. One block per company: its name and cut-off chip, the company totals
   as tiles, a small table of its stock-control accounts, then what explains the difference as plain bullets and
   notices. Figures in ink and tabular numbers; a company or a row that differs carries an amber EDGE; a negative
   difference is danger ink, never the bright red. The wrapper is a one-column grid so a wide account table
   scrolls inside its own box and never widens the page. ── */
.tdx-stock-rep { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
/* Take-On caps its fold's paragraphs in ch; running text here fills its card (frontend rule, 10-Oct-2026). */
div.tdx-stock-rep p { max-width: none; }
.tdx-stock-whatis { font-size: .86rem; color: var(--mv-graphite); }
.tdx-stock-whatis > summary {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--mv-silver);
    text-underline-offset: 3px;
}
.tdx-stock-whatis > summary::-webkit-details-marker { display: none; }
.tdx-stock-whatis > summary:hover { color: var(--mv-ink); text-decoration-color: var(--mv-ink); }
.tdx-stock-chev { transition: transform 260ms var(--ttp-ease); }
.tdx-stock-whatis[open] > summary .tdx-stock-chev { transform: rotate(90deg); }
.tdx-stock-explain {
    margin-top: .6rem;
    padding: .85rem 1rem .4rem;
    background: var(--mv-snow);
    border: 1px solid var(--mv-silver);
    border-radius: .75rem;
}
.tdx-stock-explain p { margin: 0 0 .55rem; }
.tdx-stock-explain strong { color: var(--mv-ink); }

/* A company: its own card, an amber edge when its load and its GL differ. */
.tdx-stock-co {
    min-width: 0;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--mv-white);
    border: 1px solid var(--mv-silver);
    border-top-color: var(--ttp-edge-lit);
    border-radius: .875rem;
    box-shadow: var(--ttp-elev-1);
}
.tdx-stock-co.is-warn { border: 2px solid var(--mv-warning-edge); }
/* Each company folds and starts folded (12-Oct-2026); the head is the summary, its state pill on the right. */
.tdx-stock-co-head { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; list-style: none; cursor: pointer; }
.tdx-stock-co-head::-webkit-details-marker { display: none; }
.tdx-stock-co-head h3 { margin: 0 .2rem 0 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--mv-ink); }
.tdx-stock-co-head:hover h3 { text-decoration: underline; text-decoration-color: var(--mv-silver); text-underline-offset: 3px; }
.tdx-stock-co-head:focus-visible { outline: 2px solid var(--mv-ink); outline-offset: 4px; border-radius: .375rem; }
.tdx-stock-co-head .tdx-stock-chev { color: var(--mv-graphite); }
.tdx-stock-co[open] > .tdx-stock-co-head .tdx-stock-chev { transform: rotate(90deg); }
.tdx-stock-co-when { font-size: .8rem; color: var(--mv-graphite); }
.tdx-stock-co-state { margin-left: auto; }
.tdx-stock-tiles { margin-top: .8rem; }
.tdx-stock-tiles .tdx-ps-tile { align-items: flex-start; box-shadow: none; }
.tdx-stock-tiles .tdx-ps-n { font-size: 1.12rem; }
.tdx-stock-tiles .tdx-ps-n .tdx-pill { font-size: .74rem; vertical-align: 2px; }
.tdx-stock-neg { color: var(--mv-danger-ink); }

/* The company's stock-control accounts. */
.tdx-stock-tw { margin-top: .85rem; overflow-x: auto; border: 1px solid var(--mv-silver); border-radius: .625rem; background: var(--mv-white); container-type: inline-size; }
.tdx-stock-t { width: 100%; margin: 0; font-size: .84rem; border-collapse: collapse; }
.tdx-stock-t th {
    padding: .5rem .65rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mv-graphite);
    background: var(--mv-snow);
    border-bottom: 1px solid var(--mv-silver);
}
.tdx-stock-t th.tdx-stock-r { text-align: right; }
.tdx-stock-t td { padding: .5rem .65rem; vertical-align: top; border-bottom: 1px solid var(--mv-fog); color: var(--mv-ink); }
.tdx-stock-t tbody tr:last-child td { border-bottom: 0; }
.tdx-stock-t .tdx-stock-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdx-stock-t tr.is-diff td { background: var(--mv-warning-lt); }
.tdx-stock-t tr.is-tot td { font-weight: 700; background: var(--mv-snow); }
/* Reports recorded before Sep 2026 keep their original table, notes rows included. */
.tdx-stock-t tr.is-notes td {
    padding: .6rem .75rem .75rem;
    font-size: .8rem;
    color: var(--mv-graphite);
    background: var(--mv-snow);
    border-bottom: 2px solid var(--mv-silver);
}
.tdx-stock-note { position: sticky; left: .75rem; max-width: calc(100cqi - 1.5rem); }
.tdx-stock-t .is-neg { color: var(--mv-danger-ink); }
.tdx-stock-code { font-family: var(--bs-font-monospace, monospace); font-size: .86em; color: var(--mv-ink); }
.tdx-stock-mini { display: block; margin-top: .1rem; font-size: .74rem; font-weight: 500; color: var(--mv-iron); }
.tdx-stock-quiet { color: var(--mv-iron); }

/* What explains the difference: plain bullets, then the flags as notices. */
.tdx-stock-why { margin-top: .9rem; }
.tdx-stock-why h4 { margin: 0 0 .35rem; font-size: .9rem; font-weight: 700; color: var(--mv-ink); }
.tdx-stock-why ul { margin: 0; padding-left: 1.15rem; font-size: .86rem; color: var(--mv-graphite); }
.tdx-stock-why li + li { margin-top: .3rem; }
.tdx-stock-why .tdx-notice { margin: .6rem 0 0; box-shadow: none; }
.tdx-stock-foot { margin: 0; font-size: .78rem; color: var(--mv-iron); }

@media (max-width: 575.98px) {
    .tdx-stock-co { padding: .85rem .8rem .9rem; }
    .tdx-ps-tiles.tdx-stock-tiles { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .tdx-stock-tiles .tdx-ps-tile { padding: .5rem .7rem; }
}

/* ── The page shell (09-Oct-2026): what Snapshot, Configure, Sign-Off, Source and Target share ──
   One header, ONE anchor marked by its edge, figure tiles, a progress well, company / module folds, quiet text
   links and the fixed bottom bar with the way on. Dry Run (dry-run.css) and Take-On (take-on.css) carry their
   own copies from before this block existed; new pages use these and keep only what is theirs in their own
   sheet. Mockups: docs/mockups/wizard-ends/. */
.tdx-ps-page { padding-bottom: 5.5rem; }   /* clears the fixed bar */
.tdx-ps-head { margin-bottom: 1.5rem; }
.tdx-ps-head h1 { margin: .35rem 0 .25rem; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.tdx-ps-lead { margin: 0; color: var(--mv-graphite); }
.tdx-ps-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
/* The job's chips sit beside the title on a wide screen, not between the lead and the tabs (Jaco, 11-Oct-2026).
   Below 992px they stack under the lead as before. */
@media (min-width: 992px) {
    .tdx-ps-head:has(> .tdx-ps-pills) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: start; }
    .tdx-ps-head:has(> .tdx-ps-pills) > :not(.tdx-ps-pills) { grid-column: 1; }
    .tdx-ps-head > .tdx-ps-pills {
        grid-column: 2; grid-row: 1 / span 6; align-self: start;
        justify-content: flex-end; max-width: 30rem; margin-top: .2rem;
    }
}

/* Action buttons on a job page carry a green EDGE so they are seen (Jaco, 11-Oct-2026; DESIGN.md section 3: mark a
   surface with its edge, never its letters). Text stays charcoal. Not in a modal or drawer (their Cancel stays
   quiet) and not in a table (one bordered button per row is clutter; the row is the thing there). */
:is(.tdx-ps-page, .tdx-to-page, .tdx-dr-page, [data-mdp-page]) .btn-outline-secondary:not(:disabled):not(.disabled):not(.modal *):not(.offcanvas *):not(table *) {
    --bs-btn-border-color: var(--mv-blue);
    --bs-btn-color: var(--mv-ink);
    font-weight: 600;
}
.tdx-ps-h3 { margin: 1.25rem 0 .65rem; font-size: 1.05rem; font-weight: 700; }

.tdx-ps-anchor {
    margin-bottom: 1rem;
    padding: 1.15rem 1.25rem;
    background: var(--mv-white);
    border: 2px solid var(--mv-silver);
    border-top-color: var(--ttp-edge-lit);
    border-radius: .875rem;
    box-shadow: var(--ttp-elev-2);
}
.tdx-ps-anchor.is-pass    { border-color: var(--mv-blue); }
.tdx-ps-anchor.is-warn    { border-color: var(--mv-warning); }
.tdx-ps-anchor.is-bad     { border-color: var(--mv-danger-strong); }
.tdx-ps-anchor.is-running { border-color: var(--mv-ink); }
.tdx-ps-anchor.is-locked  { border-style: dashed; border-color: var(--mv-graphite); }
.tdx-ps-top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.tdx-ps-say { flex: 1 1 280px; min-width: 0; }
.tdx-ps-say h2 { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.tdx-ps-say p { margin: 0; color: var(--mv-graphite); }
.tdx-ps-meta { margin-top: .35rem; font-size: .78rem; color: var(--mv-iron); }
.tdx-ps-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tdx-ps-acts form { margin: 0; }

/* Figures: a disc, the figure and its label. A tile that opens rows is a button. */
.tdx-ps-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-top: 1rem; }
.tdx-ps-tile {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .65rem .8rem;
    text-align: left;
    color: var(--mv-ink);
    background: var(--mv-white);
    border: 1px solid var(--mv-silver);
    border-radius: .75rem;
    box-shadow: var(--ttp-elev-1);
}
button.tdx-ps-tile { cursor: pointer; transition: transform 260ms var(--ttp-ease), box-shadow 260ms var(--ttp-ease); }
button.tdx-ps-tile:hover { transform: translateY(-2px); box-shadow: var(--ttp-elev-4); }
button.tdx-ps-tile:focus-visible { outline: 3px solid var(--mv-blue); outline-offset: 2px; }
.tdx-ps-tile.is-warn { border: 2px solid var(--mv-warning-edge); }
.tdx-ps-tile.is-bad  { border: 2px solid var(--mv-danger-edge); }
.tdx-ps-n { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tdx-ps-l { display: block; font-size: .76rem; font-weight: 600; color: var(--mv-graphite); }

/* Progress the server reported: a recessed well, green as its fill only. */
.tdx-ps-progress { margin-top: 1rem; }
.tdx-ps-prow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: .4rem;
    font-size: .86rem;
    color: var(--mv-graphite);
    font-variant-numeric: tabular-nums;
}
.tdx-ps-well { height: 10px; overflow: hidden; border-radius: 50rem; background: var(--mv-snow); box-shadow: var(--ttp-inset); }
.tdx-ps-well.is-thin { height: 6px; }
.tdx-ps-fill {
    width: 0;
    height: 100%;
    border-radius: 50rem;
    background: linear-gradient(90deg, #2BEE5C, var(--mv-blue));
    transition: width 400ms var(--ttp-ease);
}
.tdx-ps-now { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; font-size: .86rem; color: var(--mv-graphite); }
.tdx-ps-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mv-blue); animation: tdx-ps-breathe 4.5s var(--ttp-ease) infinite; }
@keyframes tdx-ps-breathe { 0%, 100% { opacity: .18; } 50% { opacity: .85; } }
.tdx-disc.tdx-ps-spin > .bi { animation: tdx-ps-spin 1.6s linear infinite; }
@keyframes tdx-ps-spin { to { transform: rotate(360deg); } }
/* A step not reached: an empty disc on a dashed edge. */
.tdx-disc.tdx-ps-todo { color: var(--mv-iron); background: var(--mv-white); border: 1px dashed var(--mv-mist); box-shadow: none; }

/* A fold per company or module: its state in the head, its rows inside. */
.tdx-ps-co {
    margin-bottom: .75rem;
    background: var(--mv-white);
    border: 1px solid var(--mv-silver);
    border-top-color: var(--ttp-edge-lit);
    border-radius: .875rem;
    box-shadow: var(--ttp-elev-1);
}
.tdx-ps-co > summary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: center;
    padding: .8rem 1rem;
    list-style: none;
    cursor: pointer;
}
.tdx-ps-co > summary::-webkit-details-marker { display: none; }
.tdx-ps-co[open] > summary { border-bottom: 1px solid var(--mv-silver); }
.tdx-ps-chev { color: var(--mv-iron); transition: transform 200ms var(--ttp-ease); }
.tdx-ps-co[open] > summary .tdx-ps-chev, .tdx-ps-fold[open] > summary .tdx-ps-chev { transform: rotate(90deg); }
.tdx-ps-co-say { flex: 1 1 16rem; min-width: 0; }
.tdx-ps-co-say b { font-size: .98rem; }
.tdx-ps-co-sub { display: block; font-size: .8rem; color: var(--mv-graphite); }
.tdx-ps-co-meter { flex: 0 1 12rem; min-width: 8rem; font-size: .78rem; color: var(--mv-graphite); font-variant-numeric: tabular-nums; }
/* A meter is spans inside a summary; its well and fill must be blocks or they have no size (Snapshot's company bars
   never showed until 11-Oct-2026). */
.tdx-ps-co-meter > span { display: block; }
.tdx-ps-co-meter .tdx-ps-well { margin-top: .3rem; }
.tdx-ps-co-meter .tdx-ps-fill { display: block; }
.tdx-ps-co-r { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; }
.tdx-ps-co-body { padding: .75rem 1rem 1rem; }

/* Background the consultant opens when they want it. */
.tdx-ps-fold { margin-top: 1rem; background: var(--mv-white); border: 1px solid var(--mv-silver); border-radius: .75rem; }
.tdx-ps-fold > summary { display: flex; gap: .5rem; align-items: center; padding: .7rem 1rem; font-weight: 700; list-style: none; cursor: pointer; }
.tdx-ps-fold > summary::-webkit-details-marker { display: none; }
.tdx-ps-fold-body { padding: 0 1rem 1rem; font-size: .86rem; color: var(--mv-graphite); }

/* A quiet text button or link: graphite, underlined (btn-link paints green letterforms). */
.tdx-ps-link {
    display: inline;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--mv-graphite);
    background: none;
    border: 0;
    text-decoration: underline;
    text-decoration-color: var(--mv-silver);
    text-underline-offset: 3px;
    cursor: pointer;
}
.tdx-ps-link:hover, .tdx-ps-link:focus-visible { color: var(--mv-ink); text-decoration-color: var(--mv-ink); }
.tdx-ps-link.is-sm { font-size: .8rem; }

/* The way on, always in reach. */
.tdx-ps-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;   /* above the sticky tracker (1030), under the drawers and popups */
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .7rem var(--tt-page-gutter, 1.5rem);
    background: var(--mv-white);
    border-top: 1px solid var(--mv-silver);
    box-shadow: 0 -2px 8px rgba(16, 24, 40, .05), 0 -14px 28px -8px rgba(16, 24, 40, .08);
}
.tdx-ps-bar form { margin: 0; }
.tdx-ps-bar-say { display: flex; flex: 1 1 auto; gap: .6rem; align-items: center; min-width: 0; font-size: .86rem; color: var(--mv-graphite); }
.tdx-ps-bar-say .tdx-disc { width: 1.35rem; height: 1.35rem; font-size: .7rem; }
.tdx-ps-bar .btn { white-space: nowrap; }
body:has(.tdx-ps-bar) .footer { padding-bottom: 5.5rem; }

@media (max-width: 767.98px) {
    .tdx-ps-bar-say { display: none; }
    .tdx-ps-bar { justify-content: space-between; }
}
@media (max-width: 575.98px) {
    .tdx-ps-head h1 { font-size: 1.45rem; }
    .tdx-ps-hide-sm { display: none; }
    .tdx-ps-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tdx-ps-co-meter { flex-basis: 100%; }
}

/* A phone keeps every disc but only the current step's label, and a notice's button drops under
   its words. */
@media (max-width: 575.98px) {
    .tdx-steps { grid-template-columns: repeat(var(--tdx-step-count, 9), minmax(0, 1fr)); }
    .tdx-step-label { display: none; }
    .tdx-step.is-here .tdx-step-label { display: block; max-width: none; white-space: nowrap; }
    /* The first and last step's label hangs from the card edge instead of past it (09-Oct-2026). */
    .tdx-step:first-child.is-here { justify-content: flex-start; }
    .tdx-step:first-child.is-here > * { align-items: flex-start; }
    .tdx-step:last-child.is-here { justify-content: flex-end; }
    .tdx-step:last-child.is-here > * { align-items: flex-end; }
    .tdx-notice { flex-wrap: wrap; }
    .tdx-notice-actions { flex-basis: 100%; padding-left: 2.6rem; }
}

/* ── The section band (10-Oct-2026, Jaco: "sections must be impossible to miss"; mockup
   docs/mockups/discovery/src/structure-bands.html). A page's main sections each open with one band: a numbered disc
   (is-ink; is-danger while the part blocks) where the page has an order, or an icon disc (green fill, ink glyph)
   where it does not; a title a step above the cards' titles; one line of what it is; the section's actions on the
   right; an ink rule under it. The section's cards follow the band, never inside it. Smaller headings inside a
   section stay .tdx-ps-h3. Markup:
   <div class="tdx-ps-sec" id="..."><span class="tdx-disc is-ink">1</span>
     <div class="tdx-ps-sec-say"><h2>Title</h2><p>One line.</p></div><div class="tdx-ps-sec-acts">buttons</div></div> ── */
.tdx-ps-sec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem .9rem;
    margin: 2.1rem 0 .9rem;
    padding: 0 0 .75rem;
    border-bottom: 2px solid var(--mv-ink);
}
.tdx-ps-sec:first-child { margin-top: .5rem; }
.tdx-ps-sec > .tdx-disc { width: 2.25rem; height: 2.25rem; font-size: 1rem; font-weight: 800; }
.tdx-ps-sec-say { flex: 1 1 18rem; min-width: 0; }
.tdx-ps-sec-say h2 { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--mv-ink); }
.tdx-ps-sec-say h2 .tdx-pill { vertical-align: 3px; margin-left: .4rem; }
.tdx-ps-sec-say p { margin: .2rem 0 0; font-size: .88rem; color: var(--mv-graphite); }
.tdx-ps-sec-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) {
    .tdx-ps-sec-say { flex-basis: 12rem; }
    .tdx-ps-sec-say h2 { font-size: 1.12rem; }
    .tdx-ps-sec-acts { margin-left: 0; width: 100%; }
}