/* Document Centre and online forms (inc/document-centre.php).
   Same language as the banners: navy glass, the gold diagonal rule, serif titles closed with a gold full stop. */

.dc-page { max-width: 1180px; }
.dc { display: grid; gap: 44px; }

/* ---------- numbers ---------- */
.dc-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 4px solid var(--bb-gold); background: linear-gradient(150deg, #123f86, #0a2c6b 55%, #061b44); color: #fff; box-shadow: 0 22px 50px rgba(6, 27, 68, .18); }
.dc-stats li { display: grid; gap: 2px; padding: 22px 24px; border-left: 1px solid rgba(255, 255, 255, .14); }
.dc-stats li:first-child { border-left: 0; }
.dc-stats strong { font: 700 clamp(30px, 4vw, 42px)/1 Georgia, "Times New Roman", serif; color: var(--bb-gold-2); }
.dc-stats span { color: #c9d8ee; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- online form cards ---------- */
.dc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 22px; }
.dc-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-content: start; padding: 22px; overflow: hidden; border: 1px solid var(--bb-line); border-top: 4px solid var(--bb-gold); background: #fff; color: var(--bb-ink); box-shadow: 0 10px 28px rgba(6, 27, 68, .06); transition: transform .2s var(--bb-ease), box-shadow .2s ease, border-color .2s ease; }
.dc-card:hover, .dc-card:focus-visible { transform: translateY(-4px); border-color: #b8c9e2; box-shadow: 0 22px 44px rgba(6, 27, 68, .14); }
.dc-card-body { display: grid; gap: 6px; }
.dc-card-body small { color: var(--bb-gold-ink); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dc-card-body strong { color: var(--bb-navy); font: 700 21px/1.2 Georgia, "Times New Roman", serif; }
.dc-card-body > span { color: var(--bb-muted); font-size: 15px; line-height: 1.5; }
.dc-card-body em { color: var(--bb-muted); font-size: 13px; font-style: normal; font-weight: 700; }
.dc-card-go { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--bb-line); color: var(--bb-navy); font-weight: 800; }
.dc-card:hover .dc-card-go .ic { transform: translateX(4px); }
.dc-card-go .ic { transition: transform .2s var(--bb-ease); }
.dc-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.dc-how li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--bb-paper); }
.dc-how b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--bb-navy); color: var(--bb-gold-2); font-family: Georgia, serif; }
.dc-how strong { display: block; color: var(--bb-navy); }
.dc-how span { color: var(--bb-muted); font-size: 14px; line-height: 1.45; }
.dc-track-link { margin: 18px 0 0; }
.dc-track-link a { display: inline-flex; gap: 8px; align-items: center; color: var(--bb-navy); font-weight: 800; border-bottom: 2px solid var(--bb-gold); }

