/* ============================================================
   NIMBUS DESIGN 3.0.0 — COMPONENT LAYER (nb-*)
   Load order:
     tokens/nimbus-tokens.css           (generated, verbatim)
     tokens/nimbus-tokens-extended.css  (elevation + High contrast)
     css/nimbus.css                     (this file)
   Put .nb-root on <html> (apps) or on the page wrapper (sites).
   Rules (PO-134): a light canvas with white work outlined by a hairline;
   ink for primary actions; bronze only for small marks, the current menu
   item, the chosen tab and focus; Inter; semibold, never bold; sentence
   case everywhere; 44 px controls; radii 10 / 16 / 24.
   Every value comes from a --nb-* token.
   ============================================================ */

/* ── BASE ──────────────────────────────────────────────────── */
.nb-root, .nb-root *, .nb-root *::before, .nb-root *::after { box-sizing: border-box; }
.nb-root [hidden] { display: none !important; }

.nb-root {
  font-family: var(--nb-font-sans);
  font-size: var(--nb-type-size-body);
  line-height: var(--nb-type-leading-body);
  font-weight: var(--nb-font-weight-regular);
  color: var(--nb-color-text-primary);
  background: var(--nb-color-background-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Operational screens (Workshop, portals): 14 px working text. */
.nb-root.nb-app, .nb-app { font-size: var(--nb-type-size-small); }

.nb-root img { max-width: 100%; display: block; }
.nb-root ::selection { background: var(--nb-color-accent-subtle); color: var(--nb-color-text-primary); }

/* Focus: one strong-bronze outline on every control. Fields show an ink edge instead. */
.nb-root :focus-visible {
  outline: var(--nb-size-focus) solid var(--nb-color-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── LAYOUT ────────────────────────────────────────────────── */
.nb-container {
  width: min(var(--nb-size-content), 100%);
  margin-inline: auto;
  padding-inline: clamp(var(--nb-space-16), 4vw, var(--nb-space-40));
}
.nb-container--reading { width: min(calc(var(--nb-size-reading) + 2 * var(--nb-space-40)), 100%); }
.nb-section { padding-block: clamp(var(--nb-space-64), 9vw, var(--nb-space-96)); }
.nb-section--subtle { background: var(--nb-color-background-subtle); }
.nb-section--surface { background: var(--nb-color-background-surface); box-shadow: var(--nb-shadow-resting); }
.nb-stack > * + * { margin-top: var(--nb-space-16); }

/* ── TYPE ──────────────────────────────────────────────────── */
.nb-display, .nb-h1, .nb-h2, .nb-h3 { margin: 0; color: var(--nb-color-text-primary); font-weight: var(--nb-font-weight-semibold); overflow-wrap: anywhere; }
.nb-display { font-size: clamp(var(--nb-type-size-display-small), 6vw, var(--nb-type-size-display)); line-height: var(--nb-type-leading-display); letter-spacing: -0.03em; }
.nb-h1 { font-size: var(--nb-type-size-page); line-height: var(--nb-type-leading-heading); letter-spacing: -0.025em; }
.nb-h2 { font-size: var(--nb-type-size-section); line-height: var(--nb-type-leading-heading); letter-spacing: -0.01em; }
.nb-h3 { font-size: var(--nb-type-size-body); line-height: 1.4; }
@media (max-width: 719px) { .nb-h1 { font-size: var(--nb-type-size-page-small); } }

.nb-lead { margin: 0; font-size: var(--nb-type-size-section); line-height: var(--nb-type-leading-body); color: var(--nb-color-text-body); }
.nb-body { color: var(--nb-color-text-body); }
.nb-muted { color: var(--nb-color-text-muted); }
.nb-small { font-size: var(--nb-type-size-small); line-height: var(--nb-type-leading-small); }
.nb-caption { font-size: var(--nb-type-size-caption); line-height: var(--nb-type-leading-small); color: var(--nb-color-text-muted); }
.nb-mono { font-family: var(--nb-font-mono); font-variant-numeric: tabular-nums; }
.nb-num { font-variant-numeric: tabular-nums; }

/* Eyebrow: a sentence-case label above a heading, led by a small bronze mark. */
.nb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--nb-space-8);
  margin: 0;
  font-size: var(--nb-type-size-caption); line-height: var(--nb-type-leading-small);
  font-weight: var(--nb-font-weight-medium);
  color: var(--nb-color-text-muted);
}
.nb-eyebrow::before { content: ""; width: var(--nb-space-16); height: 1px; background: var(--nb-color-accent-brand); }
.nb-eyebrow--plain::before { display: none; }

.nb-section-head { max-width: var(--nb-size-reading); }
.nb-section-head > * + * { margin-top: var(--nb-space-12); }
.nb-section-head .nb-lead { color: var(--nb-color-text-muted); }

.nb-link { color: var(--nb-color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.nb-link:hover { color: var(--nb-color-text-body); }

/* ── BUTTONS ───────────────────────────────────────────────── */
.nb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-8);
  min-height: var(--nb-size-control); padding-inline: var(--nb-space-16);
  border: 1px solid transparent; border-radius: var(--nb-radius-control);
  background: var(--nb-color-action-primary); color: var(--nb-color-action-on-primary);
  font: inherit; font-size: var(--nb-type-size-small); font-weight: var(--nb-font-weight-medium); line-height: 1.25;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--nb-motion-fast) var(--nb-motion-ease), border-color var(--nb-motion-fast) var(--nb-motion-ease), color var(--nb-motion-fast) var(--nb-motion-ease);
}
.nb-btn:hover { background: var(--nb-color-action-hover); }
.nb-btn:disabled, .nb-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.nb-btn--outline { background: var(--nb-color-background-surface); color: var(--nb-color-text-primary); border-color: var(--nb-color-border-control); }
.nb-btn--outline:hover { background: var(--nb-color-background-subtle); }
.nb-btn--secondary { background: var(--nb-color-action-secondary); color: var(--nb-color-text-primary); }
.nb-btn--secondary:hover { background: var(--nb-color-background-selected); }
.nb-btn--ghost { background: transparent; color: var(--nb-color-text-body); }
.nb-btn--ghost:hover { background: var(--nb-color-background-subtle); color: var(--nb-color-text-primary); }
.nb-btn--danger { background: var(--nb-color-status-danger-tint); color: var(--nb-color-status-danger); }
.nb-btn--danger:hover { background: var(--nb-color-status-danger-tint); border-color: var(--nb-color-status-danger); }
.nb-btn--link { min-height: 0; padding: 0; background: none; color: var(--nb-color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.nb-btn--link:hover { background: none; color: var(--nb-color-text-body); }
.nb-btn--sm { min-height: var(--nb-size-control-dense); padding-inline: 14px; }
.nb-btn--block { width: 100%; }

/* ── BADGES AND STATUS ─────────────────────────────────────── */
.nb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding-inline: 10px;
  border-radius: var(--nb-radius-pill);
  background: var(--nb-color-background-selected); color: var(--nb-color-text-body);
  font-size: var(--nb-type-size-caption); font-weight: var(--nb-font-weight-medium); white-space: nowrap;
}
.nb-badge--success { background: var(--nb-color-status-success-tint); color: var(--nb-color-status-success); }
.nb-badge--warning { background: var(--nb-color-status-warning-tint); color: var(--nb-color-status-warning); }
.nb-badge--danger  { background: var(--nb-color-status-danger-tint);  color: var(--nb-color-status-danger); }
.nb-badge--info    { background: var(--nb-color-status-info-tint);    color: var(--nb-color-status-info); }
.nb-badge--accent  { background: var(--nb-color-accent-subtle);       color: var(--nb-color-accent-text); }
.nb-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.nb-stats { display: flex; flex-wrap: wrap; gap: var(--nb-space-8) var(--nb-space-24); margin: 0; padding: 0; list-style: none; }
.nb-stat { display: inline-flex; align-items: center; gap: var(--nb-space-8); color: var(--nb-color-text-body); font-size: var(--nb-type-size-small); font-weight: var(--nb-font-weight-medium); }
.nb-stat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nb-color-accent-brand); flex-shrink: 0; }

