/* ============================================================
   UCMS Provider Scheduler (Epic 1) - design prototype
   Screen 1: Home / Dashboard tab. Source frame: FigJam 172:144
   on "PP Scheduler -Epic 1" (file 36bwdEVTMi9lxm4p4axy4A).

   Styling source of truth: TELUS Consistency Design System (CDS),
   extracted 2026-07-30 to reference/cds/. Every custom property
   below is named after its CDS token and carries the exact token
   value. Colour literals appear ONLY inside the :root block; no
   rule and no HTML file below it states a colour directly.

   Shell note: unlike the UCMS billing prototype (dark navy product
   chrome), the Provider Platform shell is the light shell shown on
   the board - neutral-50 side nav, white top bar, neutral-10 canvas.
   It is therefore built from CDS neutrals, not from a --ucms-* set.
   ============================================================ */

/* ---------- Brand typeface ----------
   HN for TELUS, Monotype Custom. Three weights ship in the pack and 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 product 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 - the only place a colour value is written
   ============================================================ */
: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-red-100: #ffb39f;
  --cds-red-400: #c12335;
  --cds-red-450: #a61527;
  --cds-orange-100: #ffd497;
  --cds-orange-350: #d16e0a;
  --cds-orange-400: #b55308;
  --cds-orange-50-opacity-15: rgba(255, 171, 64, 0.15);
  --cds-red-400-opacity-10: rgba(193, 35, 53, 0.1);

  /* CDS ships Green/green-400-opacity-10 as the badge tint. At 10 percent a
     12px green-400 label lands at 4.38:1 on white, just under 4.5:1, so the
     tint runs at 7 percent here. Same deviation as the billing prototype;
     worth raising with the design-system team. */
  --cds-green-400-opacity-07: rgba(43, 128, 0, 0.07);

  /* 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;
  --cds-font-weight-bold: 700;

  /* 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, Size=Medium button height */
  --cds-field-height-small: 40px;
  --cds-button-height-medium: 40px;

  /* Provider Platform shell metrics (layout only, no colour) */
  --pp-nav-width: 240px;
  --pp-content-max: 1180px;
}

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

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;
}

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);
  text-decoration: none;
  transition: top 150ms ease-out;
}

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

/* ============================================================
   App shell - light Provider Platform chrome
   ============================================================ */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--pp-nav-width) minmax(0, 1fr);
  grid-template-areas: "nav main";
}

.app__nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-large) var(--cds-padding-medium);
  background: var(--cds-neutral-50);
  border-right: 1px solid var(--cds-neutral-100);
}

.app__brand {
  display: block;
  padding: 0 var(--cds-space-50) var(--cds-space-100);
  text-decoration: none;
}

.app__brand-mark {
  display: block;
  font-size: var(--cds-hd-title-size);
  line-height: var(--cds-line-height-title);
  font-weight: var(--cds-font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--cds-primary-brand);
}

.app__brand-name {
  display: block;
  margin-top: var(--cds-space-25);
  font-size: var(--cds-txt-caption-small-size);
  line-height: 1.4;
  font-weight: var(--cds-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cds-neutral-350);
}

.app__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-25);
}

.app__nav-item {
  display: flex;
  align-items: center;
  gap: var(--cds-space-75);
  height: var(--cds-field-height-small);
  padding: 0 var(--cds-padding-small);
  border-radius: var(--cds-radius-small);
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-450);
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.app__nav-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--cds-neutral-350);
}

.app__nav-item:hover {
  background: var(--cds-neutral-100);
  color: var(--cds-neutral-500);
}

.app__nav-item:hover svg {
  color: var(--cds-neutral-500);
}

.app__nav-item[aria-current="page"] {
  background: var(--cds-primary-brand-opacity-10);
  color: var(--cds-primary-brand);
}

.app__nav-item[aria-current="page"] svg {
  color: var(--cds-primary-brand);
}

.app__main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Top bar ---------- */
/* Crit 234:210 resolved: no breadcrumb. Home is the top level of the
   Provider Platform, so a crumb trail above it carried no orientation. */
.topbar {
  background: var(--cds-neutral-0);
  border-bottom: 1px solid var(--cds-neutral-100);
}

.topbar__inner {
  max-width: var(--pp-content-max);
  margin: 0 auto;
  padding: var(--cds-padding-large) var(--cds-padding-xlarge) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cds-space-150);
}

