/* The Data Center's issuer, bond search and issue pages: the approved design board's layout (texas-brb board,
   rows B, C and D). Loaded by those three templates only, after site.css and front.css. Colours are the pack's
   tokens (brand.css): gold and charcoal mean a pledge (tax supported, revenue supported), the primary colour
   means principal and nothing else, the link colour interest. No hatching: every fill is solid. */

/* ---- a size as a class (CSP: no inline styles): pc-N sets --pc to N% for a bar's width or a column's height ---- */
.pc-0 { --pc: 0%; } .pc-1 { --pc: 1%; } .pc-2 { --pc: 2%; } .pc-3 { --pc: 3%; } .pc-4 { --pc: 4%; } .pc-5 { --pc: 5%; } .pc-6 { --pc: 6%; } .pc-7 { --pc: 7%; } .pc-8 { --pc: 8%; } .pc-9 { --pc: 9%; }
.pc-10 { --pc: 10%; } .pc-11 { --pc: 11%; } .pc-12 { --pc: 12%; } .pc-13 { --pc: 13%; } .pc-14 { --pc: 14%; } .pc-15 { --pc: 15%; } .pc-16 { --pc: 16%; } .pc-17 { --pc: 17%; } .pc-18 { --pc: 18%; } .pc-19 { --pc: 19%; }
.pc-20 { --pc: 20%; } .pc-21 { --pc: 21%; } .pc-22 { --pc: 22%; } .pc-23 { --pc: 23%; } .pc-24 { --pc: 24%; } .pc-25 { --pc: 25%; } .pc-26 { --pc: 26%; } .pc-27 { --pc: 27%; } .pc-28 { --pc: 28%; } .pc-29 { --pc: 29%; }
.pc-30 { --pc: 30%; } .pc-31 { --pc: 31%; } .pc-32 { --pc: 32%; } .pc-33 { --pc: 33%; } .pc-34 { --pc: 34%; } .pc-35 { --pc: 35%; } .pc-36 { --pc: 36%; } .pc-37 { --pc: 37%; } .pc-38 { --pc: 38%; } .pc-39 { --pc: 39%; }
.pc-40 { --pc: 40%; } .pc-41 { --pc: 41%; } .pc-42 { --pc: 42%; } .pc-43 { --pc: 43%; } .pc-44 { --pc: 44%; } .pc-45 { --pc: 45%; } .pc-46 { --pc: 46%; } .pc-47 { --pc: 47%; } .pc-48 { --pc: 48%; } .pc-49 { --pc: 49%; }
.pc-50 { --pc: 50%; } .pc-51 { --pc: 51%; } .pc-52 { --pc: 52%; } .pc-53 { --pc: 53%; } .pc-54 { --pc: 54%; } .pc-55 { --pc: 55%; } .pc-56 { --pc: 56%; } .pc-57 { --pc: 57%; } .pc-58 { --pc: 58%; } .pc-59 { --pc: 59%; }
.pc-60 { --pc: 60%; } .pc-61 { --pc: 61%; } .pc-62 { --pc: 62%; } .pc-63 { --pc: 63%; } .pc-64 { --pc: 64%; } .pc-65 { --pc: 65%; } .pc-66 { --pc: 66%; } .pc-67 { --pc: 67%; } .pc-68 { --pc: 68%; } .pc-69 { --pc: 69%; }
.pc-70 { --pc: 70%; } .pc-71 { --pc: 71%; } .pc-72 { --pc: 72%; } .pc-73 { --pc: 73%; } .pc-74 { --pc: 74%; } .pc-75 { --pc: 75%; } .pc-76 { --pc: 76%; } .pc-77 { --pc: 77%; } .pc-78 { --pc: 78%; } .pc-79 { --pc: 79%; }
.pc-80 { --pc: 80%; } .pc-81 { --pc: 81%; } .pc-82 { --pc: 82%; } .pc-83 { --pc: 83%; } .pc-84 { --pc: 84%; } .pc-85 { --pc: 85%; } .pc-86 { --pc: 86%; } .pc-87 { --pc: 87%; } .pc-88 { --pc: 88%; } .pc-89 { --pc: 89%; }
.pc-90 { --pc: 90%; } .pc-91 { --pc: 91%; } .pc-92 { --pc: 92%; } .pc-93 { --pc: 93%; } .pc-94 { --pc: 94%; } .pc-95 { --pc: 95%; } .pc-96 { --pc: 96%; } .pc-97 { --pc: 97%; } .pc-98 { --pc: 98%; } .pc-99 { --pc: 99%; }
.pc-100 { --pc: 100%; }

