/* ============================================================================
   at size — yield at your size

   REDESIGN NOTE (2026-07-28). The first cut of this page invented its own
   chrome: a three-column layout with two sticky rails, two filter cards, two
   stat cards, and 518 individually bordered + rounded + filled row cards. Next
   to the category pages it read as a different product.

   The site's list language is one translucent .cb-bonds-table-wrap containing
   FLAT rows on a 2fr 1.2fr 1.2fr 80px grid, 14px 24px padding, separated by a
   single hairline, hovering to --cb-accent-glow. Filters are a horizontal
   .cb-filter-bar of .cb-filter-pill dropdowns. All of that already exists in
   cardboard.css, so this page now uses it wholesale and this file carries only
   what is genuinely new to at-size:

     1. the capital control (the page's premise, and its one bespoke element)
     2. the summary line that replaced both rails
     3. section headers inside the table
     4. the depth ladder, its cut line, and the execution card

   Everything is in cardboard tokens, so light mode comes free.
   ========================================================================= */

/* ── Header band: title + the capital control, side by side ──────────────
   Capital is not a filter, it is the parameter every number is computed
   against. Sitting it beside the title says that without a second panel. */

.cb-ats-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.cb-ats-head-copy { min-width: 0; }

/* The feature's name, set as an eyebrow above the dynamic headline. Amber is
   the page's one accent, so the name is the one branded thing on it. */
.cb-ats-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cb-accent-amber);
}

/* Scoped under body.cardboard: cardboard.css zeroes every <p> margin at a
   higher specificity than a bare class, so an unscoped rule here is dead. */
body.cardboard .cb-ats-lede {
    font-size: 13px;
    line-height: 1.55;
    color: var(--cb-text-secondary);
    margin: 8px 0 0;
    max-width: 52ch;
}

.cb-ats-deploy { flex: none; }

.cb-ats-deploy-label {
    display: block;
    font-size: 11px;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    color: var(--cb-text-muted);
    margin-bottom: 7px;
}

.cb-ats-deploy-row { display: flex; gap: 8px; }

.cb-ats-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    /* A flex item defaults to min-width:auto; without this the field refuses to
       shrink below its content and drags the whole band past the viewport. */
    min-width: 0;
    background: var(--cb-bg-elevated);
    border: 1px solid var(--cb-border-hover);
    border-radius: var(--cb-radius-md);
    padding: 0 16px;
    transition: border-color var(--cb-duration-fast) var(--cb-ease);
}

.cb-ats-amount:focus-within { border-color: var(--cb-border-accent); }

.cb-ats-rupee { font-size: 17px; color: var(--cb-text-muted); }

.cb-ats-amount-input {
    width: 190px;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font-family: var(--cb-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--cb-text-primary);
    padding: 11px 0;
}

.cb-ats-amount-input:disabled { color: var(--cb-text-muted); }

.cb-ats-go {
    padding: 0 20px;
    border: none;
    border-radius: var(--cb-radius-md);
    background: var(--cb-text-primary);
    color: var(--cb-bg-page);
    font-family: var(--cb-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--cb-duration-fast) var(--cb-ease);
}

.cb-ats-go:hover:not(:disabled) { opacity: 0.85; }
.cb-ats-go:disabled { opacity: 0.4; cursor: default; }

/* Quick amounts. Deliberately quieter than .cb-livefeed-chip — these are
   shortcuts to the field above, not a filter dimension. */
.cb-ats-quick {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.cb-ats-quick button {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--cb-radius-full);
    color: var(--cb-text-muted);
    font-family: var(--cb-font);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    cursor: pointer;
    transition: color var(--cb-duration-fast) var(--cb-ease),
                border-color var(--cb-duration-fast) var(--cb-ease);
}

.cb-ats-quick button:hover { color: var(--cb-text-primary); }

.cb-ats-quick button.is-active {
    color: var(--cb-text-primary);
    border-color: var(--cb-border-accent);
}

