/* BitFlow Nova — demo portal chrome.
   Foundations come from the design system tokens (linked ahead of this file);
   only portal-specific composition lives here. */

/* ------------------------------------------------------------------ layout */

body {
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  min-height: 100vh;
}

.shell {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
@media (max-width: 720px) {
  .shell { padding: 0 var(--space-5); }
}

.band { width: 100%; }
.band-white { background: var(--white); }
.band-tint { background: var(--ink-50); }
.band-hero { background: var(--gradient-tint); }
.band-ink { background: var(--ink-900); color: #dfe7e6; }

.section { padding: var(--space-20) 0; }
.section-tight { padding: var(--space-12) 0; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: var(--blur-panel);
}
.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.brand-lockup { display: flex; align-items: center; gap: var(--space-3); }
.brand-lockup img { height: 30px; width: auto; display: block; }
.brand-divider {
  width: 1px;
  height: 22px;
  background: var(--border-default);
}
.brand-context {
  font: var(--type-label);
  color: var(--text-muted);
  letter-spacing: var(--ls-tight);
}
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }

/* On a narrow screen the lockup alone carries the brand — the context label
   would otherwise push the topbar action off the right edge. */
@media (max-width: 560px) {
  .brand-divider, .brand-context { display: none; }
  .brand-lockup img { height: 26px; }
}

/* ------------------------------------------------------------------ typography */

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-brand);
  display: block;
}
.display {
  font: var(--fw-extrabold) var(--fs-5xl) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
}
@media (max-width: 720px) {
  .display { font-size: var(--fs-4xl); }
}
.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
  max-width: 62ch;
}
.muted { color: var(--text-muted); }
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: var(--fw-bold) var(--fs-sm) / 1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-control);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(var(--press-scale)); }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.btn-sm { height: 34px; padding: 0 var(--space-4); font-size: var(--fs-xs); }
.btn-lg { height: 50px; padding: 0 var(--space-6); font-size: var(--fs-md); }

.btn-primary { background: var(--cyan-500); color: var(--white); }
.btn-primary:hover:not(:disabled) { background: var(--cyan-600); color: var(--white); }

.btn-accent { background: var(--coral-500); color: var(--white); }
.btn-accent:hover:not(:disabled) { background: var(--coral-600); color: var(--white); }

.btn-outline {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-body);
}
.btn-outline:hover:not(:disabled) { background: var(--ink-50); color: var(--text-strong); }

.btn-ghost { background: transparent; color: var(--text-brand); }
.btn-ghost:hover:not(:disabled) { background: var(--cyan-50); color: var(--cyan-700); }

.btn-danger {
  background: transparent;
  border-color: var(--coral-200);
  color: var(--coral-700);
}
.btn-danger:hover:not(:disabled) { background: var(--coral-50); }

.btn-inverse {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: var(--white);
}
.btn-inverse:hover:not(:disabled) { background: rgba(255, 255, 255, .2); color: var(--white); }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--gutter-card);
}
.card-interactive {
  transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.card-interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--hover-lift));
}
.card-flush { padding: 0; overflow: hidden; }