/* ---- cards ---- */
.dc-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 18px; min-width: 0; }
.dc-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; padding: 18px 20px 0; }
.dc-card-head h2 { font-size: 1.25rem; margin: 0; }
.dc-card-sub { margin: 2px 0 0; font-size: .925rem; color: var(--muted); }
.dc-card-body { padding: 14px 20px 20px; }
.dc-card .download { display: inline-flex; align-items: center; gap: 6px; }
.dc-ico { flex: none; }
.dc-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
.dc-g2 > .dc-card { margin-bottom: 18px; }
@media (max-width: 860px) { .dc-g2 { grid-template-columns: minmax(0, 1fr); } }
.dc-nowrap { white-space: nowrap; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.dc-board .stats.kpis { margin-bottom: 18px; }
.dc-board .kpis .stat .label { min-height: 3.1em; }
.dc-board .kpis .stat .small { margin: 0; }
@media (max-width: 560px) {
  .dc-board .stats.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dc-board .kpis .stat { padding: 14px; }
  .dc-board .kpis .figure { font-size: 1.3rem; }
  .dc-board .kpis .stat .label { font-size: .7rem; }
  .dc-card-head { padding: 16px 16px 0; }
  .dc-card-body { padding: 12px 16px 16px; }
}

/* ---- the issuer's split cards: Debt outstanding and Debt issued, one bar over its lines ---- */
.split-bar { display: flex; height: 26px; margin: 2px 0 14px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.split-seg { flex: none; height: 100%; width: var(--pc); }
.split-key { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.k1 { background: var(--accent); }
.k2 { background: var(--header); }
.k3 { background: var(--muted); }
.split-list { margin: 0; }
.split-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.split-row dt { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.split-row dd { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.split-row dd data, .split-row dd .amt { font-weight: 500; color: var(--ink); }
.split-meta { font-size: .85rem; color: var(--muted); }
.split-row.total { border-bottom: 0; border-top: 2px solid var(--ink); }
.split-row.total dt { font-weight: 500; }
.dc-foot { margin: 14px 0 0; }
.dc-foot .tag { margin-right: 4px; }
@media (max-width: 560px) {
  .split-row { flex-direction: column; align-items: flex-start; }
  .split-row dd { justify-content: flex-start; }
}

/* ---- the tax base and ratios: one card, four across ---- */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.figs-cell { padding: 4px 0 0 20px; border-left: 1px solid var(--line); min-width: 0; }
.figs-cell:first-child { padding-left: 0; border-left: 0; }
.figs dt { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); min-height: 3.1em; }
.figs dd { margin: 0; }
.figs .figs-value { font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--ink); margin: 4px 0; font-variant-numeric: tabular-nums; }
.figs .figs-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
@media (max-width: 1000px) and (min-width: 561px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .figs-cell:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .figs { grid-template-columns: minmax(0, 1fr); }
  .figs-cell, .figs-cell:first-child { padding: 10px 0 12px; border-left: 0; border-bottom: 1px solid var(--line); }
  .figs-cell:last-child { border-bottom: 0; }
  .figs dt { min-height: 0; }
  .figs .figs-value { font-size: 1.3rem; }
}

/* ---- column charts: an axis of round values, gridlines, one column a year. The plot takes focus and then shows
   every column's value; at rest only the latest (or, with six columns or fewer, every one). ---- */
.bchart { margin: 6px 0 0; }
.bchart-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 240px auto; column-gap: 10px; padding-top: 22px; }
.bchart-plot:focus-visible { outline-offset: 4px; }
.bchart-axis { position: relative; font-size: .75rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.bchart-sizer { visibility: hidden; display: block; height: 0; overflow: hidden; white-space: nowrap; }
.bchart-tick { position: absolute; right: 0; bottom: var(--pc); transform: translateY(50%); white-space: nowrap; line-height: 1; }
.bchart-area { position: relative; border-bottom: 1px solid var(--muted); }
.bchart-gl { position: absolute; left: 0; right: 0; bottom: var(--pc); border-top: 1px solid var(--line); }
.bchart-cols { position: absolute; inset: 0; display: flex; margin: 0; padding: 0; list-style: none; }
.bchart-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; align-items: center; height: 100%; }
.bchart-seg { display: block; width: 70%; max-width: 92px; height: var(--pc); }
.bchart-seg + .bchart-seg { border-bottom: 2px solid #fff; }
.seg-principal { background: var(--primary); }
.seg-interest { background: var(--link); }
.bchart-val { display: none; position: absolute; left: 50%; bottom: calc(var(--pc) + 4px); transform: translateX(-50%); font-size: .75rem; font-weight: 500; color: var(--ink); white-space: nowrap; background: rgba(255, 255, 255, .85); padding: 0 2px; }
.bchart-col.is-last .bchart-val, .bchart-few .bchart-val, .bchart-plot:focus .bchart-val, .bchart-plot:hover .bchart-val { display: block; }
.bchart-many.bchart-plot:focus .bchart-col:not(.is-last) .bchart-val, .bchart-many.bchart-plot:hover .bchart-col:not(.is-last) .bchart-val { font-size: .68rem; }  /* smaller, still bold */
.bchart-val-lift { display: none !important; }
/* The issue's chart in its half-width card: a shorter plot, as on the board. */
.dc-out .bchart-plot { grid-template-rows: 160px auto; }
.bchart-xs { grid-column: 2; display: flex; margin: 6px 0 0; padding: 0; list-style: none; font-size: .75rem; color: var(--muted); }
.bchart-xs li { flex: 1 1 0; min-width: 0; text-align: center; }
.bchart-cap { margin: 12px 0 0; font-size: .925rem; color: var(--muted); }
.bchart-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 4px; padding: 0; list-style: none; font-size: .925rem; }
.bchart-key li { display: inline-flex; align-items: center; gap: 8px; }
.bchart-key .sw { display: inline-block; width: 14px; height: 14px; border-radius: 2px; }
.figlink { margin: 8px 0 14px; font-size: .925rem; }
.figlink a { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 560px) {
  .bchart-plot { grid-template-rows: 190px auto; }
  .bchart-many .bchart-xs li.minor { visibility: hidden; }
  .bchart-col.is-last .bchart-val { left: auto; right: 0; transform: none; }
  /* The latest value, end-aligned, spans the columns beside it: it rises clear of the tallest of them. */
  .bchart-many .bchart-col.has-lift .bchart-val:not(.bchart-val-lift) { display: none; }
  .bchart-many .bchart-col.has-lift .bchart-val-lift { display: block !important; }
}
/* At 320 two value labels side by side would touch: a smaller label keeps a gap between them. */
@media (max-width: 360px) { .bchart-few .bchart-val { font-size: .68rem; } }

/* ---- tables on these pages: figures right-aligned; on a phone every table stacks label over value (front.css) ---- */
.dc-table table.data th, .dc-table table.data td { vertical-align: top; }
.dc-table .table-scroll { margin-bottom: 0; }
.dc-table thead th { vertical-align: bottom; }
.dc-table td.nowrap { white-space: nowrap; }
/* The issue's outstanding table sits in a half-width card: no 640px floor, so its last column stays in view. */
.dc-out .table-scroll table.data { min-width: 0; }
.dc-out table.data th, .dc-out table.data td { padding-left: 8px; padding-right: 8px; }
.dc-out table.data tbody th[scope="row"], .dc-history table.data tbody th[scope="row"] { font-weight: 600; }
/* The row-header column is shaded, as on the board (a phone shows cards instead). */
@media (min-width: 641px) { .dc-table table.data tbody th[scope="row"] { background: var(--surface); } }
/* On a phone the latest year's card is outlined in ink, as on the board. */
@media (max-width: 640px) { .dc-history .stack tbody tr:first-child { border-color: var(--ink); } }
.dc-history tbody tr:first-child > * { font-weight: 500; color: var(--ink); }
.dc-latest { margin-left: 6px; vertical-align: 1px; }
.dc-issues thead th:first-child { width: 30%; }
@media (max-width: 640px) {
  .dc-table td.nowrap { white-space: normal; }
  .stack-wrap .stack td.num > span, .stack-wrap .stack td.num { text-align: right; }
  .stack-wrap .stack td.num::before { text-align: left; }
}
.tablefoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-top: 8px; }
.tablefoot .rows { margin: 0; font-size: .925rem; color: var(--muted); }
.tablefoot .pager { margin: 0; }
.pager .off { color: var(--muted); }

/* ---- Earlier and other issues: a fold, closed when there are many ---- */
details.dc-fold { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 18px; }
details.dc-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px 20px; cursor: pointer; list-style: none; }
details.dc-fold > summary::-webkit-details-marker { display: none; }
details.dc-fold > summary h2 { margin: 0; font-size: 1.25rem; }
.dc-fold-count { color: var(--muted); font-size: .925rem; }
details.dc-fold > summary .chev { margin-left: auto; align-self: center; color: var(--muted); }
.dc-fold-body { padding: 0 20px 16px; }
.dc-fold-list { margin: 0; padding: 0; list-style: none; }
.dc-fold-list li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dc-fold-list li > a { display: block; overflow-wrap: anywhere; }
.dc-fold-list.cols { column-count: 2; column-gap: 40px; }
@media (max-width: 560px) {
  .dc-fold-list.cols { column-count: 1; }
  details.dc-fold > summary { padding: 14px 16px; }
  .dc-fold-body { padding: 0 16px 14px; }
}

