/* ============================================================
   UCMS Billing - Packages Revamp: design prototype
   Styling source of truth: TELUS Consistency Design System (CDS),
   extracted 2026-07-30 to reference/cds/.
   Custom properties below are named after the CDS token names.
   The dark shell (top bar + left nav) is live UCMS product chrome,
   not CDS, and is namespaced --ucms-*.
   ============================================================ */

/* ---------- Brand typeface ----------
   HN for TELUS, Monotype Custom. Three weights ship in the pack and they map
   onto the two CDS typography primitives exactly: font-weight-regular is the
   Regular cut, font-weight-semibold is the Md cut. Bd is used only by the
   UCMS shell wordmark. The files live in fonts/ and are git-ignored: the
   typeface is TELUS-licensed and internal use only.
   ------------------------------------ */
@font-face {
  font-family: "HN for TELUS";
  src: url("fonts/HNforTELUS.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HN for TELUS";
  src: url("fonts/HNforTELUS-Md.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HN for TELUS";
  src: url("fonts/HNforTELUS-Bd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- CDS tokens ---------- */
:root {
  /* Colour: Neutral ramp */
  --cds-neutral-0: #ffffff;
  --cds-neutral-10: #fafafa;
  --cds-neutral-50: #f4f4f7;
  --cds-neutral-100: #e3e6e8;
  --cds-neutral-200: #b3b9be;
  --cds-neutral-300: #878d91;
  --cds-neutral-350: #686e71;
  --cds-neutral-450: #424547;
  --cds-neutral-500: #2c2e30;

  /* Colour: Primary (TELUS purple) */
  --cds-primary-brand: #4b286d;
  --cds-primary-100: #d8cbe5;
  --cds-primary-200: #9f7ebf;
  --cds-primary-300: #7c53a5;
  --cds-primary-500: #371e47;
  --cds-primary-brand-opacity-10: rgba(75, 40, 109, 0.1);

  /* Colour: status ramps */
  --cds-green-100: #bce2ae;
  --cds-green-400: #2b8000;
  --cds-green-400-opacity-10: rgba(43, 128, 0, 0.1);
  --cds-red-100: #ffb39f;
  --cds-red-400: #c12335;
  --cds-red-450: #a61527;
  --cds-red-400-opacity-10: rgba(193, 35, 53, 0.1);
  --cds-orange-100: #ffd497;
  --cds-orange-350: #d16e0a;
  --cds-orange-400: #b55308;
  --cds-orange-50-opacity-15: rgba(255, 171, 64, 0.15);

  /* Colour: states */
  --cds-states-focus: #2681e1;

  /* Typography primitives */
  --cds-primary-font-family: "HN for TELUS", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cds-font-weight-regular: 400;
  --cds-font-weight-semibold: 500;

  /* Typography scale (size / line-height multiplier) */
  --cds-txt-caption-small-size: 10px;
  --cds-txt-caption-size: 12px;
  --cds-txt-body-small-size: 14px;
  --cds-txt-body-size: 16px;
  --cds-txt-subhead-size: 20px;
  --cds-hd-title-size: 24px;
  --cds-hd-headline-size: 32px;
  --cds-line-height-body: 1.5;
  --cds-line-height-subhead: 1.4;
  --cds-line-height-title: 1.35;
  --cds-line-height-headline: 1.3;

  /* Spacing */
  --cds-space-0: 0px;
  --cds-space-25: 4px;
  --cds-space-50: 8px;
  --cds-space-75: 12px;
  --cds-space-100: 16px;
  --cds-space-150: 24px;
  --cds-space-200: 32px;
  --cds-space-250: 40px;
  --cds-space-300: 48px;

  /* Padding */
  --cds-padding-none: 0px;
  --cds-padding-small: 8px;
  --cds-padding-medium: 16px;
  --cds-padding-large: 24px;
  --cds-padding-xlarge: 32px;

  /* Radius */
  --cds-radius-xsmall: 4px;
  --cds-radius-small: 8px;
  --cds-radius-default: 16px;
  --cds-radius-btn-small: 16px;
  --cds-radius-btn-medium: 20px;
  --cds-radius-btn-large: 24px;

  /* Dimension */
  --cds-input-width: 288px;
  --cds-table-padding: 16px;

  /* Elevation (Light/Elevation/Default) */
  --cds-elevation-default: 8px 8px 40px rgba(44, 46, 48, 0.1);

  /* Derived, documented: CDS Size=Small field height and Size=Medium button height */
  --cds-field-height-small: 40px;
  --cds-button-height-medium: 40px;

  /* Live UCMS product chrome (not CDS) */
  --ucms-navy: #0b2338;
  --ucms-navy-raised: #0e2d47;
  --ucms-navy-hover: #14314c;
  --ucms-nav-width: 232px;
  --ucms-topbar-height: 52px;
}

/* ---------- Reset and base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--cds-primary-font-family);
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
  color: var(--cds-neutral-500);
  background: var(--cds-neutral-50);
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a {
  color: var(--cds-primary-brand);
}

:focus-visible {
  outline: 2px solid var(--cds-states-focus);
  outline-offset: 2px;
  border-radius: var(--cds-radius-xsmall);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--cds-space-100);
  top: -48px;
  z-index: 100;
  padding: var(--cds-space-50) var(--cds-space-100);
  background: var(--cds-neutral-0);
  color: var(--cds-primary-brand);
  border-radius: var(--cds-radius-small);
  font-weight: var(--cds-font-weight-semibold);
  transition: top 150ms ease-out;
}

.skip-link:focus {
  top: var(--cds-space-100);
}

/* The prototype moves in two places: the skip link sliding into view, and a
   newly added package row settling back (see .row-added--settling). Readers who
   ask for reduced motion still get both, they just arrive in place. */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* ============================================================
   App shell: live UCMS chrome
   ============================================================ */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--ucms-nav-width) minmax(0, 1fr);
  grid-template-rows: var(--ucms-topbar-height) minmax(0, 1fr);
  grid-template-areas:
    "brand topbar"
    "nav   main";
}

.app__brand {
  grid-area: brand;
  background: var(--ucms-navy);
  display: flex;
  align-items: center;
  gap: var(--cds-space-50);
  padding: 0 var(--cds-space-100);
  color: var(--cds-neutral-0);
}

.app__brand-mark {
  width: 26px;
  height: 26px;
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-0);
  color: var(--ucms-navy);
  display: grid;
  place-items: center;
  font-size: var(--cds-txt-caption-small-size);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app__brand-name {
  font-size: var(--cds-txt-body-size);
  font-weight: var(--cds-font-weight-semibold);
  letter-spacing: 0.01em;
}

.app__topbar {
  grid-area: topbar;
  background: var(--ucms-navy-raised);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cds-space-150);
  padding: 0 var(--cds-space-200);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--cds-txt-caption-size);
}

.app__topbar svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.app__topbar-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-25);
  height: 26px;
  padding: 0 var(--cds-space-75);
  border-radius: var(--cds-radius-btn-small);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--cds-neutral-0);
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-semibold);
}

.app__topbar-count {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-25);
}

.app__topbar-user {
  color: var(--cds-neutral-0);
  font-weight: var(--cds-font-weight-semibold);
}

.app__nav {
  grid-area: nav;
  background: var(--ucms-navy);
  padding: var(--cds-space-100) 0 var(--cds-space-300);
}

.app__nav-item {
  display: flex;
  align-items: center;
  gap: var(--cds-space-75);
  min-height: 44px;
  padding: var(--cds-space-50) var(--cds-space-100);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: var(--cds-txt-body-small-size);
}

.app__nav-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
  opacity: 0.75;
}

.app__nav-item:hover {
  background: var(--ucms-navy-hover);
  color: var(--cds-neutral-0);
}

.app__nav-item[aria-current="page"] {
  background: var(--ucms-navy-raised);
  color: var(--cds-neutral-0);
  font-weight: var(--cds-font-weight-semibold);
}

.app__nav-item[aria-current="page"] svg {
  opacity: 1;
}

.app__main {
  grid-area: main;
  min-width: 0;
  background: var(--cds-neutral-50);
}

.content {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--cds-space-200) var(--cds-space-200) var(--cds-space-300);
}

/* ---------- Page head ---------- */
.page-head {
  margin-bottom: var(--cds-space-150);
}

.page-head__context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cds-space-50) var(--cds-space-75);
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
  margin-bottom: var(--cds-space-50);
}

.page-head__context strong {
  color: var(--cds-neutral-450);
  font-weight: var(--cds-font-weight-semibold);
}

.page-head__context > span {
  padding-left: var(--cds-space-75);
  border-left: 1px solid var(--cds-neutral-200);
}

.page-head__title {
  font-size: var(--cds-hd-title-size);
  line-height: var(--cds-line-height-title);
  font-weight: var(--cds-font-weight-semibold);
  letter-spacing: -0.01em;
}

.page-head__sub {
  margin-top: var(--cds-space-25);
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-350);
}

/* Back link (stands in for the missing CDS breadcrumb) */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-25);
  margin-bottom: var(--cds-space-75);
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-primary-brand);
  text-decoration: none;
}

.back-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.back-link:hover {
  color: var(--cds-primary-500);
  text-decoration: underline;
}

/* ---------- Tabs (CDS Secondary navigation, Type=Menu) ---------- */
.cds-tabs {
  display: flex;
  gap: var(--cds-space-200);
  border-bottom: 1px solid var(--cds-neutral-100);
  margin-bottom: var(--cds-space-150);
}

.cds-tabs__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-50);
  height: 48px;
  padding: 0 var(--cds-space-25);
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-350);
  text-decoration: none;
}

.cds-tabs__item:hover {
  color: var(--cds-neutral-500);
}

.cds-tabs__item[aria-current] {
  color: var(--cds-primary-brand);
}

.cds-tabs__item[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--cds-primary-brand);
  border-radius: 2px 2px 0 0;
}

/* ---------- Card (CDS Card, Style=Outline) ---------- */
/* CDS binds the Card component to Corner/radius-default (16). At the width these
   page tiles run, 16 reads too soft, so they take the next value down the CDS
   corner scale, Corner/radius-small (8). Still a CDS token, not a freelanced one. */
.cds-card {
  background: var(--cds-neutral-0);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  overflow: visible;
}

.cds-card + .cds-card {
  margin-top: var(--cds-space-150);
}

.cds-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-large) var(--cds-padding-large) 0;
}

.cds-card__title {
  font-size: var(--cds-txt-subhead-size);
  line-height: var(--cds-line-height-subhead);
  font-weight: var(--cds-font-weight-semibold);
}

.cds-card__meta {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
  padding-top: var(--cds-space-25);
  white-space: nowrap;
}

.cds-card__desc {
  margin-top: var(--cds-space-25);
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-350);
  max-width: 68ch;
}

/* Right-hand cluster in a card header: selection count, primary action, and the
   caption that says why the action is off. */
.cds-card__header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--cds-space-50);
  margin-left: auto;
}

.cds-card__header-row {
  display: flex;
  align-items: center;
  gap: var(--cds-space-100);
}

.cds-card__header-row .cds-card__meta {
  padding-top: 0;
}

.cds-card__header-note {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
  text-align: right;
}

/* Search and filters sitting above a grid, inside the card. */
.cds-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-medium) var(--cds-padding-large) 0;
}

.cds-table-toolbar__search {
  flex: 1 1 260px;
  min-width: 200px;
}

.cds-table-toolbar__filter {
  flex: 0 0 auto;
  min-width: 180px;
}

.cds-card__body {
  padding: var(--cds-padding-large);
}

.cds-card__body--flush {
  padding: var(--cds-space-100) var(--cds-space-50) var(--cds-space-50);
}

.cds-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-medium) var(--cds-padding-large) var(--cds-padding-large);
}

.cds-card__footer--split {
  justify-content: space-between;
}

.cds-card__footer-actions {
  display: flex;
  align-items: center;
  gap: var(--cds-space-100);
  margin-left: auto;
}

.cds-card__footer-note {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
}

/* Section heading inside a card */
.section-title {
  font-size: var(--cds-txt-body-size);
  line-height: var(--cds-line-height-body);
  font-weight: var(--cds-font-weight-semibold);
  margin-bottom: var(--cds-space-100);
}

.section-block {
  margin-top: var(--cds-space-200);
  padding-top: var(--cds-space-200);
  border-top: 1px solid var(--cds-neutral-100);
}

.section-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Form grid ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cds-space-150);
}

.form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid__span-2 {
  grid-column: span 2;
}

.form-grid__break {
  grid-column: 1 / -1;
}

/* ---------- Field (CDS Input field / Dropdown field, Size=Small) ---------- */
.cds-field {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-50);
  min-width: 0;
}

.cds-field__label {
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
}

.cds-field__label .req {
  color: var(--cds-red-400);
  margin-left: 2px;
}

.cds-field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.cds-input,
.cds-select {
  width: 100%;
  height: var(--cds-field-height-small);
  padding: 0 var(--cds-padding-medium);
  font-family: inherit;
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
  color: var(--cds-neutral-500);
  background: var(--cds-neutral-0);
  border: 1px solid var(--cds-neutral-350);
  border-radius: var(--cds-radius-small);
}

.cds-input::placeholder {
  color: var(--cds-neutral-350);
}

.cds-select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232C2E30' fill-rule='evenodd' d='M12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

.cds-input:hover,
.cds-select:hover {
  border-color: var(--cds-neutral-500);
}

.cds-input:focus,
.cds-select:focus {
  outline: 2px solid var(--cds-states-focus);
  outline-offset: 1px;
  border-color: var(--cds-neutral-500);
}

/* Read-only and disabled */
.cds-input[readonly],
.cds-input:disabled,
.cds-select:disabled {
  background-color: var(--cds-neutral-50);
  border-color: var(--cds-neutral-200);
  color: var(--cds-neutral-350);
  cursor: default;
}

.cds-select:disabled {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23878D91' fill-rule='evenodd' d='M12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393Z'/%3E%3C/svg%3E");
}

/* Suffix (currency pairing on rate fields) */
.cds-field__control--suffix .cds-input {
  padding-right: 60px;
}

.cds-field__suffix {
  position: absolute;
  right: var(--cds-padding-medium);
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-350);
  pointer-events: none;
}

/* Leading icon (search-style pickers, date fields) */
.cds-field__control--icon-left .cds-input {
  padding-left: 44px;
}

.cds-field__icon-left,
.cds-field__icon-right {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cds-field__icon-left {
  left: var(--cds-padding-medium);
}

.cds-field__icon-right {
  right: var(--cds-padding-medium);
}

.cds-field__icon-left svg,
.cds-field__icon-right svg {
  width: 20px;
  height: 20px;
  fill: var(--cds-neutral-350);
}

.cds-field__control--icon-right .cds-input {
  padding-right: 48px;
}

.cds-field__helper {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
}

.cds-field__helper--error {
  color: var(--cds-red-400);
}

.cds-field--readonly .cds-field__label {
  color: var(--cds-neutral-450);
}

/* Label and value pairs for a record that cannot be edited at all. Used
   instead of read-only inputs so nothing reads as a control you might operate. */
.value-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cds-space-150);
  margin: 0;
}

.value-list > div {
  min-width: 0;
}

.value-list dt {
  margin-bottom: var(--cds-space-50);
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-450);
}

.value-list dd {
  margin: 0;
  min-height: var(--cds-field-height-small);
  display: flex;
  align-items: center;
  padding: var(--cds-space-50) var(--cds-padding-medium);
  background: var(--cds-neutral-50);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  color: var(--cds-neutral-450);
  overflow-wrap: anywhere;
}

/* Static value display (read-only, no control) */
.cds-value {
  min-height: var(--cds-field-height-small);
  display: flex;
  align-items: center;
  padding: 0 var(--cds-padding-medium);
  background: var(--cds-neutral-50);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  color: var(--cds-neutral-450);
  font-size: var(--cds-txt-body-small-size);
}

/* ---------- Switch (CDS Switch) ---------- */
.cds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-75);
  font-size: var(--cds-txt-body-small-size);
}

.cds-switch__track {
  position: relative;
  width: 36px;
  height: 21px;
  border-radius: 11px;
  background: var(--cds-neutral-200);
  flex: 0 0 36px;
}

.cds-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cds-neutral-0);
}

.cds-switch--on .cds-switch__track {
  background: var(--cds-primary-brand);
}

.cds-switch--on .cds-switch__track::after {
  left: 17px;
}

.cds-switch--disabled .cds-switch__track {
  background: var(--cds-neutral-100);
}

.cds-switch--disabled .cds-switch__track::after {
  background: var(--cds-neutral-50);
}

.cds-switch--disabled,
.cds-switch--disabled .cds-switch__state {
  color: var(--cds-neutral-300);
}

.cds-switch__state {
  color: var(--cds-neutral-450);
  font-weight: var(--cds-font-weight-semibold);
}

.switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-100) var(--cds-space-150);
  min-height: var(--cds-field-height-small);
}

.switch-row__label {
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
}

.switch-row + .form-grid,
.form-grid + p {
  margin-top: var(--cds-space-100);
}

/* ---------- Buttons (CDS Button, Size=Medium 40px) ---------- */
.cds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cds-space-50);
  height: var(--cds-button-height-medium);
  padding: 0 var(--cds-padding-large);
  border: 1px solid transparent;
  border-radius: var(--cds-radius-btn-medium);
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.cds-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.cds-btn--primary {
  background: var(--cds-primary-brand);
  color: var(--cds-neutral-0);
}

.cds-btn--primary:hover {
  background: var(--cds-primary-500);
}

.cds-btn--secondary {
  background: transparent;
  border-color: var(--cds-primary-brand);
  color: var(--cds-primary-brand);
}

.cds-btn--secondary:hover {
  background: var(--cds-primary-brand-opacity-10);
}

.cds-btn--ghost {
  background: transparent;
  color: var(--cds-primary-brand);
  padding: 0 var(--cds-padding-medium);
}

.cds-btn--ghost:hover {
  background: var(--cds-primary-brand-opacity-10);
}

.cds-btn--destructive {
  background: transparent;
  border-color: var(--cds-red-400);
  color: var(--cds-red-400);
}

.cds-btn--destructive:hover {
  background: var(--cds-red-400-opacity-10);
  border-color: var(--cds-red-450);
  color: var(--cds-red-450);
}

.cds-btn--destructive-solid {
  background: var(--cds-red-400);
  color: var(--cds-neutral-0);
}

.cds-btn--destructive-solid:hover {
  background: var(--cds-red-450);
}

/* CDS paints a disabled button neutral-100 with a grey label. That pair is
   4.13:1, which WCAG 1.4.3 exempts for inactive controls, so the CDS value is
   kept. The reason a Save is off is always stated in the footer note beside it
   and wired up with aria-describedby, and the button still takes focus so a
   keyboard or screen-reader user can reach that reason. */
.cds-btn[aria-disabled="true"],
.cds-btn:disabled {
  background: var(--cds-neutral-100);
  border-color: transparent;
  color: var(--cds-neutral-350);
  cursor: not-allowed;
}

.cds-btn:disabled {
  pointer-events: none;
}

/* ---------- Icon button (CDS Icon button, Size=Medium in a 32px hit area) ---------- */
.cds-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--cds-radius-small);
  background: transparent;
  color: var(--cds-primary-brand);
  cursor: pointer;
  text-decoration: none;
}

.cds-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.cds-icon-btn:hover {
  background: var(--cds-primary-brand-opacity-10);
}

.cds-icon-btn[aria-disabled="true"] {
  color: var(--cds-neutral-200);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Link (CDS Link) ---------- */
.cds-link {
  color: var(--cds-primary-brand);
  font-weight: var(--cds-font-weight-semibold);
  text-decoration: none;
}

.cds-link:hover {
  color: var(--cds-primary-500);
  text-decoration: underline;
}

.cds-link--destructive {
  color: var(--cds-red-400);
}

.cds-link--destructive:hover {
  color: var(--cds-red-450);
}

.cds-link--quiet {
  font-weight: var(--cds-font-weight-regular);
}

/* ---------- Badge (CDS Badge, height 24, radius 4, 12px caption) ---------- */
.cds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-25);
  height: 24px;
  padding: 0 var(--cds-padding-small);
  border-radius: var(--cds-radius-xsmall);
  font-size: var(--cds-txt-caption-size);
  line-height: 1;
  white-space: nowrap;
}

.cds-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* CDS ships Green/green-400-opacity-10 as the badge tint. At 10 percent the
   12px green-400 label lands at 4.38:1 on white, just under 4.5:1, so the tint
   is lightened to 7 percent here. Worth raising with the design-system team. */
.cds-badge--green {
  background: rgba(43, 128, 0, 0.07);
  color: var(--cds-green-400);
}

.cds-badge--neutral {
  background: var(--cds-neutral-50);
  color: var(--cds-neutral-450);
}

.cds-badge--primary {
  background: var(--cds-primary-brand-opacity-10);
  color: var(--cds-primary-brand);
}

.cds-badge--orange {
  background: var(--cds-orange-50-opacity-15);
  color: var(--cds-orange-400);
}

.cds-badge--red {
  background: var(--cds-red-400-opacity-10);
  color: var(--cds-red-400);
}

/* ---------- Messages (CDS Info / Warning / Success / Error message) ---------- */
.cds-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--cds-space-75);
  padding: var(--cds-padding-medium);
  border-radius: var(--cds-radius-small);
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
}

.cds-msg svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 1px;
  fill: currentColor;
}

.cds-msg p {
  margin: 0;
}

.cds-msg__title {
  font-weight: var(--cds-font-weight-semibold);
  margin-bottom: 2px;
}

.cds-msg--info {
  background: var(--cds-primary-brand-opacity-10);
  color: var(--cds-neutral-500);
}

.cds-msg--info svg {
  fill: var(--cds-primary-brand);
}

.cds-msg--warning {
  background: var(--cds-orange-50-opacity-15);
  color: var(--cds-neutral-500);
}

.cds-msg--warning svg {
  fill: var(--cds-orange-400);
}

.cds-msg--error {
  background: var(--cds-red-400-opacity-10);
  color: var(--cds-neutral-500);
}

.cds-msg--error svg {
  fill: var(--cds-red-400);
}

/* ---------- Table (composed from CDS Title cell / Data cell families) ---------- */
.cds-table-wrap {
  overflow-x: auto;
}

/* A table with row overflow menus cannot sit in a scroll container: the menu
   would be clipped by it. This variant lets cells wrap instead. */
.cds-table-wrap--visible {
  overflow: visible;
}

.cds-table--auto {
  min-width: 0;
}

.cds-table {
  min-width: 880px;
  font-size: var(--cds-txt-body-small-size);
}

.cds-table th,
.cds-table td {
  padding: var(--cds-table-padding);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--cds-neutral-100);
}

.cds-table thead th {
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-450);
  white-space: nowrap;
}

.cds-table tbody tr:hover {
  background: var(--cds-neutral-10);
}

.cds-table tbody tr.is-selected {
  background: var(--cds-primary-brand-opacity-10);
}

.cds-table tbody tr.is-selected:hover {
  background: rgba(75, 40, 109, 0.14);
}

.cds-table tbody tr:last-child th,
.cds-table tbody tr:last-child td {
  border-bottom: 0;
}

.cds-table .col-select {
  width: 52px;
  padding-right: 0;
}

.cds-table .col-actions {
  width: 108px;
  text-align: right;
  white-space: nowrap;
}

.cds-table .col-id {
  width: 96px;
  color: var(--cds-neutral-350);
  font-variant-numeric: tabular-nums;
}

.cds-table__primary {
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
}

.cds-table__muted {
  color: var(--cds-neutral-350);
}

.cds-table__actions {
  display: inline-flex;
  gap: var(--cds-space-25);
  justify-content: flex-end;
}

.cds-table--dense th,
.cds-table--dense td {
  padding: var(--cds-space-75) var(--cds-padding-medium);
}

.cds-table--dense {
  min-width: 640px;
}

.row-suspended td {
  color: var(--cds-neutral-350);
}

.row-suspended .cds-table__primary {
  color: var(--cds-neutral-350);
}

/* A row just added by the Add Package demo on 1-packages.html. It is tinted on
   arrival, then settles back. A reader who asks for reduced motion gets the
   same tint and the same settle, it just lands in place. */
.row-added th,
.row-added td {
  background-color: var(--cds-green-400-opacity-10);
}

.row-added--settling th,
.row-added--settling td {
  background-color: transparent;
  transition: background-color 1200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .row-added--settling th,
  .row-added--settling td {
    transition: none;
  }
}

/* ---------- Checkbox (CDS Checkbox atom, 21px at Size=Small) ---------- */
.cds-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: 1px solid var(--cds-neutral-500);
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-0);
  text-decoration: none;
}

a.cds-check:hover {
  border-color: var(--cds-primary-brand);
}

.cds-check--on,
.cds-check--partial {
  background: var(--cds-primary-brand);
  border-color: var(--cds-primary-brand);
}

.cds-check--on::after {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border: solid var(--cds-neutral-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cds-check--partial::after {
  content: "";
  width: 11px;
  height: 2px;
  background: var(--cds-neutral-0);
  border-radius: 1px;
}

.cds-check--disabled {
  border-color: var(--cds-neutral-200);
  background: var(--cds-neutral-50);
  pointer-events: none;
}

/* ---------- Overflow menu (CDS Dropdown menu) ---------- */
.cds-menu {
  position: relative;
  display: inline-block;
}

.cds-menu > summary {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cds-radius-small);
  color: var(--cds-primary-brand);
  cursor: pointer;
  list-style: none;
}

.cds-menu > summary::-webkit-details-marker {
  display: none;
}

.cds-menu > summary svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.cds-menu > summary:hover {
  background: var(--cds-primary-brand-opacity-10);
}

.cds-menu__list {
  position: absolute;
  right: 0;
  top: 36px;
  z-index: 20;
  min-width: 208px;
  padding: var(--cds-space-50) 0;
  background: var(--cds-neutral-0);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  box-shadow: var(--cds-elevation-default);
  text-align: left;
}

.cds-menu__item {
  display: block;
  padding: var(--cds-space-50) var(--cds-padding-medium);
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-500);
  text-decoration: none;
  white-space: nowrap;
}

.cds-menu__item:hover {
  background: var(--cds-neutral-50);
}

.cds-menu__item--destructive {
  color: var(--cds-red-400);
}

/* ---------- Selection counter ---------- */
.selection-counter {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
  white-space: nowrap;
}

.selection-counter strong {
  color: var(--cds-neutral-500);
  font-weight: var(--cds-font-weight-semibold);
}

/* ---------- Covered packages (NG1 / NG7) ---------- */
.covered-list {
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
}

.covered-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-75) var(--cds-space-100);
  padding: var(--cds-space-75) var(--cds-padding-medium);
  border-bottom: 1px solid var(--cds-neutral-100);
}

.covered-list__item:last-child {
  border-bottom: 0;
}

.covered-list__name {
  font-weight: var(--cds-font-weight-semibold);
}

.covered-list__meta {
  color: var(--cds-neutral-350);
  font-size: var(--cds-txt-caption-size);
}

.covered-list__spacer {
  margin-left: auto;
}

.covered-list__action {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------- Spacing utilities ---------- */
.mt-50 {
  margin-top: var(--cds-space-50);
}

.mt-100 {
  margin-top: var(--cds-space-100);
}

.mt-150 {
  margin-top: var(--cds-space-150);
}

.mb-100 {
  margin-bottom: var(--cds-space-100);
}

.mb-150 {
  margin-bottom: var(--cds-space-150);
}

/* Package chips on the create route */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-50);
  margin-bottom: var(--cds-space-150);
}

.cds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-25);
  height: 28px;
  padding: 0 var(--cds-padding-small);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-50);
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-450);
}

/* ---------- Modal (CDS Default modal, 416px) ---------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(44, 46, 48, 0.45);
  display: grid;
  place-items: center;
  padding: var(--cds-space-150);
}

.cds-modal {
  width: 100%;
  max-width: 416px;
  background: var(--cds-neutral-0);
  border: 0;
  border-radius: var(--cds-radius-default);
  box-shadow: var(--cds-elevation-default);
  padding: 0;
  color: var(--cds-neutral-500);
}

.cds-modal--wide {
  max-width: 520px;
}

.cds-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-large) var(--cds-padding-large) var(--cds-padding-medium);
}

.cds-modal__title {
  font-size: var(--cds-txt-subhead-size);
  line-height: var(--cds-line-height-subhead);
  font-weight: var(--cds-font-weight-semibold);
}

.cds-modal__body {
  padding: 0 var(--cds-padding-large);
}

.cds-modal__body .section-block {
  margin-top: var(--cds-space-150);
  padding-top: var(--cds-space-150);
}

.cds-modal__body p {
  margin: 0 0 var(--cds-space-100);
  color: var(--cds-neutral-450);
}

.cds-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-large);
}

dialog.cds-modal::backdrop {
  background: rgba(44, 46, 48, 0.45);
}

/* ============================================================
   Cover page (index.html)
   ============================================================ */
.doc {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--cds-space-300) var(--cds-space-200) var(--cds-space-300);
}

.doc__head {
  margin-bottom: var(--cds-space-300);
  padding-bottom: var(--cds-space-200);
  border-bottom: 1px solid var(--cds-neutral-100);
}

.doc__title {
  font-size: var(--cds-hd-headline-size);
  line-height: var(--cds-line-height-headline);
  font-weight: var(--cds-font-weight-semibold);
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.doc__lede {
  margin-top: var(--cds-space-100);
  font-size: var(--cds-txt-body-size);
  color: var(--cds-neutral-450);
  max-width: 70ch;
}

.doc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-50) var(--cds-space-150);
  margin-top: var(--cds-space-150);
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
}

.doc section {
  margin-bottom: var(--cds-space-300);
}

.doc h2 {
  font-size: var(--cds-txt-subhead-size);
  line-height: var(--cds-line-height-subhead);
  font-weight: var(--cds-font-weight-semibold);
  margin-bottom: var(--cds-space-50);
}

.doc h3 {
  font-size: var(--cds-txt-body-size);
  font-weight: var(--cds-font-weight-semibold);
  margin-top: var(--cds-space-150);
  margin-bottom: var(--cds-space-50);
}

.doc h2 + .doc__note,
.doc h3 + .doc__note {
  margin-bottom: var(--cds-space-100);
}

.doc__note {
  color: var(--cds-neutral-450);
  max-width: 78ch;
}

.doc__note + .doc__note {
  margin-top: var(--cds-space-75);
}

/* Screen directory */
.screen-list {
  border-top: 1px solid var(--cds-neutral-100);
  margin-top: var(--cds-space-150);
}

.screen-list__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--cds-space-100);
  align-items: baseline;
  padding: var(--cds-space-100) 0;
  border-bottom: 1px solid var(--cds-neutral-100);
}

.screen-list__num {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.screen-list__name {
  font-size: var(--cds-txt-body-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-primary-brand);
  text-decoration: none;
}

.screen-list__name:hover {
  color: var(--cds-primary-500);
  text-decoration: underline;
}

.screen-list__desc {
  margin-top: 2px;
  color: var(--cds-neutral-450);
  max-width: 74ch;
}

/* Document tables */
.doc-table-wrap {
  overflow-x: auto;
  margin-top: var(--cds-space-100);
}

.doc-table {
  min-width: 620px;
  font-size: var(--cds-txt-body-small-size);
}

.doc-table th,
.doc-table td {
  padding: var(--cds-space-75) var(--cds-space-100) var(--cds-space-75) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cds-neutral-100);
}

.doc-table thead th {
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-450);
  border-bottom-color: var(--cds-neutral-200);
  white-space: nowrap;
}

.doc-table td:first-child {
  font-weight: var(--cds-font-weight-semibold);
  white-space: nowrap;
}

.doc-table code {
  font-family: inherit;
  color: var(--cds-neutral-450);
}

.callout {
  padding: var(--cds-padding-medium) var(--cds-padding-large);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  background: var(--cds-neutral-0);
  margin-top: var(--cds-space-100);
}

.callout + .callout {
  margin-top: var(--cds-space-75);
}

.callout__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-50);
  font-weight: var(--cds-font-weight-semibold);
  margin-bottom: var(--cds-space-25);
}

.doc__footer {
  margin-top: var(--cds-space-300);
  padding-top: var(--cds-space-150);
  border-top: 1px solid var(--cds-neutral-100);
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
}

/* Prototype banner shown on every screen */
.proto-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-50) var(--cds-space-100);
  padding: var(--cds-space-50) var(--cds-space-200);
  background: var(--cds-neutral-500);
  color: var(--cds-neutral-0);
  font-size: var(--cds-txt-caption-size);
}

.proto-bar a {
  color: var(--cds-neutral-0);
  font-weight: var(--cds-font-weight-semibold);
}

.proto-bar__sep {
  color: var(--cds-neutral-200);
}

/* ============================================================
   Responsive
   ============================================================ */
/* Below this width the packages grid needs a scroll container again, so the
   row menu would be clipped. It falls back to opening in flow instead. */
@media (max-width: 1150px) {
  .cds-table-wrap--visible {
    overflow-x: auto;
  }

  .cds-table--auto {
    min-width: 880px;
  }

  .cds-menu[open] > .cds-menu__list {
    position: static;
    margin-top: var(--cds-space-25);
    box-shadow: none;
  }
}

@media (max-width: 1080px) {
  .form-grid,
  .value-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid__span-2 {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--ucms-topbar-height) auto minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "topbar"
      "main";
  }

  .app__nav {
    display: none;
  }

  .app__topbar {
    justify-content: flex-start;
    flex-wrap: wrap;
    height: auto;
    padding: var(--cds-space-50) var(--cds-space-100);
  }

  .content {
    padding: var(--cds-space-150) var(--cds-space-100) var(--cds-space-250);
  }

  .form-grid,
  .form-grid--2,
  .value-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid__span-2 {
    grid-column: span 1;
  }

  .cds-card__header {
    padding: var(--cds-padding-medium) var(--cds-padding-medium) 0;
  }

  .cds-card__body {
    padding: var(--cds-padding-medium);
  }

  .cds-card__footer {
    padding: var(--cds-padding-small) var(--cds-padding-medium) var(--cds-padding-medium);
  }

  .doc {
    padding: var(--cds-space-200) var(--cds-space-100);
  }

  .doc__title {
    font-size: var(--cds-hd-title-size);
  }
}

@media (max-width: 560px) {
  .cds-card__footer-actions {
    width: 100%;
    margin-left: 0;
  }

  .cds-btn {
    flex: 1 1 auto;
  }

  .screen-list__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-list__num {
    display: none;
  }
}

/* ============================================================
   UCM-004 CONTRACTS ONLY
   Everything above this banner is the UCM-003 billing
   stylesheet, copied verbatim. Rules below are additions for
   the Contracts screens and are built on the same tokens.
   ============================================================ */

/* A conditional field must be able to hide. .cds-field sets its own
   display, which would otherwise defeat the hidden attribute. */
.cds-field[hidden] {
  display: none;
}

/* Operable checkbox. The native input carries the state and the
   keyboard behaviour, the .cds-check span carries the CDS visuals. */
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-100) var(--cds-space-200);
}

.check-item {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-50);
  min-height: var(--cds-field-height-small);
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
  color: var(--cds-neutral-500);
  cursor: pointer;
}

.check-item:hover .cds-check {
  border-color: var(--cds-primary-brand);
}

.check-item input:checked + .cds-check {
  background: var(--cds-primary-brand);
  border-color: var(--cds-primary-brand);
}

.check-item input:checked + .cds-check::after {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border: solid var(--cds-neutral-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check-item input:focus-visible + .cds-check {
  outline: 2px solid var(--cds-states-focus);
  outline-offset: 2px;
}

/* Switch rendered as a real button so it can be operated. */
button.cds-switch {
  align-self: flex-start;
  min-height: var(--cds-field-height-small);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--cds-txt-body-small-size);
  cursor: pointer;
}

/* Multi-select. CDS has no multi-select component, so the dropdown
   field is opened out into a list box on the same field tokens. */
.cds-select[multiple] {
  height: auto;
  min-height: 132px;
  padding: var(--cds-padding-small) 0;
  background-image: none;
}

.cds-select[multiple] option {
  padding: 6px var(--cds-padding-medium);
  color: var(--cds-neutral-500);
}

/* The browser paints a selected option with its own system highlight.
   The gradient is the reliable way to repaint it on the CDS wash. */
.cds-select[multiple] option:checked {
  background: var(--cds-primary-brand-opacity-10);
  background: linear-gradient(var(--cds-primary-brand-opacity-10), var(--cds-primary-brand-opacity-10));
  color: var(--cds-neutral-500);
  font-weight: var(--cds-font-weight-semibold);
}

/* Section heading with an action beside it. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-100);
  margin-bottom: var(--cds-space-100);
}

.section-head .section-title {
  margin-bottom: 0;
}

.section-head__actions {
  margin-left: auto;
}

/* One entry in a repeating set, used by the BUR entries. */
.entry {
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  padding: var(--cds-padding-medium);
}

.entry + .entry {
  margin-top: var(--cds-space-100);
}

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-50) var(--cds-space-75);
  margin-bottom: var(--cds-space-100);
}

