/* ============================================================
   Coincento Design System — Component layer
   ============================================================ */

/* ---------- Brand mark ----------------------------------- */
/* The mark is injected with <use>, so its paths live in a shadow tree that
   descendant selectors cannot reach. Custom properties DO inherit through
   it — that is the only reliable way to recolour a two-tone sprite. */
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: inherit; }
/* The wordmark is brand artwork, not live text — the lockup files say so in
   as many words. Setting "Coincento" in the UI font meant the name changed
   shape every time the typeface did. Height is set and width follows the
   682x200 viewBox; the file carries its own clear space, so the drawn mark
   is smaller than the box and the height reads larger than the number. */
.logo__lockup { display: block; height: 38px; width: auto; }
.logo__lockup--footer { height: 44px; }
.logo__mark { width: 26px; height: 30px; flex: none; }
.cc-mark, .logo__mark { --mark-hex: var(--brand-mark-hex); --mark-petal: var(--brand-mark-petal); }
.logo--mono .logo__mark, svg.logo--mono, .cc-mark--mono { --mark-hex: currentColor; --mark-petal: currentColor; }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight); color: var(--fg-default);
}
.logo--lg .logo__mark { width: 38px; height: 44px; }
.logo--lg .logo__word { font-size: 1.5rem; }
.on-dark .logo__word { color: #FFFFFF; }
.logo__tag {
  font-size: var(--fs-caption); color: var(--fg-muted);
  letter-spacing: var(--ls-wide); padding-left: var(--sp-3);
  margin-left: var(--sp-1); border-left: 1px solid var(--border-default);
}

/* ---------- Button --------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg-default); --btn-bd: transparent;
  --btn-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  height: var(--btn-height-md); padding-inline: var(--btn-pad-x);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-action);
  font-size: var(--btn-fs); font-weight: var(--btn-fw);
  letter-spacing: var(--ls-snug); line-height: 1.25;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { box-shadow: var(--btn-shadow), var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn__icon { width: 1.125em; height: 1.125em; flex: none; }

/* Primary — brand teal with the signature glow.
   Mirrors the Figma Button component 1:1. */
.btn--primary {
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--btn-primary-fg);
  --btn-bd: transparent;
  --btn-shadow: var(--btn-primary-shadow);
}
/* Hover changes ground colour only. Growing the glow would make primary
   the one variant that also changes elevation, and elevation already means
   something else here: :active presses the button down. */
.btn--primary:hover { --btn-bg: var(--btn-primary-bg-hover); }

/* Contract — the irreversible, high-consequence action (sign, submit
   to chain, terminate). Petrol ground, 15.5:1. Deliberately not teal:
   it must not read as "just another brand button". */
.btn--contract { --btn-bg: var(--c-petrol-800); --btn-fg: #FFFFFF; --btn-bd: var(--c-petrol-800); }
.btn--contract:hover { --btn-bg: #073E4B; --btn-bd: #073E4B; }

/* Secondary — outlined */
.btn--secondary { --btn-bg: var(--bg-surface); --btn-fg: var(--fg-default); --btn-bd: var(--border-default); }
.btn--secondary:hover { --btn-bg: var(--bg-surface-alt); --btn-bd: var(--border-strong); }

/* Ghost / quiet */
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg-brand); --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: var(--bg-brand-soft); }