.cb-ats-quick--off { opacity: 0.35; pointer-events: none; }

/* A pill with no dropdown, just an on/off. */
.cb-filter-pill--toggle {
    font-family: var(--cb-font);
    cursor: pointer;
}

/* ── "see how it works" link under the lede ──────────────────────────── */

.cb-ats-howlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--cb-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cb-accent-amber);
    cursor: pointer;
}

.cb-ats-howlink:hover { text-decoration: underline; }

/* ── First-visit walkthrough ──────────────────────────────────────────────
   A fixed overlay. The spotlight is one element whose enormous box-shadow is
   the dimming, so moving the spotlight moves the hole; top/left/size animate
   between stops. The card is positioned by JS next to the target. */

.cb-ats-tour {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.cb-ats-tour-spot {
    position: fixed;
    border-radius: var(--cb-radius-md);
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.66), 0 0 0 1px var(--cb-accent-amber), 0 0 24px rgba(255, 183, 77, 0.35);
    transition: top 0.38s var(--cb-ease), left 0.38s var(--cb-ease),
                width 0.38s var(--cb-ease), height 0.38s var(--cb-ease);
    pointer-events: none;
}

.cb-ats-tour-card {
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 16px 18px 14px;
    background: var(--cb-bg-surface);
    border: 1px solid var(--cb-border-accent);
    border-radius: var(--cb-radius-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    transition: top 0.38s var(--cb-ease), left 0.38s var(--cb-ease);
}

.cb-ats-tour-count {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-accent-amber);
    margin-bottom: 6px;
}

.cb-ats-tour-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cb-text-primary);
    line-height: 1.3;
    margin-bottom: 6px;
    text-wrap: balance;
}

body.cardboard .cb-ats-tour-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cb-text-secondary);
    margin: 0 0 14px;
}

.cb-ats-tour-actions { display: flex; align-items: center; gap: 8px; }

.cb-ats-tour-skip {
    margin-right: auto;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--cb-font);
    font-size: 12px;
    color: var(--cb-text-muted);
    cursor: pointer;
}

.cb-ats-tour-skip:hover { color: var(--cb-text-primary); }

.cb-ats-tour-back,
.cb-ats-tour-next {
    font-family: var(--cb-font);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--cb-radius-full);
    cursor: pointer;
}

.cb-ats-tour-back {
    background: none;
    border: 1px solid var(--cb-border-accent);
    color: var(--cb-text-secondary);
}

.cb-ats-tour-back:hover { color: var(--cb-text-primary); }

.cb-ats-tour-next {
    background: var(--cb-text-primary);
    border: 1px solid var(--cb-text-primary);
    color: var(--cb-bg-page);
}

.cb-ats-tour-next:hover { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    .cb-ats-tour-spot, .cb-ats-tour-card { transition: none; }
}

/* ── Filter bar: this page's visibility fixes ────────────────────────────
   Users told us the filters were easy to miss. cardboard's pills are muted
   text on a translucent surface, fine beside a dense list, invisible above
   one. Scoped to .cb-ats-filters so the category pages are untouched. */

body.cardboard .cb-ats-filters {
    padding: 14px 24px 16px;
    border-top: 1px solid var(--cb-border);
    border-bottom: 1px solid var(--cb-border);
    background: var(--cb-bg-subtle);
}

.cb-ats-filter-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--cb-text-secondary);
    white-space: nowrap;
}

/* A filled surface one clear step above the bar, near-white label: buttons
   you press, not chips you glance past. The sort control gets the same coat. */
