/* ==========================================================================
   AMADA — Design System
   An enterprise "operator console" for VTU.

   Visual concept: INSTRUMENT PANEL.
   Dense, squared, information-first. Structure comes from rules and panel
   headers, not from floating cards. Built to be read quickly and operated
   repeatedly by agents and resellers, not browsed casually.

   Deliberately opposite to the piguen template in every structural choice:
   rail instead of tab bar, tables instead of cards, tight radii instead of
   soft ones, fluid workspace instead of a centred column.

   Loaded by:  partials/am/css.links.hbs
   Paired with: /assets/amada/amada.js
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — LIGHT
   -------------------------------------------------------------------------- */
:root {
  /* Brand — seeded from tenant config, refined by amada.js.
     Reserved for interactive affordance and active navigation ONLY. The
     interface must read as a neutral instrument; the tenant colour marks
     what you can act on. */
  --am-brand:        #2E5BFF;
  --am-brand-rgb:    46, 91, 255;
  --am-brand-hover:  #244BD8;
  --am-brand-soft:   rgba(46, 91, 255, 0.10);
  --am-brand-line:   rgba(46, 91, 255, 0.28);
  --am-on-brand:     #FFFFFF;   /* recomputed by contrast in amada.js */
  --am-brand-ink:    #2E5BFF;   /* brand, made legible as text on a surface */

  --am-accent:       #0D9488;

  /* Graphite canvas — cooler and flatter than a consumer palette */
  --am-bg:           #F3F5F7;
  --am-surface:      #FFFFFF;
  --am-raised:       #FFFFFF;
  --am-sunken:       #EBEEF2;
  --am-hover:        #F5F7F9;

  /* Ink */
  --am-text:         #12161D;
  --am-text-2:       #48505E;
  --am-text-3:       #79818F;

  /* Rules */
  --am-border:       #E1E5EA;
  --am-border-strong:#C9CFD8;

  /* Status — solid, plus a soft fill and a line tint.
     `processing` is its own token, never a shade of danger. */
  --am-success:      #0B7A55;
  --am-success-soft: #E4F4EE;
  --am-success-line: #A9DCC8;

  --am-processing:   #B4690E;
  --am-processing-soft:#FCF1E2;
  --am-processing-line:#F0CFA0;

  --am-danger:       #C0322F;
  --am-danger-soft:  #FCEBEA;
  --am-danger-line:  #F2BEBC;

  --am-info:         #1D4ED8;
  --am-info-soft:    #E8EEFD;
  --am-info-line:    #BCCFF9;

  --am-warning:      var(--am-processing);

  /* Money semantics */
  --am-credit:       var(--am-success);
  --am-debit:        var(--am-text);

  /* Type — Inter reads well at 12–14px, which this UI lives at */
  --am-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --am-font-num: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace;

  --am-t-display: 1.625rem;  /* 26 */
  --am-t-h1:      1.25rem;   /* 20 */
  --am-t-h2:      1.0625rem; /* 17 */
  --am-t-h3:      0.9375rem; /* 15 */
  --am-t-body:    0.875rem;  /* 14 — denser than a consumer UI, on purpose */
  --am-t-sm:      0.8125rem; /* 13 */
  --am-t-cap:     0.75rem;   /* 12 */
  --am-t-micro:   0.6875rem; /* 11 */

  --am-w-regular:  400;
  --am-w-medium:   500;
  --am-w-semibold: 600;
  --am-w-bold:     700;

  /* Spacing — 4-based, with 2px available for dense rows */
  --am-1:  4px;
  --am-2:  8px;
  --am-3:  12px;
  --am-4:  16px;
  --am-5:  20px;
  --am-6:  24px;
  --am-8:  32px;
  --am-10: 40px;
  --am-12: 48px;
  --am-16: 64px;

  /* Radius — squared. A console is built from panels, not pills. */
  --am-r-xs: 3px;
  --am-r-sm: 5px;
  --am-r-md: 7px;
  --am-r-lg: 10px;
  --am-r-full: 999px;

  /* Elevation — flat by default; reserved for things that float */
  --am-sh-sm: 0 1px 2px rgba(18, 22, 29, 0.05);
  --am-sh-md: 0 4px 10px rgba(18, 22, 29, 0.08), 0 1px 3px rgba(18, 22, 29, 0.05);
  --am-sh-lg: 0 16px 40px rgba(18, 22, 29, 0.14), 0 4px 12px rgba(18, 22, 29, 0.07);
  --am-sh-drawer: -12px 0 32px rgba(18, 22, 29, 0.10);

  /* Motion — functional only */
  --am-fast: 120ms;
  --am-base: 180ms;
  --am-ease: cubic-bezier(0.2, 0, 0.15, 1);
  --am-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --am-rail:        236px;
  --am-rail-mini:   60px;
  --am-topbar:      52px;
  --am-drawer:      400px;
  --am-gutter:      16px;
  --am-row:         44px;   /* table row height */

  /* ----------------------------------------------------------------------
     Bridge tokens. toast.js and txmodal.js are shared, template-agnostic
     modules themed off --sd-* variables. Aliasing them keeps all three
     templates on the same JS with no forking.
     ---------------------------------------------------------------------- */
  --sd-surface:      var(--am-surface);
  --sd-surface-3:    var(--am-sunken);
  --sd-text-primary: var(--am-text);
  --sd-text-muted:   var(--am-text-2);
  --sd-border:       var(--am-border);
  --sd-success:      var(--am-success);
  --sd-warning:      var(--am-processing);
  --sd-danger:       var(--am-danger);
  --sd-info:         var(--am-info);
}