/* Destructive */
.btn--danger { --btn-bg: var(--c-danger-600); --btn-fg: #FFFFFF; --btn-bd: var(--c-danger-600); }
.btn--danger:hover { --btn-bg: var(--c-danger-800); --btn-bd: var(--c-danger-800); }

/* On dark surfaces */
.on-dark .btn--secondary { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgba(255,255,255,.34); }
.on-dark .btn--secondary:hover { --btn-bg: rgba(255,255,255,.10); --btn-bd: rgba(255,255,255,.55); }
.on-dark .btn--ghost { --btn-fg: var(--c-teal-400); }
.on-dark .btn--ghost:hover { --btn-bg: rgba(255,255,255,.10); }
/* teal-500 has almost no separation from a brand-teal ground (1.7:1), so
   primary lifts to teal-300 on dark: 3.4:1 against the plate for the button
   edge, 9.2:1 for its petrol label. Still unmistakably the brand colour,
   and still distinct from the white contract button. */
/* Pale teal on a teal band reads as a disabled chip: the primary action
   loses the band it sits on. White separates from the ground by value,
   not hue, and keeps the petrol label at 15.5:1. */
.on-dark .btn--primary {
  --btn-bg: #FFFFFF; --btn-fg: var(--c-petrol-800);
  --btn-shadow: none;
}
.on-dark .btn--primary:hover { --btn-bg: var(--c-neutral-100); }
/* Petrol has no contrast against a petrol band — the contract button
   inverts to white there and keeps its 15.5:1. */
.on-dark .btn--contract { --btn-bg: #FFFFFF; --btn-fg: var(--c-petrol-800); --btn-bd: #FFFFFF; }
.on-dark .btn--contract:hover { --btn-bg: var(--c-neutral-100); --btn-bd: var(--c-neutral-100); }

.btn--sm { height: var(--btn-height-sm); padding-inline: var(--sp-4); font-size: var(--fs-body-sm); }
/* 18px bold clears the WCAG large-text threshold (14pt bold), so the
   primary button at --lg is AA-compliant even on teal-500. */
.btn--lg { height: var(--btn-height-lg); padding-inline: var(--sp-8); font-size: var(--fs-body-lg); }
.btn--block { width: 100%; }
.btn--icon { width: var(--btn-height-md); padding-inline: 0; }
.btn--icon.btn--sm { width: var(--btn-height-sm); }

.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--btn-fg);
  animation: cc-spin .7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ---------- Link with arrow ------------------------------ */
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-medium); text-decoration: none; }
.link-arrow svg { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Form controls -------------------------------- */
.field { display: block; }
.field__label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  color: var(--fg-default); letter-spacing: var(--ls-snug);
}
.field__label .req { color: var(--fg-danger); margin-left: 2px; }
.field__hint  { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--fg-muted); }
.field__error {
  margin-top: var(--sp-2); font-size: var(--fs-caption);
  color: var(--fg-danger); display: flex; align-items: center; gap: var(--sp-1);
}

.input, .select, .textarea {
  width: 100%; min-height: var(--control-height);
  padding: 0 var(--sp-5);
  background: var(--bg-surface-alt);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--fg-default);
  font-size: var(--fs-body); line-height: var(--lh-normal);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.textarea { padding: var(--sp-4) var(--sp-5); min-height: 8rem; resize: vertical; line-height: var(--lh-relaxed); }
.input::placeholder, .textarea::placeholder { color: var(--fg-placeholder); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-default); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: var(--bg-surface);
  border-color: var(--c-teal-500); box-shadow: var(--focus-ring);
}
.input[disabled], .select[disabled], .textarea[disabled] { opacity: .55; cursor: not-allowed; }
.input--mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: var(--ls-normal); }

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--c-danger-600); }
.field.is-invalid .input:focus { box-shadow: 0 0 0 3px rgba(192,50,43,.25); }

.select {
  appearance: none; padding-right: var(--sp-10); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2355707A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-right: calc(var(--sp-10) + var(--sp-2)); }
.input-group__affix {
  position: absolute; right: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body-sm); color: var(--fg-muted);
}

.checkbox, .radio { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.checkbox input, .radio input {
  appearance: none; margin: 0; flex: none;
  width: 18px; height: 18px; margin-top: 2px;
  border: var(--border-thin) solid var(--border-strong);
  background: var(--bg-surface);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.checkbox input { border-radius: var(--radius-xs); }
.radio input { border-radius: var(--radius-full); }
.checkbox input:checked, .radio input:checked { background: var(--c-teal-700); border-color: var(--c-teal-700); }
.checkbox input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5 4.4 8.4 11 1.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.radio input:checked { box-shadow: inset 0 0 0 3px var(--bg-surface); }
.checkbox input:focus-visible, .radio input:focus-visible { box-shadow: var(--focus-ring); }
.checkbox__text, .radio__text { font-size: var(--fs-body); color: var(--fg-body); }

.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { appearance: none; margin: 0; width: 40px; height: 22px; border-radius: var(--radius-full); background: var(--border-strong); position: relative; transition: background var(--dur-base) var(--ease-out); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-full); background: #FFFFFF; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out); }
.switch input:checked { background: var(--c-teal-700); }
.switch input:checked::after { transform: translateX(18px); }
.switch input:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- Card ----------------------------------------- */
.card {
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.card--flat   { background: var(--bg-surface-alt); border-color: transparent; }
.card--raised { box-shadow: var(--shadow-2); border-color: transparent; }
.card--brand  { border-color: var(--c-teal-200); background: var(--c-teal-50); }
.card--interactive { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--c-teal-300); }
.card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--fg-default); letter-spacing: var(--ls-snug); }
.card__body  { margin-top: var(--sp-2); font-size: var(--fs-body-sm); color: var(--fg-secondary); line-height: var(--lh-relaxed); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: var(--border-thin) solid var(--border-subtle); }

