/**
 * Book page 33 — patient and marketing only.
 *
 * Doctor portal and Command Centre do not load this file, and they do not
 * carry .ns-book-surface, so --button-radius stays the shared pill.
 * The video-call stage does not load it either: Linen would paint that
 * near-black stage, and the round call controls are not this button.
 * Heights, padding, and breakpoints stay on each control, except the
 * phone marketing hero primary, which keeps its padding and uses the
 * 44px button height.
 */

html body.ns-book-surface {
  --button-radius: var(--radius-sm);
}

/* Rounded rectangle, not a pill. :is() plus :not() is four classes, so this
   beats a three-class pill rule (the phone hub tabs). Chips and square
   icon controls stay round: they are not the page 33 button. */
html body.ns-book-surface :is(
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .ns-btn,
  .btn,
  .btn-submit,
  .patient-header-speak-btn,
  .patient-header-icon-cta,
  .speak-to-doctor-hero__btn,
  a.rounded-full,
  [class*="__cta"],
  a[class*="btn"]
):not(
  .mh-chip,
  .care-chip,
  .start-care-option,
  [class*="chip"],
  [class~="h-8"][class~="w-8"],
  [class~="h-9"][class~="w-9"],
  [class~="h-10"][class~="w-10"],
  [class~="h-11"][class~="w-11"],
  [class~="h-12"][class~="w-12"],
  [class~="h-13"][class~="w-13"],
  [class~="h-14"][class~="w-14"],
  .patient-join-queue-modal__close,
  .ns-round-icon
) {
  border-radius: var(--radius-sm);
}

/* The phone hub track and its tabs are three classes deep in
   dashboard-hub-swipe.css. This is one class deeper, on the book surface. */
@media (max-width: 768px) {
  html body.ns-book-surface .dashboard-hub .dashboard-hub-pager {
    border-radius: var(--radius-sm);
  }

  html body.ns-book-surface .dashboard-hub .dashboard-hub-pager .dashboard-hub-pager__tab {
    border-radius: var(--radius-sm);
  }
}

/* The intent track is a div, so the button rule never reached it. Tabs are
   already 12px. The track matches them at every width, including ≤480. */
html body.ns-book-surface .care-path-intent__tabs,
html body.ns-book-surface .care-path-intent__tab {
  border-radius: var(--radius-sm);
}

/* Primary controls are Ink with Paper text. Inverse buttons on a dark
   hero stay on their own fill. Hover keeps the dusk step. */
html body.ns-book-surface :is(
  .ns-btn--primary,
  .btn-primary,
  .btn-submit,
  .patient-header-speak-btn,
  .speak-to-doctor-hero__btn,
  a.bg-primary,
  button.bg-primary
) {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

html body.ns-book-surface :is(
  .ns-btn--primary,
  .btn-primary,
  .btn-submit,
  .patient-header-speak-btn,
  .speak-to-doctor-hero__btn,
  a.bg-primary,
  button.bg-primary
):hover {
  background-color: var(--color-primary-dark);
  color: var(--color-paper);
}

/* Linen cards on the Paper page. A class token that ends in "card"
   is the shell. Photo media, overlays, badges, and CTAs do not.
   .prls-card is the 200px flip box behind the Sun Road mark, not a
   card shell. Linen there is a cream square on Dusk and on Paper. */
html body.ns-book-surface :is([class$="card"], [class*="card "]):not(.prls-card) {
  background-color: var(--color-linen);
  box-sizing: border-box;
}

html body.ns-book-surface :is(
  .dashboard-care-paths--photo-layout,
  .care-episode-card,
  .onboarding-funnel__panel,
  .intake-wizard-panel,
  .clinical-wizard-panel,
  .pro-panel,
  .prp-panel,
  .pic-panel
) {
  background-color: var(--color-linen);
  background-image: none;
  box-sizing: border-box;
}

/* An id plus a class beats the list above. Naming the id keeps Linen.
   The video page does not carry .ns-book-surface, so its modal stays. */
html:not([data-ground="dusk"]) body.ns-book-surface :is(
  #post-reg-onboarding-root .pro-panel,
  #post-reg-proxy-root .prp-panel,
  #post-reg-logo-seq .pro-panel,
  #post-reg-logo-seq .prp-panel,
  #post-reg-logo-seq .pic-panel,
  #post-reg-logo-seq .intake-wizard-panel,
  #booking-pay-logo-seq .intake-wizard-panel,
  #unifiedIntakeWizard .intake-wizard-panel,
  #modalitySwitchRequestModal .modality-switch-modal__panel
) {
  background-color: var(--color-linen);
  background-image: none;
}

/* An id gradient (Paper on Paper) beats the class$=card fill. Selected
   states keep their own wash. Pricing glass and the booking practitioner
   block do not end in "card" and are not bg-white. */
html body.ns-book-surface :is(
  #assessmentCards .assessment-card:not(.selected),
  #upcomingAppointmentsContent .upcoming-appointment-card
) {
  background-color: var(--color-linen);
  background-image: none;
}

html body.ns-book-surface :is(
  .glass-panel,
  .plan-card-popular,
  .membership-card-highlight,
  .ref-stat,
  .msg-stats-banner,
  .thread-glass,
  .more-hub-row,
  .health-hub-row,
  .next-steps-group
) {
  background-color: var(--color-linen);
  background-image: none;
}

html body.ns-book-surface #patientBookingModal #doctorSelectionBlock,
html body.ns-book-surface #patientBookingModal #doctorCards .doctor-card:not(.selected) {
  background-color: var(--color-linen);
  background-image: none;
}