/* --------------------------------------------------------------------------
   2. TOKENS — DARK
   A console is often run for long stretches; dark is a first-class mode,
   built from graphite rather than inverted greys.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --am-bg:            #0B0D11;
  --am-surface:       #13161C;
  --am-raised:        #191D24;
  --am-sunken:        #0E1116;
  --am-hover:         #1B1F27;

  --am-text:          #E9EDF3;
  --am-text-2:        #98A1B0;
  --am-text-3:        #6B7381;

  --am-border:        #232830;
  --am-border-strong: #333A45;

  --am-success:       #34D39A;
  --am-success-soft:  rgba(52, 211, 154, 0.12);
  --am-success-line:  rgba(52, 211, 154, 0.30);

  --am-processing:    #F0B44B;
  --am-processing-soft: rgba(240, 180, 75, 0.12);
  --am-processing-line: rgba(240, 180, 75, 0.30);

  --am-danger:        #F27B76;
  --am-danger-soft:   rgba(242, 123, 118, 0.12);
  --am-danger-line:   rgba(242, 123, 118, 0.30);

  --am-info:          #6FA0FB;
  --am-info-soft:     rgba(111, 160, 251, 0.12);
  --am-info-line:     rgba(111, 160, 251, 0.30);

  --am-debit:         var(--am-text);

  --am-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --am-sh-md: 0 4px 10px rgba(0, 0, 0, 0.55);
  --am-sh-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
  --am-sh-drawer: -12px 0 32px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--am-font);
  font-size: var(--am-t-body);
  line-height: 1.5;
  color: var(--am-text);
  background: var(--am-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
  /* Inter's contextual alternates make figures line up better in tables */
  font-feature-settings: "cv05" 1, "tnum" 0;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: none; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

a, button, [role="button"], label, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--am-brand);
  outline-offset: 1px;
  border-radius: var(--am-r-xs);
}

::selection { background: var(--am-brand-soft); color: var(--am-text); }

* { scrollbar-width: thin; scrollbar-color: var(--am-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--am-border-strong);
  border-radius: var(--am-r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* --------------------------------------------------------------------------
   4. UTILITY SHIMS
   AMADA loads no CSS framework. Validator.js toggles `.d-none` on error
   slots and some shared markup uses `.text-danger`, so those two contracts
   are honoured here directly.
   -------------------------------------------------------------------------- */
.d-none { display: none !important; }
/* The UA rule for [hidden] is `display:none` at the lowest specificity, so
   ANY class that sets display (.am-cmdk__item is display:flex) silently wins
   and the element stays visible. Restore it with the same weight .d-none has,
   so `el.hidden = true` works everywhere in this template. */
[hidden] { display: none !important; }
.text-danger { color: var(--am-danger) !important; }

.am-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.am-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Inline link inside body copy and notices. Underlined rather than
   colour-only, so it is still identifiable as a link when the tenant brand
   sits close to the surrounding text colour. */
.am-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: var(--am-w-semibold); }
.am-link:hover { text-decoration-thickness: 2px; }
.am-spacer { flex: 1; }
.am-row { display: flex; align-items: center; gap: var(--am-2); }
.am-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--am-3); }
.am-stack   { display: flex; flex-direction: column; gap: var(--am-4); }
.am-stack-2 { display: flex; flex-direction: column; gap: var(--am-2); }
.am-stack-3 { display: flex; flex-direction: column; gap: var(--am-3); }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.am-display { font-size: var(--am-t-display); font-weight: var(--am-w-bold); letter-spacing: -0.025em; line-height: 1.15; }
.am-h1 { font-size: var(--am-t-h1); font-weight: var(--am-w-semibold); letter-spacing: -0.018em; line-height: 1.25; }
.am-h2 { font-size: var(--am-t-h2); font-weight: var(--am-w-semibold); letter-spacing: -0.012em; line-height: 1.3; }
.am-h3 { font-size: var(--am-t-h3); font-weight: var(--am-w-semibold); line-height: 1.35; }
.am-sm  { font-size: var(--am-t-sm); }
.am-cap { font-size: var(--am-t-cap); color: var(--am-text-2); }
.am-micro { font-size: var(--am-t-micro); color: var(--am-text-3); }
.am-muted { color: var(--am-text-2); }
.am-subtle { color: var(--am-text-3); }