/* ---------- Metric / stat --------------------------------
   Figures lead in their own column, labels follow. Stacking the
   value under the label makes its position depend on how many
   lines the label wraps to, which is what breaks a three-up row. */
.stats { display: grid; gap: 0; }
.stat {
  display: flex; align-items: baseline; gap: var(--sp-5);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.stat:last-child { border-bottom: 1px solid var(--border-subtle); }
.stat__value {
  flex: none; min-width: 3ch; text-align: right;
  font-size: var(--fs-h1); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight); line-height: 1;
  color: var(--fg-brand);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.stat__label { font-size: var(--fs-body); color: var(--fg-body); }
.stat__meta { font-size: var(--fs-caption); color: var(--fg-muted); margin-top: 2px; }
.on-dark .stat { border-color: rgba(159,196,201,.20); }
.on-dark .stat__value { color: var(--c-teal-400); }
.on-dark .stat__label { color: var(--c-neutral-400); }

/* ---------- Badge / status ------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 24px; padding-inline: var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug); white-space: nowrap;
  background: var(--bg-surface-alt); color: var(--fg-secondary);
  border: var(--border-thin) solid transparent;
}
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.badge--brand   { background: var(--bg-info);    color: var(--fg-info);    border-color: var(--border-info); }
.badge--success { background: var(--bg-success); color: var(--fg-success); border-color: var(--border-success); }
.badge--warning { background: var(--bg-warning); color: var(--fg-warning); border-color: var(--border-warning); }
.badge--danger  { background: var(--bg-danger);  color: var(--fg-danger);  border-color: var(--border-danger); }
.badge--neutral { background: var(--bg-sunken);  color: var(--fg-secondary); }
.badge--live .badge__dot { animation: cc-pulse 2s var(--ease-in-out) infinite; }
@keyframes cc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Alert / callout ------------------------------ */
.alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--border-info);
  background: var(--bg-info);
  font-size: var(--fs-body-sm); line-height: var(--lh-relaxed);
  color: var(--fg-body);
}
.alert__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--fg-info); }
.alert__title { font-weight: var(--fw-semibold); color: var(--fg-default); margin-bottom: 2px; }
.alert--success { background: var(--bg-success); border-color: var(--border-success); }
.alert--success .alert__icon { color: var(--fg-success); }
.alert--warning { background: var(--bg-warning); border-color: var(--border-warning); }
.alert--warning .alert__icon { color: var(--fg-warning); }
.alert--danger  { background: var(--bg-danger);  border-color: var(--border-danger); }
.alert--danger .alert__icon { color: var(--fg-danger); }

/* ---------- Data / mono chip ----------------------------- */
.datum {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-body-sm);
  background: var(--bg-surface-alt);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px var(--sp-2);
  color: var(--fg-body);
  word-break: break-all;
}
.datum__copy {
  position: relative;
  border: 0; background: none; padding: 2px; cursor: pointer;
  color: var(--fg-brand); border-radius: var(--radius-xs);
  display: inline-flex; flex: none;
  transition: background var(--dur-fast) var(--ease-out);
}
/* The glyph stays 14px; the hit area is 44x44. Pseudo-element rather than
   padding so the chip's layout is untouched. */
.datum__copy::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.datum__copy:hover { background: var(--bg-brand-soft); }

/* ---------- Table ---------------------------------------- */
.table-wrap { overflow-x: auto; border: var(--border-thin) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.table th {
  text-align: left; font-weight: var(--fw-semibold);
  font-size: var(--fs-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--fg-secondary);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface-alt);
  border-bottom: var(--border-thin) solid var(--border-subtle);
  white-space: nowrap;
}
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-thin) solid var(--border-subtle); color: var(--fg-body); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--bg-surface-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); white-space: nowrap; }
.table .strong { color: var(--fg-default); font-weight: var(--fw-medium); }

