/* Sections: buttons, fields, native choices, toggles, segments, tabs, chips, cards, badges, alerts, dialogs, tables, navigation, empty states, errors and shared states. */
/* Shared controls: named roles retain the current product brand and surface metrics. */
@layer mhp-components {
  /* Buttons and text actions: shared appearance and states. */
  /* Button: full contrast secondary is the default action. */
  .mhp-button {
    border: var(--line-strong) solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--control-surface);
    color: var(--control-ink);
    font-family: var(--font);
    font-size: var(--text-button);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-single);
    letter-spacing: var(--tracking-action);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
    text-transform: uppercase;
  }
  /* Primary button: brand accent belongs to the elected main action. */
  .mhp-button--primary { background: var(--control-primary); border-color: var(--control-primary); color: var(--white); }
  /* Tertiary button: underline identifies an action without a filled surface. */
  .mhp-button--tertiary {
    background: var(--transparent);
    border-color: var(--transparent);
    color: var(--teal-text);
    text-decoration: underline;
  }
  /* Danger button: destructive intent remains readable on the default surface. */
  .mhp-button--danger { color: var(--color-error); border-color: var(--color-error); }
  /* Icon button: square target with a circular boundary. */
  .mhp-button--icon { border-radius: var(--radius-full); }

  /* Inverse button: controls on photographic stages retain readable contrast. */
  .mhp-button--inverse { color: var(--white); background: var(--surface-stage); border-color: var(--surface-dark-muted); }
  /* Menu label: visible bars retain readable ink and a clear pointer affordance. */
  .mhp-button--menu { color: var(--text); cursor: pointer; border-radius: var(--radius-md); }
  /* Menu button bars: retain the existing three bar navigation affordance. */
  .mhp-button__bar { background: currentColor; border-radius: var(--space-2xs); }
  /* Menu button bars: the middle bar hides while the menu is open. */
  .mhp-button__bar--hidden { opacity: 0; }
  /* Inline action: original raspberry text with no button box or flow height. */
  .mhp-link {
    color: var(--magenta-cta);
    font-size: var(--text-button);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-action);
    text-decoration: none;
    cursor: pointer;
  }
  /* Quiet text action: secondary sign in assistance keeps its original single line. */
  .mhp-link--quiet {
    color: var(--text-dim);
    font-size: var(--text-assistance);
    font-weight: var(--weight-regular);
    letter-spacing: normal;
    line-height: normal;
    text-decoration: underline;
  }
  /* Teal text link: document return links retain the established brand accent. */
  .mhp-link--teal { color: var(--teal-text); }

  /* Dense action: editing tools use native line boxes and a separate full hit target. */
  .mhp-button--dense {
    font-size: var(--text-field);
    font-weight: var(--weight-bold);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    border-radius: var(--radius-lg);
    border: 0;
    font-family: var(--font-native);
  }
  /* Small or caption action: compact labels use the original caption size. */
  .mhp-button--small, .mhp-button--caption { font-size: var(--text-caption); }
  /* Dense small action: compact list tools retain their original label metrics. */
  .mhp-button--small:where(.mhp-button--dense) {
    font-size: var(--text-nav);
    font-family: var(--font);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    border: var(--line-thin) solid var(--border);
  }
  /* Regular action: native list tools retain their original resting weight. */
  .mhp-button--regular { font-weight: var(--weight-regular); }
  /* Medium action corners: shape remains independent of label size and weight. */
  .mhp-button--corners-medium { border-radius: var(--photo-frame-2); }
  /* Bordered action: dense secondary tools keep a visible single pixel boundary. */
  .mhp-button--bordered { border: var(--line-thin) solid var(--control-border); }
  /* Photo arrow: original translucent stage control and rectangular corners. */
  .mhp-button--photo-arrow {
    border: 0;
    border-radius: var(--radius-md);
    background: var(--photo-control-surface);
    color: var(--white);
    font-size: var(--text-section-title);
    font-weight: var(--weight-regular);
    opacity: 0.7;
    letter-spacing: normal;
    line-height: normal;
  }
  /* Bare icon: original close and footer tools have no filled chrome. */
  .mhp-button--bare {
    border: 0;
    border-radius: 0;
    background: var(--transparent);
    letter-spacing: normal;
  }
  /* Photo close: original large light weight close glyph and quiet resting ink. */
  .mhp-button--photo-close { font-size: var(--text-2xl); font-weight: var(--weight-light); color: var(--white); opacity: 0.8; }
  /* Small close: original purchase panel close glyph. */
  .mhp-button--close-small { font-size: var(--space-rem-1-2); color: var(--text-dim); line-height: normal; }
  /* Drawer close: original cart glyph keeps its header line box. */
  .mhp-button--close { font-size: var(--text-xl); font-weight: var(--weight-light); color: var(--text-dim); }

  /* Sentence case action: natural labels retain the native line box. */
  .mhp-button--sentence { line-height: normal; letter-spacing: normal; text-transform: none; }
  /* Label size action: compact text remains independent of case and framing. */
  .mhp-button--label { font-size: var(--text-note); }
  /* Rounded field and action: medium corners are independent of type size. */
  .mhp-button--rounded, .mhp-input--rounded { border-radius: var(--photo-frame-3); }
  /* Unframed action: a filled action can omit a separate boundary. */
  .mhp-button--unframed { border: 0; }
  /* Thin secondary action: a full contrast single pixel boundary. */
  .mhp-button--thin { border-width: var(--line-thin); }
  /* Accent secondary: readable teal ink and a single pixel frame stay distinct from selection. */
  .mhp-button--accent { color: var(--control-accent); border: var(--line-thin) solid var(--control-accent); }
  /* Photo tool: footer tools retain their original translucent rectangular framing. */
  .mhp-button--photo-tool {
    background: var(--photo-tool-surface);
    border: var(--line-thin) solid var(--photo-control-hover);
    border-radius: var(--photo-frame-2);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
  }
  /* Purchase action: the main print action keeps its original rectangular silhouette. */
  .mhp-button--purchase {
    line-height: normal;
    border: 0;
    border-radius: var(--photo-frame-2);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
  }

  /* Photo action label: bold text keeps its original natural line box. */
  .mhp-button--photo-label { font-weight: var(--weight-bold); line-height: normal; }
  /* Raised action: the original photographic action casts a soft shadow. */
  .mhp-button--raised { box-shadow: var(--shadow-photo-action); }
  /* Photo action label: preserve the original mobile threshold beside the photograph. */
  @media (max-width: 600px) {
    /* Photo action label: mobile caption size and tighter tracking retain the original footprint. */
    .mhp-button--photo-label { font-size: var(--text-caption); letter-spacing: var(--tracking-button); }
  }

  /* Inline action: hover deepens the existing text accent. */
  .mhp-link:hover { color: var(--magenta-cta-hover); }
  /* Menu, segment and toggle labels: keyboard focus rings their visible target. */
  .mhp-button__input:focus-visible ~ :where(.mhp-button--menu), .mhp-toggle__input:focus-visible + :where(.mhp-toggle__track), .mhp-segment__input:focus-visible + :where(.mhp-segment) { outline: var(--focus-width) solid var(--control-focus); outline-offset: var(--focus-offset); }
  /* Button: subtle hover never resembles selected segment fill. */
  .mhp-button:hover:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])) { background: var(--control-hover); border-color: var(--control-ink); }
  /* Primary button: hover deepens the existing brand action color. */
  .mhp-button--primary:hover:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])) { background: var(--control-primary-hover); border-color: var(--control-primary-hover); }
  /* Inverse button: hover keeps photographic controls readable. */
  .mhp-button--inverse:hover:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])) { background: var(--surface-dark-border); }
  /* Photo arrow: enabled hover retains the original translucent highlight. */
  .mhp-button--photo-arrow:hover:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])) { opacity: 1; background: var(--photo-control-hover); }

  /* Photo action: keyboard focus uses opaque light and dark rings over any photograph. */
  :is(.mhp-button--inverse, .mhp-button--photo-arrow, .mhp-button--photo-tool, .mhp-button--photo-close):focus-visible { outline-color: var(--control-focus-inverse); box-shadow: var(--shadow-photo-focus); opacity: 1; }

  /* Photo tool: enabled hover keeps its original translucent highlight and frame. */
  .mhp-button--photo-tool:hover:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])) { background: var(--photo-control-hover); border-color: var(--photo-control-hover); }
  /* Button: loading adds a visible progress marker without changing its label. */
  .mhp-button[aria-busy="true"]::after {
    border: var(--line-strong) solid currentColor;
    border-inline-end-color: var(--transparent);
    border-radius: var(--radius-full);
    animation: mhp-control-spin var(--spinner-duration) linear infinite;
  }

  /* Small text action: removal links retain the original compact text size. */
  .mhp-link--small { font-size: var(--text-xs); }
  /* Fields and form labels: shared appearance and states. */
  /* Field: clear boundary, readable ink and consistent padding. */
  .mhp-input, .mhp-select, .mhp-textarea {
    border: var(--line-thin) solid var(--control-border);
    border-radius: var(--control-field-radius);
    color: var(--text);
    background: var(--white);
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: normal;
    caret-color: var(--text);
  }

  /* Field placeholder: enabled input hints remain readable. */
  :is(.mhp-input, .mhp-textarea)::placeholder { color: var(--control-placeholder); opacity: 1; }
  /* Field: read only values retain selection and a dashed boundary. */
  :is(.mhp-input, .mhp-textarea)[readonly] { background: var(--surface-hover); border-style: dashed; }
  /* Dense field: reusable editing fields retain the original type and line box. */
  .mhp-input--dense { font-size: var(--text-field); }
  /* Dense select: custom arrow choice is independent of small native fields. */
  .mhp-select--dense {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--photo-frame-2);
    appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    cursor: pointer;
  }
  /* Form label: native authentication labels retain their original compact hierarchy. */
  .mhp-label { font-size: var(--text-assistance); font-weight: var(--weight-semibold); }
  /* Small field: entry size is independent of field corner shape. */
  .mhp-input--small { font-size: var(--text-entry); }
  /* Field: keyboard focus marks the active editing target. */
  :is(.mhp-input, .mhp-select, .mhp-textarea):focus-visible { border-color: var(--control-selected); }
  /* Field: subtle hover strengthens only the boundary. */
  :is(.mhp-input, .mhp-select, .mhp-textarea):hover:where(:not(:disabled, [aria-disabled="true"], [aria-invalid="true"], .is-invalid, :user-invalid)) { border-color: var(--control-ink); }
  /* Field: invalid values follow the standard two pixel error boundary. */
  :is(.mhp-input, .mhp-select, .mhp-textarea):is([aria-invalid="true"], .is-invalid, :user-invalid) { border: var(--line-strong) solid var(--control-invalid); }
  /* Native choices: shared appearance and states. */
  /* Native choices and ranges: retain the enabled brand accent and pointer affordance. */