/* The console's signature label: small, uppercase, wide-tracked. Used for
   panel headers and field labels so data itself stays the loudest thing. */
.am-label {
  font-size: var(--am-t-micro);
  font-weight: var(--am-w-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--am-text-3);
}

/* Financial figures. Tabular everywhere so columns align and a changing
   balance does not make digits jump. */
.am-num, .am-amount, td.am-num {
  font-family: var(--am-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.006em;
}
.am-amount { font-weight: var(--am-w-semibold); white-space: nowrap; }
.am-amount--credit { color: var(--am-credit); }
.am-amount--debit  { color: var(--am-debit); }

/* --------------------------------------------------------------------------
   6. PANEL — the core surface
   A panel is a bordered region with an optional header rule. This replaces
   the "card" as the unit of composition.
   -------------------------------------------------------------------------- */
.am-panel {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-md);
  overflow: hidden;
}
.am-panel--pad { padding: var(--am-5); }
.am-panel--raised { box-shadow: var(--am-sh-sm); }

.am-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-3);
  min-height: 44px;
  padding: 0 var(--am-4);
  border-bottom: 1px solid var(--am-border);
  background: var(--am-surface);
}
.am-panel__title { font-size: var(--am-t-sm); font-weight: var(--am-w-semibold); color: var(--am-text); }
.am-panel__body { padding: var(--am-4); }
.am-panel__foot {
  padding: var(--am-3) var(--am-4);
  border-top: 1px solid var(--am-border);
  background: var(--am-sunken);
}

/* Hairline-separated rows inside a panel */
.am-list > * + * { border-top: 1px solid var(--am-border); }
.am-item {
  display: flex;
  align-items: center;
  gap: var(--am-3);
  padding: var(--am-3) var(--am-4);
  width: 100%;
  text-align: left;
  transition: background-color var(--am-fast) var(--am-ease);
}
a.am-item:hover, button.am-item:hover { background: var(--am-hover); }
.am-item__body { flex: 1; min-width: 0; }
.am-item__title { font-size: var(--am-t-sm); font-weight: var(--am-w-medium); color: var(--am-text); }
.am-item__meta { font-size: var(--am-t-cap); color: var(--am-text-3); margin-top: 1px; }
.am-item__end { flex-shrink: 0; text-align: right; }

/* Icon tile — squared, low-key */
.am-tile {
  width: 32px; height: 32px;
  border-radius: var(--am-r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--am-sunken);
  color: var(--am-text-2);
}
.am-tile--brand   { background: var(--am-brand-soft);   color: var(--am-brand-ink); }
.am-tile--success { background: var(--am-success-soft); color: var(--am-success); }
.am-tile--warning { background: var(--am-processing-soft); color: var(--am-processing); }
.am-tile--danger  { background: var(--am-danger-soft);  color: var(--am-danger); }
.am-tile--lg { width: 40px; height: 40px; border-radius: var(--am-r-md); }
.am-tile--sm { width: 26px; height: 26px; border-radius: var(--am-r-xs); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   Compact by default — a console has many of them. Loading swaps the label
   in place so the box never changes size mid-action.
   -------------------------------------------------------------------------- */
.am-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-2);
  height: 34px;
  padding-inline: var(--am-3);
  border-radius: var(--am-r-sm);
  font-size: var(--am-t-sm);
  font-weight: var(--am-w-medium);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--am-fast) var(--am-ease),
              border-color var(--am-fast) var(--am-ease),
              color var(--am-fast) var(--am-ease),
              opacity var(--am-fast) var(--am-ease);
}
.am-btn--block { width: 100%; }
.am-btn--sm { height: 28px; padding-inline: var(--am-2); font-size: var(--am-t-cap); }
.am-btn--lg { height: 42px; padding-inline: var(--am-5); font-size: var(--am-t-body); font-weight: var(--am-w-semibold); }

.am-btn--primary { background: var(--am-brand); color: var(--am-on-brand); }
.am-btn--primary:hover:not(:disabled) { background: var(--am-brand-hover); }

.am-btn--default {
  background: var(--am-surface);
  color: var(--am-text);
  border-color: var(--am-border-strong);
}
.am-btn--default:hover:not(:disabled) { background: var(--am-hover); }

.am-btn--ghost { background: transparent; color: var(--am-text-2); }
.am-btn--ghost:hover:not(:disabled) { background: var(--am-hover); color: var(--am-text); }