/* ---------- Tabs ----------------------------------------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: var(--border-thin) solid var(--border-subtle); }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--fg-muted);
  border-bottom: var(--border-thick) solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--fg-body); }
.tab[aria-selected="true"] { color: var(--fg-brand); border-bottom-color: var(--c-teal-500); }

/* ---------- Navigation ----------------------------------- */
/* A detached bar, not a full-bleed strip. .nav is a transparent sticky
   frame; the surface, border and radius live on .nav__inner, so the bar
   floats clear of the viewport edges and the page shows through around it.
   The frame's padding sets the gap on three sides at once — the sticky
   offset repeats it so the gap survives scrolling. */
.nav {
  position: sticky; top: var(--sp-3); z-index: var(--z-sticky);
  padding: var(--sp-3) var(--sp-4) 0;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); width: 100%;
  height: var(--nav-height);
  padding-inline: var(--sp-5);
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
}
.nav__links { display: flex; align-items: center; gap: var(--sp-6); list-style: none; }
.nav__link {
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  color: var(--fg-secondary); text-decoration: none;
  position: relative; padding-block: var(--sp-2);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--c-teal-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--fg-default); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--fg-default); }

/* Disclosure menu. Hiding the links below 780px without a replacement left
   the whole primary nav unreachable on a phone. */
.nav__toggle { display: none; }
.nav__panel { display: none; }
@media (max-width: 780px) {
  .nav__links { display: none; }
  /* The bar cannot hold logo + CTA + toggle at 375px; the cluster wraps and
     the toggle drops out of the 64px bar. The CTA moves into the panel. */
  .nav__inner .btn { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: var(--border-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface); color: var(--fg-default);
    cursor: pointer;
  }
  .nav__toggle:focus-visible { box-shadow: var(--focus-ring); }
  .nav__toggle .bar { transition: opacity var(--dur-fast) var(--ease-out); }
  .nav__toggle[aria-expanded="true"] .bar-mid { opacity: 0; }

  .nav__panel[data-open="true"] { display: block; }
  /* Absolute insets resolve against .nav's padding box, which includes its
     padding — so the frame's inset has to be repeated here rather than
     inherited. Top clears the frame's own padding plus the bar. */
  .nav__panel {
    position: absolute; inset-inline: var(--sp-4);
    top: calc(var(--sp-3) + var(--nav-height) + var(--sp-2));
    background: var(--bg-surface);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3);
    padding: var(--sp-2) var(--sp-5) var(--sp-4);
  }
  .nav__panel ul { list-style: none; }
  /* Scoped to list links. A bare `.nav__panel a` also matched the CTA and
     beat `a.btn` on source order, repainting the button label. */
  .nav__panel li a {
    display: block; padding: var(--sp-3) 0;
    font-size: var(--fs-body); font-weight: var(--fw-medium);
    color: var(--fg-body); text-decoration: none;
    border-bottom: var(--border-thin) solid var(--border-subtle);
  }
  .nav__panel li:last-child a { border-bottom: 0; }
  .nav__panel .btn { display: inline-flex; width: 100%; margin-top: var(--sp-4); }
}

/* App top bar — brand gradient, product surface */
.appbar {
  height: var(--appbar-height);
  background: var(--grad-brand-hi);
  color: #FFFFFF;
  display: flex; align-items: center;
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.appbar__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-6); }
.appbar__nav { display: flex; align-items: stretch; height: var(--appbar-height); list-style: none; }
.appbar__nav > li { display: flex; }
.appbar__item {
  display: flex; align-items: center; height: 100%;
  padding-inline: var(--sp-5);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  color: rgba(255,255,255,.82); text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.appbar__item:hover { background: rgba(255,255,255,.10); color: #FFFFFF; }
.appbar__item[aria-current="page"] { background: rgba(255,255,255,.14); color: #FFFFFF; border-bottom-color: #FFFFFF; }
.appbar__user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); color: #FFFFFF; }

.avatar {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.20); color: #FFFFFF;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}

.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); color: var(--fg-secondary); list-style: none; }
.breadcrumb a { color: var(--fg-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--fg-brand); }
.breadcrumb li[aria-current] { color: var(--fg-default); font-weight: var(--fw-medium); }

/* ---------- Marketing blocks ----------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--sp-24) var(--sp-20); }
.hero__art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__eyebrow { margin-bottom: var(--sp-4); }
.hero__title { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); max-width: 16ch; }
.hero__title em { font-style: normal; color: var(--c-teal-500); }
/* teal-500 is a light-ground accent (3.2:1 on the hero wash). On a brand-teal
   plate it collapses to 1.6:1, so a dark hero inherits the headline colour and
   carries emphasis by weight instead. */