body.cardboard .cb-ats-filters .cb-filter-pill,
body.cardboard .cb-ats-filters .cb-ats-sort {
    background: color-mix(in srgb, var(--cb-bg-elevated), var(--cb-text-primary) 7%);
    border: 1px solid var(--cb-border-accent);
    border-radius: var(--cb-radius-full);
    color: var(--cb-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 15px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.cardboard .cb-ats-filters .cb-filter-pill:hover,
body.cardboard .cb-ats-filters .cb-filter-pill.open,
body.cardboard .cb-ats-filters .cb-ats-sort:hover {
    color: var(--cb-text-primary);
    border-color: var(--cb-text-muted);
    background: color-mix(in srgb, var(--cb-bg-elevated), var(--cb-text-primary) 12%);
}

/* Sort as a pill: "sort" muted, the current choice bright, cardboard's own
   arrow + menu underneath. */
body.cardboard .cb-ats-filters .cb-ats-sort { gap: 6px; }
body.cardboard .cb-ats-filters .cb-ats-sort-label { color: var(--cb-text-secondary); font-weight: 600; }
body.cardboard .cb-ats-filters .cb-ats-sort-icon { color: var(--cb-text-secondary); margin-right: 2px; }

/* Pledge toggle: same coat as the pills, plus an on/off dot so it reads as a
   switch rather than a stray tag. */
body.cardboard .cb-ats-filters .pledge-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cb-text-primary);
    background: color-mix(in srgb, var(--cb-bg-elevated), var(--cb-text-primary) 7%);
    border: 1px solid var(--cb-border-accent);
    box-shadow: none;
}
body.cardboard .cb-ats-filters .pledge-filter-chip::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--cb-text-primary);
    box-sizing: border-box;
}
body.cardboard .cb-ats-filters .pledge-filter-chip.active::before {
    background: var(--cb-accent-yield);
    border-color: var(--cb-accent-yield);
}
body.cardboard .cb-ats-filters .cb-ats-sort .sort-text {
    color: var(--cb-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0;
}
body.cardboard .cb-ats-filters .cb-ats-sort .toggle-dropdown { right: auto; left: 0; }

body.cardboard .cb-ats-filters .cb-filter-pill.active {
    color: var(--cb-text-primary);
    border-color: var(--cb-text-secondary);
    background: var(--cb-accent-glow);
}

body.cardboard .cb-ats-filters .cb-filter-pill-chevron {
    border-top-color: currentColor;
}

/* ── Summary line: replaced the entire right rail ───────────────────────── */

.cb-ats-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--cb-text-secondary);
}

.cb-ats-summary b {
    color: var(--cb-text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cb-ats-summary .cb-ats-sep { color: var(--cb-text-dim); }

.cb-ats-refresh {
    margin-left: auto;
    background: none;
    border: 1px solid var(--cb-border-hover);
    border-radius: var(--cb-radius-full);
    color: var(--cb-text-secondary);
    font-family: var(--cb-font);
    font-size: 11px;
    padding: 3px 12px;
    cursor: pointer;
}

.cb-ats-refresh:hover { border-color: var(--cb-border-accent); color: var(--cb-text-primary); }

/* Market-state warning, folded into the table's own footnote slot. */
.cb-ats-note-warn { color: var(--cb-accent-amber); }
.cb-ats-note-alert { color: var(--cb-danger); }

.cb-ats-state {
    padding: 44px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--cb-text-muted);
}

/* ── Section headers, inside the table ──────────────────────────────────── */

.cb-ats-group {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;                     /* it is a <button>: drop the UA outset border */
    padding: 16px 24px 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cb-text-muted);
    border-bottom: 1px solid var(--cb-border);
    background: color-mix(in srgb, var(--cb-bg-surface) 40%, transparent);
    width: 100%;
    text-align: left;
    font-family: var(--cb-font);
    cursor: default;
}

.cb-ats-group--toggle { cursor: pointer; }
.cb-ats-group--toggle:hover { color: var(--cb-text-secondary); }

.cb-ats-group-n {
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cb-text-dim);
}

.cb-ats-group-more { margin-left: auto; text-transform: lowercase; letter-spacing: 0.02em; }

