/* NeumoPractice UI Token Contract V1 — P3B foundation.
 * Opt-in primitives only: existing components are not migrated by this file.
 * Clinical mode attributes are visual inputs; P0 remains the context authority.
 * Native buttons are preferred. aria-disabled / aria-busy style a state but do
 * not suppress activation: the consuming component must enforce that behavior.
 * No legacy accent aliases, global element resets, or print geometry overrides.
 */

:root {
  --np-accent: #2563EB;
  --np-accent-hover: #1D4ED8;
  --np-accent-soft: #EFF6FF;
  --np-accent-border: #BFDBFE;
  --np-focus-ring: rgba(37, 99, 235, .28);

  --np-text-primary: #0F172A;
  --np-text-secondary: #334155;
  --np-text-muted: #64748B;
  --np-surface: #FFFFFF;
  --np-surface-subtle: #F8FAFC;
  --np-border: #E2E8F0;
  --np-border-strong: #CBD5E1;

  --np-success: #166534;
  --np-success-soft: #DCFCE7;
  --np-warning: #92400E;
  --np-warning-soft: #FEF3C7;
  --np-danger: #B42318;
  --np-danger-soft: #FEF3F2;

  --np-button-height-sm: 32px;
  --np-button-height-md: 40px;
  --np-button-height-lg: 44px;
  --np-button-padding-x-sm: 10px;
  --np-button-padding-x-md: 14px;
  --np-button-padding-x-lg: 16px;
  --np-button-gap: 8px;

  --np-icon-xs: 12px;
  --np-icon-sm: 16px;
  --np-icon-md: 20px;
  --np-icon-lg: 24px;
  --np-icon-stroke: 2;
  --np-icon-container-sm: 28px;
  --np-icon-container-md: 34px;
  --np-icon-container-lg: 42px;
  --np-icon-accent: var(--np-accent);
  --np-icon-muted: var(--np-text-muted);
  --np-icon-success: var(--np-success);
  --np-icon-warning: var(--np-warning);
  --np-icon-danger: var(--np-danger);

  --np-badge-height-sm: 24px;
  --np-badge-height-md: 28px;
  --np-radius-sm: 6px;
  --np-radius-md: 10px;
  --np-radius-lg: 14px;
  --np-radius-xl: 18px;
  --np-radius-pill: 999px;

  --np-space-1: 4px;
  --np-space-2: 6px;
  --np-space-3: 8px;
  --np-space-4: 12px;
  --np-space-5: 16px;
  --np-space-6: 24px;
  --np-space-7: 32px;

  --np-shadow-none: none;
  --np-shadow-subtle: 0 6px 20px rgba(15, 23, 42, .06);
  --np-shadow-active: 0 10px 24px rgba(15, 23, 42, .14);
  --np-shadow-overlay: 0 20px 50px rgba(15, 23, 42, .18);

  /* Mechanical border/focus dimensions complete the contract's prose. */
  --np-border-width: 1px;
  --np-border-style: solid;
  --np-focus-width: 2px;
  --np-focus-offset: 2px;
  --np-focus-spread: 4px;
}

/* Mirror existing context attributes; do not introduce a mode resolver.
 * Repeat the icon alias here so its computed value follows each local accent.
 */
body[data-practice-mode="pediatric"],
[data-rx-p2][data-mode="pediatric"] {
  --np-accent: #2563EB;
  --np-accent-hover: #1D4ED8;
  --np-accent-soft: #EFF6FF;
  --np-accent-border: #BFDBFE;
  --np-focus-ring: rgba(37, 99, 235, .28);
  --np-icon-accent: var(--np-accent);
}

body[data-practice-mode="respiratory"],
[data-rx-p2][data-mode="respiratory"] {
  --np-accent: #6D3DF5;
  --np-accent-hover: #5B32D6;
  --np-accent-soft: #F3EEFF;
  --np-accent-border: #C4B5FD;
  --np-focus-ring: rgba(109, 61, 245, .28);
  --np-icon-accent: var(--np-accent);
}

/* Brand font is inherited. These tuples apply only where explicitly requested. */
.np-ui-type-label-xs { font-family: inherit; font-size: 11px; line-height: 1.25; font-weight: 700; }
.np-ui-type-label-sm { font-family: inherit; font-size: 12px; line-height: 1.3; font-weight: 750; }
.np-ui-type-body-sm { font-family: inherit; font-size: 13px; line-height: 1.45; font-weight: 400; }
.np-ui-type-body-md { font-family: inherit; font-size: 14px; line-height: 1.5; font-weight: 400; }
.np-ui-type-button { font-family: inherit; font-size: 13px; line-height: 1.2; font-weight: 750; }
.np-ui-type-section-title { font-family: inherit; font-size: 18px; line-height: 1.2; font-weight: 800; }
.np-ui-type-metric { font-family: inherit; font-size: 16px; line-height: 1.2; font-weight: 850; }
.np-ui-type-metadata { font-family: inherit; font-size: 12px; line-height: 1.35; font-weight: 600; }