.on-dark .hero__title em { color: inherit; }
.hero__sub { margin-top: var(--sp-5); font-size: var(--fs-body-lg); color: var(--fg-body); max-width: 52ch; line-height: var(--lh-relaxed); }
.hero__actions { margin-top: var(--sp-8); }

/* Credential strip. The separators are drawn as each fact's own ::before
   rather than typed between them: a hand-placed middot belongs to the line
   it was typed on and strands at the end of it on wrap ("...since 2009 ·"),
   while a dot carried by the item it introduces wraps with that item and
   reads as a bullet wherever it lands. */
.credband {
  padding: var(--sp-5) 0;
  background: var(--bg-surface-alt);
  border-block: var(--border-thin) solid var(--border-subtle);
  font-size: var(--fs-body); color: var(--fg-secondary);
}
.credband__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  /* Half the old column gap: the dot's own trailing margin supplies the
     other half, so the spacing either side of it stays even. */
  gap: var(--sp-2) var(--sp-4);
}
.credband__brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-semibold); color: var(--fg-default);
  white-space: nowrap;
  /* No dot after the brand — it labels the strip rather than being one of
     the facts — so it keeps the wider gap the facts gave up. */
  margin-right: var(--sp-4);
}
.credband__brand svg { flex: none; color: var(--c-teal-700); }
/* display:contents lifts the <li> into the flex row, so the facts wrap as
   individual items instead of as one block. */
.credband ul { list-style: none; display: contents; }
/* display:contents does not touch the DOM, so li + li still matches. */
.credband li + li::before {
  content: ""; display: inline-block;
  /* border-default is a hairline colour and vanishes at 3px against the
     strip's own tint — a separator has to survive being this small. */
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--border-strong);
  vertical-align: middle;
  margin-right: var(--sp-4);
}
@media (max-width: 560px) {
  .credband__inner { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--sp-2); }
  /* One fact per row here, so a dot on the second and third only would read
     as a broken list rather than as separation. */
  .credband li + li::before { display: none; }
  .credband__brand { margin-right: 0; }
}

/* Full-bleed plate: square corners, so the band meets the page edge to edge. */
.band-dark { background: var(--c-petrol-800); position: relative; overflow: hidden; }
.band-dark::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 85% 10%, rgba(63,151,159,.28), transparent 70%);
  pointer-events: none;
}
.band-dark > * { position: relative; z-index: 1; }

.commitment { display: flex; gap: var(--sp-4); }
.commitment__icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: rgba(63,151,159,.20); color: var(--c-teal-400);
}
.commitment__title { font-family: var(--font-display); font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: #FFFFFF; letter-spacing: var(--ls-snug); }
.commitment__body { margin-top: var(--sp-1); font-size: var(--fs-body-sm); color: var(--c-neutral-400); line-height: var(--lh-relaxed); }

.footer { background: var(--c-petrol-900); color: var(--c-neutral-400); padding-block: var(--sp-16) var(--sp-8); }
/* h3 as well as h4: the column headings are h3 in the document outline
   (they sit under the page h2s), and styling only h4 left them falling
   back to the global heading colour — near-black type on the petrol
   plate, which is why they read as invisible rather than as dim. */
.footer h3, .footer h4 { font-size: var(--fs-body-sm); color: #FFFFFF; letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: var(--sp-4); font-weight: var(--fw-semibold); }
.footer ul { list-style: none; }
.footer li + li { margin-top: var(--sp-2); }
.footer a { color: var(--c-neutral-400); text-decoration: none; font-size: var(--fs-body-sm); }
.footer a:hover { color: #FFFFFF; }
.footer__base { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.10); font-size: var(--fs-caption); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------- Modal / toast -------------------------------- */
.overlay { position: fixed; inset: 0; background: rgba(0,26,34,.55); backdrop-filter: blur(2px); z-index: var(--z-overlay); }
.modal {
  background: var(--bg-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-4); max-width: 32rem; width: 100%;
  padding: var(--sp-6); z-index: var(--z-modal);
}
.modal__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--fg-default); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-6); }

/* .modal on a native <dialog>. The element brings its own border, padding and
   centring, plus a separate ::backdrop — reset those so .modal's surface shows
   through unchanged, and keep what the platform does better than script:
   focus trapping, Esc to close, inerting the page behind, restoring focus to
   whatever opened it. Height is capped in svh so a long form scrolls inside
   the dialog instead of running off a phone screen. */