/* ---------- library ---------- */
.dc-lib { border-top: 7px solid var(--bb-gold); background: linear-gradient(150deg, #06182f 0%, #0a376f 100%); color: #fff; box-shadow: 0 28px 65px rgba(7, 23, 44, .18); }
.dc-lib-intro { position: relative; padding: 40px 42px 22px; overflow: hidden; }
.dc-lib-intro::after { content: ""; position: absolute; right: -42px; top: 32px; width: 220px; height: 18px; transform: rotate(-18deg); background: linear-gradient(90deg, var(--bb-sky), var(--bb-navy-1), var(--bb-gold)); opacity: .9; }
.dc-lib-intro h2 { margin: 8px 0 12px; color: #fff; }
.dc-lib-intro .bb-eyebrow { color: var(--bb-gold-2); }
.dc-lib-intro p { max-width: 700px; margin: 0; color: #d6e4f3; }
.dc-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 180px 170px auto; gap: 12px; align-items: end; padding: 22px 42px; background: rgba(2, 12, 28, .42); border-block: 1px solid rgba(255, 255, 255, .14); }
.dc-search { position: relative; display: block; }
.dc-search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bb-navy); pointer-events: none; }
.dc-search input { width: 100%; min-height: 52px; padding: 0 16px 0 44px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 0; background: #fff; color: var(--bb-ink); font: 16px Arial, sans-serif; }
.dc-select { display: grid; gap: 6px; color: #fff; font-size: 11.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dc-select select { min-height: 52px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 0; background: #fff; color: var(--bb-ink); font: 15px Arial, sans-serif; }
.dc-view { display: flex; }
.dc-view button { min-height: 52px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 0; background: transparent; color: #fff; font-weight: 800; cursor: pointer; }
.dc-view button + button { border-left: 0; }
.dc-view button.is-active, .dc-view button:hover { background: var(--bb-gold); border-color: var(--bb-gold); color: #0a2456; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 18px 42px 0; }
.dc-chips button { min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dc-chips button:hover { background: rgba(255, 255, 255, .16); }
.dc-chips button.is-active { background: var(--bb-gold); border-color: var(--bb-gold); color: #0a2456; }
.dc-sep { width: 1px; height: 24px; margin: 0 6px; background: rgba(255, 255, 255, .25); }
.dc-saved-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.dc-saved-chip .ic { width: 1.05em; height: 1.05em; }
.dc-saved-chip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255, 255, 255, .2); font-size: 12px; }
.dc-saved-chip.is-active b { background: rgba(10, 36, 86, .18); }
.dc-count { margin: 0; padding: 18px 42px 0; color: #c9d9ea; }
.dc-count strong { color: #fff; font-size: 24px; }
.dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 42px 42px; }
.dc-grid.is-list { grid-template-columns: 1fr; gap: 8px; }

.dc-doc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .055); transition: background .2s ease, border-color .2s ease, transform .2s var(--bb-ease); }
.dc-doc::after { content: ""; position: absolute; right: -38px; bottom: -26px; width: 116px; height: 72px; transform: rotate(-22deg); background: linear-gradient(90deg, var(--bb-sky) 0 36%, var(--bb-navy-1) 36% 68%, var(--bb-gold) 68%); opacity: .2; pointer-events: none; }
.dc-doc:hover { background: rgba(255, 255, 255, .095); border-color: rgba(255, 255, 255, .32); transform: translateY(-2px); }
.dc-doc[hidden] { display: none; }
.dc-doc.is-saved { border-color: var(--bb-gold); box-shadow: inset 4px 0 0 var(--bb-gold); }
.dc-doc-top { display: flex; align-items: center; gap: 10px; }
.dc-fmt { padding: 5px 10px; background: var(--bb-gold); color: #0a2456; font-size: 11px; font-weight: 950; letter-spacing: .1em; }
.dc-cat { color: #bcd0e5; font-size: 12.5px; font-weight: 700; }
.dc-save { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.dc-save:hover { background: rgba(255, 255, 255, .14); }
.dc-save[aria-pressed="true"] { background: var(--bb-gold); border-color: var(--bb-gold); color: #0a2456; }
.dc-save[aria-pressed="true"] .ic { fill: currentColor; }
.dc-doc h3 { margin: 6px 0 0; color: #fff; font-size: 22px; line-height: 1.2; }
.dc-doc p { margin: 0; color: #cddced; font-size: 15px; }
.dc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: #a9c6e3; font-size: 13px; }
.dc-meta li + li::before { content: "·"; margin-right: 14px; color: var(--bb-gold-2); }
.dc-doc-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }

.dc-grid.is-list .dc-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 14px 20px; }
.dc-grid.is-list .dc-doc p { display: none; }
.dc-grid.is-list .dc-doc-top { grid-column: 1; }
.dc-grid.is-list .dc-doc h3 { grid-column: 1; font-size: 18px; margin: 0; }
.dc-grid.is-list .dc-meta { grid-column: 1; }
.dc-grid.is-list .dc-doc-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; border: 0; }

/* ---------- buttons ---------- */
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 2px solid var(--bb-navy); border-radius: 4px; background: var(--bb-navy); color: #fff; font: 800 14.5px Arial, sans-serif; text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s var(--bb-ease); }
.dc-btn:hover, .dc-btn:focus-visible { background: var(--bb-navy-1); border-color: var(--bb-navy-1); color: #fff; transform: translateY(-1px); }
.dc-btn--gold { border-color: var(--bb-gold); background: var(--bb-gold); color: #0a2456; }
.dc-btn--gold:hover, .dc-btn--gold:focus-visible { border-color: var(--bb-gold-2); background: var(--bb-gold-2); color: #0a2456; }
.dc-btn--ghost { background: transparent; border-color: currentColor; color: var(--bb-navy); }
.dc-btn--ghost:hover, .dc-btn--ghost:focus-visible { background: var(--bb-navy); border-color: var(--bb-navy); color: #fff; }
.dc-lib .dc-btn { border-color: var(--bb-gold); background: var(--bb-gold); color: #0a2456; }
.dc-lib .dc-btn:hover { background: var(--bb-gold-2); }
.dc-lib .dc-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.dc-lib .dc-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.dc-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; background: transparent; color: #fff; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.dc-icon:hover, .dc-icon:focus-visible, .dc-icon.is-done { background: #fff; color: var(--bb-navy); }
.dc-lib :focus-visible, .dc :focus-visible { outline: 3px solid var(--bb-gold-2); outline-offset: 2px; }

.dc-empty { margin: 0 42px 42px; padding: 30px; border: 1px dashed rgba(255, 255, 255, .4); text-align: center; }
.dc-empty p { margin: 6px 0 16px; color: #cddced; }
.dc-empty[hidden] { display: none; }

/* ---------- preview ---------- */
.dc-preview { width: min(980px, calc(100% - 28px)); height: min(86vh, 900px); padding: 0; border: 0; background: #fff; box-shadow: 0 40px 120px rgba(4, 20, 40, .5); }
.dc-preview[open] { display: flex; flex-direction: column; }
.dc-preview::backdrop { background: rgba(3, 14, 29, .75); backdrop-filter: blur(6px); }
.dc-preview-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 4px solid var(--bb-gold); background: var(--bb-navy-deep); color: #fff; }
.dc-preview-bar strong { flex: 1; font: 700 17px Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-preview-bar .dc-btn { min-height: 38px; border-color: rgba(255, 255, 255, .5); color: #fff; }
.dc-preview-bar .dc-icon { width: 38px; height: 38px; font-size: 26px; }
.dc-preview iframe { flex: 1; width: 100%; border: 0; }

/* ---------- forms ---------- */
.dc-intro { max-width: 760px; margin-bottom: 20px; font-size: 18px; color: var(--bb-muted); }
.dc-intro p { margin: 0; }
.dc-formwrap { max-width: 880px; scroll-margin-top: 110px; }
.dc-steps { display: flex; margin: 0 0 22px; padding: 0; list-style: none; border: 1px solid var(--bb-line); background: #fff; overflow-x: auto; }
.dc-steps li { flex: 1 0 auto; border-left: 1px solid var(--bb-line); }
.dc-steps li:first-child { border-left: 0; }
.dc-steps button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--bb-muted); font: 800 14px Arial, sans-serif; text-align: left; cursor: pointer; }
.dc-steps button b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bb-line); color: var(--bb-navy); font-size: 13px; }
.dc-steps button:disabled { cursor: default; opacity: .6; }
.dc-steps .is-current button { border-bottom-color: var(--bb-gold); color: var(--bb-navy); background: var(--bb-paper); }
.dc-steps .is-current b { background: var(--bb-navy); color: var(--bb-gold-2); }
.dc-steps .is-done b { background: var(--bb-gold); color: #0a2456; }
.dc-draft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; padding: 14px 18px; border-left: 5px solid var(--bb-gold); background: #fff9e6; color: var(--bb-ink); }
.dc-draft[hidden] { display: none; }
.dc-draft button { margin-left: 8px; padding: 8px 14px; border: 2px solid var(--bb-navy); border-radius: 4px; background: var(--bb-navy); color: #fff; font-weight: 800; cursor: pointer; }
.dc-draft button + button { background: transparent; color: var(--bb-navy); }
.dc-error-summary { margin-bottom: 18px; padding: 16px 20px; border-left: 5px solid #b3261e; background: #fdeceb; color: #5f1410; }
.dc-error-summary ul { margin: 8px 0 0; padding-left: 20px; }
.dc-error-summary a { color: inherit; font-weight: 800; text-decoration: underline; }
.dc-error-summary[hidden] { display: none; }

.dc-form { padding: 30px; border: 1px solid var(--bb-line); border-top: 5px solid var(--bb-gold); background: #fff; box-shadow: 0 18px 44px rgba(6, 27, 68, .08); }
.dc-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dc-step[hidden] { display: none; }
.dc-step > legend { grid-column: 1 / -1; display: grid; gap: 4px; margin-bottom: 8px; padding: 0; color: var(--bb-navy); font: 700 clamp(24px, 3vw, 32px)/1.15 Georgia, "Times New Roman", serif; }
.dc-step-count { color: var(--bb-gold-ink); font: 800 12px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.dc-field { grid-column: 1 / -1; display: grid; gap: 7px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.dc-field--half { grid-column: span 1; }
.dc-field[hidden] { display: none; }
.dc-field label, .dc-field > legend { padding: 0; color: var(--bb-ink); font-size: 15px; font-weight: 800; line-height: 1.35; }
.dc-field > legend { margin-bottom: 4px; }
.dc-req { color: #b3261e; }
.dc-help { color: var(--bb-muted); font-size: 13.5px; line-height: 1.45; }
.dc-field input[type=text], .dc-field input[type=email], .dc-field input[type=tel], .dc-field input[type=date], .dc-field input[type=number], .dc-field select, .dc-field textarea, .dc-track input { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #b9c8dc; border-radius: 4px; background: #fff; color: var(--bb-ink); font: 16px Arial, sans-serif; transition: border-color .15s, box-shadow .15s; }
.dc-field textarea { min-height: 110px; resize: vertical; }
.dc-field input:focus, .dc-field select:focus, .dc-field textarea:focus, .dc-track input:focus { outline: 0; border-color: var(--bb-navy); box-shadow: 0 0 0 3px rgba(247, 194, 27, .55); }
.dc-field.has-error input:not([type=checkbox]):not([type=radio]), .dc-field.has-error select, .dc-field.has-error textarea { border-color: #b3261e; }
.dc-error { margin: 0; color: #b3261e; font-size: 14px; font-weight: 700; }
.dc-error[hidden] { display: none; }
.dc-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.dc-options--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dc-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bb-line); border-radius: 4px; background: #fff; font-weight: 600 !important; cursor: pointer; transition: border-color .15s, background .15s; }
.dc-choice:hover { border-color: #9fb7d6; }
.dc-choice:has(input:checked) { border-color: var(--bb-navy); background: #f3f7fd; box-shadow: inset 4px 0 0 var(--bb-gold); }
.dc-choice input { flex: none; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--bb-navy); }
.dc-choice--agree { font-weight: 800 !important; }
.dc-hp { position: absolute; left: -9999px; }
.dc-lead { grid-column: 1 / -1; margin: 0; color: var(--bb-muted); }

.dc-review { grid-column: 1 / -1; display: grid; gap: 14px; }
.dc-review section { border: 1px solid var(--bb-line); background: var(--bb-paper); }
.dc-review h3 { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--bb-line); background: #fff; color: var(--bb-navy); font-size: 17px; }
.dc-review h3 button { border: 0; background: none; color: var(--bb-navy); font: 800 14px Arial, sans-serif; text-decoration: underline; cursor: pointer; }
.dc-review dl { display: grid; margin: 0; }
.dc-review dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; padding: 10px 16px; border-top: 1px solid var(--bb-line); }
.dc-review dl div:first-child { border-top: 0; }
.dc-review dt { color: var(--bb-muted); font-size: 14px; font-weight: 700; }
.dc-review dd { margin: 0; color: var(--bb-ink); font-weight: 600; overflow-wrap: anywhere; }
.dc-upload { padding: 18px; border: 1px dashed #9fb7d6; background: var(--bb-paper); }
.dc-upload input[type=file] { padding: 10px; border: 1px solid #b9c8dc; background: #fff; font: 15px Arial, sans-serif; }
.dc-filelist { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.dc-filelist span { color: var(--bb-muted); }
.dc-lock { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--bb-muted); font-size: 13.5px; }
.dc-declaration { grid-column: 1 / -1; display: grid; gap: 14px; padding: 20px; border-left: 5px solid var(--bb-gold); background: #fff9e6; }
.dc-declaration > p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.dc-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bb-line); }
.dc-nav [hidden] { display: none; }
.dc-nav-note { margin: 0 auto 0 4px; color: var(--bb-muted); font-size: 14px; font-weight: 700; }
.dc-nav [data-dc-prev] { color: var(--bb-navy); }
.dc-nav [data-dc-next], .dc-nav [data-dc-send] { margin-left: auto; }
.dc-nav-note + [data-dc-next], .dc-nav-note + [data-dc-send] { margin-left: 0; }

/* ---------- receipt, tracking, notices ---------- */
.dc-receipt { padding: 32px; border: 1px solid var(--bb-line); border-top: 5px solid var(--bb-gold); background: #fff; box-shadow: 0 18px 44px rgba(6, 27, 68, .08); }
.dc-receipt[hidden] { display: none; }
.dc-receipt-head { display: flex; gap: 16px; align-items: center; }
.dc-receipt-head h2 { margin: 4px 0 0; }
.dc-ref { display: inline-flex; flex-direction: column; gap: 2px; margin: 20px 0 6px; padding: 14px 22px; background: linear-gradient(150deg, #123f86, #061b44); color: #c9d8ee; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 -4px 0 var(--bb-gold); }
.dc-ref strong { color: var(--bb-gold-2); font: 700 26px Georgia, serif; letter-spacing: .06em; }
.dc-receipt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dc-notice { margin: 16px 0; padding: 16px 20px; border-left: 5px solid var(--bb-gold); background: #fff9e6; color: var(--bb-ink); }
.dc-notice p { margin: 4px 0 0; }
.dc-notice--warn { border-left-color: #b3261e; background: #fdeceb; color: #5f1410; }
.dc-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin-top: 20px; padding: 26px; border: 1px solid var(--bb-line); border-top: 5px solid var(--bb-gold); background: #fff; }
.dc-track .dc-field, .dc-track button { grid-column: auto; }
.dc-track button { grid-column: 1 / -1; justify-self: start; }
.dc-status { max-width: 760px; margin-top: 20px; padding: 28px; background: linear-gradient(150deg, #123f86, #0a2c6b 55%, #061b44); color: #fff; box-shadow: inset 0 -5px 0 var(--bb-gold); }
.dc-status h2 { margin: 6px 0 8px; color: #fff; }
.dc-status .bb-eyebrow { color: var(--bb-gold-2); }
.dc-status p { color: #d6e4f3; margin: 0; }
.dc-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.dc-timeline li { padding-top: 12px; border-top: 5px solid rgba(255, 255, 255, .2); color: #a9c6e3; font-size: 13px; font-weight: 800; }
.dc-timeline li.is-done { border-top-color: var(--bb-gold); color: #fff; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .dc-stats { grid-template-columns: repeat(2, 1fr); }
  .dc-stats li:nth-child(3) { border-left: 0; }
  .dc-stats li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .dc-toolbar { grid-template-columns: 1fr 1fr; padding: 20px 22px; }
  .dc-search { grid-column: 1 / -1; }
  .dc-view { grid-column: 1 / -1; }
  .dc-view button { flex: 1; }
  .dc-lib-intro, .dc-chips, .dc-count { padding-left: 22px; padding-right: 22px; }
  .dc-grid { grid-template-columns: 1fr; padding: 18px 22px 30px; }
  .dc-empty { margin: 0 22px 30px; }
  .dc-saved-chip { margin-left: 0; }
  .dc-how { grid-template-columns: 1fr; }
  .dc-grid.is-list .dc-doc { grid-template-columns: 1fr; }
  .dc-grid.is-list .dc-doc-actions { grid-column: 1; grid-row: auto; padding-top: 10px; }
}
@media (max-width: 640px) {
  .dc-step, .dc-track { grid-template-columns: 1fr; }
  .dc-field--half { grid-column: 1 / -1; }
  .dc-form, .dc-receipt { padding: 22px 18px; }
  .dc-review dl div { grid-template-columns: 1fr; gap: 2px; }
  .dc-timeline { grid-template-columns: repeat(2, 1fr); }
  .dc-nav { flex-wrap: wrap; }
  .dc-nav-note { order: 3; width: 100%; margin: 0; text-align: center; }
  .dc-nav .dc-btn { flex: 1; }
  .dc-steps button span { display: none; }
  .dc-steps .is-current button span { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .dc *, .dc-card, .dc-btn { transition: none !important; } }

/* ---------- print: the receipt only ---------- */
@media print {
  body * { visibility: hidden; }
  .dc-receipt, .dc-receipt * { visibility: visible; }
  .dc-receipt { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; box-shadow: none; }
  .dc-receipt-actions { display: none; }
  .dc-ref { color: #000; background: none; box-shadow: none; border: 2px solid #000; }
  .dc-ref strong { color: #000; }
}

/* Colours that the page body styles would otherwise override inside the dark library. */
.dc-lib .dc-meta li, .dc-lib .dc-meta { color: #b9d0e8; }
.dc-lib .dc-doc p { color: #d3e1f0; }
.dc-lib .dc-count, .dc-lib .dc-count span { color: #c9d9ea; }
.dc-more { margin: 0; padding: 0 42px 42px; text-align: center; }
.dc-more[hidden], .dc-more:has([hidden]) { display: none; }
@media (max-width: 900px) { .dc-more { padding: 0 22px 30px; } }
.dc-field .dc-choice { padding: 12px 14px; font-size: 15px; line-height: 1.4; }
.dc-field .dc-choice span { font-weight: 600; }

/* Grid tracks may shrink below their content, so nothing pushes the page wider than the screen. */
.dc, .mg { grid-template-columns: minmax(0, 1fr); }
.dc > *, .mg > *, .ac > *, .dc-page > * { min-width: 0; }
.dc-account { flex-wrap: wrap; }
.dc-toolbar > *, .dc-search, .dc-select { min-width: 0; }
.dc-search input, .dc-select select { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .dc-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }