/* ============================================================
   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;
  }
}