.grid { display: grid; gap: var(--space-4); }
/* Compact enough that the whole range is scannable without scrolling far. */
.grid-products { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }
@media (max-width: 560px) {
  .grid-products { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ product card */

.card.product {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Mark and status share the top row so the name and tagline get the card's
   full width — at this size a badge beside them wraps every multi-word name. */
.product-head { display: flex; align-items: center; gap: var(--space-2); }
.product-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--cyan-50);
  color: var(--cyan-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-black) var(--fs-3xs) / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.product-mark-soon { background: var(--ink-100); color: var(--ink-500); }
.product-name {
  font: var(--fw-extrabold) var(--fs-md) / 1.25 var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
}
.product-tagline {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-summary {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-600);
  /* Two lines on the card; the rest lives behind "What the demo covers". */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Detail on demand, so density costs nothing. */
.product-more { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.product-more > summary {
  cursor: pointer;
  list-style: none;
  font: var(--fw-bold) var(--fs-2xs) / 1 var(--font-body);
  color: var(--text-brand);
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-more > summary::-webkit-details-marker { display: none; }
.product-more > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.product-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.product-more > summary:hover { color: var(--cyan-700); }

.product-highlights {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-highlights li {
  font-size: var(--fs-2xs);
  color: var(--ink-600);
  padding-left: var(--space-3);
  position: relative;
  line-height: 1.45;
}
.product-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-circle);
  background: var(--cyan-300);
}
.product-audience {
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--ink-600);
  line-height: 1.45;
}
.product-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}

/* --------------------------------------------------------- hero selection */

/* A real <select>, styled as the primary call to action. Native means the
   option list is the platform's own — one tap on a phone, keyboard type-ahead
   on a desktop — rather than a menu that only looks like one. */
.select-cta {
  appearance: none;
  height: 50px;
  max-width: 100%;
  padding: 0 var(--space-10) 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background-color: var(--cyan-500);
  color: var(--white);
  font: var(--fw-bold) var(--fs-md) / 1 var(--font-body);
  cursor: pointer;
  transition: var(--transition-control);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.select-cta:hover { background-color: var(--cyan-600); }
.select-cta:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* The dropdown list is drawn by the OS — keep it legible, not cyan-on-cyan. */
.select-cta option {
  background: var(--white);
  color: var(--text-strong);
  font-weight: var(--fw-regular);
}

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font: var(--fw-bold) var(--fs-3xs) / 1 var(--font-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: currentColor;
  flex: 0 0 auto;
}
.badge-live { background: var(--success-100); color: #0b7d59; }
.badge-soon { background: var(--ink-100); color: var(--ink-500); }
.badge-pending { background: var(--warning-100); color: #96650d; }
.badge-approved { background: var(--success-100); color: #0b7d59; }
.badge-declined { background: var(--ink-100); color: var(--ink-500); }
.badge-expired { background: var(--coral-100); color: var(--coral-700); }
.badge-info { background: var(--cyan-50); color: var(--cyan-700); }

/* ------------------------------------------------------------------ fields */

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font: var(--type-label);
  color: var(--text-strong);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.field-optional {
  font: var(--fw-regular) var(--fs-2xs) / 1 var(--font-body);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.input, .textarea, .select {
  width: 100%;
  font: var(--type-body-sm);
  color: var(--text-strong);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 0 var(--space-3);
  height: 42px;
  transition: var(--transition-control);
}
.textarea { height: auto; min-height: 96px; padding: var(--space-3); resize: vertical; line-height: var(--lh-normal); }
.select { appearance: none; padding-right: var(--space-8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8582' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--ring-focus);
}
/* ------------------------------------------------------------------ choices */

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 620px) {
  .choice-grid { grid-template-columns: 1fr; }
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  cursor: pointer;
  background: var(--white);
  transition: var(--transition-control);
}
.choice:hover { border-color: var(--border-strong); background: var(--ink-50); }
.choice:has(input:checked) { border-color: var(--cyan-500); background: var(--cyan-50); }
.choice:has(input:focus-visible) { box-shadow: var(--ring-focus); }
.choice input {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition-control);
}
.choice input:checked {
  background: var(--cyan-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--cyan-500);
}
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-label { font: var(--fw-bold) var(--fs-sm) / 1.3 var(--font-body); color: var(--text-strong); }
.choice-note { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.4; }

.preset-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.preset {
  appearance: none;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font: var(--fw-bold) var(--fs-2xs) / 1 var(--font-body);
  color: var(--ink-600);
  cursor: pointer;
  transition: var(--transition-control);
}
.preset:hover { background: var(--cyan-50); border-color: var(--cyan-200); color: var(--cyan-700); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 620px) {
  .field-grid { grid-template-columns: 1fr; }
}
.field-error { font-size: var(--fs-xs); color: var(--coral-700); }

/* ------------------------------------------------------------------ dialog */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
  z-index: 90;
  animation: bn-fade var(--dur-normal) var(--ease-standard);
}

/* The dialog never grows past the viewport. Its heading and its buttons stay
   put and only the fields between them scroll, so "Send request" is reachable
   on a laptop screen without hunting for it. */
.dialog {
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - var(--space-12));
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: bn-rise var(--dur-normal) var(--ease-emphasis);
}
.dialog-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A little slack so focus rings aren't clipped by the scroll container. */
  padding: 3px var(--space-8) var(--space-2);
}
.dialog-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.dialog-title {
  font: var(--fw-extrabold) var(--fs-2xl) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-control);
  font-size: 18px;
  line-height: 1;
}
.icon-btn:hover { background: var(--ink-100); color: var(--text-strong); }
.dialog-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-8) var(--space-6);
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--white);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ------------------------------------------------------------------ notices */