.mhp-input--range, .mhp-checkbox, .mhp-radio { accent-color: var(--control-primary); cursor: pointer; }
  /* Native choice: disabled retains the browser's system affordance. */
  :is(.mhp-checkbox, .mhp-radio):disabled { cursor: not-allowed; }
  /* Native choice: invalid feedback remains visible around its native boundary. */
  :is(.mhp-checkbox, .mhp-radio)[aria-invalid="true"] { outline: var(--line-strong) solid var(--control-invalid); outline-offset: var(--space-2xs); }
  /* Toggles: shared appearance and states. */
  /* Toggle track: disabled looking gray is reserved for disabled state. */
  .mhp-toggle__track { border: var(--line-strong) solid var(--control-border); border-radius: var(--radius-full); background: var(--surface); }
  /* Toggle thumb: unselected position stays at the logical start. */
  .mhp-toggle__track::before { border-radius: var(--radius-full); background: var(--control-ink); transition: transform var(--transition); }
  /* Toggle: checked state uses a deliberate filled selection. */
  .mhp-toggle__input:checked + :where(.mhp-toggle__track) { background: var(--control-selected); border-color: var(--control-selected); }
  /* Toggle thumb: checked position and contrasting ink. */
  .mhp-toggle__input:checked + :where(.mhp-toggle__track)::before { background: var(--surface); }
  /* Toggle: disabled track is visibly distinct from either enabled state. */
  .mhp-toggle__input:disabled + :where(.mhp-toggle__track) { background: var(--control-disabled-bg); border-color: var(--control-disabled-border); }
  /* Toggle thumb: disabled value retains its position with muted ink. */
  .mhp-toggle__input:disabled + :where(.mhp-toggle__track)::before { background: var(--control-disabled-ink); }
  /* Segments, tabs and chips: shared appearance and states. */
  /* Tab and chip: enabled choices remain fully contrasted. */
  .mhp-segment, .mhp-tab, .mhp-chip {
    border: var(--line-thin) solid var(--control-border);
    border-radius: var(--radius-pill);
    background: var(--control-surface);
    color: var(--control-ink);
    font: inherit;
    font-size: var(--text-button);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }
  /* Segment position marker: watermark placement stays visible in either state. */
  .mhp-segment__indicator { border-radius: var(--radius-full); background: currentColor; }
  /* Chip swatch: hue illustration remains separate from the selected surface. */
  .mhp-chip__swatch { border-radius: var(--radius-full); border: var(--line-thin) solid currentColor; background: var(--surface-dark-muted); }
  /* Red swatch: photo hue illustration. */
  .mhp-chip__swatch--red { background: var(--swatch-red); }
  /* Orange swatch: photo hue illustration. */
  .mhp-chip__swatch--orange { background: var(--swatch-orange); }
  /* Yellow swatch: photo hue illustration. */
  .mhp-chip__swatch--yellow { background: var(--swatch-yellow); }
  /* Green swatch: photo hue illustration. */
  .mhp-chip__swatch--green { background: var(--swatch-green); }
  /* Cyan swatch: photo hue illustration. */
  .mhp-chip__swatch--cyan { background: var(--swatch-cyan); }
  /* Blue swatch: photo hue illustration. */
  .mhp-chip__swatch--blue { background: var(--swatch-blue); }
  /* Purple swatch: photo hue illustration. */
  .mhp-chip__swatch--purple { background: var(--swatch-purple); }
  /* Pink swatch: photo hue illustration. */
  .mhp-chip__swatch--pink { background: var(--swatch-pink); }


  /* Dense filter: compact system labels retain native line boxes. */
  .mhp-chip--dense {
    font-size: var(--text-sm);
    line-height: normal;
  }
  /* Underline tab: reserve a lower boundary independently of label size. */
  .mhp-tab--underline { border: 0; border-block-end: var(--line-strong) solid var(--transparent); border-radius: 0; }
  /* Small tab: compact labels retain their natural line boxes and resting weight. */
  .mhp-tab--small { font-size: var(--text-native-tab); font-weight: var(--weight-regular); line-height: normal; }
  /* Choices, current pages and navigation: selected uses a persistent filled surface. */
  .mhp-table :where(tr[aria-selected="true"]), .mhp-nav-item:is([aria-current="page"], [aria-selected="true"]) { background: var(--control-selected); color: var(--surface); }

  /* Unselected choices, table rows and navigation: hover uses a subtle neutral surface. */
  :is(.mhp-segment, .mhp-tab, .mhp-chip):hover:where(:not(:disabled, [aria-disabled="true"], [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], :has(input:checked))), .mhp-table :where(tbody tr:hover:not([aria-selected="true"])), .mhp-nav-item:hover:where(:not([aria-disabled="true"], [aria-current="page"], [aria-selected="true"])) { background: var(--control-hover); }
  /* Selected controls: persistent filled selection remains distinct from hover. */
  :is(.mhp-segment__input:checked + :where(.mhp-segment), :is(.mhp-segment, .mhp-tab, .mhp-chip):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], :has(input:checked)), .mhp-segment[aria-current="page"], .mhp-card:has(> :where(input):checked)) { background: var(--control-selected); border-color: var(--control-selected); color: var(--control-selected-ink); }

  /* Cards and image choices: shared appearance and states. */
  /* Card: default neutral surface and existing small corner radius. */
  .mhp-card {
    background: var(--surface);
    color: var(--text);
    border: var(--line-thin) solid var(--border);
    border-radius: var(--radius-lg);
  }
  /* Choice card: the original one and a half pixel field boundary keeps image geometry. */
  .mhp-card--choice { border-width: var(--line-choice); border-radius: var(--photo-frame-2); cursor: pointer; }
  /* Inset card: compact photo pickers retain their original neutral backing. */
  .mhp-card--inset { background: var(--surface-cool); }
  /* Row card: list entries retain only the original bottom separator. */
  .mhp-card--row { border-inline: var(--border-card-none); border-block-start: var(--border-card-none); border-radius: var(--border-card-none); }
  /* Selectable card: enabled choices have a clear field strength boundary. */
  .mhp-card:where(:has(> input)) { border-color: var(--control-border); }
  /* Card progress track: distinct neutral background for task progress. */
  .mhp-card__progress { background: var(--control-disabled-bg); border-radius: var(--radius-full); }
  /* Card progress fill: current brand accent indicates measured progress. */
  .mhp-card__progress-fill { background: var(--control-primary); border-radius: inherit; }
  /* Raised card: editorial panels retain the original soft shadow. */
  .mhp-card--raised { box-shadow: var(--shadow); }
  /* Elevated card: authentication retains its original subtle elevation. */
  .mhp-card--elevated { box-shadow: var(--shadow-auth); }
  /* Rounded card: sign in panels retain the original generous corners. */
  .mhp-card--rounded { border-radius: var(--radius-auth); }
  /* Tool card: compact control toolbars retain their original framing. */
  .mhp-card--toolbar { border-radius: var(--radius-panel); box-shadow: var(--shadow-toolbar); }
  /* Extra large card corners: radius is independent of elevation and density. */
  .mhp-card--radius-xl { border-radius: var(--radius-xl); }

  /* Image choice: selectable photographs retain their original transparent frame. */
  .mhp-image-control--choice {
    border: var(--line-strong) solid var(--transparent);
    border-radius: var(--photo-frame-2);
    background: var(--transparent);
    cursor: pointer;
  }
  /* Rounded image choice: the larger picker keeps its established corner radius. */
  .mhp-image-control--rounded { border-radius: var(--radius-lg); }
  /* Square image choice: compact media pickers retain subtle corners. */
  .mhp-image-control--square { border-radius: var(--radius-md); }
  /* Film choice: unfilled image areas retain the original document canvas. */
  .mhp-image-control--film { background: var(--bg); }
  /* Image choice indicator: original circular marker remains hidden until selected. */
  .mhp-image-control__check {
    border-radius: var(--radius-full);
    background: var(--photo-color-10);
    color: var(--white);
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    line-height: var(--staging-banner-line-height);
    opacity: 0;
  }
  /* Photo signals: hover and focus reveal the original full opacity. */
  :is(:where(.mhp-image-control:is(:hover, :focus-visible)) .mhp-badge--overlay, .mhp-button--photo-close:hover) { opacity: 1; }
  /* Selected choice card: descendants and native radios share the selected ink. */
  .mhp-card:has(> :where(input):checked) :where(*) { color: inherit; accent-color: var(--control-selected); }
  /* Image choice: selection keeps the original photographic boundary without repainting pixels. */
  .mhp-image-control--choice:is([aria-pressed="true"], :where(:has(input:checked))) { border-color: var(--magenta-cta); }
  /* Accent image choice: the standalone picker retains its original teal boundary. */
  .mhp-image-control--rounded[aria-pressed="true"] { border-color: var(--teal); }
  /* Rounded image choice: keyboard or pointer focus preserves the protected outer frame. */
  .mhp-image-control--rounded:focus { outline: var(--line-strong) solid var(--teal); outline-offset: var(--line-thin); }
  /* Selected image choice indicator: original social marker signals a selected photograph. */
  :where(.mhp-image-control[aria-pressed="true"]) .mhp-image-control__check { opacity: 1; background: var(--image-choice-gradient); }
  /* Social image choice: selected boundary retains the original social accent. */
  .mhp-image-control--social[aria-pressed="true"] { border-color: var(--image-choice-accent); }
  /* Image choice: hover marks only its boundary and never changes selected pixels. */
  .mhp-image-control--square:hover:where(:not([aria-pressed="true"])) { border-color: var(--magenta); }
  /* Badges and identifiers: shared appearance and states. */
  /* Badge: neutral status with a readable compact label. */
  .mhp-badge {
    background: var(--color-neutral-bg);
    color: var(--text);
    border: 0;
    border-radius: var(--radius-pill);
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-badge);
    text-transform: uppercase;
  }
  /* Badge: informative status uses the shared information palette. */
  .mhp-badge--info { background: var(--color-info-bg); color: var(--color-info); }
  /* Badge: refunded orders retain orange ink with readable contrast. */
  .mhp-badge--refund { background: var(--color-refund-bg); color: var(--color-refund); }
  /* Badge: failed fulfillment retains its original burnt orange status. */
  .mhp-badge--critical { background: var(--color-critical-bg); color: var(--color-critical); }
  /* Photo badge: preserve the existing resting visibility of purchase signals. */
  .mhp-badge--overlay {
    opacity: 0.85;
    background: var(--photo-badge-surface);
    color: var(--white);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-action);
  }
  /* Identifier: compact codes retain their neutral backing and monospace face. */
  .mhp-code {
    background: var(--surface-cool);
    border-radius: var(--radius-md);
    font-family: var(--font-code);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-action);
  }
  /* Status pill: dashboard labels retain their original compact metrics. */
  .mhp-badge--pill { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
  /* Banners and alerts: shared appearance and states. */
  /* Alert: informative feedback and a clear boundary. */
  .mhp-alert {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: var(--line-thin) solid currentColor;
    border-radius: var(--radius-md);
  }
  /* Success badge and alert: readable feedback after a completed action. */
  .mhp-badge--success, .mhp-alert--success { background: var(--color-success-bg); color: var(--color-success); }
  /* Warning badge and alert: readable caution before an action. */
  .mhp-badge--warning, .mhp-alert--warning { background: var(--color-warning-bg); color: var(--color-warning); }
  /* Danger badge and alert: readable unsuccessful action or validation summary. */
  .mhp-badge--danger, .mhp-alert--danger { background: var(--color-error-bg); color: var(--color-error); }
  /* Bare icon: hover preserves the transparent stage. */
  .mhp-button--bare:hover:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])) { background: var(--transparent); }
  /* Text badge: semantic ink remains unfilled and keeps natural inline tracking. */
  .mhp-badge--text {
    background: var(--transparent);
    border-radius: 0;
    font-size: inherit;
    text-transform: var(--case-title);
    letter-spacing: normal;
  }
  /* Banner: staging keeps its existing high contrast environment warning. */
  .mhp-alert--environment {
    background: var(--staging-banner-bg);
    color: var(--surface);
    border-color: var(--staging-banner-border);
    font-size: var(--text-xs);
    line-height: var(--staging-banner-line-height);
  }
  /* Inline status: feedback retains the compact neutral document line box. */
  .mhp-alert--status { font-size: var(--text-status); color: var(--text-dim); }
  /* Compact field and status: label size is independent of boundary and meaning. */
  .mhp-input--compact, .mhp-alert--compact { font-size: var(--text-button); }
  /* Empty alert: reserve its status slot without painting an empty message. */
  .mhp-alert:empty { background: var(--transparent); border: 0; }
  /* Dialogs and backdrops: shared appearance and states. */
  /* Photographic toolbar: the original bottom gradient keeps labels readable over photographs. */
  .mhp-backdrop--photo-toolbar { background: var(--photo-toolbar-gradient); }
  /* Dialog: readable surface with bounded document width. */
  .mhp-dialog {
    background: var(--surface);
    color: var(--text);
    border: var(--line-thin) solid var(--control-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  /* Sheet dialog: an edge anchored surface keeps its original border free box. */
  .mhp-dialog--sheet { border: 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; box-shadow: var(--shadow-purchase); }
  /* Drawer dialog: flush viewport surface preserves original image coordinates. */
  .mhp-dialog--drawer { border: 0; border-radius: 0; box-shadow: var(--shadow-drawer); }
  /* Dialog backdrop: separate the active task from the surrounding page. */
  .mhp-dialog::backdrop, .mhp-backdrop { background: var(--dialog-backdrop); opacity: 0; pointer-events: none; }
  /* Drawer backdrop: original separation behind the shopping cart. */
  .mhp-backdrop--drawer { background: var(--drawer-backdrop); }
  /* Dialog backdrop: open tasks alone paint and intercept the surrounding page. */
  .mhp-dialog[open]::backdrop, .mhp-backdrop[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
  /* Row boundaries: retain the original section separators. */
  :where(.mhp-dialog__row, .mhp-tabs) { border-block-end: var(--line-thin) solid var(--border); }
  /* Section boundaries: retain the original document separators. */
  :where(.mhp-dialog__footer, .mhp-nav--links) { border-block-start: var(--line-thin) solid var(--border); }
  /* Dialog heading: original compact title preserves the cart photo origin. */
  .mhp-dialog__title { font-size: var(--text-md); font-weight: var(--weight-bold); }
  /* Tables: shared appearance and row boundaries. */
  /* Table: readable document ink with collapsed boundaries. */
  .mhp-table {
    border-collapse: collapse;
    color: var(--text);
    font-size: var(--text-note);
    background: var(--white);
    border: var(--line-thin) solid var(--border);
    border-radius: var(--radius-lg);
  }
  /* Table cell: shared row separator and spacing. */
  .mhp-table :where(th, td) { border-block-end: var(--line-thin) solid var(--border); text-align: start; }
  /* Table heading: neutral background and strong labels. */
  .mhp-table :where(th) {
    background: var(--bg);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    color: var(--text-dim);
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
  }
  /* Final rows: finish without an extra bottom separator. */
  .mhp-card--row:where(:last-child), .mhp-table :where(tr:last-child td) { border-block-end: 0; }
  /* Navigation: shared appearance and states. */
  /* Navigation shell: current white surface separates links from page content. */
  .mhp-nav { background: var(--white); border-block-end: var(--line-thin) solid var(--border); }
  /* Navigation link: current brand ink and a full touch target. */
  .mhp-nav-item {
    color: var(--text-dim);
    background: var(--transparent);
    border-radius: var(--radius-md);
    font-size: var(--text-nav);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-nav);
    text-transform: var(--case-upper);
    text-decoration: none;
    cursor: pointer;
  }
  /* Plain navigation link: compact standalone documents retain their original case. */
  .mhp-nav-item--plain { font-size: var(--text-button); letter-spacing: normal; text-transform: none; }
  /* Navigation rail: desktop editing retains the original side boundary. */
  .mhp-nav--rail {
    border-inline-end: 0;
  }
  /* Dense navigation: original editing labels retain their case and line height. */
  .mhp-nav-item--dense {
    font-size: var(--text-button);
    font-weight: var(--weight-medium);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font);
    border-block-end: var(--focus-width) solid var(--transparent);
  }
  /* Prose navigation link: wrapped destinations retain the surrounding document rhythm. */
  .mhp-nav-item--prose { line-height: var(--leading-normal); border-block-end: 0; }
  /* Compact select and responsive navigation: retain the established small label size. */
  .mhp-select--small, .mhp-nav-item--responsive { font-size: var(--text-sm); }
  /* Mobile navigation action: retain the leaf label scale and single lower separator. */
  .mhp-button--nav { font-size: var(--text-sm); border-block-end-width: var(--line-thin); }
  /* Navigation separator: reserve the underline slot without changing row height. */
  .mhp-nav-item--ruled { border-block-end: var(--line-strong) solid var(--transparent); }
  /* Submenu link: natural case and compact labels remain independent of depth. */
  .mhp-nav-item--leaf {
    color: var(--text);
    font-size: var(--text-label);
    font-weight: var(--weight-medium);
    letter-spacing: normal;
    text-transform: none;
  }
  /* Submenu group heading: compact uppercase labels separate link groups. */
  .mhp-nav-item--group { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-action); }
  /* Submenu nested link: supporting destinations use quiet regular text. */
  .mhp-nav-item--nested { color: var(--text-dim); font-weight: var(--weight-regular); }
  /* Selected tabs and rail links: emphasize the current destination label. */
  .mhp-tab--small[aria-selected="true"], .mhp-nav-item--dense[aria-selected="true"] { font-weight: var(--weight-semibold); }
  /* Desktop navigation: the owner approved breakpoint separates the inner link group from its shell. */
  @media (min-width: 1280px) {
    /* Desktop links: only the navigation shell has a boundary. */
    .mhp-nav--links { border-block-start: 0; }
    /* Desktop link: retain the original compact navigation type. */
    .mhp-nav-item--responsive { font-size: var(--text-nav); }
    /* Desktop navigation action: restore the complete shared button boundary. */
    .mhp-button--nav { font-size: var(--text-nav); border-block-end-width: var(--line-strong); }
  }

  /* Current navigation parent: show the active section without claiming a different destination. */
  .mhp-nav-item--current-parent { color: var(--control-selected); }
  /* Wide navigation: retain the original sidebar boundary and row height. */
  @media (min-width: 768px) {
    /* Navigation rail: the desktop separator sits beside the content. */
    .mhp-nav--rail { border-block-end: 0; border-inline-end: var(--line-thin) solid var(--border); }
    /* Dense navigation: desktop rows retain their original border free height. */
    .mhp-nav-item--dense { border-block-end: 0; }
  }
  /* Empty states: shared appearance and states. */
  /* Empty state: neutral feedback with room for its existing action. */
  .mhp-empty {
    border: var(--line-thin) dashed var(--control-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text-dim);
    text-align: center;
  }
  /* Empty state: loading retains the existing visible progress indicator. */
  .mhp-empty__spinner {
    border: var(--focus-width) solid var(--border);
    border-block-start-color: var(--control-primary);
    border-radius: var(--radius-full);
    animation: mhp-control-spin var(--spinner-duration) linear infinite;
  }
  /* Form errors: shared appearance and states. */
  /* Field error: specific message inherits the shared invalid color. */
  .mhp-form-error { font-size: var(--text-sm); color: var(--color-error); }
  /* Required marker: the existing required field label uses error ink. */
  .mhp-required { color: var(--color-error); }
  /* Unavailable controls: shared appearance and states. */
  /* Disabled actions, fields and choices: opaque unavailable paint wins over selection and hover. */
  :is(.mhp-segment__input:disabled + :where(.mhp-segment), .mhp-button:is(:disabled, [aria-disabled="true"], [aria-busy="true"]), :is(.mhp-input, .mhp-select, .mhp-textarea):is(:disabled, [aria-disabled="true"]), :is(.mhp-segment, .mhp-tab, .mhp-chip, .mhp-nav-item):is(:disabled, [aria-disabled="true"], :has(input:disabled)), .mhp-card:has(> :where(input):disabled)) {
    color: var(--control-disabled-ink);
    background: var(--control-disabled-bg);
    border-color: var(--control-disabled-border);
    cursor: not-allowed;
    opacity: 1;
  }
  /* Loading motion: shared appearance and states. */
  /* Loading marker: shared rotation for all busy actions. */
  @keyframes mhp-control-spin {
    /* Loading marker: complete one rotation. */
    to { transform: rotate(360deg); }
  }

}