/* ==========================================================================
   Bootstrap 5.3 re-skin (WP0, shared: frozen after WP0)

   No Sass build: bootstrap.min.css is served as is and re-skinned in three
   layers. 4: --bs-* variables. 5: base elements. 6: component variables and
   the few properties Bootstrap compiles in. Existing markup (.btn-*, .table,
   .alert-*, .nav-tabs, forms, pagination) re-skins without template changes.
   ========================================================================== */

/* 4. Bootstrap mapping ----------------------------------------------------- */

:root,
[data-bs-theme="light"] {
  --bs-font-sans-serif: var(--ts-font);
  --bs-font-monospace: var(--ts-font-mono);
  --bs-body-font-family: var(--ts-font);
  --bs-body-font-size: 0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.4286;
  --bs-body-color: #123063;
  --bs-body-color-rgb: 18, 48, 99;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #0b1f45;
  --bs-emphasis-color-rgb: 11, 31, 69;
  --bs-secondary-color: #4b5b7c;
  --bs-secondary-color-rgb: 75, 91, 124;
  --bs-secondary-bg: #f0ede8;
  --bs-secondary-bg-rgb: 240, 237, 232;
  --bs-tertiary-color: #5b6883;
  --bs-tertiary-color-rgb: 91, 104, 131;
  --bs-tertiary-bg: #fbfaf8;
  --bs-tertiary-bg-rgb: 251, 250, 248;
  --bs-heading-color: #123063;
  --bs-link-color: #da007d;
  --bs-link-color-rgb: 218, 0, 125;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #b3006a;
  --bs-link-hover-color-rgb: 179, 0, 106;
  --bs-code-color: #b3006a;
  --bs-highlight-color: #123063;
  --bs-highlight-bg: #ffe3ef;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #e6e1d9;
  --bs-border-color-translucent: rgba(18, 48, 99, 0.12);
  --bs-border-radius: 5px;
  --bs-border-radius-sm: 5px;
  --bs-border-radius-lg: 10px;
  --bs-border-radius-xl: 20px;
  --bs-border-radius-xxl: 20px;
  --bs-border-radius-2xl: 20px;
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: var(--ts-shadow-md);
  --bs-box-shadow-sm: var(--ts-shadow-sm);
  --bs-box-shadow-lg: var(--ts-shadow-lg);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(18, 48, 99, 0.075);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 0.2;
  --bs-focus-ring-color: rgba(255, 0, 128, 0.2);
  --bs-form-valid-color: #1e7b2c;
  --bs-form-valid-border-color: #2f9e3d;
  --bs-form-invalid-color: #b00000;
  --bs-form-invalid-border-color: #d90000;

  /* Theme colours. Every solid takes white text except warning and light. */
  --bs-primary: #da007d;   --bs-primary-rgb: 218, 0, 125;
  --bs-secondary: #123063; --bs-secondary-rgb: 18, 48, 99;
  --bs-success: #1e7b2c;   --bs-success-rgb: 30, 123, 44;
  --bs-info: #2c4a8c;      --bs-info-rgb: 44, 74, 140;
  --bs-warning: #f2a900;   --bs-warning-rgb: 242, 169, 0;
  --bs-danger: #d90000;    --bs-danger-rgb: 217, 0, 0;
  --bs-light: #f0ede8;     --bs-light-rgb: 240, 237, 232;
  --bs-dark: #0b1f45;      --bs-dark-rgb: 11, 31, 69;

  --bs-primary-text-emphasis: #a10060;   --bs-primary-bg-subtle: #fff2f8;   --bs-primary-border-subtle: #ffc7e0;
  --bs-secondary-text-emphasis: #34466b; --bs-secondary-bg-subtle: #f4f6f9; --bs-secondary-border-subtle: #d5dbe5;
  --bs-success-text-emphasis: #1b6e28;   --bs-success-bg-subtle: #effaf0;   --bs-success-border-subtle: #b9e8be;
  --bs-info-text-emphasis: #123063;      --bs-info-bg-subtle: #f0ede8;      --bs-info-border-subtle: #e2ddd4;
  --bs-warning-text-emphasis: #7a4f00;   --bs-warning-bg-subtle: #fff8e5;   --bs-warning-border-subtle: #ffe3a3;
  --bs-danger-text-emphasis: #b00000;    --bs-danger-bg-subtle: #fff1f0;    --bs-danger-border-subtle: #ffc9c5;
  --bs-light-text-emphasis: #4b5b7c;     --bs-light-bg-subtle: #fbfaf8;     --bs-light-border-subtle: #ece8e1;
  --bs-dark-text-emphasis: #123063;      --bs-dark-bg-subtle: #e9edf3;      --bs-dark-border-subtle: #c7cfdd;
}