.am-btn--soft { background: var(--am-brand-soft); color: var(--am-brand-ink); }
.am-btn--danger { background: var(--am-danger); color: #fff; }
.am-btn--danger-soft { background: var(--am-danger-soft); color: var(--am-danger); }

.am-btn:disabled, .am-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.am-btn[data-loading="true"] { pointer-events: none; }
.am-btn[data-loading="true"] .am-btn__label { visibility: hidden; }
.am-btn[data-loading="true"]::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: am-spin 0.6s linear infinite;
}
@keyframes am-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */
.am-field { display: flex; flex-direction: column; gap: var(--am-1); }
.am-field__label {
  font-size: var(--am-t-micro);
  font-weight: var(--am-w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--am-text-3);
}
.am-field__req { color: var(--am-danger); margin-left: 2px; }

/* Hint and error live INSIDE this wrapper alongside the input.
   Validator.js resolves an error node via input.parentElement, so moving
   them out breaks submission. See partials/am/field.hbs. */
.am-field__wrap { position: relative; display: block; }

.am-input, .am-select, .am-textarea {
  width: 100%;
  height: 38px;
  padding: 0 var(--am-3);
  background: var(--am-surface);
  border: 1px solid var(--am-border-strong);
  border-radius: var(--am-r-sm);
  font-size: var(--am-t-body);
  color: var(--am-text);
  transition: border-color var(--am-fast) var(--am-ease), box-shadow var(--am-fast) var(--am-ease);
}
.am-textarea { height: auto; min-height: 88px; padding: var(--am-2) var(--am-3); line-height: 1.5; resize: vertical; }

.am-input::placeholder, .am-textarea::placeholder { color: var(--am-text-3); }
.am-input:hover:not(:disabled), .am-select:hover:not(:disabled) { border-color: var(--am-text-3); }
.am-input:focus, .am-select:focus, .am-textarea:focus {
  border-color: var(--am-brand);
  box-shadow: 0 0 0 3px var(--am-brand-soft);
}
.am-input:disabled, .am-select:disabled { background: var(--am-sunken); color: var(--am-text-3); cursor: not-allowed; }
.am-input.is-invalid, .am-select.is-invalid, .am-textarea.is-invalid { border-color: var(--am-danger); }
.am-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--am-danger-soft); }

/* Validator writes into `.field-invalid` and removes `d-none` */
.field-invalid {
  font-size: var(--am-t-cap);
  color: var(--am-danger);
  display: flex;
  align-items: flex-start;
  gap: var(--am-1);
  margin: 0;
}
.am-field__wrap > .field-invalid { margin-top: var(--am-1); }
.am-field__hint { font-size: var(--am-t-cap); color: var(--am-text-3); line-height: 1.45; }
.am-field__wrap > .am-field__hint { display: block; margin-top: var(--am-1); }

/* Affixes pinned to the input's own box so they stay centred when a hint or
   error renders below it */
.am-field__prefix, .am-field__suffix {
  position: absolute; top: 0; height: 38px;
  display: flex; align-items: center;
  color: var(--am-text-3);
  pointer-events: none;
  z-index: 1;
}
.am-field__prefix { left: var(--am-3); }
.am-field__suffix { right: var(--am-3); }
.am-input--has-prefix { padding-left: 34px; }
.am-input--has-suffix { padding-right: 38px; }
.am-field__suffix--action { pointer-events: auto; cursor: pointer; }
.am-field__suffix--action:hover { color: var(--am-text); }

.am-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: 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='%2379818F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--am-3) center;
}

/* Segmented control — the console's toggle idiom */
/* Segmented control.
   WRAPS rather than overflowing. It sits inside .am-panel, which is
   overflow:hidden, so a strip wider than the panel does not produce a
   scrollbar — the extra options are simply clipped and become unreachable.
   That hid "Exam pins" and "Networks" on the docs product browser, and the
   later filters on the transactions page, at phone widths.
   Wrapping is used instead of horizontal scrolling because it needs no
   discovery: every option is visible without the user guessing they can swipe. */
.am-seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 2px;
  background: var(--am-sunken);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-sm);
  gap: 2px;
}
.am-seg__opt {
  height: 28px;
  /* Never let a label squash into an unreadable sliver — wrap to the next
     row instead. */
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: var(--am-3);
  border-radius: var(--am-r-xs);
  font-size: var(--am-t-cap);
  font-weight: var(--am-w-medium);
  color: var(--am-text-2);
  transition: background-color var(--am-fast) var(--am-ease), color var(--am-fast) var(--am-ease);
}
.am-seg__opt:hover { color: var(--am-text); }
.am-seg__opt[aria-pressed="true"] {
  background: var(--am-surface);
  color: var(--am-text);
  box-shadow: var(--am-sh-sm);
  font-weight: var(--am-w-semibold);
}