/* ── PANELS (white work on the canvas) ─────────────────────── */
.nb-panel {
  padding: var(--nb-space-24);
  background: var(--nb-color-background-surface);
  border-radius: var(--nb-radius-panel);
  box-shadow: var(--nb-shadow-resting);
}
.nb-panel--interactive { transition: background-color var(--nb-motion-fast) var(--nb-motion-ease); }
.nb-panel--interactive:hover { background: var(--nb-color-background-subtle); }
.nb-panel__num {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nb-radius-control);
  background: var(--nb-color-accent-subtle); color: var(--nb-color-accent-text);
  font-weight: var(--nb-font-weight-semibold); font-variant-numeric: tabular-nums;
}

/* KPI tile: a label and one number. */
.nb-kpi { display: grid; gap: var(--nb-space-4); }
.nb-kpi__label { font-size: var(--nb-type-size-caption); color: var(--nb-color-text-muted); }
.nb-kpi__value { font-size: var(--nb-type-size-page-small); line-height: var(--nb-type-leading-heading); font-weight: var(--nb-font-weight-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Grouped list: rows inside one white panel, hairlines inset 16 px. */
.nb-list { margin: 0; padding: 0; list-style: none; background: var(--nb-color-background-surface); border-radius: var(--nb-radius-panel); box-shadow: var(--nb-shadow-resting); }
.nb-list__row { position: relative; display: flex; align-items: center; gap: var(--nb-space-16); min-height: var(--nb-size-control); padding: var(--nb-space-12) var(--nb-space-16); }
.nb-list__row + .nb-list__row::before { content: ""; position: absolute; inset: 0 var(--nb-space-16) auto; border-top: 1px solid var(--nb-color-border-subtle); }
.nb-list__row:first-child { border-top-left-radius: var(--nb-radius-panel); border-top-right-radius: var(--nb-radius-panel); }
.nb-list__row:last-child { border-bottom-left-radius: var(--nb-radius-panel); border-bottom-right-radius: var(--nb-radius-panel); }
a.nb-list__row { color: inherit; text-decoration: none; }
a.nb-list__row:hover { background: var(--nb-color-background-subtle); }
a.nb-list__row:focus-visible { outline-offset: -3px; }

/* Table: dense data, tabular figures, hairline rows. */
.nb-table { width: 100%; border-collapse: collapse; font-size: var(--nb-type-size-small); font-variant-numeric: tabular-nums; }
.nb-table th { padding: var(--nb-space-8) var(--nb-space-12); text-align: left; font-size: var(--nb-type-size-caption); font-weight: var(--nb-font-weight-medium); color: var(--nb-color-text-muted); border-bottom: 1px solid var(--nb-color-border-subtle); }
.nb-table td { padding: var(--nb-space-12); border-bottom: 1px solid var(--nb-color-border-subtle); color: var(--nb-color-text-primary); vertical-align: top; }
.nb-table tr:last-child td { border-bottom: 0; }
.nb-table .is-num { text-align: right; }

/* Empty state: say what is missing and the one next step. */
.nb-empty { display: grid; justify-items: center; gap: var(--nb-space-8); padding: var(--nb-space-48) var(--nb-space-24); text-align: center; color: var(--nb-color-text-muted); }
.nb-empty__title { color: var(--nb-color-text-primary); font-weight: var(--nb-font-weight-semibold); }

/* ── NAVIGATION ────────────────────────────────────────────── */
/* Tabs: the chosen tab takes a bronze underline. */
.nb-tabs { display: flex; gap: var(--nb-space-4); overflow-x: auto; border-bottom: 1px solid var(--nb-color-border-subtle); }
.nb-tab {
  display: inline-flex; align-items: center; min-height: var(--nb-size-control); padding-inline: var(--nb-space-16);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  color: var(--nb-color-text-muted); font: inherit; font-size: var(--nb-type-size-small); font-weight: var(--nb-font-weight-medium);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nb-tab:hover { color: var(--nb-color-text-primary); }
.nb-tab[aria-selected="true"], .nb-tab[aria-current="page"], .nb-tab.is-current { color: var(--nb-color-text-primary); border-bottom-color: var(--nb-color-accent-brand); }
.nb-tab:focus-visible { outline-offset: -3px; }

/* Menu item (sidebar or drawer): the current one takes the bronze wash. */
.nb-menu { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nb-menu-item {
  display: flex; align-items: center; gap: var(--nb-space-12); min-height: var(--nb-size-control-dense); padding-inline: var(--nb-space-12);
  border-radius: var(--nb-radius-control); color: var(--nb-color-text-body); text-decoration: none;
  font-size: var(--nb-type-size-small); font-weight: var(--nb-font-weight-medium);
}
.nb-menu-item:hover { background: var(--nb-color-background-subtle); color: var(--nb-color-text-primary); }
.nb-menu-item[aria-current="page"], .nb-menu-item.is-current { background: var(--nb-color-accent-subtle); color: var(--nb-color-accent-text); }

/* App shell: a white menu column beside the canvas. */
.nb-shell { display: grid; grid-template-columns: var(--nb-size-sidebar) 1fr; min-height: 100vh; }
.nb-shell__menu { padding: var(--nb-space-16) var(--nb-space-12); background: var(--nb-color-background-surface); box-shadow: 1px 0 0 var(--nb-color-border-subtle); }
.nb-shell__main { min-width: 0; padding: var(--nb-space-32) clamp(var(--nb-space-16), 3vw, var(--nb-space-40)); }
@media (max-width: 899px) { .nb-shell { grid-template-columns: 1fr; } .nb-shell__menu { box-shadow: 0 1px 0 var(--nb-color-border-subtle); } }

/* Site header: solid canvas, a hairline below. No blur. */
.nb-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-24);
  min-height: 64px; padding: var(--nb-space-12) clamp(var(--nb-space-16), 4vw, var(--nb-space-40));
  background: var(--nb-color-background-canvas);
  box-shadow: 0 1px 0 var(--nb-color-border-subtle);
}
.nb-nav__links { display: flex; gap: var(--nb-space-24); margin: 0; padding: 0; list-style: none; }
.nb-nav__links a { color: var(--nb-color-text-body); font-size: var(--nb-type-size-small); font-weight: var(--nb-font-weight-medium); text-decoration: none; }
.nb-nav__links a:hover { color: var(--nb-color-text-primary); }
.nb-nav__links a[aria-current="page"] { color: var(--nb-color-text-primary); box-shadow: 0 2px 0 var(--nb-color-accent-brand); }

/* ── FORMS ─────────────────────────────────────────────────── */
.nb-label { display: block; margin-bottom: 6px; font-size: var(--nb-type-size-small); font-weight: var(--nb-font-weight-medium); color: var(--nb-color-text-primary); }
.nb-help { margin-top: 6px; font-size: var(--nb-type-size-caption); color: var(--nb-color-text-muted); }
.nb-error { margin-top: 6px; font-size: var(--nb-type-size-caption); color: var(--nb-color-status-danger); }
.nb-field {
  width: 100%; min-height: var(--nb-size-control); padding: 0 var(--nb-space-12);
  border: 1px solid var(--nb-color-border-control); border-radius: var(--nb-radius-control);
  background: var(--nb-color-background-surface); color: var(--nb-color-text-primary);
  /* 16 px: below that, iOS zooms the page when a field takes focus. */
  font: inherit; font-size: var(--nb-type-size-body);
  transition: border-color var(--nb-motion-fast) var(--nb-motion-ease);
}
.nb-field::placeholder { color: var(--nb-color-text-muted); }
.nb-field:focus-visible { outline: none; }
.nb-field:focus:not([aria-invalid="true"]) { border-color: var(--nb-color-text-primary); }
.nb-field[aria-invalid="true"] { border: 2px solid var(--nb-color-status-danger); }
.nb-field:disabled { background: var(--nb-color-background-subtle); color: var(--nb-color-text-muted); cursor: not-allowed; }
textarea.nb-field { min-height: 112px; padding-block: var(--nb-space-12); line-height: var(--nb-type-leading-body); resize: vertical; }
select.nb-field { appearance: none; padding-right: var(--nb-space-40);
  background-image: linear-gradient(45deg, transparent 50%, var(--nb-color-text-muted) 50%), linear-gradient(135deg, var(--nb-color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
@media (min-width: 720px) { .nb-app .nb-field { font-size: var(--nb-type-size-small); } }
.nb-consent { display: flex; align-items: flex-start; gap: var(--nb-space-12); color: var(--nb-color-text-body); font-size: var(--nb-type-size-small); line-height: var(--nb-type-leading-small); cursor: pointer; }
.nb-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--nb-color-text-primary); flex-shrink: 0; }

/* ── OVERLAYS ──────────────────────────────────────────────── */
.nb-dialog {
  width: min(560px, calc(100% - 2 * var(--nb-space-16)));
  padding: var(--nb-space-24); border: 0;
  border-radius: var(--nb-radius-sheet);
  background: var(--nb-color-background-surface); color: var(--nb-color-text-primary);
  box-shadow: var(--nb-shadow-overlay);
}
.nb-dialog::backdrop { background: rgba(32, 33, 36, 0.4); }
.nb-popover { padding: var(--nb-space-8); border-radius: var(--nb-radius-panel); background: var(--nb-color-background-surface); box-shadow: var(--nb-shadow-floating), var(--nb-shadow-resting); }

/* ── PEOPLE ────────────────────────────────────────────────── */
.nb-person { padding: var(--nb-space-24); background: var(--nb-color-background-surface); border-radius: var(--nb-radius-panel); box-shadow: var(--nb-shadow-resting); }
.nb-person__head { display: flex; align-items: center; gap: var(--nb-space-16); }
.nb-person__avatar { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nb-color-accent-subtle); color: var(--nb-color-accent-text); font-size: var(--nb-type-size-section); font-weight: var(--nb-font-weight-semibold); }
.nb-person__name { font-size: var(--nb-type-size-body); font-weight: var(--nb-font-weight-semibold); }
.nb-person__role { font-size: var(--nb-type-size-small); color: var(--nb-color-text-muted); }
.nb-person__actions { display: grid; gap: var(--nb-space-8); margin-top: var(--nb-space-16); padding-top: var(--nb-space-16); border-top: 1px solid var(--nb-color-border-subtle); }
.nb-person__actions a { display: flex; align-items: center; gap: var(--nb-space-12); min-height: var(--nb-size-control-dense); color: var(--nb-color-text-primary); font-weight: var(--nb-font-weight-medium); text-decoration: none; }
.nb-person__actions a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── PHOTOGRAPHY ───────────────────────────────────────────── */
/* Frame: product photography on the inverse ground, outlined like any panel. */
.nb-frame { position: relative; overflow: hidden; margin: 0; border-radius: var(--nb-radius-panel); background: var(--nb-color-background-inverse); box-shadow: var(--nb-shadow-resting); }
.nb-frame > img { width: 100%; height: 100%; object-fit: cover; }
.nb-frame__caption { position: absolute; left: var(--nb-space-12); right: var(--nb-space-12); bottom: var(--nb-space-12); padding: var(--nb-space-12) var(--nb-space-16); border-radius: var(--nb-radius-control); background: var(--nb-color-background-surface); box-shadow: var(--nb-shadow-raised); }
.nb-frame__caption strong { display: block; font-weight: var(--nb-font-weight-semibold); }
.nb-frame__caption span { display: block; margin-top: 2px; font-size: var(--nb-type-size-caption); color: var(--nb-color-text-muted); }

/* Cinematic band: a full-bleed photo, a scrim for legibility, inverse text.
   The scrim is the only gradient in the system. */
.nb-cinematic { position: relative; overflow: hidden; background: var(--nb-color-background-inverse); color: var(--nb-color-text-inverse); }
.nb-cinematic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nb-cinematic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(32, 33, 36, .9) 0%, rgba(32, 33, 36, .7) 40%, rgba(32, 33, 36, .2) 75%, rgba(32, 33, 36, .1) 100%); }
.nb-cinematic > .nb-container { position: relative; z-index: 2; }
.nb-cinematic .nb-display, .nb-cinematic .nb-h1, .nb-cinematic .nb-h2, .nb-cinematic .nb-h3 { color: var(--nb-color-text-inverse); }
.nb-cinematic .nb-eyebrow, .nb-cinematic .nb-lead, .nb-cinematic .nb-muted { color: var(--nb-color-text-inverse-muted); }