/* ---- Bond search: four tiles (one stat line on a phone), the toolbar, no-results chips ---- */
.bond-tiles { margin-bottom: 18px; }
.bond-tiles .figure { font-size: 1.6rem; }
.bond-line { display: none; }
@media (max-width: 640px) {
  .bond-tiles { display: none; }
  .bond-line { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 14px; }
  .bond-line > summary { display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-size: .9375rem; cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }
  .bond-line > summary::-webkit-details-marker { display: none; }
  .bond-line > summary .chev { margin-left: auto; color: var(--primary); }
  .bond-line dl { margin: 0; padding: 0 14px 12px; }
  /* Label, then the short figure with the exact one under it, as on the board. */
  .bond-line dl div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
  .bond-line dt { color: var(--muted); font-size: .875rem; }
  .bond-line dd { margin: 0; font-weight: 400; font-variant-numeric: tabular-nums; }
  .bond-line .bl-short { font-weight: 500; }
  .bond-line .bl-short, .bond-line .bl-exact { display: block; }
  .bond-line .bl-exact { font-size: .8rem; font-weight: 400; color: var(--muted); }
}
.bond-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 0 0 18px; min-width: 0; }
.bt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin: 0 0 14px; position: relative; }
.bt-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; font-weight: 500; color: var(--primary); background: #fff; border: 1px solid var(--primary); border-radius: 4px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bt-btn:hover { background: var(--surface); color: var(--primary-dark); }
.bt-search { display: flex; flex: 0 1 320px; min-width: 0; }
.bt-search .bt-field { position: relative; flex: 1 1 auto; min-width: 0; }
.bt-search .bt-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.bt-search input { width: 100%; min-width: 0; height: 40px; padding: 0 10px 0 34px; font: inherit; border: 1px solid var(--muted); border-right: 0; border-radius: 4px 0 0 4px; }
.bt-search .bt-btn { border-radius: 0 4px 4px 0; }
.bt select { height: 40px; font: inherit; padding: 0 8px; border: 1px solid var(--muted); border-radius: 4px; background: #fff; max-width: 100%; }
.bt-status { flex: 1 1 160px; min-width: 0; margin: 0; font-size: .875rem; color: var(--muted); }  /* takes the room left and wraps, so Export CSV keeps the row */
.bt-end { margin-left: auto; display: flex; gap: 8px; }
/* After the export dialog closes, Export CSV lands clear of the top edge with its focus ring whole (HUB-R4-1). */
#bonds-export { scroll-margin-top: 80px; }
.bt-adv { position: static; }
/* From 992 px the filters panel opens under its own button, as on the board, 600 px wide so the Show
   select reads in full; below that it spans the toolbar (the base rule), which keeps it on screen. */
@media (min-width: 992px) {
  .bt-adv { position: relative; }
  .bt-adv .bt-panel { left: 0; right: auto; width: 600px; max-width: calc(100vw - 48px); }
}
.bt-adv > summary { list-style: none; }
.bt-adv > summary::-webkit-details-marker { display: none; }
.bt-adv[open] > summary { background: var(--surface); }
.bt-panel { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 8px; max-width: 600px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 16px 18px; }
.bt-panel h2 { font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.bt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.bt-fields > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bt-fields label { font-weight: 500; color: var(--ink); }
.bt-fields input, .bt-fields select { width: 100%; height: 40px; font: inherit; padding: 0 10px; border: 1px solid var(--muted); border-radius: 4px; background: #fff; }
.bt-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bt-narrow { display: none; }
@media (max-width: 640px) {
  .bond-box { padding: 12px; }
  .bt-search { flex: 1 1 100%; }
  .bt-search .bt-btn { padding: 0 12px; }
  .bt-btn { padding: 0 11px; gap: 6px; }
  .bt select { padding: 0 4px; }
  .bt-wide { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bt-narrow { display: inline; }
  .bt-end { margin-left: 0; }
  .bt-status { flex: 1 1 100%; order: 8; }  /* under the buttons, which stay on one row as on the board */
  .dc-bonds .stack-wrap tbody th[scope="row"] a { font-weight: 600; }
  /* The Filters button keeps its place; its panel opens over the rows below, as on the board. */
  .bt-panel { padding: 14px; }
  .bt-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) { .bt-search .bt-ico-only { display: none; } }
@media (max-width: 640px) { .bt-search .bt-btn .bt-wide-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* At 320 the whole placeholder fits: the box drops its search glass (the button beside it has one). */
@media (max-width: 360px) { .bt-search .bt-field svg { display: none; } .bt-search input { padding-left: 10px; } }
.dc-notice { display: flex; align-items: flex-start; gap: 10px; }
.dc-notice-ico { flex: none; margin-top: 2px; color: var(--ink); }
.bond-none { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: 18px 0 4px; border-top: 1px solid var(--line); }
.bond-none-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.bond-none h2 { font-size: 1.15rem; margin: 10px 0 12px; }
.chips-h { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 500; color: var(--muted); margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.chip:hover { border-color: var(--primary); color: var(--ink); }
.chip-x { color: var(--ink); font-size: 1.1rem; line-height: 1; }
.chip-actions { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
@media (max-width: 560px) { .bond-none { grid-template-columns: minmax(0, 1fr); } .bond-none-ico { display: none; } }
.dc-bonds table.data th[scope="col"] { vertical-align: bottom; }
.dc-bonds table.data td, .dc-bonds table.data tbody th { vertical-align: top; }
.dc-bonds table.data tbody th[scope="row"] { background: var(--surface); }
.dc-bonds table.data a.sort { text-decoration: none; color: var(--ink); white-space: nowrap; }
.dc-bonds table.data th:not([aria-sort]) a.sort::after { content: " \21C5"; color: var(--muted); font-size: .8em; }
.dc-bonds .grid-table table.data { min-width: 0; }
/* The server's table (no script, or before the grid's rows arrive) fits 1440 as the grid does: its
   cells and minimum widths (grids.js FIT_MIN), headings that wrap, and names that take the rest. */
@media (min-width: 641px) {
  .dc-bonds [data-grid-server] table.data { font-size: .875rem; }
  .dc-bonds [data-grid-server] table.data th, .dc-bonds [data-grid-server] table.data td { padding-left: 8px; padding-right: 8px; }
  .dc-bonds [data-grid-server] table.data a.sort { white-space: normal; }
  .dc-bonds [data-grid-server] thead th:nth-child(-n+2) { width: 140px; }
  .dc-bonds [data-grid-server] thead th:nth-child(3) { width: 66px; }
  .dc-bonds [data-grid-server] thead th:nth-child(4), .dc-bonds [data-grid-server] thead th:nth-child(9) { width: 102px; }
  .dc-bonds [data-grid-server] thead th:nth-child(5), .dc-bonds [data-grid-server] thead th:nth-child(6),
  .dc-bonds [data-grid-server] thead th:nth-child(7), .dc-bonds [data-grid-server] thead th:nth-child(10) { width: 106px; }
  .dc-bonds [data-grid-server] thead th:nth-child(8) { width: 60px; }
}
@media (max-width: 640px) {
  .dc-bonds .stack-wrap .stack tbody th[scope="row"] { background: none; }
}

/* ---- Issue: terms, the outstanding chart beside them, costs grouped by role ---- */
.terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.terms-grid > div { padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.terms-grid > div.big { border-top: 0; padding-top: 0; }
.terms-grid dt { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); margin: 0 0 4px; }
.terms-grid dd { margin: 0; color: var(--ink); }
.terms-grid .big dd { font-size: 2rem; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; }
.meter { display: block; height: 10px; margin: 8px 0 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: var(--pc); background: var(--header); }
.terms-legend { display: flex; flex-direction: column; gap: 2px; font-size: .925rem; }
.terms-legend span { display: inline-flex; align-items: center; gap: 8px; }
.terms-legend .sw { width: 10px; height: 10px; border-radius: 2px; background: var(--header); }
.terms-legend .sw.rest { background: var(--line); }
@media (max-width: 560px) {
  .terms-grid { grid-template-columns: minmax(0, 1fr); }
  .terms-grid > div.big + div.big { border-top: 0; padding-top: 4px; }
  .terms-grid .big dd { font-size: 1.6rem; }
}
.cost-lead { margin: 0 0 14px; }
.cost-lead p { margin: 0; }
table.costs { width: 100%; }
table.costs th, table.costs td { vertical-align: top; }
table.costs col.c1 { width: 28%; }
table.costs col.c2 { width: 35%; }
table.costs tbody th.grp, table.costs tbody td.grp { background: #fff; border-top: 12px solid #fff; font-weight: 600; color: var(--ink); vertical-align: middle; }
table.costs .grp-n { font-weight: 400; color: var(--muted); font-size: .875rem; }
table.costs .grp-share { display: flex; align-items: center; gap: 14px; }
table.costs .grp-share .meter { flex: 1 1 auto; margin: 0; }
table.costs .grp-pct { flex: none; width: 3.5em; text-align: right; font-weight: 400; font-size: .875rem; font-variant-numeric: tabular-nums; }
table.costs .not-added { font-weight: 400; color: var(--muted); font-size: .875rem; }
table.costs tr.grp-sim td { padding-top: 0; font-size: .875rem; color: var(--muted); background: #fff; }  /* the line under its group row */
table.costs tr:has(+ tr.grp-sim) > * { border-bottom: 0; }
table.costs tbody th.fee { padding-left: 26px; font-weight: 400; background: transparent; }  /* unshaded, as on the board */
table.costs .counted, .cost-list .counted { display: inline-block; margin: 4px 0 0; padding: 1px 8px; border: 1px solid var(--ink); border-radius: 3px; font-size: .78rem; color: var(--ink); }
table.costs tfoot th, table.costs tfoot td { background: #fff; }
table.costs tfoot tr.listed > * { border-top: 2px solid var(--ink); font-weight: 400; }
table.costs tfoot tr.issuer > * { font-weight: 700; }
.cost-note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.cost-list { display: none; }
@media (max-width: 640px) {
  .cost-table { display: none; }
  .cost-list { display: block; }
}
.cost-list details { border-top: 1px solid var(--line); }
.cost-list summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.cost-list summary::-webkit-details-marker { display: none; }
.cost-list .grp-name { font-weight: 600; color: var(--ink); }
.cost-list .grp-n { font-weight: 400; color: var(--muted); font-size: .875rem; }
.cost-list summary .chev { grid-column: 2; grid-row: 1; color: var(--muted); }
.cost-list .grp-share { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.cost-list .grp-share .meter { flex: 1 1 auto; margin: 0; }
.cost-list .grp-pct { font-size: .875rem; }
.cost-list .grp-figs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.cost-list .grp-figs strong { color: var(--ink); }
.cost-list .grp-sim { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.grp-sim .fig { white-space: nowrap; }  /* "$0.76 per $1,000" never splits at 320 px */
.cost-list .unit { font-size: .8rem; color: var(--muted); font-weight: 400; }
.cost-list ul { list-style: none; margin: 0 0 12px; padding: 0; }
.cost-list li { border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; margin: 0 0 10px; }
.cost-list li dl { margin: 0; }
.cost-list li dl div { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cost-list li dl div:last-child { border-bottom: 0; }
.cost-list li dt { color: var(--muted); font-size: .85rem; }
.cost-list li dd { margin: 0; overflow-wrap: anywhere; }
.cost-list li dd.num { text-align: right; font-variant-numeric: tabular-nums; }
.cost-list .totals { border-top: 2px solid var(--ink); padding: 10px 0 0; margin: 0; }
.cost-list .totals div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.cost-list .totals .issuer { display: block; font-weight: 700; }
.cost-list .totals .issuer strong { font-weight: inherit; }
.cost-list .totals .issuer dd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.cost-list .totals dt, .cost-list .totals dd { margin: 0; }

/* The export dialog (board BONDS-export): drawn by the server over the inert page (?export=1). */
.bx-shade { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 20, .45); }
.bx { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, .28); }
.bx:focus, .bx:focus-visible { outline: none; }  /* focused on load (autofocus) so the next Tab reaches its links */
.bx-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px 14px; border-bottom: 3px solid var(--primary); }
.bx-head h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.bx-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.bx-x:hover { color: var(--primary); border-color: var(--primary); }
.bx-body { padding: 16px 18px 6px; }
.bx-body > p { margin: 0 0 12px; }
.bx-opts { list-style: none; margin: 0; padding: 0; }
.bx-opts li { margin: 0 0 10px; }
.bx-opt { display: block; padding: 14px 18px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 4px; color: var(--ink); text-decoration: none; }  /* the whole card is the link (board BONDS-export) */
.bx-opt:hover { background: var(--surface); color: var(--ink); }
.bx-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.bx-opt:hover .bx-name { color: var(--primary); }
.bx-n { display: block; margin: 2px 0 0 24px; font-size: .875rem; color: var(--muted); }
.bx-foot { display: flex; justify-content: flex-end; margin-top: 8px; padding: 12px 18px; background: var(--surface); border-radius: 0 0 8px 8px; }
@media (max-width: 640px) { .bx { width: calc(100vw - 48px); } .bx-head, .bx-body, .bx-foot { padding-left: 16px; padding-right: 16px; } .bx-opt { padding: 12px 14px; } }

@media print {
  .bond-line, .cost-list, .bt, .bx, .bx-shade { display: none !important; }
  /* Fills are the figures: print them (browsers drop backgrounds by default). */
  .bchart-seg, .meter-fill, .split-seg, .split-key, .bchart-key .sw, .terms-legend .sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* The totals print once, at the table's end, not again at the foot of every page. */
  table.costs tfoot { display: table-row-group; }
  .bond-tiles, .cost-table { display: grid !important; }
  .cost-table { display: block !important; }
  details.dc-fold:not([open]) > .dc-fold-body { display: block; }
}