.cb-ats-group-body--hidden { display: none; }

/* ── Row additions ──────────────────────────────────────────────────────
   .bond-row / .bond-icon / .bond-col-* all come from cardboard.css. Only the
   at-size specific cells are declared here. */

.bond-row.cb-ats-row--partial { box-shadow: inset 2px 0 0 var(--cb-accent-amber); }
.bond-row.cb-ats-row--none    { opacity: 0.55; cursor: default; }
.bond-row.cb-ats-row--none:hover { background: none; }

.cb-ats-meta {
    font-size: 12px;
    color: var(--cb-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.cb-ats-meta .cb-ats-dot { color: var(--cb-text-dim); }
.cb-ats-meta .cb-ats-thin { color: var(--cb-accent-amber); }

.cb-ats-primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--cb-text-primary);
    font-variant-numeric: tabular-nums;
}

.cb-ats-secondary {
    font-size: 12px;
    color: var(--cb-text-muted);
    font-variant-numeric: tabular-nums;
}

.cb-ats-of { color: var(--cb-text-muted); font-weight: 400; }

/* The number the page exists for. */
.cb-ats-yield {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cb-accent-yield);
    font-variant-numeric: tabular-nums;
}

.cb-ats-ann { font-size: 11px; font-weight: 500; color: var(--cb-text-muted); margin-left: 4px; }

/* "p.a." unit on the main return figure for 1yr+ bonds. Small and muted so
   the number stays the hero, matching the grey annualised note above. */
.cb-ats-pa { font-size: 11px; font-weight: 500; color: var(--cb-text-muted); }

/* Slippage: the only coloured secondary line on the page, because it is the
   one fact no other screen tells you. --flat is the "single price level,
   nothing to slip against" case and must not read as a measured zero. */
.cb-ats-slip--cost { color: var(--cb-accent-amber); }
.cb-ats-slip--flat { color: var(--cb-text-dim); }

.cb-ats-caret {
    color: var(--cb-text-dim);
    font-size: 15px;
    transition: transform var(--cb-duration-fast) var(--cb-ease);
}

.bond-row:hover .cb-ats-caret { transform: translateX(3px); color: var(--cb-text-secondary); }
.bond-row.is-open .cb-ats-caret { transform: rotate(90deg); }

/* ── Expansion: ladder, cut line, order ─────────────────────────────────── */

.cb-ats-open {
    padding: 16px 24px 20px;
    border-bottom: 1px solid var(--cb-border);
    background: color-mix(in srgb, var(--cb-bg-page) 45%, transparent);
}

.cb-ats-ladder { font-variant-numeric: tabular-nums; }

.cb-ats-lvl {
    display: grid;
    grid-template-columns: 96px 88px 108px 84px 1fr 150px;
    gap: 12px;
    align-items: center;
    font-size: 12px;
    color: var(--cb-text-secondary);
    padding: 5px 0;
}

.cb-ats-lvl--head {
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    color: var(--cb-text-dim);
    border-bottom: 1px solid var(--cb-border);
    padding-bottom: 6px;
    margin-bottom: 3px;
}

.cb-ats-lvl--taken { color: var(--cb-text-primary); }
.cb-ats-lvl-price { font-weight: 600; }
.cb-ats-lvl-yield { color: var(--cb-accent-yield); }
.cb-ats-lvl-state { font-size: 11px; color: var(--cb-text-muted); }
.cb-ats-lvl-state b { color: var(--cb-text-primary); font-weight: 600; }

/* Outer bar = the level's whole value, inner = the slice this order takes. */
.cb-ats-lvl-bar { display: block; height: 7px; }

.cb-ats-lvl-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--cb-bg-elevated);
    border: 1px solid var(--cb-border);
    overflow: hidden;
}

.cb-ats-lvl-bar em { display: block; height: 100%; background: var(--cb-accent-yield); opacity: 0.5; }