/* NPButton / NPIconButton. An icon button accepts NPButton variant/size classes.
 * Text remains in the DOM while busy, preserving the action's intrinsic width.
 */
.np-ui-button,
.np-ui-icon-button {
  --np-ui-button-fill: var(--np-surface);
  --np-ui-button-text: var(--np-text-primary);
  --np-ui-button-border: var(--np-border-strong);
  --np-ui-button-hover-fill: var(--np-accent-soft);
  --np-ui-button-hover-text: var(--np-text-primary);
  --np-ui-button-hover-border: var(--np-accent-border);
  --np-ui-control-focus: var(--np-accent);
  --np-ui-control-ring: var(--np-focus-ring);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--np-button-gap);
  min-block-size: var(--np-button-height-md);
  padding: var(--np-space-2) var(--np-button-padding-x-md);
  border: var(--np-border-width) var(--np-border-style) var(--np-ui-button-border);
  border-radius: var(--np-radius-md);
  background: var(--np-ui-button-fill);
  color: var(--np-ui-button-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
  box-shadow: var(--np-shadow-none);
}

.np-ui-button--sm {
  min-block-size: var(--np-button-height-sm);
  padding-inline: var(--np-button-padding-x-sm);
}
.np-ui-button--md {
  min-block-size: var(--np-button-height-md);
  padding-inline: var(--np-button-padding-x-md);
}
.np-ui-button--lg {
  min-block-size: var(--np-button-height-lg);
  padding-inline: var(--np-button-padding-x-lg);
}
.np-ui-button--primary {
  --np-ui-button-fill: var(--np-accent);
  --np-ui-button-text: var(--np-surface);
  --np-ui-button-border: var(--np-accent);
  --np-ui-button-hover-fill: var(--np-accent-hover);
  --np-ui-button-hover-text: var(--np-surface);
  --np-ui-button-hover-border: var(--np-accent-hover);
}
.np-ui-button--secondary {
  --np-ui-button-fill: var(--np-surface);
  --np-ui-button-text: var(--np-text-primary);
  --np-ui-button-border: var(--np-border-strong);
}
.np-ui-button--tertiary {
  --np-ui-button-fill: var(--np-surface-subtle);
  --np-ui-button-text: var(--np-text-secondary);
  --np-ui-button-border: transparent;
}
.np-ui-button--ghost {
  --np-ui-button-fill: transparent;
  --np-ui-button-text: var(--np-text-secondary);
  --np-ui-button-border: transparent;
}
.np-ui-button--danger {
  --np-ui-button-fill: var(--np-surface);
  --np-ui-button-text: var(--np-danger);
  --np-ui-button-border: var(--np-danger);
  --np-ui-button-hover-fill: var(--np-danger-soft);
  --np-ui-button-hover-text: var(--np-danger);
  --np-ui-button-hover-border: var(--np-danger);
  --np-ui-control-focus: var(--np-danger);
  --np-ui-control-ring: var(--np-danger-soft);
}
.np-ui-icon-button,
.np-ui-button--icon-only {
  min-inline-size: var(--np-button-height-md);
  min-block-size: var(--np-button-height-md);
  padding: var(--np-space-3);
}
.np-ui-icon-button.np-ui-button--lg,
.np-ui-button--icon-only.np-ui-button--lg {
  min-inline-size: var(--np-button-height-lg);
  min-block-size: var(--np-button-height-lg);
}

:is(.np-ui-button, .np-ui-icon-button):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  background: var(--np-ui-button-hover-fill);
  color: var(--np-ui-button-hover-text);
  border-color: var(--np-ui-button-hover-border);
}
:is(.np-ui-button, .np-ui-icon-button):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  transform: translateY(1px);
}
:is(.np-ui-button, .np-ui-icon-button)[aria-pressed="true"] {
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-color: currentColor;
}

:is(.np-ui-button, .np-ui-icon-button, .np-ui-dock-item, .np-ui-pill):is(:disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
}
:is(.np-ui-button, .np-ui-icon-button, .np-ui-dock-item, .np-ui-pill)[aria-busy="true"] {
  opacity: .65;
  cursor: progress;
}