.entry__title {
  margin: 0;
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
}

/* ============================================================
   UCM-004 CONTRACTS: FIGMA LIVE-PRODUCT RESTYLE
   Ruling 2026-08-31 (Jaspal): for the Contracts prototype only,
   the UCMS billing Figma look wins over the CDS-purple HTML look.
   Every rule below applies one row of
   ../figma-billing-delta-2026-08-31.md in the Figma direction and
   carries its a-number. The UCM-003 billing prototype is untouched.
   No CDS token VALUE is edited: the block at the top of this file
   still holds the extracted CDS values, and everything here is an
   override or a new --ucms-* token.
   ============================================================ */

:root {
  /* a1. The live UCMS action colour, sampled #00A0DD off the rendered
     Figma frames. It is NOT a CDS token: #00a0dd does not appear in
     reference/cds/tokens/tokens.json, whose primary-brand is #4B286D. */
  --ucms-action: #00a0dd;
  /* Hover step. CDS ships no darker step for this colour, so it is
     derived: each channel of --ucms-action at 78 percent, which is
     rgb(0, 124, 172). 78 is the lightest step on that ramp where a
     white label clears 4.5:1 (4.69:1), so the hover state is AA-clean
     even though the rest state the Figma specifies is not. */
  --ucms-action-hover: #007cac;
  --ucms-action-wash: rgba(0, 160, 221, 0.1);

  /* a4, a5, a6. Navigation and link ink, sampled #0B2031 on the active
     tab label, the tab underline and the back link. */
  --ucms-ink-nav: #0b2031;

  /* a38, a39, a40. The live product shell, sampled off
     ../figma-delta-refs/03-billing-5569-7306.png. */
  --ucms-navy: #0b2031;
  --ucms-navy-raised: #071824;
  --ucms-navy-hover: #14314c;
  --ucms-nav-icon-active: #309cef;
  --ucms-nav-width: 248px;
  --ucms-topbar-height: 40px;
  --ucms-topbar-alert: #d95e56;
  --ucms-banner-bg: #001734;
  --ucms-banner-tag: #3eac63;
}

/* ---------- a1, a2, a20, a21, a24. Buttons ---------- */
.cds-btn--primary {
  background: var(--ucms-action);
}

.cds-btn--primary:hover {
  background: var(--ucms-action-hover);
}

.cds-btn--secondary {
  border-color: var(--ucms-action);
  color: var(--ucms-action);
}

.cds-btn--secondary:hover {
  background: var(--ucms-action-wash);
}

/* a20. CDS Size=Medium binds its label to Fixed/Body/fixed-body-medium,
   which is 16px. a24. The Figma instance pads 16px, not 24. */
.cds-btn {
  font-size: var(--cds-txt-body-size);
  padding: 0 var(--cds-padding-medium);
}

/* a21. The Figma disabled label is neutral-450, which lifts the disabled
   pair well clear of the 4.13:1 the CDS value lands on. */
.cds-btn[aria-disabled="true"],
.cds-btn:disabled {
  color: var(--cds-neutral-450);
}

/* ---------- a3, a29. Switch ---------- */
/* The Figma disagrees with itself on the on-track: #00a0dd on screen 07,
   #2c2e30 in the Edit Package modal. The action colour is taken, because
   it is the one that matches the rest of the blue action scheme. */
.cds-switch__track {
  background: var(--cds-neutral-0);
  border: 1px solid var(--cds-neutral-500);
}

.cds-switch__track::after {
  top: 1px;
  left: 1px;
  background: var(--cds-neutral-500);
}

.cds-switch--on .cds-switch__track {
  background: var(--ucms-action);
  border-color: var(--ucms-action);
}

.cds-switch--on .cds-switch__track::after {
  left: 16px;
  background: var(--cds-neutral-0);
}

.cds-switch--disabled .cds-switch__track {
  background: var(--cds-neutral-100);
  border-color: var(--cds-neutral-200);
}

.cds-switch--disabled .cds-switch__track::after {
  background: var(--cds-neutral-300);
}

/* ---------- a4, a5, a6. Navigation and links take near-black ---------- */
a {
  color: var(--ucms-ink-nav);
}

.skip-link {
  color: var(--ucms-ink-nav);
}

.cds-tabs__item[aria-current] {
  color: var(--ucms-ink-nav);
}

.cds-tabs__item[aria-current]::after {
  background: var(--ucms-ink-nav);
}

.back-link,
.back-link:hover {
  color: var(--ucms-ink-nav);
}

.cds-link,
.cds-link:hover {
  color: var(--ucms-ink-nav);
  text-decoration: underline;
}

.screen-list__name,
.screen-list__name:hover {
  color: var(--ucms-ink-nav);
}

/* Quiet actions read as dark ink in the Figma ("View at Child Level", the
   row pencil and the overflow glyph), not as a second brand colour. */
.cds-btn--ghost,
.cds-btn--ghost:hover {
  color: var(--ucms-ink-nav);
}

.cds-btn--ghost:hover,
.cds-icon-btn:hover,
.cds-menu > summary:hover {
  background: var(--cds-neutral-50);
}

.cds-icon-btn,
.cds-menu > summary {
  color: var(--cds-neutral-500);
}

/* Checkbox on-state, sampled #0B2031 on the select-all cell. */
.cds-check--on,
.cds-check--partial,
.check-item input:checked + .cds-check {
  background: var(--ucms-ink-nav);
  border-color: var(--ucms-ink-nav);
}

a.cds-check:hover,
.check-item:hover .cds-check {
  border-color: var(--ucms-ink-nav);
}

/* ---------- a7, a8, a9. Card ---------- */
.cds-card {
  border-color: var(--cds-neutral-200);
  border-radius: var(--cds-radius-default);
}

.cds-card__header {
  padding: var(--cds-padding-large);
}

.cds-card__header + .cds-card__body,
.cds-card__header + .cds-table-toolbar {
  padding-top: 0;
}

/* ---------- a11, a12, a13. Table ---------- */
.cds-table thead th {
  background: var(--cds-neutral-50);
  color: var(--cds-neutral-500);
}

/* The report writes this as a radius plus overflow:hidden on the table.
   The corners go on the two end header cells instead, which gives the
   same rounded band without clipping a row overflow menu. */
.cds-table thead th:first-child {
  border-top-left-radius: var(--cds-radius-small);
}

.cds-table thead th:last-child {
  border-top-right-radius: var(--cds-radius-small);
}

/* ---------- a16, a17, a18. Badge ---------- */
/* The Figma label is dark 14px text, which is why its green tint can sit
   at the full CDS 10 percent. The tint and the label move together. */
.cds-badge {
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-500);
}