dialog.modal {
  border: 0; color: inherit;
  max-height: min(88svh, 46rem); overflow: auto;
  overscroll-behavior: contain;
}
dialog.modal::backdrop { background: rgba(0,26,34,.55); backdrop-filter: blur(2px); }
/* Transition rather than keyframes, so the dialog animates OUT as well as in.
   `display` and `overlay` are discrete properties: without allow-discrete the
   element is yanked from the top layer on the first frame and the exit is never
   seen. @starting-style supplies the pre-open values. */
@media (prefers-reduced-motion: no-preference) {
  dialog.modal, dialog.modal::backdrop {
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                display var(--dur-base) allow-discrete,
                overlay var(--dur-base) allow-discrete;
  }
  dialog.modal { opacity: 0; transform: translateY(10px) scale(.985); }
  dialog.modal[open] { opacity: 1; transform: none; }
  @starting-style { dialog.modal[open] { opacity: 0; transform: translateY(10px) scale(.985); } }

  dialog.modal::backdrop { opacity: 0; }
  dialog.modal[open]::backdrop { opacity: 1; }
  @starting-style { dialog.modal[open]::backdrop { opacity: 0; } }
}

.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--c-petrol-800); color: #FFFFFF;
  border-radius: var(--radius-md); padding: var(--sp-4);
  box-shadow: var(--shadow-3); max-width: 26rem;
  font-size: var(--fs-body-sm);
  border: 1px solid rgba(111,182,187,.35);
}
.toast--success { border-color: rgba(111,207,174,.40); }
.toast--danger  { border-color: rgba(240,145,138,.40); }

/* ---------- Progress / skeleton -------------------------- */
.progress { height: 6px; border-radius: var(--radius-full); background: var(--bg-sunken); overflow: hidden; }
/* scaleX, not width: animating a layout property thrashes the frame. */
.progress__bar {
  height: 100%; width: 100%; background: var(--c-teal-500); border-radius: inherit;
  transform-origin: left center; transform: scaleX(var(--progress, 0));
  transition: transform var(--dur-slow) var(--ease-out);
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-surface-alt) 25%, var(--bg-sunken) 37%, var(--bg-surface-alt) 63%);
  background-size: 400% 100%;
  animation: cc-shimmer 1.4s ease infinite;
  height: 1rem;
}
@keyframes cc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Empty state ---------------------------------- */
.empty { text-align: center; padding: var(--sp-16) var(--sp-6); }
.empty__icon { width: 48px; height: 48px; margin: 0 auto var(--sp-4); color: var(--c-teal-300); }
.empty__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--fg-default); }
.empty__body { margin-top: var(--sp-2); font-size: var(--fs-body-sm); color: var(--fg-muted); max-width: 36ch; margin-inline: auto; }

/* ---------- Timeline (transaction lifecycle) ------------- */
.timeline { list-style: none; position: relative; padding-left: var(--sp-6); }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border-subtle); }
.timeline li { position: relative; padding-bottom: var(--sp-5); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--sp-6) * -1); top: 4px;
  width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--bg-surface); border: 2px solid var(--border-strong);
}
.timeline li.is-done::before { background: var(--c-teal-500); border-color: var(--c-teal-500); }
.timeline li.is-current::before { border-color: var(--c-teal-500); box-shadow: 0 0 0 4px rgba(63,151,159,.18); }
.timeline__title { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--fg-default); }
.timeline__meta { font-size: var(--fs-caption); color: var(--fg-muted); font-variant-numeric: tabular-nums; }


/* ---------- Coarse-pointer sizing -------------------------
   Touch needs 44px; a mouse does not. Raising these globally would
   bloat the desktop layout, so the uplift is scoped to the pointer
   that actually needs it. */
@media (pointer: coarse) {
  /* The 40px default comes from the Figma component (24 content + 2x8).
     Touch needs 44, and the requirement wins on the device that has it. */
  .btn { height: 44px; }
  .btn--sm { height: 44px; }
  .btn--icon { width: 44px; }
  .btn--icon.btn--sm { width: 44px; }
  .logo { min-height: 44px; }
  .tab { padding-block: var(--sp-4); }
  .nav__link { padding-block: var(--sp-3); }
  /* sp-2 leaves these at 38.7px (22.68 line-height + 16). sp-3 clears 44. */
  .footer a, .breadcrumb a { display: inline-block; padding-block: var(--sp-3); }
  .checkbox, .radio, .switch { min-height: 44px; align-items: center; }
  .checkbox input, .radio input { margin-top: 0; }
}