/* NPIcon: apply directly to a decorative SVG with viewBox="0 0 24 24".
 * Consumers supply aria-hidden or an accessible name; CSS cannot supply one.
 */
.np-ui-icon {
  display: inline-block;
  inline-size: var(--np-icon-md);
  block-size: var(--np-icon-md);
  flex: 0 0 auto;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--np-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.np-ui-icon--xs { inline-size: var(--np-icon-xs); block-size: var(--np-icon-xs); }
.np-ui-icon--sm { inline-size: var(--np-icon-sm); block-size: var(--np-icon-sm); }
.np-ui-icon--md { inline-size: var(--np-icon-md); block-size: var(--np-icon-md); }
.np-ui-icon--lg { inline-size: var(--np-icon-lg); block-size: var(--np-icon-lg); }
.np-ui-icon--accent { color: var(--np-icon-accent); }
.np-ui-icon--muted { color: var(--np-icon-muted); }
.np-ui-icon--success { color: var(--np-icon-success); }
.np-ui-icon--warning { color: var(--np-icon-warning); }
.np-ui-icon--danger { color: var(--np-icon-danger); }

/* NPIconBox is a visual container, not an interactive hit target. */
.np-ui-icon-box {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--np-icon-container-md);
  block-size: var(--np-icon-container-md);
  flex: 0 0 auto;
  border-radius: var(--np-radius-md);
  color: var(--np-text-muted);
  background: var(--np-surface-subtle);
}
.np-ui-icon-box--sm { inline-size: var(--np-icon-container-sm); block-size: var(--np-icon-container-sm); border-radius: var(--np-radius-sm); }
.np-ui-icon-box--md { inline-size: var(--np-icon-container-md); block-size: var(--np-icon-container-md); }
.np-ui-icon-box--lg { inline-size: var(--np-icon-container-lg); block-size: var(--np-icon-container-lg); border-radius: var(--np-radius-lg); }
.np-ui-icon-box--neutral { color: var(--np-text-muted); background: var(--np-surface-subtle); }
.np-ui-icon-box--accent { color: var(--np-icon-accent); background: var(--np-accent-soft); }
.np-ui-icon-box--success { color: var(--np-icon-success); background: var(--np-success-soft); }
.np-ui-icon-box--warning { color: var(--np-icon-warning); background: var(--np-warning-soft); }
.np-ui-icon-box--danger { color: var(--np-icon-danger); background: var(--np-danger-soft); }

/* NPBadge communicates a textual status/count. NPPill communicates an
 * attribute/category/population. Shared geometry does not merge their meaning.
 */