/* Everything below this line is paper the order will not touch. */
.cb-ats-cut {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 7px 0;
    color: var(--cb-text-dim);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cb-ats-cut::before, .cb-ats-cut::after {
    content: "";
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(to right,
        var(--cb-border-accent) 0 3px, transparent 3px 7px);
}

/* Skipped junk: real offers exist here but priced far above the last trade, so
   the sweep never touches them. Struck through and dimmed so the reader sees
   they were considered and rejected, not missed. */
.cb-ats-skip-head {
    margin: 12px 0 4px;
    color: var(--cb-text-dim);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cb-ats-lvl--skip { color: var(--cb-text-dim); opacity: 0.65; }
.cb-ats-lvl--skip .cb-ats-lvl-price,
.cb-ats-lvl--skip .cb-ats-lvl-yield { text-decoration: line-through; }
.cb-ats-lvl--skip .cb-ats-lvl-yield { color: var(--cb-text-dim); }

.cb-ats-foot {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cb-border);
    font-size: 11px;
    color: var(--cb-text-muted);
}

.cb-ats-venue {
    align-self: flex-start;
    margin-top: 10px;
    background: none;
    border: 1px solid var(--cb-border-hover);
    border-radius: var(--cb-radius-full);
    color: var(--cb-text-secondary);
    font-family: var(--cb-font);
    font-size: 11px;
    padding: 4px 12px;
    cursor: pointer;
}

.cb-ats-venue:hover { border-color: var(--cb-border-accent); color: var(--cb-text-primary); }

.cb-ats-exec {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--cb-border-hover);
    border-radius: var(--cb-radius-md);
    background: var(--cb-bg-surface);
}

.cb-ats-exec--blocked { font-size: 12px; line-height: 1.55; color: var(--cb-accent-amber); }

.cb-ats-exec-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 11px;
}

.cb-ats-exec-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cb-ats-exec-cell span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cb-text-muted);
}