/* Selectable option tile (networks, providers) */
.am-opt {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--am-1);
  min-height: 64px;
  padding: var(--am-2);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-sm);
  background: var(--am-surface);
  color: var(--am-text-2);
  font-size: var(--am-t-micro);
  font-weight: var(--am-w-medium);
  text-align: center;
  transition: border-color var(--am-fast) var(--am-ease), background-color var(--am-fast) var(--am-ease), color var(--am-fast) var(--am-ease);
}
.am-opt:hover { border-color: var(--am-text-3); }
.am-opt[aria-pressed="true"] {
  border-color: var(--am-brand);
  background: var(--am-brand-soft);
  color: var(--am-brand-ink);
  font-weight: var(--am-w-semibold);
}
.am-opt__price { font-size: var(--am-t-micro); font-variant-numeric: tabular-nums; color: var(--am-text-3); }
.am-opt[aria-pressed="true"] .am-opt__price { color: var(--am-brand-ink); }
.am-optgrid { display: grid; gap: var(--am-2); grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }

/* Provider variant — carries a supplied logo rather than an icon.
   The plate stays white in both themes because network logos are authored
   for a light ground and several go invisible on a dark one. */
.am-opt--logo { min-height: 74px; gap: 5px; padding: var(--am-2) 4px; }
.am-opt__logo {
  width: 38px; height: 38px;
  border-radius: var(--am-r-xs);
  background: #fff;
  border: 1px solid var(--am-border);
  display: grid; place-items: center;
  overflow: hidden; padding: 3px;
  flex-shrink: 0;
}
.am-opt__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Shown when the provider sends no logo, or the URL is dead. Without this a
   broken-image glyph appears in the middle of a purchase flow. */
.am-opt__logo--text {
  background: var(--am-sunken); border-color: transparent;
  font-size: 14px; font-weight: var(--am-w-bold); color: var(--am-text-2);
  text-transform: uppercase;
}
.am-opt__name { line-height: 1.2; word-break: break-word; }
/* Selected marker — shape as well as colour, so selection survives
   greyscale, low vision and forced-colours mode. */
.am-opt__check {
  position: absolute; top: 4px; right: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--am-brand); color: var(--am-on-brand);
  display: none; place-items: center;
}
.am-opt[aria-pressed="true"] .am-opt__check { display: grid; }

/* Plan row — data bundles, cable packages, exam pins. A list rather than a
   grid: these have long names and a price that must stay comparable down
   the column. */
.am-plans { display: flex; flex-direction: column; gap: 6px; }
.am-plan {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--am-3);
  width: 100%;
  min-height: var(--am-row);
  padding: var(--am-2) var(--am-3);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-sm);
  background: var(--am-surface);
  text-align: left;
  transition: border-color var(--am-fast) var(--am-ease), background-color var(--am-fast) var(--am-ease);
}
.am-plan:hover { border-color: var(--am-text-3); }
.am-plan[aria-pressed="true"] { border-color: var(--am-brand); background: var(--am-brand-soft); }
.am-plan__name { font-size: var(--am-t-sm); font-weight: var(--am-w-medium); color: var(--am-text); line-height: 1.3; }
.am-plan__meta { font-size: var(--am-t-micro); color: var(--am-text-3); margin-top: 1px; }
.am-plan__price {
  font-size: var(--am-t-sm); font-weight: var(--am-w-bold);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}
.am-plan[aria-pressed="true"] .am-plan__price { color: var(--am-brand-ink); }

/* Numbered steps — "what happens next" on funding, KYC and support flows.
   An <ol> so the order is conveyed to a screen reader, not just visually. */
.am-steps { display: flex; flex-direction: column; gap: var(--am-3); list-style: none; }
.am-step { display: flex; gap: var(--am-3); font-size: var(--am-t-sm); color: var(--am-text-2); line-height: 1.5; }
.am-step__n {
  flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background: var(--am-brand-soft); color: var(--am-brand-ink);
  display: grid; place-items: center;
  font-size: var(--am-t-micro); font-weight: var(--am-w-bold);
  font-variant-numeric: tabular-nums;
}
.am-step strong { color: var(--am-text); font-weight: var(--am-w-semibold); }

/* 404 code — large, but muted: it is a label, not the message. */
.am-code404 {
  font-size: clamp(52px, 12vw, 76px);
  font-weight: var(--am-w-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--am-border-strong, var(--am-border));
  font-variant-numeric: tabular-nums;
}

/* Countdown — coming-soon only */
.am-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 20px; }
.am-countdown__cell {
  background: var(--am-sunken);
  border-radius: var(--am-r-sm);
  padding: var(--am-2) 4px;
  text-align: center;
}
.am-countdown__n {
  display: block;
  font-size: var(--am-t-h2); font-weight: var(--am-w-bold);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--am-text);
}
.am-countdown__l { display: block; font-size: var(--am-t-micro); color: var(--am-text-3); margin-top: 2px; }