.notice {
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  border: 1px solid transparent;
}
.notice-info { background: var(--cyan-50); border-color: var(--cyan-100); color: var(--cyan-900); }
.notice-warn { background: var(--warning-100); border-color: #f6dcae; color: #7a5209; }
.notice-danger { background: var(--coral-50); border-color: var(--coral-100); color: var(--coral-800); }
.notice-ok { background: var(--success-100); border-color: #b6e7d5; color: #0b6448; }

/* ------------------------------------------------------------------ reference chip */

.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ink-900);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font: var(--fw-bold) var(--fs-lg) / 1 var(--font-mono);
  letter-spacing: .06em;
}
.ref-chip .copy {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  border-radius: var(--radius-sm);
  font: var(--fw-bold) var(--fs-3xs) / 1 var(--font-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 6px 8px;
  cursor: pointer;
  transition: var(--transition-control);
}
.ref-chip .copy:hover { background: rgba(255, 255, 255, .2); }

/* ------------------------------------------------------------------ steps */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); }
.step { display: flex; flex-direction: column; gap: var(--space-2); }
.step-num {
  font: var(--fw-black) var(--fs-2xl) / 1 var(--font-display);
  color: var(--coral-500);
  letter-spacing: var(--ls-tighter);
}
.step-title { font: var(--fw-bold) var(--fs-md) / 1.3 var(--font-display); color: var(--text-strong); }
.step-body { font-size: var(--fs-sm); color: var(--ink-600); line-height: var(--lh-normal); }

/* ------------------------------------------------------------------ tables */

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left;
  font: var(--fw-bold) var(--fs-3xs) / 1 var(--font-body);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--ink-700);
}
.table tr:last-child td, .table tr:last-child th { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ tabs */

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font: var(--fw-bold) var(--fs-sm) / 1 var(--font-body);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-control);
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-strong); }
.tab[aria-selected='true'] { color: var(--cyan-700); border-bottom-color: var(--cyan-500); }
.tab .count {
  display: inline-block;
  margin-left: 6px;
  background: var(--ink-100);
  color: var(--ink-600);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-size: var(--fs-3xs);
  font-variant-numeric: tabular-nums;
}
.tab[aria-selected='true'] .count { background: var(--cyan-100); color: var(--cyan-800); }

/* ------------------------------------------------------------------ misc */

.spin {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--cyan-100);
  border-top-color: var(--cyan-500);
  animation: bn-spin 700ms linear infinite;
  flex: 0 0 auto;
}
.empty {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.hairline { height: 1px; background: var(--border-subtle); border: none; margin: 0; }
.footer {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- embedded
   Opened with ?embed=1 (the BitFlow Nova website frames the catalogue at
   /demos). The host page already supplies the header, so drop ours rather
   than stacking two brand bars. Standalone visits are unaffected. */
body.is-embedded .topbar { display: none; }
body.is-embedded .band-hero { padding-top: var(--space-8); }