.np-ui-badge,
.np-ui-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-1);
  min-block-size: var(--np-badge-height-sm);
  padding: 4px 8px;
  border: var(--np-border-width) var(--np-border-style) var(--np-border);
  border-radius: var(--np-radius-pill);
  background: var(--np-surface-subtle);
  color: var(--np-text-secondary);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  vertical-align: middle;
}
.np-ui-badge--sm,
.np-ui-pill--sm { min-block-size: var(--np-badge-height-sm); padding: 4px 8px; font-size: 11px; line-height: 1.25; font-weight: 700; }
.np-ui-badge--md,
.np-ui-pill--md { min-block-size: var(--np-badge-height-md); padding: 5px 10px; font-size: 12px; line-height: 1.3; font-weight: 750; }
.np-ui-badge--neutral { color: var(--np-text-secondary); background: var(--np-surface-subtle); border-color: var(--np-border); }
.np-ui-badge--info { color: var(--np-accent); background: var(--np-accent-soft); border-color: var(--np-accent-border); }
.np-ui-badge--success { color: var(--np-success); background: var(--np-success-soft); border-color: var(--np-success); }
.np-ui-badge--warning { color: var(--np-warning); background: var(--np-warning-soft); border-color: var(--np-warning); }
.np-ui-badge--danger { color: var(--np-danger); background: var(--np-danger-soft); border-color: var(--np-danger); }
.np-ui-pill--metadata { color: var(--np-text-secondary); background: var(--np-surface-subtle); border-color: var(--np-border); }
.np-ui-pill--category { color: var(--np-accent); background: var(--np-accent-soft); border-color: var(--np-accent-border); }
.np-ui-pill--population { color: var(--np-accent); background: var(--np-surface); border-color: var(--np-accent-border); }
.np-ui-pill:is(button, a, [role="button"]) { text-decoration: none; }
.np-ui-pill:is(button, a, [role="button"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { cursor: pointer; }
.np-ui-pill:is(button, a, [role="button"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { border-color: var(--np-accent); }
.np-ui-pill[aria-pressed="true"] { font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }

/* NPActionBar only provides layout. Consumers retain command order, permission
 * checks, every reachable action, and one primary action where semantically apt.
 */
.np-ui-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--np-space-3);
}
.np-ui-action-bar--end { justify-content: flex-end; }
.np-ui-action-bar__spacer { flex: 1 1 auto; }
@media (max-width: 480px) {
  .np-ui-action-bar--stack-mobile { flex-direction: column; align-items: stretch; }
}

/* NPDockItem is an opt-in large navigation primitive, not an ordinary button.
 * Keep the approved 112px nominal minimum and 23px / 42px icon relationship.
 * Current Dock markup, order, badges, and navigation are untouched in P3B.
 */
.np-ui-dock-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--np-space-3);
  min-block-size: 112px;
  padding: var(--np-space-5);
  border: var(--np-border-width) var(--np-border-style) var(--np-border);
  border-radius: var(--np-radius-lg);
  background: var(--np-surface);
  color: var(--np-text-primary);
  font-family: inherit;
  text-align: start;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  box-shadow: var(--np-shadow-none);
}
.np-ui-dock-item__icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--np-icon-container-lg);
  block-size: var(--np-icon-container-lg);
  flex: 0 0 auto;
  border-radius: var(--np-radius-lg);
  background: var(--np-accent-soft);
  color: var(--np-accent);
}
.np-ui-dock-item__icon > .np-ui-icon { inline-size: 23px; block-size: 23px; stroke-width: 2.2; }
.np-ui-dock-item__title { font-size: 14px; line-height: 1.3; font-weight: 850; }
.np-ui-dock-item__description { font-size: 12px; line-height: 1.45; font-weight: 650; color: var(--np-text-secondary); }
.np-ui-dock-item__badge { align-self: flex-end; }
.np-ui-dock-item:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { border-color: var(--np-accent-border); background: var(--np-accent-soft); }
.np-ui-dock-item:is([aria-current="page"], [aria-current="step"], [aria-current="true"]) {
  border-color: var(--np-accent);
  background: var(--np-accent);
  color: var(--np-surface);
  box-shadow: var(--np-shadow-active);
}
.np-ui-dock-item:is([aria-current="page"], [aria-current="step"], [aria-current="true"]) .np-ui-dock-item__title { text-decoration: underline; text-underline-offset: 3px; }
.np-ui-dock-item:is([aria-current="page"], [aria-current="step"], [aria-current="true"]) .np-ui-dock-item__description { color: var(--np-surface); }
.np-ui-dock-item:is([aria-current="page"], [aria-current="step"], [aria-current="true"]) .np-ui-dock-item__icon { color: var(--np-accent); background: var(--np-surface); }
.np-ui-dock-item:is([aria-current="page"], [aria-current="step"], [aria-current="true"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { background: var(--np-accent-hover); border-color: var(--np-accent-hover); }

/* NPQuickDataRow requires visible label/value; alert or unknown presentation
 * is supplied by the existing clinical state, never inferred from its color.
 */
.np-ui-quick-data-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--np-icon-container-md) minmax(0, 1fr);
  align-items: center;
  gap: var(--np-space-4);
  padding-block: var(--np-space-3);
  color: var(--np-text-primary);
}
.np-ui-quick-data-row__content { min-inline-size: 0; }
.np-ui-quick-data-row__label { display: block; font-family: inherit; font-size: 12px; line-height: 1.3; font-weight: 750; color: var(--np-text-muted); }
.np-ui-quick-data-row__value { display: block; font-family: inherit; font-size: 16px; line-height: 1.2; font-weight: 850; overflow-wrap: anywhere; }
.np-ui-quick-data-row--alert .np-ui-quick-data-row__value { color: var(--np-warning); }
.np-ui-quick-data-row--unknown .np-ui-quick-data-row__value { color: var(--np-text-muted); }

/* Keep this after selected/active shadows so every opted-in control retains
 * its focus ring. Native focus is never globally suppressed. The utility can
 * also be applied to future focusable controls outside these primitives.
 */
:is(.np-ui-button, .np-ui-icon-button, .np-ui-dock-item, .np-ui-pill, .np-ui-focus):focus-visible {
  outline: var(--np-focus-width) solid var(--np-ui-control-focus, var(--np-accent));
  outline-offset: var(--np-focus-offset);
  box-shadow: 0 0 0 var(--np-focus-spread) var(--np-ui-control-ring, var(--np-focus-ring));
}