.topbar__title {
  font-size: var(--cds-hd-headline-size);
  line-height: var(--cds-line-height-headline);
  font-weight: var(--cds-font-weight-regular);
  letter-spacing: -0.01em;
}

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

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

.notif {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--cds-field-height-small);
  height: var(--cds-field-height-small);
  padding: 0;
  border: 0;
  border-radius: var(--cds-radius-small);
  background: transparent;
  color: var(--cds-neutral-450);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.notif svg {
  width: 22px;
  height: 22px;
}

.notif:hover {
  background: var(--cds-neutral-50);
  color: var(--cds-neutral-500);
}

.notif__count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--cds-red-400);
  color: var(--cds-neutral-0);
  font-size: var(--cds-txt-caption-small-size);
  font-weight: var(--cds-font-weight-semibold);
  line-height: 1;
}

.user {
  display: flex;
  align-items: center;
  gap: var(--cds-space-75);
  padding-left: var(--cds-space-100);
  border-left: 1px solid var(--cds-neutral-100);
}

.user__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--cds-primary-brand);
  color: var(--cds-neutral-0);
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-semibold);
  letter-spacing: 0.02em;
}

.user__name {
  display: block;
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
}

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

/* ---------- Tabs (CDS Secondary navigation, Type=Menu) ---------- */
.cds-tabs {
  max-width: var(--pp-content-max);
  margin: 0 auto;
  padding: 0 var(--cds-padding-xlarge);
  display: flex;
  gap: var(--cds-space-200);
}

.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;
  transition: color 150ms ease-out;
}

.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;
}

/* ---------- Content canvas ---------- */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--pp-content-max);
  margin: 0 auto;
  padding: var(--cds-padding-xlarge) var(--cds-padding-xlarge) var(--cds-space-300);
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-150);
}

/* ============================================================
   CDS Card (Style=Outline)
   CDS binds Card to Corner/radius-default (16). At page-tile width 16
   reads too soft, so tiles take the next value down the CDS corner
   scale, Corner/radius-small (8). Still a CDS token, not a freelanced
   one, and consistent with the UCMS billing prototype.
   Elevation is declared once: border, no shadow.
   ============================================================ */
.cds-card {
  background: var(--cds-neutral-0);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
}

/* ---------- Welcome card ---------- */
.welcome {
  position: relative;
  padding: var(--cds-padding-xlarge);
}

.welcome__title {
  font-size: var(--cds-hd-title-size);
  line-height: var(--cds-line-height-title);
  font-weight: var(--cds-font-weight-semibold);
}

.welcome__body {
  margin-top: var(--cds-space-50);
  max-width: 68ch;
  font-size: var(--cds-txt-body-size);
  color: var(--cds-neutral-350);
  text-wrap: balance;
}

.welcome__actions {
  margin-top: var(--cds-space-150);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-75);
}

.welcome__dismiss {
  position: absolute;
  top: var(--cds-space-100);
  right: 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;
  transition: background-color 150ms ease-out, color 150ms ease-out,
    border-color 150ms ease-out;
}

.cds-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.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[aria-disabled="true"],
.cds-btn:disabled {
  background: var(--cds-neutral-100);
  border-color: transparent;
  color: var(--cds-neutral-350);
  cursor: not-allowed;
}

/* ---------- Icon button (CDS Icon button in a 32px hit area) ---------- */
.cds-icon-btn {
  display: inline-grid;
  place-items: center;
  /* It is a fixed 32px hit area wherever it sits. Without this it is a
     shrinkable flex item, and in a tight modal header it collapsed to
     under 19px, which is below the 24px minimum target size. */
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--cds-radius-small);
  background: transparent;
  color: var(--cds-neutral-350);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

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

.cds-icon-btn:hover {
  background: var(--cds-neutral-50);
  color: var(--cds-neutral-500);
}

/* Used by the reschedule week stepper at the ends of the loaded range, so a
   provider can see there is nothing further rather than clicking into
   silence. */
.cds-icon-btn:disabled,
.cds-icon-btn:disabled:hover {
  background: transparent;
  color: var(--cds-neutral-200);
  cursor: not-allowed;
}

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

/* ---------- 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);
  font-weight: var(--cds-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* The green tint is translucent, so on a tinted surface (the selected
   appointment row, the client info block) it darkened and the 12px label
   fell to 3.85:1. The chip now paints the tint over an opaque neutral-0
   base, so the composite is the same on every surface and the label holds
   4.56:1 wherever the badge sits. Both values are CDS tokens; no new
   colour is introduced. */