/* Masked credential row (am/secret) */
.am-secret__row {
  display: flex; align-items: center; gap: var(--am-2);
  margin-top: 4px;
  padding: var(--am-2) var(--am-3);
  background: var(--am-sunken);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-sm);
}
.am-secret__value {
  flex: 1; min-width: 0;
  font-family: var(--am-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--am-t-cap);
  color: var(--am-text);
  overflow-x: auto;
  white-space: nowrap;
  /* No visible scrollbar on a single-line field, but still scrollable —
     a long key must be readable once revealed, at any width. */
  scrollbar-width: none;
}
.am-secret__value::-webkit-scrollbar { display: none; }
.am-secret__actions { display: flex; gap: 2px; flex-shrink: 0; }

/* Code — docs pages */
.am-code {
  font-family: var(--am-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: var(--am-r-xs);
  background: var(--am-sunken);
  color: var(--am-text);
  white-space: nowrap;
}
.am-pre {
  margin-top: var(--am-3);
  padding: var(--am-3);
  background: var(--am-sunken);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-sm);
  /* Code samples are the classic source of page-wide horizontal scroll —
     they scroll inside their own box instead. */
  overflow-x: auto;
  max-width: 100%;
}
/* --------------------------------------------------------------------------
   LANDING PAGE
   The one public marketing surface. Still sober — it is selling a working
   tool, so it borrows the console's panels rather than inventing a separate
   marketing language.
   -------------------------------------------------------------------------- */
.am-lp { background: var(--am-bg); min-height: 100dvh; }
.am-lp__inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--am-4); }

.am-lp__bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--am-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--am-border);
}
.am-lp__barinner {
  max-width: 1080px; margin: 0 auto; padding: var(--am-3) var(--am-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--am-3);
}

.am-lp__hero { padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 7vw, 72px); text-align: center; }
.am-lp__eyebrow {
  font-size: var(--am-t-micro); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--am-text-3); font-weight: var(--am-w-semibold);
}
.am-lp__title {
  margin-top: var(--am-3);
  font-size: clamp(30px, 5.4vw, 52px);
  font-weight: var(--am-w-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--am-text);
}
/* The line break is a typographic nicety on wide screens only — on narrow
   ones it would strand a single word. */
.am-lp__br { display: none; }
@media (min-width: 780px) { .am-lp__br { display: inline; } }

.am-lp__sub {
  max-width: 620px; margin: var(--am-4) auto 0;
  font-size: var(--am-t-md); line-height: 1.6; color: var(--am-text-2);
}
.am-lp__cta { margin-top: var(--am-5); justify-content: center; flex-wrap: wrap; gap: var(--am-2); }

.am-lp__section { padding: clamp(40px, 7vw, 72px) 0; }
.am-lp__section--alt { background: var(--am-surface); border-block: 1px solid var(--am-border); }

.am-lp__grid {
  display: grid; gap: var(--am-3); margin-top: var(--am-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.am-lp__grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--am-5); }
/* Grid children default to min-width:auto, which lets long words force the
   whole page to scroll sideways. */
.am-lp__grid > * { min-width: 0; }

.am-lp__foot { border-top: 1px solid var(--am-border); padding: var(--am-5) 0; }
.am-lp__footrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--am-3); flex-wrap: wrap;
}

/* Standalone document page — legal pages, read while signed out */
.am-doc { min-height: 100dvh; background: var(--am-bg); padding: var(--am-6) var(--am-4) var(--am-8); }
.am-doc__inner { max-width: 720px; margin: 0 auto; }

/* Server-owned HTML. These pages come from the tenant's CMS, so the styling
   has to be applied by element rather than by class — we do not control the
   markup and cannot add classes to it. */