/* ── MOTION ────────────────────────────────────────────────── */
.nb-reveal { opacity: 0; transform: translateY(16px); transition: opacity calc(var(--nb-motion-panel) * 3) var(--nb-motion-ease), transform calc(var(--nb-motion-panel) * 3) var(--nb-motion-ease); }
.nb-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nb-root *, .nb-root *::before, .nb-root *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  .nb-reveal { opacity: 1; transform: none; }
}

/* ── HIGH CONTRAST ─────────────────────────────────────────── */
/* Tokens darken in tokens/nimbus-tokens-extended.css; these rules set
   surfaces apart by borders, never by shade alone. */
[data-theme="high-contrast"] .nb-badge { box-shadow: inset 0 0 0 1px currentColor; }
[data-theme="high-contrast"] .nb-section--subtle { box-shadow: 0 -1px 0 var(--nb-color-border-subtle), 0 1px 0 var(--nb-color-border-subtle); }
[data-theme="high-contrast"] .nb-menu-item[aria-current="page"], [data-theme="high-contrast"] .nb-menu-item.is-current { box-shadow: inset 2px 0 0 var(--nb-color-accent-text); }
[data-theme="high-contrast"] .nb-field::placeholder { font-style: italic; }
[data-theme="high-contrast"] .nb-btn--secondary, [data-theme="high-contrast"] .nb-btn--ghost { box-shadow: inset 0 0 0 1px var(--nb-color-border-control); }

@media (forced-colors: active) {
  .nb-tab[aria-selected="true"], .nb-menu-item[aria-current="page"], .nb-nav__links a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
}