.cb-ats-exec-cell b {
    font-size: 13px;
    font-weight: 600;
    color: var(--cb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

body.cardboard .cb-ats-exec-note { font-size: 11px; line-height: 1.6; color: var(--cb-text-muted); margin: 0 0 12px; }
.cb-ats-exec-note b { color: var(--cb-text-secondary); }

/* After a moved price or a failed recheck the button becomes a one-click
   confirm; amber so it is obviously a different state, not a retry. */
.cb-ats-exec-btn--confirm {
    background: var(--cb-accent-amber) !important;
    color: #1a1200 !important;
}

.cb-ats-exec-btn {
    border: none;
    border-radius: var(--cb-radius-md);
    background: var(--cb-text-primary);
    color: var(--cb-bg-page);
    font-family: var(--cb-font);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 20px;
    cursor: pointer;
}

.cb-ats-exec-btn:disabled { opacity: 0.5; cursor: default; }

.cb-ats-exec-status {
    display: inline-block;
    margin-left: 10px;
    font-size: 11px;
    color: var(--cb-accent-amber);
}

/* Off-hours rows carry no fill claim, so nothing in them is clickable. */
.bond-row.cb-ats-row--closed { cursor: default; }
.bond-row.cb-ats-row--closed:hover { background: none; }

.cb-ats-closed-note {
    grid-column: 1 / -1;
    font-size: 10px;
    line-height: 1.5;
    color: var(--cb-text-muted);
    padding-top: 6px;
}

/* ── Column alignment inside the at-size table ───────────────────────────
   cardboard.css only ships the flex rule for .bond-col-3, so the other three
   are declared here rather than leaning on inherited defaults. */

.cb-ats-body .bond-col-1 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cb-ats-body .bond-col-1 .bond-details { min-width: 0; }

.cb-ats-body .bond-col-2,
.cb-ats-body .bond-col-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.cb-ats-body .bond-col-4 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cb-ats-header .header-col-2,
.cb-ats-header .header-col-3 { text-align: right; }

/* Type-tinted coupon square. Mirrors the dot colours the mobile bonds hub
   already uses, so a mixed-type list stays scannable. */
.cb-ats-body .bond-icon { font-size: 0.78rem; line-height: 1; flex-direction: column; }
.cb-ats-body .bond-icon i { font-style: normal; font-size: 7px; opacity: 0.65; }

.cb-ats-body .bond-icon[data-type="Government"] {
    background-color: color-mix(in srgb, #4FC3F7 10%, transparent);
    border-color: color-mix(in srgb, #4FC3F7 20%, transparent);
    color: #4FC3F7;
}
.cb-ats-body .bond-icon[data-type="Corporate"] {
    background-color: color-mix(in srgb, #66BB6A 10%, transparent);
    border-color: color-mix(in srgb, #66BB6A 20%, transparent);
    color: #66BB6A;
}
.cb-ats-body .bond-icon[data-type="SGB"] {
    background-color: color-mix(in srgb, #FFB74D 10%, transparent);
    border-color: color-mix(in srgb, #FFB74D 20%, transparent);
    color: #FFB74D;
}
.cb-ats-body .bond-icon[data-type="Tax-free"] {
    background-color: color-mix(in srgb, #CE93D8 10%, transparent);
    border-color: color-mix(in srgb, #CE93D8 20%, transparent);
    color: #CE93D8;
}

/* ============================================================================
   CLOSED STATE
   The page has no reason to exist without a live order book, so rather than
   degrade into a last-traded list (which the category pages already do better)
   it stands down entirely and tells you when to come back.

   Everything else on the page is hidden by body.ats-closed, so this is the
   whole screen. The motif is the page's own depth ladder with the rungs
   emptied, closing on the same dashed cut line the expansion uses — nothing
   above the line left to take.
   ========================================================================= */

body.ats-closed .cb-category-header,
body.ats-closed .cb-filter-bar,
body.ats-closed .cb-ats-summary,
body.ats-closed .cb-category-body { display: none !important; }

.cb-ats-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centre in what is left of the viewport under the navbar + ticker, so the
       composition sits deliberately rather than floating at the top. */
    min-height: calc(100vh - var(--cb-top-offset) - 80px);
    padding: 6vh 24px 8vh;
}

.cb-ats-closed-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Explicit gaps: margins on h1/p get flattened by styles.css, which
       collapsed the rhythm to ~20px between every block. */
    gap: 0;
    max-width: 44ch;
    text-align: center;
}

/* ── The emptied ladder ──────────────────────────────────────────────────
   Same bar treatment as .cb-ats-lvl-bar i, but with no fill inside: the
   shape the page uses for "here is what is on offer", holding nothing. */

.cb-ats-rungs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 40px;
}

.cb-ats-rungs i {
    display: block;
    height: 7px;
    border-radius: 2px;
    background: var(--cb-bg-elevated);
    border: 1px solid var(--cb-border);
    /* Each rung shorter and fainter than the last — the book thinning out. */
    animation: cb-ats-rung-in var(--cb-duration-hero) var(--cb-ease) both;
}

.cb-ats-rungs i:nth-child(1) { width: 220px; opacity: 0.92; animation-delay: 0ms; }
.cb-ats-rungs i:nth-child(2) { width: 174px; opacity: 0.72; animation-delay: 70ms; }
.cb-ats-rungs i:nth-child(3) { width: 130px; opacity: 0.52; animation-delay: 140ms; }
.cb-ats-rungs i:nth-child(4) { width:  86px; opacity: 0.34; animation-delay: 210ms; }
.cb-ats-rungs i:nth-child(5) { width:  46px; opacity: 0.18; animation-delay: 280ms; }

/* The cut line, exactly as it appears under a swept ladder. */
.cb-ats-rungs-cut {
    display: block;
    width: 252px;
    height: 1px;
    margin-top: 12px;
    background: repeating-linear-gradient(to right,
        var(--cb-border-accent) 0 3px, transparent 3px 7px);
    animation: cb-ats-rung-in var(--cb-duration-hero) var(--cb-ease) 350ms both;
}

@keyframes cb-ats-rung-in {
    from { opacity: 0; transform: translateY(-6px) scaleX(0.6); }
}

body.cardboard .cb-ats-closed-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--cb-text-primary);
    margin: 0 0 14px;
}

body.cardboard .cb-ats-closed-copy {
    font-size: 14px;
    line-height: 1.7;
    color: var(--cb-text-secondary);
    margin: 0 0 52px;
}

.cb-ats-closed-copy b { color: var(--cb-text-primary); font-weight: 600; }

/* ── The answer: when to come back ───────────────────────────────────── */

.cb-ats-clock { margin: 0 0 44px; }

.cb-ats-clock-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cb-text-muted);
    margin-bottom: 10px;
}

/* Cyan is the yield colour on this page — the number that matters. Off-hours
   the number that matters is the wait. */
.cb-ats-countdown {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--cb-accent-yield);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.cb-ats-clock-when {
    margin-top: 11px;
    font-size: 13px;
    color: var(--cb-text-muted);
}

.cb-ats-clock-when b { color: var(--cb-text-secondary); font-weight: 600; }

.cb-ats-closed-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-ats-closed-links a {
    border: 1px solid var(--cb-border-hover);
    border-radius: var(--cb-radius-full);
    color: var(--cb-text-secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    text-decoration: none;
    transition: border-color var(--cb-duration-fast) var(--cb-ease),
                color var(--cb-duration-fast) var(--cb-ease);
}

.cb-ats-closed-links a:hover {
    border-color: var(--cb-border-accent);
    color: var(--cb-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .cb-ats-rungs i, .cb-ats-rungs-cut { animation: none; }
}

/* ============================================================================
   "STILL THERE?" stale-price prompt
   A centred modal over a dimmed backdrop, the way Netflix asks "still
   watching?". Fires after a few idle minutes because the page prices against a
   live book but never auto-refreshes.
   ========================================================================= */

.cb-ats-stale {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: cb-ats-stale-in var(--cb-duration-normal) var(--cb-ease) both;
}

@keyframes cb-ats-stale-in { from { opacity: 0; } }

.cb-ats-stale-card {
    width: 100%;
    max-width: 400px;
    text-align: center;
    background: var(--cb-bg-surface);
    border: 1px solid var(--cb-border-hover);
    border-radius: var(--cb-radius-lg);
    /* Generous, even margins around the content — a touch more up top than at
       the bottom reads as optically centred. */
    padding: 38px 36px 30px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    animation: cb-ats-stale-card-in var(--cb-duration-normal) var(--cb-ease) both;
}

@keyframes cb-ats-stale-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
}

.cb-ats-stale-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cb-text-primary);
    margin-bottom: 12px;
}

.cb-ats-stale-copy {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cb-text-secondary);
    /* Hold the line length in from the card edges so the copy never touches
       them, then leave a clear gap before the buttons. */
    max-width: 30ch;
    margin: 0 auto 28px;
}

.cb-ats-stale-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cb-ats-stale-refresh {
    border: none;
    border-radius: var(--cb-radius-md);
    background: var(--cb-text-primary);
    color: var(--cb-bg-page);
    font-family: var(--cb-font);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 22px;
    cursor: pointer;
    transition: opacity var(--cb-duration-fast) var(--cb-ease);
}

.cb-ats-stale-refresh:hover { opacity: 0.85; }

.cb-ats-stale-dismiss {
    border: none;
    background: none;
    color: var(--cb-text-muted);
    font-family: var(--cb-font);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 6px;
    cursor: pointer;
}

.cb-ats-stale-dismiss:hover { color: var(--cb-text-secondary); }