.am-prose { font-size: var(--am-t-sm); line-height: 1.7; color: var(--am-text-2); }
.am-prose > * + * { margin-top: var(--am-3); }
.am-prose h1, .am-prose h2, .am-prose h3, .am-prose h4 {
  color: var(--am-text); font-weight: var(--am-w-semibold); line-height: 1.35;
  margin-top: var(--am-6);
}
.am-prose h1 { font-size: var(--am-t-h1); }
.am-prose h2 { font-size: var(--am-t-h2); }
.am-prose h3, .am-prose h4 { font-size: var(--am-t-h3); }
.am-prose ul, .am-prose ol { padding-left: 1.35em; }
.am-prose li + li { margin-top: 6px; }
.am-prose a { color: var(--am-brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.am-prose strong { color: var(--am-text); font-weight: var(--am-w-semibold); }
.am-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.am-prose th, .am-prose td { border: 1px solid var(--am-border); padding: 8px 10px; text-align: left; }
.am-prose img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   API REFERENCE — developer docs
   -------------------------------------------------------------------------- */
.am-ep { border: 1px solid var(--am-border); border-radius: var(--am-r-md); overflow: hidden; }
.am-ep + .am-ep { margin-top: var(--am-3); }
.am-ep__head {
  display: flex; align-items: center; gap: var(--am-2);
  padding: var(--am-2) var(--am-3);
  background: var(--am-sunken);
  border-bottom: 1px solid var(--am-border);
  flex-wrap: wrap;
}
.am-ep__body { padding: var(--am-3); }

/* Method badge. Colour is a secondary cue only — the method is always spelled
   out in text, so this stays readable in greyscale and forced-colours mode. */
.am-method {
  font-family: var(--am-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--am-t-micro); font-weight: var(--am-w-bold);
  letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: var(--am-r-xs);
  flex-shrink: 0;
}
.am-method--get  { background: var(--am-info-soft, var(--am-brand-soft)); color: var(--am-info, var(--am-brand-ink)); }
.am-method--post { background: var(--am-success-soft); color: var(--am-success); }

.am-path {
  font-family: var(--am-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--am-t-cap);
  color: var(--am-text);
  min-width: 0; overflow-x: auto; white-space: nowrap;
  scrollbar-width: none;
}
.am-path::-webkit-scrollbar { display: none; }

/* Parameter table. Narrow screens get the same label-driven list transform the
   transaction table uses, via data-cell. */
.am-params { width: 100%; border-collapse: collapse; font-size: var(--am-t-cap); }
.am-params th {
  text-align: left; font-weight: var(--am-w-semibold); color: var(--am-text-3);
  font-size: var(--am-t-micro); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--am-border);
}
.am-params td { padding: 8px 0; border-bottom: 1px solid var(--am-border); vertical-align: top; }
.am-params td:first-child {
  font-family: var(--am-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  color: var(--am-text); white-space: nowrap; padding-right: var(--am-3);
}
.am-params td:nth-child(2) { color: var(--am-text-3); padding-right: var(--am-3); white-space: nowrap; }
.am-params tr:last-child td { border-bottom: 0; }
.am-req { color: var(--am-danger); font-weight: var(--am-w-bold); }

/* Copyable ID chip — the value a developer pastes into their integration.
   Monospace so 0/O and 1/l stay distinguishable, and a real button so it is
   keyboard reachable rather than a click-only span. */
.am-idchip {
  font-family: var(--am-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--am-t-cap);
  font-weight: var(--am-w-semibold);
  color: var(--am-brand-ink);
  background: var(--am-brand-soft);
  border: 1px solid transparent;
  border-radius: var(--am-r-xs);
  padding: 3px 7px;
  white-space: nowrap;
  transition: border-color var(--am-fast) var(--am-ease);
}
.am-idchip:hover { border-color: var(--am-brand); }

@media (max-width: 620px) {
  .am-params, .am-params tbody, .am-params tr, .am-params td { display: block; width: 100%; }
  .am-params thead { display: none; }
  .am-params tr { padding: 10px 0; border-bottom: 1px solid var(--am-border); }
  .am-params tr:last-child { border-bottom: 0; }
  .am-params td { border: 0; padding: 2px 0; white-space: normal; }
  .am-params td:nth-child(2)::before { content: attr(data-cell) ": "; color: var(--am-text-3); }
}

/* In-page table of contents */
.am-toc { display: flex; flex-direction: column; gap: 1px; }
.am-toc__link {
  display: block; padding: 5px var(--am-2);
  font-size: var(--am-t-cap); color: var(--am-text-2);
  border-radius: var(--am-r-xs);
  border-left: 2px solid transparent;
}
.am-toc__link:hover { background: var(--am-hover); color: var(--am-text); }
.am-toc__link[aria-current="true"] {
  background: var(--am-brand-soft); color: var(--am-brand-ink);
  border-left-color: var(--am-brand); font-weight: var(--am-w-semibold);
}
.am-toc__group {
  font-size: var(--am-t-micro); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--am-text-3); font-weight: var(--am-w-semibold);
  padding: var(--am-3) var(--am-2) 4px;
}
/* Anchored headings must clear the sticky topbar when jumped to. */
.am-anchor { scroll-margin-top: calc(var(--am-topbar) + var(--am-4)); }

/* Checkbox row — acknowledgements and consents */
.am-check {
  display: flex; align-items: flex-start; gap: var(--am-2);
  font-size: var(--am-t-sm); color: var(--am-text-2); line-height: 1.5;
  cursor: pointer;
}
.am-check input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--am-brand);
  cursor: pointer;
}

.am-pre code {
  font-family: var(--am-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--am-t-cap);
  line-height: 1.6;
  color: var(--am-text);
  white-space: pre;
}

/* --------------------------------------------------------------------------
   9. STATUS — dot + label, never colour alone
   -------------------------------------------------------------------------- */