.cds-badge--green {
  background-color: var(--cds-neutral-0);
  background-image: linear-gradient(var(--cds-green-400-opacity-07), var(--cds-green-400-opacity-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);
}

/* Case ID chip (Bryan 345:1440). Monospaced digits, not a monospace face:
   tabular figures keep the activity numbers aligned down the column
   without dressing the chip up as code. */
.case-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--cds-padding-small);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-0);
  color: var(--cds-neutral-450);
  font-size: var(--cds-txt-caption-size);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Stat cards
   Crit 234:206 resolved: these were flat tiles that looked tappable and
   were not. They are now real links - each states the destination in
   words, carries a chevron, lifts its border on hover and takes a focus
   ring. The reference centred the figures; left-aligning them puts the
   number, the label and the action on one reading edge.
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cds-space-150);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-25);
  padding: var(--cds-padding-large);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.stat__value {
  font-size: var(--cds-hd-headline-size);
  line-height: var(--cds-line-height-headline);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-primary-brand);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-350);
}

.stat__action {
  margin-top: var(--cds-space-100);
  display: flex;
  align-items: center;
  gap: var(--cds-space-25);
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-primary-brand);
}

.stat__action svg {
  width: 16px;
  height: 16px;
  transition: transform 150ms ease-out;
}

.stat:hover {
  border-color: var(--cds-primary-200);
  background: var(--cds-neutral-10);
}

.stat:hover .stat__action svg {
  transform: translateX(3px);
}

/* ============================================================
   Accordion (CDS Info message - accordion pattern, card-scale)
   ============================================================ */
.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--cds-space-75);
  padding: var(--cds-padding-large) var(--cds-padding-large);
  border: 0;
  background: transparent;
  border-radius: var(--cds-radius-small);
  text-align: left;
  cursor: pointer;
}

.acc__head-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--cds-neutral-450);
}

.acc__head-icon svg {
  width: 22px;
  height: 22px;
}

/* New-message indicator (Bryan 370:4623): a dot riding the header icon,
   paired with a counted badge so the state is never colour-only. */
.acc__head-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: var(--cds-primary-brand);
  border: 2px solid var(--cds-neutral-0);
}

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

.acc__chevron {
  margin-left: auto;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--cds-neutral-350);
}

.acc__chevron svg {
  width: 20px;
  height: 20px;
  transition: transform 200ms ease-out;
}

.acc__head[aria-expanded="false"] .acc__chevron svg {
  transform: rotate(180deg);
}

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

/* The one authored motion on this screen: the panel opens by growing its
   grid track, so nothing jumps and nothing is animated for decoration. */
.acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms ease-out;
}

/* The state lives on the section, not on the button. The button sits inside
   its heading, so an adjacent-sibling selector off the button never reaches
   the panel; the script mirrors aria-expanded onto data-open here. */
[data-open="false"] .acc__panel {
  grid-template-rows: 0fr;
}

.acc__panel > .acc__panel-inner {
  overflow: hidden;
}

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

/* ---------- Appointments toolbar ---------- */
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-space-100);
  padding-bottom: var(--cds-space-100);
}

.list-head__title {
  font-size: var(--cds-txt-body-size);
  font-weight: var(--cds-font-weight-semibold);
}

.list-head__count {
  margin-left: var(--cds-space-50);
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-regular);
  color: var(--cds-neutral-350);
}

/* ============================================================
   Appointment groups
   Crit 234:163 resolved: the board put finished appointments above
   today's. The list now leads with Today, then Upcoming, and closes
   with Earlier, which is quietened rather than removed.
   ============================================================ */
.appt-group + .appt-group {
  margin-top: var(--cds-space-200);
}

.appt-group__label {
  display: flex;
  align-items: center;
  gap: var(--cds-space-100);
  padding-bottom: var(--cds-space-50);
}

.appt-group__name {
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-450);
  white-space: nowrap;
}

.appt-group__date {
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
  white-space: nowrap;
}

.appt-group__rule {
  flex: 1;
  height: 1px;
  background: var(--cds-neutral-100);
}

.appt-group--today .appt-group__name {
  color: var(--cds-primary-brand);
}

.appt-group--today .appt-group__rule {
  background: var(--cds-primary-brand);
}

/* ---------- Appointment row ---------- */
.appt {
  position: relative;
  display: grid;
  grid-template-columns: 92px 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-medium) var(--cds-padding-small);
  border-radius: var(--cds-radius-small);
  border-bottom: 1px solid var(--cds-neutral-100);
  transition: background-color 150ms ease-out;
}