/* Day shells that do not end in "card". An id rule was keeping the booking
   schedule and its header on Paper. This block does not match Dusk, and it
   does not print, so the lab requisition still prints white and night cards
   keep the dusk fill. The prescriptions document stage beats this with
   #previewModal. */
@media screen {
  html:not([data-ground="dusk"]) body.ns-book-surface :is(
    .bp-container,
    .preview-container,
    .requisition-container,
    .help-centre-faq-item
  ) {
    background-color: var(--color-linen);
    background-image: none;
  }

  html:not([data-ground="dusk"]) body.ns-book-surface #patientBookingModal #scheduleCard,
  html:not([data-ground="dusk"]) body.ns-book-surface #patientBookingModal .patient-booking-modal__brand-header {
    background-color: var(--color-linen);
    background-image: none;
  }
}

/* Exact tokens, so hover:bg-white does not count as a card fill.
   Buttons keep their own fill. */
/* Directional shells (the phone hero is rounded-t-3xl) count.
   Chat replies use break-words and keep their own fill on the Linen panel. */
html body.ns-book-surface :is(
  [class~="rounded-xl"],
  [class~="rounded-2xl"],
  [class~="rounded-3xl"],
  [class~="rounded-t-2xl"],
  [class~="rounded-t-3xl"],
  [class~="rounded-b-2xl"],
  [class~="rounded-b-3xl"]
):is(
  [class~="bg-white"],
  [class~="bg-white/90"],
  [class~="bg-white/95"],
  [class~="bg-bg-surface"],
  [class~="bg-bg-raised"],
  [class~="bg-bg-base"],
  [class~="bg-background"]
):not(button):not(input):not(textarea):not(select):not([class~="break-words"]) {
  background-color: var(--color-linen);
  box-sizing: border-box;
}

/* Page cards stay inside their column. This rule outranks max-w-md, so
   inside a dialog it stretched the panel to the viewport. Dialog panels
   keep their own cap. */
html body.ns-book-surface :is(
  [class$="card"],
  [class*="card "],
  .dashboard-care-paths--photo-layout,
  .onboarding-funnel__panel,
  .intake-wizard-panel,
  .clinical-wizard-panel,
  .pro-panel,
  .prp-panel,
  .pic-panel
):not(.prls-card):not(
  :is(.patient-portal-overlay-host, [role="dialog"], [role="alertdialog"], [aria-modal="true"], .fixed.inset-0),
  :is(.patient-portal-overlay-host, [role="dialog"], [role="alertdialog"], [aria-modal="true"], .fixed.inset-0) *
),
html body.ns-book-surface :is(
  [class~="rounded-xl"],
  [class~="rounded-2xl"],
  [class~="rounded-3xl"],
  [class~="rounded-t-2xl"],
  [class~="rounded-t-3xl"],
  [class~="rounded-b-2xl"],
  [class~="rounded-b-3xl"]
):is(
  [class~="bg-white"],
  [class~="bg-white/90"],
  [class~="bg-white/95"],
  [class~="bg-bg-surface"],
  [class~="bg-bg-raised"],
  [class~="bg-bg-base"],
  [class~="bg-background"]
):not(button):not(input):not(textarea):not(select):not([class~="break-words"]):not(
  :is(.patient-portal-overlay-host, [role="dialog"], [role="alertdialog"], [aria-modal="true"], .fixed.inset-0),
  :is(.patient-portal-overlay-host, [role="dialog"], [role="alertdialog"], [aria-modal="true"], .fixed.inset-0) *
) {
  max-width: 100%;
  min-width: 0;
}

/* The bell menu is absolute inside a wrapper the size of the button.
   max-width: 100% above is that wrapper, so the panel collapses to the
   bell. An id beats that rule. Phone already pins the panel in
   mobile-ios.css; this only lifts the cap. */
html body.ns-book-surface #notificationDropdown {
  max-width: none;
}