.cds-badge--green {
  background: var(--cds-green-400-opacity-10);
  color: var(--cds-neutral-500);
}

.cds-badge--neutral {
  background: var(--cds-neutral-100);
  color: var(--cds-neutral-500);
}

.cds-badge--orange,
.cds-badge--red {
  color: var(--cds-neutral-500);
}

.cds-badge--primary {
  background: var(--ucms-action-wash);
  color: var(--cds-neutral-500);
}

/* ---------- a26, a30, a31, a32. Fields, chips and read-only ---------- */
.cds-table-toolbar__search .cds-input {
  background: var(--cds-neutral-50);
  border-color: transparent;
  border-radius: 999px;
}

.cds-chip {
  background: var(--cds-neutral-100);
  border-color: transparent;
}

.cds-value,
.value-list dd {
  border-color: transparent;
}

.covered-list {
  border: 0;
}

.covered-list__item {
  background: var(--cds-neutral-10);
  border-bottom: 0;
  border-radius: var(--cds-radius-small);
}

.covered-list__item + .covered-list__item {
  margin-top: var(--cds-space-50);
}

/* a28. The Figma prints the required asterisk in the label ink. Only the
   colour is taken: the visually hidden "(required)" stays, because that
   is an accessibility contract and not a styling value. */
.cds-field__label .req {
  color: var(--cds-neutral-500);
}

/* ---------- a33, a34. Modal ---------- */
.cds-modal--wide {
  max-width: 722px;
}

.cds-modal__body p {
  font-size: var(--cds-txt-body-size);
}

/* ---------- a37, a38, a39, a40. Page and shell ---------- */
/* The Figma jump screen sits on neutral-10 and every app screen puts its
   card on a white content area. */
body {
  background: var(--cds-neutral-10);
}

.app__main {
  background: var(--cds-neutral-0);
}

/* a39. The top bar is white product chrome: a boxed hamburger, the UCMS
   wordmark, the clock, an alert pill and the signed-in user. */
.app__topbar {
  background: var(--cds-neutral-0);
  justify-content: flex-start;
  gap: var(--cds-space-100);
  padding: 0 var(--cds-space-100);
  color: var(--cds-neutral-500);
  font-size: var(--cds-txt-body-small-size);
  border-bottom: 1px solid var(--cds-neutral-100);
}

.app__menu-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-50);
  color: var(--cds-neutral-500);
  cursor: pointer;
}

.app__menu-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.app__wordmark {
  font-size: var(--cds-txt-body-size);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cds-neutral-500);
}

.app__topbar-spacer {
  margin-left: auto;
}

.app__topbar-count {
  height: 30px;
  padding: 0 var(--cds-space-75);
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-50);
  color: var(--ucms-topbar-alert);
  font-weight: var(--cds-font-weight-semibold);
}

.app__topbar-count svg {
  fill: var(--cds-neutral-500);
}

.app__topbar-user {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-25);
  color: var(--cds-neutral-500);
  font-weight: var(--cds-font-weight-regular);
}

/* Specific enough to beat the shared `.app__topbar svg` rule above. */
.app__topbar .app__topbar-caret {
  width: 14px;
  height: 14px;
  fill: var(--ucms-topbar-alert);
}

/* a38. The left panel is the live "Nav Side Panel-Open" frame. The active
   row is a darker band that stops short of the panel edge, with a blue
   glyph, a white label and a caret on its right edge. */
.app__brand {
  background: var(--ucms-navy);
}

.app__nav {
  padding: var(--cds-space-50) 0 var(--cds-space-300);
}

.app__nav-item[aria-current="page"] {
  position: relative;
  margin-right: 62px;
  background: var(--ucms-navy-raised);
}

.app__nav-item[aria-current="page"] svg {
  fill: var(--ucms-nav-icon-active);
}

.app__nav-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid var(--cds-neutral-0);
}

/* a40. The promotional strip the Figma pastes under the top bar. Live
   instance chrome, reproduced so the shell reads as the product. */
.app__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-50) var(--cds-space-150);
  min-height: 48px;
  padding: var(--cds-space-50) var(--cds-space-200);
  background-color: var(--ucms-banner-bg);
  background-image: linear-gradient(90deg, var(--ucms-banner-bg) 40%, #062a56 100%);
  color: var(--cds-neutral-0);
  font-size: var(--cds-txt-body-small-size);
}

.app__banner-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--cds-padding-small);
  border-radius: var(--cds-radius-xsmall);
  background: var(--ucms-banner-tag);
  color: var(--cds-neutral-0);
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-semibold);
  white-space: nowrap;
}

/* Two narrow-width rules sit in earlier media queries, which this block
   now outranks at every width, so they are restated here. */
@media (max-width: 860px) {
  .cds-card__header {
    padding: var(--cds-padding-medium);
  }

  /* The brand cell now holds nothing but the navy panel behind the top
     bar, so below the nav breakpoint its whole row goes. */
  .app {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }

  .app__brand {
    display: none;
  }

  .app__topbar {
    flex-wrap: wrap;
    height: auto;
    padding: var(--cds-space-50) var(--cds-space-100);
  }

  .app__banner {
    padding: var(--cds-space-50) var(--cds-space-100);
  }
}

/* ============================================================
   UCM-004 CONTRACTS: FIGMA MATCH PASS
   2026-09-02 Wednesday 11:35:51 +05:30
   Measured against the six UCMS billing Figma frames filed at
   ../../reference/billing-figma-2026-09-02/. Every rule carries the
   row id of ../figma-match-audit-2026-09-02.md that it applies.
   No CDS token VALUE is edited. The UCM-003 billing prototype and the
   provider-scheduler prototype are untouched.
   ============================================================ */

/* ---------- m1, m2. Left navigation width and the active band ---------- */
:root {
  --ucms-nav-width: 256px;
  --ucms-banner-bg: #001a39;
  --ucms-banner-bg-far: #002352;
}

.app__nav-item[aria-current="page"] {
  margin-right: 68px;
}

/* ---------- m3, m4. Top bar chrome ---------- */
.app__menu-btn {
  width: 36px;
}

/* The Figma alert block is a full-height panel in the bar, not a pill. */
.app__topbar-count {
  height: var(--ucms-topbar-height);
  border-radius: 0;
}

/* ---------- m5. Promotional strip ---------- */
.app__banner {
  background-color: var(--ucms-banner-bg);
  background-image: linear-gradient(90deg, var(--ucms-banner-bg) 40%, var(--ucms-banner-bg-far) 100%);
}

/* ---------- m6, m7, m8. Breadcrumb line ---------- */
/* The Figma prints one grey 14px line with literal pipe separators and no
   emphasis on the customer name. */
.page-head__context {
  gap: var(--cds-space-50) var(--cds-space-25);
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-450);
}

.page-head__context strong {
  color: inherit;
  font-weight: var(--cds-font-weight-regular);
}

.page-head__context > span {
  padding-left: 0;
  border-left: 0;
}

.page-head__context > *:not(:last-child)::after {
  content: "|";
  margin-left: var(--cds-space-25);
  color: var(--cds-neutral-300);
}

/* ---------- m9. Page title ---------- */
.page-head__title {
  font-size: var(--cds-hd-headline-size);
  line-height: var(--cds-line-height-headline);
}

/* ---------- m10, m11. Back link ---------- */
.back-link {
  margin-bottom: var(--cds-space-150);
  font-size: var(--cds-txt-body-size);
}