.appt:last-child {
  border-bottom: 0;
}

.appt:hover {
  background: var(--cds-neutral-10);
}

.appt__date {
  text-align: right;
  padding-top: 2px;
}

.appt__weekday {
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cds-neutral-450);
}

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

/* Modality icon (Bryan 345:1440). Icon plus a visually-hidden label, so
   video and phone are never distinguishable by shape alone. */
.appt__modality {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--cds-neutral-350);
}

.appt__modality svg {
  width: 18px;
  height: 18px;
}

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

.appt__link {
  color: inherit;
  text-decoration: none;
}

/* Stretched hit area: the whole row opens the session, while the chips and
   badges beside it stay readable rather than being swallowed by a link. */
.appt__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--cds-radius-small);
}

.appt__link:hover .appt__time {
  color: var(--cds-primary-brand);
}

.appt__desc {
  margin-top: 2px;
  font-size: var(--cds-txt-body-small-size);
  color: var(--cds-neutral-350);
}

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

.appt__note {
  margin-top: var(--cds-space-25);
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
}

.appt__meta {
  display: flex;
  align-items: center;
  gap: var(--cds-space-50);
  padding-top: 1px;
}

/* The status word varies in length. Fixing its box keeps the case chips on a
   single vertical edge, which is what makes the column scannable. */
.appt__meta .cds-badge {
  min-width: 94px;
  justify-content: center;
}

/* Earlier group: present, scannable, deliberately quieter. */
.appt-group--past .appt__time,
.appt-group--past .appt__weekday {
  color: var(--cds-neutral-350);
  font-weight: var(--cds-font-weight-regular);
}

.appt-group--past .appt__desc strong {
  color: var(--cds-neutral-350);
  font-weight: var(--cds-font-weight-regular);
}

/* ============================================================
   Messages accordion (Bryan 370:4623)
   Admin-to-provider communications. Distinct from the notification
   bell, which carries per-appointment events.
   ============================================================ */
.msg-list {
  display: flex;
  flex-direction: column;
}

.msg {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-medium) var(--cds-padding-small);
  border-radius: var(--cds-radius-small);
  border-bottom: 1px solid var(--cds-neutral-100);
  transition: background-color 150ms ease-out;
}

.msg:last-child {
  border-bottom: 0;
}

.msg:hover {
  background: var(--cds-neutral-10);
}

.msg__flag {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 4px;
  background: transparent;
}

.msg--new .msg__flag {
  background: var(--cds-primary-brand);
}

.msg__title {
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--cds-neutral-500);
  text-decoration: none;
}

.msg__title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--cds-radius-small);
}

.msg:hover .msg__title {
  color: var(--cds-primary-brand);
}

.msg__meta {
  margin-top: 2px;
  font-size: var(--cds-txt-caption-size);
  color: var(--cds-neutral-350);
}

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

.msg__tag {
  padding-top: 1px;
}

/* ============================================================
   Dashboard footer - Get Help (Bryan 370:4619)
   ============================================================ */
.dash-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cds-space-75) var(--cds-space-150);
  padding-top: var(--cds-space-50);
}

.help-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-space-50);
}

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

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

/* ============================================================
   Structural responsiveness
   Product UI adapts by re-composing, not by fluid type. Type sizes
   below are the CDS fixed scale at every width.
   ============================================================ */
@media (max-width: 1024px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "nav"
      "main";
  }

  .app__nav {
    flex-direction: row;
    align-items: center;
    gap: var(--cds-space-150);
    padding: var(--cds-padding-small) var(--cds-padding-medium);
    border-right: 0;
    border-bottom: 1px solid var(--cds-neutral-100);
    overflow-x: auto;
  }

  .app__brand {
    padding: 0;
  }

  .app__nav-list {
    flex-direction: row;
  }

  .topbar__inner,
  .cds-tabs,
  .content {
    padding-left: var(--cds-padding-medium);
    padding-right: var(--cds-padding-medium);
  }
}

@media (max-width: 720px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .appt__date {
    text-align: left;
  }

  .appt__meta {
    justify-content: flex-start;
  }

  .user__text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
  }
}

/* ============================================================
   Index page (the prototype's own contents page, not product UI)
   ============================================================ */
.doc {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--cds-space-300) var(--cds-padding-xlarge) var(--cds-space-300);
}