/* Mist on Paper is about 1.2:1 and Mist on Linen is about 1.1:1.
   Off tracks and field edges need a boundary that clears 3:1 on both
   grounds. Umber does. The on track stays Ink. Disabled rows and the
   document-share checked state keep their own fills. */
html body.ns-book-surface .toggle-switch:not(.active) {
  background: var(--color-umber);
}

html body.ns-book-surface .preference-row--disabled .toggle-switch:not(.active) {
  background: var(--color-gray-200);
}

html body.ns-book-surface .doc-upload-modal .doc-share-input:checked + .toggle-switch {
  background: var(--color-primary);
}

html body.ns-book-surface :is(
  .input,
  .select,
  .textarea,
  .form-input,
  .form-select,
  .encounter-select
):not(.has-error) {
  border-color: var(--color-umber);
}

html body.ns-book-surface :is(
  .input,
  .select,
  .textarea,
  .form-input,
  .form-select,
  .encounter-select
):focus:not(.has-error) {
  border-color: var(--input-border-focus);
}

/* Info-card label: SemiBold caps. Value: Medium. Figtree, upright. */
html body.ns-book-surface :is(
  .section-kicker,
  .dashboard-care-paths__heading,
  .care-path-photo-card__badge,
  .myp-welcome-card__kicker,
  .billing-hub-current-plan__label,
  .med-detail-item .label,
  .mh-hw-summary-label,
  .msg-stats-label,
  .ref-stat-label,
  .queue-waiting-modal__stat-label,
  .bc-row__label,
  .care-stream-section-label,
  .care-stream-audience-card h4,
  .help-centre-contact__label
) {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest, 0.08em);
  color: var(--color-text-primary);
}

html body.ns-book-surface #upcomingAppointmentsContent :is(
  .upcoming-appointment-card__visit-label,
  .upcoming-appointment-card__queue-stat-label
) {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest, 0.08em);
  color: var(--color-text-primary);
}

html body.ns-book-surface :is(
  .dashboard-section-header__title,
  .myp-welcome-card__title,
  .care-path-photo-card__title,
  .ns-card h2,
  .ns-card h3,
  .billing-hub-current-plan__name,
  .med-card .med-name,
  .med-detail-item .value,
  .panel-header.mh-card-head h2,
  .mh-hw-summary-value,
  .assessment-card__title,
  .msg-stats-value,
  .ref-stat-value,
  .queue-waiting-modal__stat-value,
  .care-stream-panel-body,
  .care-stream-list-item,
  .care-stream-feature p,
  .help-centre-contact__email a
) {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-medium);
}

html body.ns-book-surface #upcomingAppointmentsContent :is(
  .upcoming-appointment-card__reason,
  .upcoming-appointment-card__provider,
  .upcoming-appointment-card__datetime,
  .upcoming-appointment-card__queue-stat-value
) {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* The appointments page sets this title under an id, which beats the
   class rule above. Page 33 values are Medium. */
html body.ns-book-surface #assessmentCards .assessment-card__title {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* Plan names (h3), prices, and badges stay at the weight they were written
   with. Feature lines are the card value. A descendant rule on every
   rounded card was turning badges into tracked caps. */
html body.ns-book-surface .glass-panel li,
html body.ns-book-surface article[class~="rounded-2xl"] li {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* First screen. 20px uses Medium (the small-headline floor). From 1024
   the line is a Regular headline. It stays in flow above the cards. */
.dashboard-greeting {
  min-width: 0;
  max-width: 100%;
}

.dashboard-greeting__line {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-medium);
  font-size: var(--text-h4);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

html[data-ground="dusk"] .dashboard-greeting__line {
  color: var(--color-night-text);
}

.dashboard-greeting__identity {
  margin: var(--space-2xs) 0 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-style: normal;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

@media (min-width: 769px) {
  /* The shell subtitle is this same line, and it is hidden only at ≤768. */
  .dashboard-greeting__identity {
    display: none;
  }
}

@media (min-width: 1024px) {
  .dashboard-greeting__line {
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
  }
}

/* Phone hero primary control. min-h-10 is 40px; the mobile target is 44px.
   Padding and the desktop hero height stay as they are. */
html body.marketing-surface [data-hero-layout="mobile"] a[data-join-cta] {
  min-height: var(--button-height-md);
}

/* The phone dock forces a pill after this sheet. On the book surface the
   launcher is the page 33 button. Video has no .ns-book-surface. */
@media (max-width: 768px) {
  html body.ns-book-surface:has(
    #modalitySwitchRequestModal[data-mode="idle"]:not(.hidden)
    #modalitySwitchRequestLauncher:not([hidden])
  ) #modalitySwitchRequestModal .modality-switch-modal__launcher-btn {
    border-radius: var(--button-radius);
  }
}