.back-link svg {
  width: 20px;
  height: 20px;
}

/* ---------- m12. Section heading inside a card ---------- */
.section-title {
  font-size: var(--cds-txt-subhead-size);
  line-height: var(--cds-line-height-subhead);
}

/* ---------- m13. Field border ---------- */
.cds-input,
.cds-select {
  border-color: var(--cds-neutral-450);
}

/* ---------- m14. Field label ---------- */
/* Regular weight, neutral-450 ink. Sampled off every label in the Figma
   form frames. */
.cds-field__label {
  font-weight: var(--cds-font-weight-regular);
  color: var(--cds-neutral-450);
}

/* ---------- m15. Chips ---------- */
.cds-chip {
  height: 24px;
  font-size: var(--cds-txt-body-small-size);
}

/* ---------- m16. Info message takes the action colour ---------- */
/* Purple remnant 1 of 3. No informational band appears anywhere in the
   2026-09-02 Figma set, so there is nothing to sample. The wash is moved
   onto the action blue so no CDS purple survives on a Contracts screen. */
.cds-msg--info {
  background: var(--ucms-action-wash);
}

.cds-msg--info svg {
  fill: var(--ucms-action);
}

/* ---------- m17. Multi-select selected options ---------- */
/* Purple remnant 2 of 3. The Figma has no multi-select, so the selected
   option follows the action-blue scheme the rest of the screen uses. */
.cds-select[multiple] option:checked {
  background: var(--ucms-action-wash);
  background: linear-gradient(var(--ucms-action-wash), var(--ucms-action-wash));
  color: var(--cds-neutral-500);
}

/* ---------- m18. Selected table row: no change ---------- */
/* Purple remnant 3 of 3, resolved as a match, not a change. The Figma
   selected row measures #EDEAF1 in billing-3-selected.png. The rule already
   in this file paints rgba(75, 40, 109, 0.1) over white, which composites to
   #EDE9F0, within one step per channel. The Figma keeps the CDS purple tint
   for this one state, so the prototype keeps it too. */

/* ---------- m20. Value-list labels match the field labels ---------- */
.value-list dt {
  font-weight: var(--cds-font-weight-regular);
}

/* ---------- m21. Section heading to first label ---------- */
/* The Figma leaves 24px under a section heading that carries no
   description line, not 16. */
.section-title {
  margin-bottom: var(--cds-space-150);
}

/* ============================================================
   UCM-004 CONTRACTS: POLISH PASS
   2026-09-02 Wednesday 11:35:51 +05:30
   Craft items found by walking the three pages at 1440, 1280, 1024,
   768 and 390. Row ids are logged under "Polish pass" in
   ../figma-match-audit-2026-09-02.md. Nothing here changes a value the
   Figma sets.
   ============================================================ */

/* p1. The prototype-bar link was an 18px pointer target. */
.proto-bar a {
  display: inline-block;
  padding: var(--cds-space-25) 0;
}

/* p2. At the narrow widths the 32px page title crowds the card under it,
   the same step the cover page title already takes. */
@media (max-width: 560px) {
  .page-head__title {
    font-size: var(--cds-hd-title-size);
    line-height: var(--cds-line-height-title);
  }

  .section-title {
    font-size: var(--cds-txt-body-size);
    line-height: var(--cds-line-height-body);
    margin-bottom: var(--cds-space-100);
  }
}

/* p3. The prototype bar wraps below 560, which left a line opening on a
   separator. The gap carries the split at that width instead. */
@media (max-width: 560px) {
  .proto-bar__sep {
    display: none;
  }

  .proto-bar {
    padding: var(--cds-space-50) var(--cds-space-100);
  }
}

/* ============================================================
   UCM-004 CONTRACTS: SERVICE DETAILS (3-service-details.html)
   2026-09-02 Wednesday 12:49:37 +05:30
   Page-specific rules only. Every value below is an existing CDS
   or --ucms-* token. Judgment calls are logged under section 8 of
   ../picked-defaults.md.
   ============================================================ */

/* s1. A table sitting inside a section block needs its own boundary,
   because the card body has no rule between the heading and the rows.
   The mockup draws each table as a bordered box. */
.table-box {
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
}

.table-box .cds-table thead th:first-child {
  border-top-left-radius: var(--cds-radius-small);
}

.table-box .cds-table thead th:last-child {
  border-top-right-radius: var(--cds-radius-small);
}

/* s2. The package picker. Built on the same block as an entry, because it
   is the same kind of bounded sub-form. */
.picker {
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  padding: var(--cds-padding-medium);
  margin-bottom: var(--cds-space-150);
}

.picker__results {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-25);
  margin-top: var(--cds-space-150);
}

.picker__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cds-space-25) var(--cds-space-100);
  width: 100%;
  padding: var(--cds-space-75) var(--cds-padding-medium);
  border: 1px solid transparent;
  border-radius: var(--cds-radius-small);
  background: var(--cds-neutral-10);
  color: var(--cds-neutral-500);
  font-family: inherit;
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
  text-align: left;
  cursor: pointer;
}

.picker__result:hover {
  border-color: var(--cds-neutral-200);
}

.picker__result:focus-visible {
  outline: 2px solid var(--cds-states-focus);
  outline-offset: 1px;
}

.picker__result.is-picked {
  border-color: var(--ucms-action);
  background: var(--ucms-action-wash);
}

.picker__result-name {
  font-weight: var(--cds-font-weight-semibold);
}

.picker__result-meta {
  color: var(--cds-neutral-450);
}

.picker__result-tag {
  margin-left: auto;
  color: var(--cds-neutral-450);
  font-size: var(--cds-txt-caption-size);
}

.picker__none {
  padding: var(--cds-space-75) var(--cds-padding-medium);
  color: var(--cds-neutral-350);
  font-size: var(--cds-txt-body-small-size);
}

.picker__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-space-100);
  margin-top: var(--cds-space-150);
}

.picker__actions .cds-btn {
  margin-left: 0;
}

.picker__actions .cds-field__helper {
  margin-right: auto;
}

/* s3. A row action drawn as a link, which is how the mockup draws Remove.
   The element stays a button, because it acts on this page. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--cds-txt-body-small-size);
  line-height: var(--cds-line-height-body);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
  cursor: pointer;
}

.link-btn:hover {
  text-decoration: underline;
}

.link-btn:focus-visible {
  outline: 2px solid var(--cds-states-focus);
  outline-offset: 2px;
  border-radius: var(--cds-radius-xsmall);
}

.link-btn--destructive {
  color: var(--cds-red-450);
}

/* s4. The fee entry form and its actions. */
.entry--form {
  margin-top: var(--cds-space-150);
}

.entry__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--cds-space-100);
  margin-top: var(--cds-space-150);
}

/* s5. The rule band sits in the third grid column beside the two approval
   controls, level with the controls rather than with the labels. It also has
   to be able to hide: .cds-msg sets its own display, which would otherwise
   defeat the hidden attribute, the same trap .cds-field[hidden] closes above. */
.cds-msg[hidden] {
  display: none;
}

.rule-band {
  align-self: end;
}

@media (max-width: 1080px) {
  .rule-band {
    grid-column: 1 / -1;
    align-self: auto;
  }
}

/* s6. The New Contract form now carries three footer actions. Below 560 the
   shared rule stretches each one, which overflowed the row. Let them wrap. */
@media (max-width: 560px) {
  .cds-card__footer-actions {
    flex-wrap: wrap;
  }
}