.doc__title {
  font-size: var(--cds-hd-headline-size);
  line-height: var(--cds-line-height-headline);
  font-weight: var(--cds-font-weight-regular);
  letter-spacing: -0.01em;
}

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

.doc__facts {
  margin-top: var(--cds-space-150);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-50);
}

.doc__facts span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--cds-padding-small);
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-neutral-50);
  color: var(--cds-neutral-450);
  font-size: var(--cds-txt-caption-size);
  line-height: 1;
}

/* The two things a reviewer opening this page wants: the first screen, and
   the questions that need an answer. */
.doc__actions {
  margin-top: var(--cds-space-150);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-75);
}

.doc__back {
  margin-bottom: var(--cds-space-75);
  font-size: var(--cds-txt-body-small-size);
}

.doc__toc {
  margin-top: var(--cds-space-200);
  padding: var(--cds-padding-medium);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-50) var(--cds-space-150);
  background: var(--cds-neutral-50);
  border-radius: var(--cds-radius-small);
  font-size: var(--cds-txt-body-small-size);
}

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

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

.doc h3 {
  margin-top: var(--cds-space-200);
  font-size: var(--cds-txt-body-size);
  line-height: var(--cds-line-height-body);
  font-weight: var(--cds-font-weight-semibold);
}

/* The screen index reads as a grid of one-line cards, so nineteen screens fit
   in a glance rather than a page of prose. The full note on each screen lives
   in the design record. */
.screen-list {
  margin-top: var(--cds-space-100);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--cds-space-75);
}

/* The entry point of the flow, marked on the index so a reviewer knows
   which file to open first. */
.screen-list__flag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: var(--cds-space-50);
  padding: 0 var(--cds-space-50);
  border-radius: var(--cds-radius-xsmall);
  background: var(--cds-primary-brand-opacity-10);
  color: var(--cds-primary-brand);
  font-size: var(--cds-txt-caption-small-size);
  font-weight: var(--cds-font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The whole card is the link, so the target is the card and not the four
   words of its name. */
.screen-list__row {
  display: block;
  padding: var(--cds-padding-medium);
  background: var(--cds-neutral-0);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  text-decoration: none;
  transition: border-color 150ms ease-out;
}

.screen-list__row:hover {
  border-color: var(--cds-primary-200);
}

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

.screen-list__row:hover .screen-list__name {
  text-decoration: underline;
}

.screen-list__desc {
  display: block;
  margin-top: var(--cds-space-25);
  font-size: var(--cds-txt-caption-size);
  line-height: var(--cds-line-height-body);
  color: var(--cds-neutral-350);
}

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

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

.call__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cds-space-50);
  font-size: var(--cds-txt-body-small-size);
  font-weight: var(--cds-font-weight-semibold);
}

.call__src {
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-regular);
  color: var(--cds-neutral-350);
  font-variant-numeric: tabular-nums;
}

/* On the design record each entry is a native disclosure, so the page reads
   as a list of headlines and opens one at a time. The default marker is
   dropped because the summary is a flex row; the caret below replaces it. */
details.call > summary {
  cursor: pointer;
  list-style: none;
}

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

details.call > summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 150ms ease-out;
}

details.call[open] > summary::before {
  transform: rotate(90deg);
}

details.call[open] > summary {
  margin-bottom: var(--cds-space-50);
}

.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);
}

/* The row opener is a button, because it opens the session details panel on
   the same page rather than navigating. These are the element defaults a
   button brings and an anchor does not; the stretched hit area, the colour
   and the hover rule above are unchanged. No width and no display either:
   the button shrink-wraps its own text the way the anchor did and the row
   grid keeps sizing the column, where a stretched width would add the
   button's own box to the column and scroll the row. */
button.appt__link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Same reset where a CDS Link is drawn as a button, which it is when the
   control opens a panel on the page instead of navigating. Colour, weight
   and the hover rule above are unchanged; .notif-item__link supplies its
   own display. */
button.cds-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--cds-font-weight-semibold);
  text-align: left;
  cursor: pointer;
}

/* ============================================================
   Modal page lock

   A dialog that owns the screen holds the page behind it still, so a
   scroll gesture over the scrim moves the dialog and nothing else.
   The attribute is written by js/modal-focus.js, because the same
   script is what makes the background inert and keeps Tab inside.
   ============================================================ */
:root[data-modal-open="true"],
:root[data-modal-open="true"] body {
  overflow: hidden;
}