/* 5. Base ------------------------------------------------------------------ */

html {
  -webkit-text-size-adjust: 100%;
  /* Focus is never hidden under the sticky header (WCAG 2.4.11). */
  scroll-padding-top: 80px;
}
body {
  font-family: var(--ts-font);
  font-size: var(--ts-fs-body);
  line-height: var(--ts-lh-body);
  color: var(--ts-text);
  background: var(--ts-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.bg-body-tertiary { background: var(--ts-canvas) !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ts-text); margin-bottom: 0.5rem; }
h1, .h1 { font-size: var(--ts-fs-title); line-height: var(--ts-lh-title); font-weight: 700; letter-spacing: var(--ts-ls-title); }
h2, .h2 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.7px; }
h3, .h3 { font-size: var(--ts-fs-section); line-height: var(--ts-lh-section); font-weight: 600; letter-spacing: var(--ts-ls-section); }
h4, .h4 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.3px; }
h5, .h5 { font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); }
h6, .h6 { font-size: var(--ts-fs-body); line-height: var(--ts-lh-body); font-weight: 600; letter-spacing: 0; }
/* The one h1 on a page is its title, whatever size utility the screen gave it. */
.ts-page h1 { font-size: var(--ts-fs-title); line-height: var(--ts-lh-title); font-weight: 700; letter-spacing: var(--ts-ls-title); }
.ts-page h1 small, .ts-page h1 .small { font-weight: 500; letter-spacing: 0; }
p { margin-bottom: 0.75rem; }
small, .small { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
strong, b { font-weight: 600; }

a { color: var(--ts-link); text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 500; }
a:hover { color: var(--ts-link-hover); }

::selection { background: var(--ts-pink-200); color: var(--ts-blue-950); }

:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.text-body-secondary { color: var(--ts-text-secondary) !important; }
.text-body-tertiary, .text-muted { color: var(--ts-text-muted) !important; }
.text-success { color: var(--ts-up) !important; }
.text-danger { color: var(--ts-red-600) !important; }
.text-warning { color: var(--ts-amber-700) !important; }
.text-warning-emphasis { color: var(--ts-amber-700) !important; }
.text-info { color: var(--ts-blue-700) !important; }
.text-primary { color: var(--ts-pink-600) !important; }

code { color: var(--ts-pink-700); background: var(--ts-pink-50); padding: 1px 5px; border-radius: var(--ts-radius-xs); font-size: 0.857em; word-break: break-word; }
pre code { padding: 0; background: none; }
pre { font-size: var(--ts-fs-small); color: var(--ts-text); }
kbd { background: var(--ts-white); color: var(--ts-text-secondary); border: 1px solid var(--ts-border-button); border-bottom-width: 2px; border-radius: var(--ts-radius-sm); font-family: var(--ts-font); font-size: 11px; font-weight: 600; padding: 1px 5px; box-shadow: none; }
hr { border-color: var(--ts-border); opacity: 1; }
mark, .mark { background: var(--ts-pink-100); color: var(--ts-text); padding: 0 2px; border-radius: 2px; }

/* Aligned numbers: tables, ticks, any column of figures. Not for hero numbers. */
.ts-num, .table td.num, .table th.num { font-family: var(--ts-font-figures); }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }

/* 6. Bootstrap components -------------------------------------------------- */

/* Buttons. Hover follows the style guide (page 3): the fill becomes white with a 1px
   border in the button's own colour and Super Blue text. Danger keeps red text so the
   warning never disappears. Touch screens keep the rest state (see the hover: none block). */
.btn {
  --bs-btn-font-family: var(--ts-font);
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 20px;
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 9px;
  --bs-btn-border-radius: var(--ts-radius-sm);
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 0.45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color var(--ts-dur-1) var(--ts-ease), background-color var(--ts-dur-1) var(--ts-ease), border-color var(--ts-dur-1) var(--ts-ease), box-shadow var(--ts-dur-1) var(--ts-ease);
}
.btn:focus-visible, .btn-check:focus-visible + .btn { outline: 2px solid var(--ts-focus); outline-offset: 2px; box-shadow: none; }
.btn .bi { font-size: 16px; line-height: 1; }
.btn-sm { --bs-btn-padding-x: 12px; --bs-btn-padding-y: 5px; --bs-btn-font-size: 13px; --bs-btn-line-height: 20px; --bs-btn-border-radius: var(--ts-radius-sm); gap: 6px; }
.btn-sm .bi { font-size: 14px; }
.btn-lg { --bs-btn-padding-x: 22px; --bs-btn-padding-y: 13px; --bs-btn-font-size: 16px; --bs-btn-line-height: 20px; --bs-btn-border-radius: var(--ts-radius-sm); gap: 10px; }
.w-100.btn, .btn.w-100 { white-space: normal; }