.am-status {
  display: inline-flex;
  align-items: center;
  gap: var(--am-1);
  font-size: var(--am-t-cap);
  font-weight: var(--am-w-medium);
  white-space: nowrap;
  color: var(--am-text-2);
}
.am-status__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.am-status--success { color: var(--am-success); }
.am-status--failed  { color: var(--am-danger); }
.am-status--processing { color: var(--am-processing); }
.am-status--info    { color: var(--am-info); }
.am-status--neutral { color: var(--am-text-3); }

/* Processing pulses — "in flight", visibly distinct from a static failure */
.am-status--processing .am-status__dot {
  animation: am-pulse 1.6s var(--am-ease) infinite;
}
@keyframes am-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --------------------------------------------------------------------------
   10. SKELETONS
   -------------------------------------------------------------------------- */
.am-skel {
  position: relative;
  overflow: hidden;
  background: var(--am-sunken);
  border-radius: var(--am-r-xs);
}
.am-skel::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: am-shimmer 1.3s infinite;
}
[data-theme="dark"] .am-skel::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}
@keyframes am-shimmer { 100% { transform: translateX(100%); } }
.am-skel--text { height: 10px; }
.am-skel--title { height: 14px; }
.am-skel--tile { width: 32px; height: 32px; border-radius: var(--am-r-sm); }

/* --------------------------------------------------------------------------
   11. EMPTY / NOTICE
   -------------------------------------------------------------------------- */
.am-empty {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: var(--am-12) var(--am-5);
  gap: var(--am-2);
}
.am-empty__icon {
  width: 44px; height: 44px;
  border-radius: var(--am-r-md);
  display: grid; place-items: center;
  background: var(--am-sunken);
  color: var(--am-text-3);
  margin-bottom: var(--am-1);
}
.am-empty__title { font-size: var(--am-t-h3); font-weight: var(--am-w-semibold); color: var(--am-text); }
.am-empty__text { font-size: var(--am-t-sm); color: var(--am-text-2); max-width: 40ch; line-height: 1.55; }
.am-empty__action { margin-top: var(--am-3); }

.am-notice {
  display: flex;
  gap: var(--am-2);
  padding: var(--am-3);
  border: 1px solid var(--am-border);
  border-left-width: 3px;
  border-radius: var(--am-r-sm);
  background: var(--am-surface);
  font-size: var(--am-t-sm);
  line-height: 1.5;
  color: var(--am-text-2);
}
.am-notice__icon { flex-shrink: 0; margin-top: 1px; }
.am-notice strong { color: var(--am-text); font-weight: var(--am-w-semibold); }
.am-notice--success { border-left-color: var(--am-success); background: var(--am-success-soft); }
.am-notice--warning { border-left-color: var(--am-processing); background: var(--am-processing-soft); }
.am-notice--danger  { border-left-color: var(--am-danger); background: var(--am-danger-soft); }
.am-notice--info    { border-left-color: var(--am-info); background: var(--am-info-soft); }

/* --------------------------------------------------------------------------
   11b. AUTH LAYOUT
   Lives in the CORE sheet, not the app shell: auth pages deliberately do not
   load amada-app.css, so putting the layout there left them unstyled.
   A single centred panel on a graphite field — sober, and structurally
   unlike a split marketing canvas.
   -------------------------------------------------------------------------- */
.am-auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--am-bg);
  padding: var(--am-6) var(--am-gutter);
}
.am-auth__inner {
  width: 100%; max-width: 400px;
  margin: auto;
  min-width: 0;
}
.am-auth__brand { display: flex; align-items: center; gap: var(--am-2); justify-content: center; margin-bottom: var(--am-6); }
.am-auth__mark {
  width: 34px; height: 34px;
  border-radius: var(--am-r-sm);
  background: var(--am-brand);
  color: var(--am-on-brand);
  display: grid; place-items: center;
  font-size: var(--am-t-sm); font-weight: var(--am-w-bold);
  overflow: hidden;
}
.am-auth__mark img { width: 100%; height: 100%; object-fit: cover; }
.am-auth__name { font-size: var(--am-t-h2); font-weight: var(--am-w-semibold); letter-spacing: -0.015em; }
.am-auth__title { font-size: var(--am-t-h1); font-weight: var(--am-w-semibold); letter-spacing: -0.018em; }
.am-auth__sub { font-size: var(--am-t-sm); color: var(--am-text-2); margin-top: var(--am-1); }
.am-auth__foot { text-align: center; font-size: var(--am-t-sm); color: var(--am-text-2); padding-top: var(--am-6); }
.am-auth__foot a { color: var(--am-brand-ink); font-weight: var(--am-w-medium); }
.am-auth__foot a:hover { text-decoration: underline; }
.am-auth__legal { text-align: center; font-size: var(--am-t-micro); color: var(--am-text-3); }


/* --------------------------------------------------------------------------
   12. MOTION GUARD
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}