.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #da007d; --bs-btn-border-color: #da007d;
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #da007d;
  --bs-btn-active-color: #b3006a; --bs-btn-active-bg: #fff2f8; --bs-btn-active-border-color: #b3006a;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #da007d; --bs-btn-disabled-border-color: #da007d;
}
.btn-secondary, .btn-dark {
  --bs-btn-color: #fff; --bs-btn-bg: #123063; --bs-btn-border-color: #123063;
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #123063;
  --bs-btn-active-color: #123063; --bs-btn-active-bg: #e8edf8; --bs-btn-active-border-color: #123063;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #123063; --bs-btn-disabled-border-color: #123063;
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: #1e7b2c; --bs-btn-border-color: #1e7b2c;
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #1e7b2c;
  --bs-btn-active-color: #1b6e28; --bs-btn-active-bg: #effaf0; --bs-btn-active-border-color: #1b6e28;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #1e7b2c; --bs-btn-disabled-border-color: #1e7b2c;
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: #d90000; --bs-btn-border-color: #d90000;
  --bs-btn-hover-color: #d90000; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #d90000;
  --bs-btn-active-color: #b00000; --bs-btn-active-bg: #fff1f0; --bs-btn-active-border-color: #b00000;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d90000; --bs-btn-disabled-border-color: #d90000;
}
.btn-warning {
  --bs-btn-color: #123063; --bs-btn-bg: #f2a900; --bs-btn-border-color: #f2a900;
  --bs-btn-hover-color: #7a4f00; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #b97800;
  --bs-btn-active-color: #7a4f00; --bs-btn-active-bg: #fff8e5; --bs-btn-active-border-color: #b97800;
  --bs-btn-disabled-color: #123063; --bs-btn-disabled-bg: #f2a900; --bs-btn-disabled-border-color: #f2a900;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: #2c4a8c; --bs-btn-border-color: #2c4a8c;
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #2c4a8c;
  --bs-btn-active-color: #123063; --bs-btn-active-bg: #e8edf8; --bs-btn-active-border-color: #2c4a8c;
}
.btn-light, .btn-tertiary {
  --bs-btn-color: #123063; --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #f0ede8; --bs-btn-hover-border-color: #f0ede8;
  --bs-btn-active-color: #123063; --bs-btn-active-bg: #e6e1d9; --bs-btn-active-border-color: #e6e1d9;
  --bs-btn-disabled-color: #123063; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent;
}
/* Neutral outline: the everyday secondary action */
.btn-outline-secondary, .btn-outline-dark {
  --bs-btn-color: #123063; --bs-btn-bg: #fff; --bs-btn-border-color: var(--ts-border-button);
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #123063;
  --bs-btn-active-color: #123063; --bs-btn-active-bg: #f0ede8; --bs-btn-active-border-color: #123063;
  --bs-btn-disabled-color: #123063; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--ts-border-button);
}
.btn-outline-primary {
  --bs-btn-color: #da007d; --bs-btn-bg: #fff; --bs-btn-border-color: #da007d;
  --bs-btn-hover-color: #b3006a; --bs-btn-hover-bg: #fff2f8; --bs-btn-hover-border-color: #b3006a;
  --bs-btn-active-color: #b3006a; --bs-btn-active-bg: #ffe3ef; --bs-btn-active-border-color: #b3006a;
  --bs-btn-disabled-color: #da007d; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #da007d;
}
.btn-outline-success {
  --bs-btn-color: #1e7b2c; --bs-btn-bg: #fff; --bs-btn-border-color: #2f9e3d;
  --bs-btn-hover-color: #1b6e28; --bs-btn-hover-bg: #effaf0; --bs-btn-hover-border-color: #1e7b2c;
  --bs-btn-active-color: #1b6e28; --bs-btn-active-bg: #dcf4de; --bs-btn-active-border-color: #1e7b2c;
}
.btn-outline-danger {
  --bs-btn-color: #d90000; --bs-btn-bg: #fff; --bs-btn-border-color: #ff9a94;
  --bs-btn-hover-color: #b00000; --bs-btn-hover-bg: #fff1f0; --bs-btn-hover-border-color: #d90000;
  --bs-btn-active-color: #b00000; --bs-btn-active-bg: #ffdedc; --bs-btn-active-border-color: #b00000;
  --bs-btn-disabled-color: #d90000; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #ff9a94;
}
.btn-outline-warning {
  --bs-btn-color: #7a4f00; --bs-btn-bg: #fff; --bs-btn-border-color: #f2a900;
  --bs-btn-hover-color: #7a4f00; --bs-btn-hover-bg: #fff8e5; --bs-btn-hover-border-color: #b97800;
  --bs-btn-active-color: #7a4f00; --bs-btn-active-bg: #fff3d1; --bs-btn-active-border-color: #b97800;
}
.btn-outline-info {
  --bs-btn-color: #2c4a8c; --bs-btn-bg: #fff; --bs-btn-border-color: #a9b8db;
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #f3f6fc; --bs-btn-hover-border-color: #2c4a8c;
  --bs-btn-active-color: #123063; --bs-btn-active-bg: #e8edf8; --bs-btn-active-border-color: #2c4a8c;
}
.btn-outline-light {
  --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255, 255, 255, 0.45);
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #123063; --bs-btn-active-bg: #f0ede8; --bs-btn-active-border-color: #f0ede8;
}
/* Pink Light: the style guide's "See all guides" button */
.btn-soft {
  --bs-btn-color: #123063; --bs-btn-bg: #ffc7e0; --bs-btn-border-color: #ffc7e0;
  --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #ffc7e0;
  --bs-btn-active-color: #123063; --bs-btn-active-bg: #ffe3ef; --bs-btn-active-border-color: #ff8fc4;
  --bs-btn-disabled-color: #123063; --bs-btn-disabled-bg: #ffc7e0; --bs-btn-disabled-border-color: #ffc7e0;
}
/* Touch screens: no fill-to-outline flash after a tap; the rest state stays. */
@media (hover: none) {
  .btn-primary { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #da007d; --bs-btn-hover-border-color: #da007d; }
  .btn-secondary, .btn-dark { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #123063; --bs-btn-hover-border-color: #123063; }
  .btn-success { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1e7b2c; --bs-btn-hover-border-color: #1e7b2c; }
  .btn-danger { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d90000; --bs-btn-hover-border-color: #d90000; }
  .btn-warning { --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #f2a900; --bs-btn-hover-border-color: #f2a900; }
  .btn-info { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2c4a8c; --bs-btn-hover-border-color: #2c4a8c; }
  .btn-soft { --bs-btn-hover-color: #123063; --bs-btn-hover-bg: #ffc7e0; --bs-btn-hover-border-color: #ffc7e0; }
}
.btn-link {
  --bs-btn-color: #da007d; --bs-btn-hover-color: #b3006a; --bs-btn-active-color: #b3006a;
  --bs-btn-font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.btn-icon { --bs-btn-padding-x: 0; width: 40px; flex: none; }
.btn-icon.btn-sm { width: 32px; }
.btn-group > .btn-check:checked + .btn, .btn-group > .btn.active { z-index: 1; }
/* Busy state set by the submit-busy controller while a form posts */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] > .bi { display: none; }
.spinner-border-sm { --bs-spinner-width: 14px; --bs-spinner-height: 14px; --bs-spinner-border-width: 2px; }

/* Close button in Super Blue */
.btn-close {
  --bs-btn-close-color: #123063;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23123063'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.7;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: var(--ts-focus-ring);
}
.btn-close:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; box-shadow: none; }

/* Cards: large blocks, 20px radius */
.card {
  --bs-card-spacer-y: 20px;
  --bs-card-spacer-x: 24px;
  --bs-card-title-spacer-y: 4px;
  --bs-card-title-color: #123063;
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--ts-border-subtle);
  --bs-card-border-radius: var(--ts-radius-lg);
  --bs-card-inner-border-radius: calc(var(--ts-radius-lg) - 1px);
  --bs-card-cap-padding-y: 16px;
  --bs-card-cap-padding-x: 24px;
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: #123063;
  --bs-card-bg: #fff;
  box-shadow: var(--ts-shadow-xs);
}
.card-header { font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); border-bottom-color: var(--ts-border-subtle); }
.card-header.fw-semibold, .card-header strong { font-weight: 600; }
.card-header .badge { letter-spacing: 0; margin-left: 4px; }
.card-header > .badge, .card-header > .ts-tag, .card-header > .ts-status { align-self: center; }
.card-header.d-flex { flex-wrap: wrap; row-gap: 8px; }
.card-header.small, .card-header .small { font-size: var(--ts-fs-small); letter-spacing: 0; }
.card-footer { background: var(--ts-surface-sunken); border-top-color: var(--ts-border-subtle); font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.card-title { font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); }
.card > .table-responsive:last-child, .card > .table:last-child, .card > .list-group:last-child { border-bottom-left-radius: var(--bs-card-inner-border-radius); border-bottom-right-radius: var(--bs-card-inner-border-radius); }
.card > .table-responsive:first-child, .card > .table:first-child { border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); overflow: hidden; }
.card > .table-responsive:only-child, .card > .table:only-child { border-radius: var(--bs-card-inner-border-radius); overflow: hidden; }
.card > .table:first-child > thead > tr:first-child > th:first-child { border-top-left-radius: var(--bs-card-inner-border-radius); }
.card > .table:first-child > thead > tr:first-child > th:last-child { border-top-right-radius: var(--bs-card-inner-border-radius); }

/* Tables: quiet head, generous rows, right-aligned figures */
.table {
  --bs-table-color: #123063;
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ts-border-subtle);
  --bs-table-striped-bg: var(--ts-sand-50);
  --bs-table-striped-color: #123063;
  --bs-table-hover-bg: var(--ts-hover-row);
  --bs-table-hover-color: #123063;
  --bs-table-active-bg: var(--ts-pink-50);
  --bs-table-active-color: #123063;
  margin-bottom: 0;
  font-size: var(--ts-fs-body);
  line-height: var(--ts-lh-body);
}
.table > :not(caption) > * > * { padding: 14px 16px; border-bottom-color: var(--ts-border-subtle); vertical-align: middle; }
.table > thead > tr > th,
.table > thead > tr > td {
  font-size: var(--ts-fs-micro);
  line-height: var(--ts-lh-micro);
  font-weight: 600;
  color: var(--ts-text-secondary);
  background: var(--ts-surface-sunken);
  padding-top: 10px;
  padding-bottom: 10px;
  white-space: nowrap;
  border-bottom-color: var(--ts-border);
}
.table-sm > :not(caption) > * > * { padding: 10px 12px; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.card .table > :not(caption) > * > *:first-child { padding-left: 24px; }
.card .table > :not(caption) > * > *:last-child { padding-right: 24px; }
.table-hover > tbody > tr { transition: background-color var(--ts-dur-1) var(--ts-ease); }
.table a:not(.btn) { color: #123063; font-weight: 600; text-decoration: none; }
.table a:not(.btn):hover { color: var(--ts-link-hover); text-decoration: underline; }
.table.align-top > :not(caption) > * > * { vertical-align: top; }
/* Positioned, so visually hidden text inside (position: absolute) is clipped with the scroller
   instead of widening the page on phones. */
.table-responsive { position: relative; -webkit-overflow-scrolling: touch; }

/* Badges become soft pills; text-bg-* keeps working but loses the shouting */
.badge {
  --bs-badge-padding-x: 8px;
  --bs-badge-padding-y: 3px;
  --bs-badge-font-size: 12px;
  --bs-badge-font-weight: 600;
  --bs-badge-color: #123063;
  --bs-badge-border-radius: var(--ts-radius-pill);
  line-height: 16px;
  letter-spacing: 0;
  vertical-align: 1px;
}
.text-bg-primary { color: #a10060 !important; background-color: #ffe3ef !important; }
.text-bg-secondary { color: #34466b !important; background-color: #e9edf3 !important; }
.text-bg-success { color: #1b6e28 !important; background-color: #e2f6e4 !important; }
.text-bg-info { color: #123063 !important; background-color: #f0ede8 !important; }
.text-bg-warning { color: #7a4f00 !important; background-color: #fff3d1 !important; }
.text-bg-danger { color: #b00000 !important; background-color: #ffdedc !important; }
.text-bg-light { color: #4b5b7c !important; background-color: #f4f6f9 !important; }
.text-bg-dark { color: #fff !important; background-color: #123063 !important; }
.badge.border { border-color: var(--ts-border) !important; }

/* Tabs: underline with a Super Pink marker */
.nav-tabs, .nav-underline {
  --bs-nav-link-color: var(--ts-text-secondary);
  --bs-nav-link-hover-color: #123063;
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 10px;
  --bs-nav-tabs-border-width: 0;
  --bs-nav-underline-border-width: 0;
  gap: 4px 28px;
  border-bottom: 1px solid var(--ts-border);
}
.nav-tabs .nav-link, .nav-underline .nav-link { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; margin: 0; padding: 10px 0 12px; font-size: var(--ts-fs-body); border-radius: var(--ts-radius-sm) var(--ts-radius-sm) 0 0; }
.nav-tabs .nav-link .bi, .nav-underline .nav-link .bi { font-size: 16px; }
/* Bootstrap gives .nav-link:focus-visible a faint blue halo that beats the global ring: every tab set
   (campaign Build and Results, Settings, Library, Approvals, the flag page) gets the 2px Super Pink outline. */
.nav-link:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; box-shadow: none; }
.nav-tabs .nav-link.active, .nav-underline .nav-link.active { color: #123063; background: none; }
.nav-tabs .nav-link.active::after, .nav-underline .nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--ts-pink-500);
}
/* Pills (Library types today): the Creamy segmented look with a Super Blue active key */
.nav-pills {
  --bs-nav-link-color: var(--ts-text-secondary);
  --bs-nav-link-hover-color: #123063;
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-padding-x: 12px;
  --bs-nav-link-padding-y: 6px;
  --bs-nav-pills-border-radius: var(--ts-radius-sm);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #123063;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ts-surface-muted);
  border-radius: 8px;
  font-size: var(--ts-fs-small);
}
.nav-pills .nav-link:hover:not(.active) { background: rgba(255, 255, 255, 0.6); }

/* Pagination: Creamy keys, current page outlined, as the style guide */
.pagination {
  --bs-pagination-padding-x: 12px;
  --bs-pagination-padding-y: 6px;
  --bs-pagination-font-size: 14px;
  --bs-pagination-color: #123063;
  --bs-pagination-bg: #f0ede8;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #f0ede8;
  --bs-pagination-border-radius: var(--ts-radius-sm);
  --bs-pagination-hover-color: #123063;
  --bs-pagination-hover-bg: #e6e1d9;
  --bs-pagination-hover-border-color: #e6e1d9;
  --bs-pagination-focus-color: #123063;
  --bs-pagination-focus-bg: #f0ede8;
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #123063;
  --bs-pagination-active-bg: #fff;
  --bs-pagination-active-border-color: #123063;
  --bs-pagination-disabled-color: var(--ts-slate-500);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  gap: 6px;
  font-weight: 600;
  flex-wrap: wrap;
}
.pagination .page-link { border-radius: var(--ts-radius-sm) !important; min-width: 36px; text-align: center; text-decoration: none; }
.pagination .page-link:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.pagination .page-item:not(:first-child) .page-link { margin-left: 0; }
.pagination .page-item.next .page-link { background: #123063; border-color: #123063; color: #fff; }
.pagination .page-item.next .page-link:hover { background: #fff; color: #123063; }
.pagination .page-item.next.disabled .page-link { background: transparent; border-color: transparent; color: var(--ts-slate-500); }
.pagination .page-item.ts-gap .page-link { background: transparent; border-color: transparent; min-width: 20px; padding-left: 0; padding-right: 0; }

/* Breadcrumb: Super Pink chevrons */
.breadcrumb {
  --bs-breadcrumb-margin-bottom: 8px;
  --bs-breadcrumb-font-size: 13px;
  --bs-breadcrumb-item-padding-x: 8px;
  --bs-breadcrumb-item-active-color: var(--ts-text-secondary);
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.5 1 5.5 4l-3 3' fill='none' stroke='%23da007d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  line-height: 18px;
}
.breadcrumb-item + .breadcrumb-item::before { display: inline-flex; align-items: center; height: 18px; }
.breadcrumb-item a { display: inline-block; padding: 3px 0; color: #123063; font-weight: 600; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--ts-link-hover); text-decoration: underline; }
.breadcrumb-item.active { font-weight: 500; }
/* Phones: the whole trail would wrap one item per line, so show only the parent, on one line, with a
   back chevron. The title below already names the current page. */
@media (max-width: 575.98px) {
  .breadcrumb { flex-wrap: nowrap; }
  .breadcrumb-item { display: none; }
  .breadcrumb-item:nth-last-child(2) { display: flex; align-items: center; min-width: 0; padding-left: 0; }
  .breadcrumb-item:nth-last-child(2)::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.5 1 2.5 4l3 3' fill='none' stroke='%23da007d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    display: inline-flex; align-items: center; flex: none; float: none; height: 18px; padding-right: 8px;
  }
  .breadcrumb-item:nth-last-child(2) > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Forms */
.form-label { font-size: var(--ts-fs-body); line-height: var(--ts-lh-body); font-weight: 600; margin-bottom: 6px; color: #123063; }
.form-label.small { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.form-text { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-muted); margin-top: 6px; }
.form-control, .form-select {
  font-size: var(--ts-fs-body);
  line-height: 20px;
  padding: 9px 12px;
  color: #123063;
  background-color: #fff;
  border-color: var(--ts-border-control);
  border-radius: var(--ts-radius-sm);
  transition: border-color var(--ts-dur-1) var(--ts-ease), box-shadow var(--ts-dur-1) var(--ts-ease);
}
.form-select { padding-right: 36px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23123063' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m4 6 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 12px center; background-size: 14px 14px; }
.form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 12px; background-image: none; }
.form-control-sm, .form-select-sm { padding-top: 5px; padding-bottom: 5px; font-size: 13px; border-radius: var(--ts-radius-sm); }
.form-control::placeholder { color: var(--ts-text-muted); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: var(--ts-blue-700); }
.form-control:focus, .form-select:focus { border-color: var(--ts-pink-600); box-shadow: var(--ts-focus-halo); outline: 0; }
.form-control:disabled, .form-select:disabled, fieldset:disabled .form-control, fieldset:disabled .form-select { background-color: var(--ts-sand-50); color: var(--ts-text-muted); border-color: var(--ts-border); }
.form-control[readonly] { background-color: var(--ts-sand-50); }
.form-control.code-editor, textarea.ts-code-input { font-family: var(--ts-font-mono); font-size: 13px; line-height: 20px; tab-size: 2; white-space: pre; background-color: var(--ts-sand-50); }
.form-control.code-editor:focus, textarea.ts-code-input:focus { background-color: #fff; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ts-red-600); background-image: none; padding-right: 12px; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 0, 0, 0.18); }
.form-control.is-valid { border-color: var(--ts-green-600); background-image: none; padding-right: 12px; }
.invalid-feedback, .valid-feedback { font-size: var(--ts-fs-small); font-weight: 500; margin-top: 6px; }
.invalid-feedback { color: var(--ts-red-700); }
.valid-feedback { color: var(--ts-green-700); }
.input-group-text { background: var(--ts-sand-200); border-color: var(--ts-border-control); color: var(--ts-text-secondary); font-size: var(--ts-fs-body); }

.form-check { min-height: 20px; padding-left: 28px; margin-bottom: 8px; }
.form-check .form-check-input { margin-left: -28px; }
.form-check-inline { margin-right: 16px; }
.form-check-input {
  width: 18px; height: 18px; margin-top: 1px;
  border: 1.5px solid var(--ts-border-control);
  background-color: #fff;
}
.form-check-input[type="checkbox"] { border-radius: 4px; }
.form-check-input:hover { border-color: var(--ts-blue-700); }
.form-check-input:focus { border-color: var(--ts-pink-600); box-shadow: var(--ts-focus-halo); }
.form-check-input:checked { background-color: var(--ts-pink-600); border-color: var(--ts-pink-600); }
.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-label { color: #123063; }
.form-switch { padding-left: 46px; }
.form-switch .form-check-input {
  width: 36px; height: 20px; margin-left: -46px; margin-top: 0;
  border-radius: 999px; border-color: var(--ts-slate-400); background-color: var(--ts-slate-200);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  box-shadow: inset 0 0 0 0 transparent;
}
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--ts-pink-600); border-color: var(--ts-pink-600); background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background: var(--ts-pink-600); }
.form-range::-moz-range-thumb { background: var(--ts-pink-600); }
fieldset:disabled .form-check-label { opacity: 0.75; }

/* Alerts: the brand alert palette, softened for a screen used all day */
.alert {
  --bs-alert-padding-x: 16px;
  --bs-alert-padding-y: 12px;
  --bs-alert-margin-bottom: 16px;
  --bs-alert-border-radius: var(--ts-radius-md);
  font-size: var(--ts-fs-body);
  line-height: var(--ts-lh-body);
}
.alert-light { --bs-alert-color: #123063; --bs-alert-bg: #fbfaf8; --bs-alert-border-color: #ece8e1; }
.alert-secondary { --bs-alert-color: #123063; --bs-alert-bg: #f4f6f9; --bs-alert-border-color: #d5dbe5; }
.alert-info { --bs-alert-color: #123063; }
.alert .alert-link { font-weight: 600; }
.alert a:not(.btn) { color: inherit; }
.alert.py-2 { --bs-alert-padding-y: 10px; }

/* Dropdowns and menus */
.dropdown-menu {
  --bs-dropdown-font-size: var(--ts-fs-body);
  --bs-dropdown-color: #123063;
  --bs-dropdown-border-color: var(--ts-border-subtle);
  --bs-dropdown-border-radius: var(--ts-radius-md);
  --bs-dropdown-inner-border-radius: calc(var(--ts-radius-md) - 1px);
  --bs-dropdown-box-shadow: var(--ts-shadow-lg);
  --bs-dropdown-padding-x: 6px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-spacer: 6px;
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-y: 8px;
  --bs-dropdown-item-border-radius: var(--ts-radius-sm);
  --bs-dropdown-link-color: #123063;
  --bs-dropdown-link-hover-color: #123063;
  --bs-dropdown-link-hover-bg: var(--ts-sand-100);
  --bs-dropdown-link-active-color: #a10060;
  --bs-dropdown-link-active-bg: var(--ts-pink-50);
  --bs-dropdown-divider-bg: var(--ts-border-subtle);
  --bs-dropdown-divider-margin-y: 6px;
  --bs-dropdown-header-color: var(--ts-text-muted);
  --bs-dropdown-header-padding-x: 10px;
  --bs-dropdown-header-padding-y: 6px;
  box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-item { display: flex; align-items: center; gap: 10px; font-weight: 500; white-space: normal; }
.dropdown-item > .bi { width: 18px; flex: none; text-align: center; font-size: 16px; color: var(--ts-slate-500); }
.dropdown-item:hover > .bi, .dropdown-item:focus > .bi { color: #123063; }
.dropdown-item:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: -2px; }
.dropdown-header { font-size: var(--ts-fs-micro); line-height: var(--ts-lh-micro); font-weight: 600; }
.dropdown-toggle::after { display: none; }

/* Modals */
.modal {
  --bs-modal-padding: 24px;
  --bs-modal-header-padding: 20px 24px;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--ts-radius-lg);
  --bs-modal-inner-border-radius: var(--ts-radius-lg);
  --bs-modal-box-shadow: var(--ts-shadow-lg);
  --bs-modal-header-border-color: var(--ts-border-subtle);
  --bs-modal-footer-border-color: var(--ts-border-subtle);
  --bs-modal-title-line-height: 28px;
  --bs-modal-footer-gap: 8px;
}
.modal-title { font-size: var(--ts-fs-section); line-height: var(--ts-lh-section); font-weight: 600; letter-spacing: var(--ts-ls-section); }
.modal-title:focus { outline: 0; }
.modal-title:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 4px; border-radius: 2px; }
.modal-footer { padding: 16px 24px; background: var(--ts-surface-sunken); border-bottom-left-radius: var(--ts-radius-lg); border-bottom-right-radius: var(--ts-radius-lg); }
.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: #0b1f45; --bs-backdrop-opacity: 0.55; }
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-footer { border-radius: 0; }
}

/* Toasts: Super Blue, bottom right (the stack lives in shell.css) */
.toast {
  --bs-toast-padding-x: 16px;
  --bs-toast-padding-y: 12px;
  --bs-toast-max-width: 400px;
  --bs-toast-font-size: var(--ts-fs-body);
  --bs-toast-color: #fff;
  --bs-toast-bg: #123063;
  --bs-toast-border-width: 0;
  --bs-toast-border-radius: var(--ts-radius-md);
  --bs-toast-box-shadow: var(--ts-shadow-lg);
  --bs-toast-header-color: #fff;
  --bs-toast-header-bg: transparent;
}

/* Tooltips and popovers */
.tooltip { --bs-tooltip-bg: #0b1f45; --bs-tooltip-color: #fff; --bs-tooltip-border-radius: var(--ts-radius-sm); --bs-tooltip-font-size: 12px; --bs-tooltip-padding-x: 8px; --bs-tooltip-padding-y: 6px; --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 260px; font-family: var(--ts-font); }
.popover { --bs-popover-border-color: var(--ts-border-subtle); --bs-popover-border-radius: var(--ts-radius-md); --bs-popover-box-shadow: var(--ts-shadow-lg); --bs-popover-header-bg: var(--ts-sand-50); --bs-popover-body-color: #123063; --bs-popover-font-size: var(--ts-fs-small); font-family: var(--ts-font); }

/* Progress */
.progress, .progress-stacked { --bs-progress-height: 8px; --bs-progress-bg: var(--ts-slate-100); --bs-progress-border-radius: 999px; --bs-progress-bar-bg: #123063; --bs-progress-box-shadow: none; }

/* List groups */
.list-group {
  --bs-list-group-color: #123063;
  --bs-list-group-border-color: var(--ts-border-subtle);
  --bs-list-group-item-padding-x: 24px;
  --bs-list-group-item-padding-y: 14px;
  --bs-list-group-action-color: #123063;
  --bs-list-group-action-hover-color: #123063;
  --bs-list-group-action-hover-bg: var(--ts-sand-100);
  --bs-list-group-action-active-bg: var(--ts-sand-200);
  --bs-list-group-active-color: #123063;
  --bs-list-group-active-bg: var(--ts-pink-50);
  --bs-list-group-active-border-color: var(--ts-border-subtle);
}

/* Disclosures */
details > summary { cursor: pointer; }
details > summary::marker { color: var(--ts-pink-600); }
summary.ts-summary-plain { list-style: none; }
summary.ts-summary-plain::-webkit-details-marker { display: none; }
details > summary:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; border-radius: 2px; }

/* Offcanvas scrim (the drawer itself is styled in shell.css) */
.offcanvas-backdrop { background-color: #0b1f45; }
.offcanvas-backdrop.show { opacity: 0.55; }