/*
 * "porcelain" theme for the issuer web UI (docs/specs/ui-branding.md, which
 * supersedes the venla parts of docs/specs/ui-styling.md; the design system of
 * docs/specs/ui-redesign.md step 1).
 *
 * Loaded after the vendored Bootstrap CSS. Everything here is a
 * custom-property override or a small residual rule: no Sass, no recompiled
 * Bootstrap. Light theme, system font stack (no web fonts). No inline styles
 * anywhere: the CSP is style-src 'self'.
 *
 * The logo teal (--porcelain-brand) is only 4.7:1 on white, so it is
 * decorative only (the brand bars of the shell and the signed-out pages). Text, links, controls and buttons use the
 * deeper blue of the same family (--porcelain-primary). The contrast ratios of
 * every pair used are listed in the spec and checked by
 * tests/ui/test_static_assets.py.
 */

/* ------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------ */

:root {
  /* Colour (opaque hex only: the contrast test reads these). */
  --porcelain-brand: #028090;
  --porcelain-bg: #f4f7f8;
  --porcelain-surface: #ffffff;
  --porcelain-surface-alt: #eef3f5;
  --porcelain-border: #dfe6ea;
  --porcelain-border-strong: #6b818c;
  --porcelain-text: #0f2530;
  --porcelain-text-secondary: #3b5560;
  --porcelain-disabled-text: #4c6670;
  --porcelain-primary: #05668d;
  --porcelain-primary-hover: #04567a;
  --porcelain-primary-active: #034462;
  --porcelain-primary-tint: #e6f0f5;
  --porcelain-danger: #a8143c;
  --porcelain-danger-hover: #92102f;
  --porcelain-danger-text: #86102f;
  --porcelain-danger-bg: #fdeaee;
  --porcelain-success: #0c5a36;
  --porcelain-success-bg: #e4f5ec;
  --porcelain-warning: #b06a00;
  --porcelain-warning-text: #5c4400;
  --porcelain-warning-bg: #fff4d1;
  --porcelain-info-text: #0b4a6b;
  --porcelain-info-bg: #e2f0f8;

  --porcelain-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  /* Shape and elevation. */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 37, 48, 0.05);
  --shadow-2: 0 2px 4px rgba(15, 37, 48, 0.06), 0 12px 28px -8px rgba(15, 37, 48, 0.18);
  --focus-glow: 0 0 0 0.25rem rgba(5, 102, 141, 0.18);

  /* 4px spacing scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --control-height: 2.5rem;
}

/* Bootstrap's own light block is `:root, [data-bs-theme=light]`; the extra
   attribute selector adds specificity so these win regardless of order. */
:root[data-bs-theme="light"] {
  --bs-body-bg: var(--porcelain-bg);
  --bs-body-bg-rgb: 244, 247, 248;
  --bs-body-color: var(--porcelain-text);
  --bs-body-color-rgb: 15, 37, 48;
  --bs-body-font-family: var(--porcelain-font);
  --bs-body-line-height: 1.55;
  --bs-heading-color: var(--porcelain-text);
  --bs-emphasis-color: var(--porcelain-text);
  --bs-emphasis-color-rgb: 15, 37, 48;
  --bs-secondary-color: var(--porcelain-text-secondary);
  --bs-secondary-color-rgb: 59, 85, 96;
  --bs-secondary-bg: var(--porcelain-surface-alt);
  --bs-secondary-bg-rgb: 238, 243, 245;
  --bs-tertiary-bg: var(--porcelain-surface-alt);
  --bs-tertiary-bg-rgb: 238, 243, 245;
  --bs-border-color: var(--porcelain-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-primary: var(--porcelain-primary);
  --bs-primary-rgb: 5, 102, 141;
  --bs-secondary: var(--porcelain-text-secondary);
  --bs-secondary-rgb: 59, 85, 96;
  --bs-link-color: var(--porcelain-primary);
  --bs-link-color-rgb: 5, 102, 141;
  --bs-link-hover-color: var(--porcelain-primary-active);
  --bs-link-hover-color-rgb: 3, 68, 98;
  --bs-danger: var(--porcelain-danger);
  --bs-danger-rgb: 168, 20, 60;
  --bs-success: var(--porcelain-success);
  --bs-success-rgb: 12, 90, 54;
  --bs-danger-text-emphasis: var(--porcelain-danger-text);
  --bs-danger-bg-subtle: var(--porcelain-danger-bg);
  --bs-danger-border-subtle: #f0b3c1;
  --bs-success-text-emphasis: var(--porcelain-success);
  --bs-success-bg-subtle: var(--porcelain-success-bg);
  --bs-success-border-subtle: #a9d9bf;
  --bs-warning-text-emphasis: var(--porcelain-warning-text);
  --bs-warning-bg-subtle: var(--porcelain-warning-bg);
  --bs-warning-border-subtle: #f0d98a;
  --bs-info-text-emphasis: var(--porcelain-info-text);
  --bs-info-bg-subtle: var(--porcelain-info-bg);
  --bs-info-border-subtle: #a9cfe4;
  --bs-code-color: var(--porcelain-primary-active);
  /* Field errors (`.is-invalid`, `.invalid-feedback`): the accessible danger, not Bootstrap's
     #dc3545 (4.5:1 on white, too close to the line). */
  --bs-form-invalid-color: var(--porcelain-danger);
  --bs-form-invalid-border-color: var(--porcelain-danger);
}

/* Body text: 15px from tablets up; 16px on phones so inputs never trigger iOS zoom. */
@media (min-width: 768px) {
  :root[data-bs-theme="light"] {
    --bs-body-font-size: 0.9375rem;
  }
}

/* ------------------------------------------------------------------------
   Base and typography
   ------------------------------------------------------------------------ */

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Brand bar on the signed-out and receiver pages: decorative use of the logo teal. The
   signed-in shell carries it on the sidebar (desktop) and the top bar (phones) instead. */
body:not(.app-body) {
  border-top: 4px solid var(--porcelain-brand);
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.3;
}

h3 {
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Links stay underlined at rest: colour is never the only cue. */
a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Numbers line up in columns; currency codes sit small and quiet beside them. */
.num,
.money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.currency {
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--porcelain-text-secondary);
}

.muted {
  color: var(--porcelain-text-secondary);
}

/* Focus is always visible: a 2px outline in the accessible teal (>= 3:1 on
   every surface), plus a soft glow on form controls (decorative). */
:focus-visible {
  outline: 2px solid var(--porcelain-primary);
  outline-offset: 2px;
}

/* Bootstrap turns the outline off on buttons and checks in favour of a faint
   glow; the outline stays so the ring is a solid 3:1 against every surface. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--porcelain-primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------
   Icons (static/icons-v1.svg via partials/icon.html)
   ------------------------------------------------------------------------ */

.icon {
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
  vertical-align: -0.2em;
  overflow: visible;
}

/* ------------------------------------------------------------------------
   Buttons: primary (filled), secondary (white, bordered), ghost, danger outline
   ------------------------------------------------------------------------ */

.btn {
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-border-radius-sm: var(--radius-sm);
  --bs-btn-border-radius-lg: var(--radius);
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.4375rem;
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--control-height);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease,
    box-shadow 0.12s ease;
}

.btn-sm {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 0.875rem;
  min-height: 2rem;
  gap: 0.375rem;
}

/* Touch screens: every button is at least 40px tall. The compact copy buttons in dense rows
   and the small text links (card header links, the footer, a folded <summary>) keep their look
   but get a 40px tall hit area. */
@media (pointer: coarse) {
  .btn-sm {
    min-height: var(--control-height);
  }

  .id-copy,
  .rfc-copy-btn {
    position: relative;
  }

  .id-copy::after,
  .rfc-copy-btn::after {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: var(--control-height);
    transform: translateY(-50%);
    content: "";
  }

  .site-footer a,
  .card-header-link,
  .dash-panel-link {
    display: inline-block;
    margin-block: -0.625rem;
    padding-block: 0.625rem;
  }

  .cert-details > summary {
    margin-block: -0.5625rem;
    padding-block: 0.5625rem;
  }
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: 0;
}

.btn-sm .icon {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn-primary {
  --bs-btn-color: var(--porcelain-surface);
  --bs-btn-bg: var(--porcelain-primary);
  --bs-btn-border-color: var(--porcelain-primary);
  --bs-btn-hover-color: var(--porcelain-surface);
  --bs-btn-hover-bg: var(--porcelain-primary-hover);
  --bs-btn-hover-border-color: var(--porcelain-primary-hover);
  --bs-btn-focus-shadow-rgb: 5, 102, 141;
  --bs-btn-active-color: var(--porcelain-surface);
  --bs-btn-active-bg: var(--porcelain-primary-active);
  --bs-btn-active-border-color: var(--porcelain-primary-active);
  --bs-btn-disabled-color: var(--porcelain-disabled-text);
  --bs-btn-disabled-bg: var(--porcelain-surface-alt);
  --bs-btn-disabled-border-color: var(--porcelain-border);
  box-shadow: var(--shadow-1);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 2px 6px -1px rgba(3, 68, 98, 0.35);
}

/* Secondary: white with a hairline border. */
.btn-secondary {
  --bs-btn-color: var(--porcelain-text);
  --bs-btn-bg: var(--porcelain-surface);
  --bs-btn-border-color: var(--porcelain-border);
  --bs-btn-hover-color: var(--porcelain-text);
  --bs-btn-hover-bg: var(--porcelain-surface-alt);
  --bs-btn-hover-border-color: var(--porcelain-border-strong);
  --bs-btn-focus-shadow-rgb: 5, 102, 141;
  --bs-btn-active-color: var(--porcelain-text);
  --bs-btn-active-bg: var(--porcelain-border);
  --bs-btn-active-border-color: var(--porcelain-border-strong);
  --bs-btn-disabled-color: var(--porcelain-disabled-text);
  --bs-btn-disabled-bg: var(--porcelain-surface-alt);
  --bs-btn-disabled-border-color: var(--porcelain-border);
  box-shadow: var(--shadow-1);
}

/* Outline primary: an emphasised secondary action (Manage, Copy, Replace CSD). */
.btn-outline-primary {
  --bs-btn-color: var(--porcelain-primary);
  --bs-btn-bg: var(--porcelain-surface);
  --bs-btn-border-color: var(--porcelain-primary);
  --bs-btn-hover-color: var(--porcelain-surface);
  --bs-btn-hover-bg: var(--porcelain-primary);
  --bs-btn-hover-border-color: var(--porcelain-primary);
  --bs-btn-focus-shadow-rgb: 5, 102, 141;
  --bs-btn-active-color: var(--porcelain-surface);
  --bs-btn-active-bg: var(--porcelain-primary-active);
  --bs-btn-active-border-color: var(--porcelain-primary-active);
  --bs-btn-disabled-color: var(--porcelain-disabled-text);
  --bs-btn-disabled-bg: var(--porcelain-surface-alt);
  --bs-btn-disabled-border-color: var(--porcelain-border);
}

/* Ghost: no chrome until hovered; for tertiary actions (Clear, Cancel, icon buttons). */
.btn-ghost,
.btn-link {
  --bs-btn-color: var(--porcelain-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--porcelain-primary-active);
  --bs-btn-hover-bg: var(--porcelain-surface-alt);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--porcelain-primary-active);
  --bs-btn-active-bg: var(--porcelain-border);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--porcelain-disabled-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

.btn-ghost {
  text-decoration: none;
}

.btn-outline-danger {
  --bs-btn-color: var(--porcelain-danger);
  --bs-btn-bg: var(--porcelain-surface);
  --bs-btn-border-color: var(--porcelain-danger);
  --bs-btn-hover-color: var(--porcelain-surface);
  --bs-btn-hover-bg: var(--porcelain-danger-hover);
  --bs-btn-hover-border-color: var(--porcelain-danger-hover);
  --bs-btn-focus-shadow-rgb: 5, 102, 141;
  --bs-btn-active-color: var(--porcelain-surface);
  --bs-btn-active-bg: var(--porcelain-danger-text);
  --bs-btn-active-border-color: var(--porcelain-danger-text);
  --bs-btn-disabled-color: var(--porcelain-disabled-text);
  --bs-btn-disabled-bg: var(--porcelain-surface-alt);
  --bs-btn-disabled-border-color: var(--porcelain-border);
}

.btn:disabled,
.btn.disabled {
  --bs-btn-disabled-opacity: 1;
  box-shadow: none;
}

/* Actions side by side keep a gap, and wrap on phones. */
form > .btn + .btn,
form > .btn + a.btn {
  margin-left: 0.5rem;
}

/* ------------------------------------------------------------------------
   Form controls
   ------------------------------------------------------------------------ */

.form-control,
.form-select {
  min-height: var(--control-height);
  background-color: var(--porcelain-surface);
  border-color: var(--porcelain-border-strong);
  border-radius: var(--radius-sm);
  color: var(--porcelain-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

textarea.form-control {
  min-height: 5rem;
}

.form-control::placeholder {
  color: var(--porcelain-text-secondary);
  opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--porcelain-text-secondary);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--porcelain-surface);
  border-color: var(--porcelain-primary);
  box-shadow: var(--focus-glow);
  color: var(--porcelain-text);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background-color: var(--porcelain-surface-alt);
  color: var(--porcelain-disabled-text);
  opacity: 1;
}

/* File inputs read as a drop zone: dashed frame, a secondary "choose" button inside. */
.form-control[type="file"] {
  min-height: 3.5rem;
  padding: 0.625rem 0.75rem;
  background-color: var(--porcelain-surface-alt);
  border-style: dashed;
  cursor: pointer;
}

.form-control[type="file"]::file-selector-button {
  margin: 0 0.875rem 0 0;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--porcelain-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--porcelain-surface);
  color: var(--porcelain-text);
  font-weight: 600;
  cursor: pointer;
}

.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--porcelain-surface);
  border-color: var(--porcelain-primary);
  color: var(--porcelain-primary);
}

.form-label {
  margin-bottom: 0.375rem;
  color: var(--porcelain-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.form-text {
  margin-top: 0.375rem;
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------ */

.card {
  --bs-card-bg: var(--porcelain-surface);
  --bs-card-border-color: var(--porcelain-border);
  --bs-card-cap-bg: var(--porcelain-surface);
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  --bs-card-title-spacer-y: 0.75rem;
  box-shadow: var(--shadow-1);
}

.card-body {
  padding: 1.25rem;
}

/* A card section header: title on the left, an optional link or button on the right. */
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  border-bottom-color: var(--porcelain-border);
}

.card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.card-header .card-title {
  margin: 0;
}

@media (min-width: 768px) {
  .card-body {
    padding: 1.5rem;
  }

  .card {
    --bs-card-cap-padding-x: 1.5rem;
  }
}

/* ------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------ */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--porcelain-text);
  --bs-table-border-color: var(--porcelain-border);
  --bs-table-striped-bg: var(--porcelain-surface-alt);
  --bs-table-striped-color: var(--porcelain-text);
  --bs-table-hover-bg: var(--porcelain-surface-alt);
  --bs-table-hover-color: var(--porcelain-text);
}

/* Table headings read as labels. */
.table > thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--porcelain-text-secondary);
  border-bottom: 1px solid var(--porcelain-border);
}

/* An unbreakable value too long for its cell wraps instead of overflowing; words never break
   mid-word (`anywhere` would also shrink the column's minimum and starve it). */
.table td,
.table th {
  overflow-wrap: break-word;
}

/* A form embedded in a table cell (Select, Revoke, Activate). */
td form {
  display: inline;
  margin: 0;
}

/* ------------------------------------------------------------------------
   Badges: a pill with a coloured dot and the word (partials/status_badge.html)
   ------------------------------------------------------------------------ */

.badge {
  border-radius: var(--radius-pill);
  padding: 0.3em 0.7em;
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

/* The dot repeats the tone; the word carries the meaning. */
.status-badge::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.status-success {
  background: var(--porcelain-success-bg);
  color: var(--porcelain-success);
}

.status-badge.status-danger {
  background: var(--porcelain-danger-bg);
  color: var(--porcelain-danger-text);
}

.status-badge.status-danger::before {
  background: var(--porcelain-danger);
}

.status-badge.status-warning {
  background: var(--porcelain-warning-bg);
  color: var(--porcelain-warning-text);
}

.status-badge.status-warning::before {
  background: var(--porcelain-warning);
}

.status-badge.status-neutral {
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
}

.status-badge.status-neutral::before {
  background: var(--porcelain-border-strong);
}

.status-badge.status-info {
  background: var(--porcelain-info-bg);
  color: var(--porcelain-info-text);
}

.status-badge.status-info::before {
  background: var(--porcelain-primary);
}

/* ------------------------------------------------------------------------
   Page header (partials/page_header.html)
   ------------------------------------------------------------------------ */

.page-header {
  margin: 0 0 1.5rem;
}

.page-header .crumbs {
  margin: 0 0 0.5rem;
}

.page-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.page-header-text {
  flex: 1 1 20rem;
  min-width: 0;
}

.page-header-title {
  margin: 0;
  overflow-wrap: anywhere;
}

.page-header-description {
  margin: 0.375rem 0 0;
  max-width: 48rem;
  color: var(--porcelain-text-secondary);
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* A row of facts under the title (the issuer page: logo, RFC with copy, status badge). */
.page-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

@media (max-width: 575.98px) {
  .page-header-actions {
    width: 100%;
  }
}

/* ------------------------------------------------------------------------
   Empty state (partials/empty_state.html)
   ------------------------------------------------------------------------ */

.list-empty {
  padding: 2.5rem 1rem;
}

.empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-primary);
}

.empty-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.empty-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.empty-text {
  max-width: 32rem;
  margin: 0;
}

.empty-block .btn {
  margin-top: 1.25rem;
}

/* ------------------------------------------------------------------------
   App shell (partials/nav.html, docs/specs/ui-redesign.md step 2)

   One markup, two layouts. From 992px: a fixed sidebar and a fluid content
   column. Below: a sticky top bar (wordmark, account menu) and the primary
   nav as a fixed bottom tab bar. Whatever a layout does not show is
   `display: none`, so it is out of the accessibility tree too.
   ------------------------------------------------------------------------ */

:root {
  --sidebar-width: 15rem;
  --topbar-height: 3.5rem;
  --tabbar-height: 3.75rem;
}

/* Skip link: off screen until focused, then a small card at the top left. */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1100;
  padding: var(--space-2) var(--space-4);
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  color: var(--porcelain-primary);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

.app-body {
  background: var(--porcelain-bg);
}

/* Navigation items: sidebar rows on desktop, tabs on phones. */
.primary-nav ul,
.secondary-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-3);
  color: var(--porcelain-text-secondary);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text);
}

.nav-item.active {
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary-active);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  color: var(--porcelain-primary);
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: 0;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-section-label {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3);
  color: var(--porcelain-text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-link,
.sidebar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-link img,
.sidebar-brand img,
.brand-logo {
  max-width: 100%;
  height: auto;
}

/* The signed-in account at the foot of the sidebar. */
.sidebar-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-1);
  border-top: 1px solid var(--porcelain-border);
}

.sidebar-account .user-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

.sidebar-account-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.sidebar-account-name,
.sidebar-account-login {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.sidebar-account-login {
  color: var(--porcelain-text-secondary);
  font-size: 0.75rem;
}

.sidebar-signout {
  height: 2.25rem;
  font-size: 0.875rem;
}

/* Content column and footer. */
.app-column {
  display: flex;
  flex-direction: column;
  max-width: 75rem;
  margin: 0 auto;
}

.app-column > main {
  flex: 1 0 auto;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-10);
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

.site-footer a {
  color: var(--porcelain-text-secondary);
}

.site-footer a:hover {
  color: var(--porcelain-text);
}

.app-column > .site-footer {
  justify-content: flex-start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--porcelain-border);
}

/* Desktop: fixed sidebar, content beside it. */
@media (min-width: 992px) {
  .app-topbar {
    display: none;
  }

  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    padding: var(--space-5) var(--space-3) var(--space-3);
    overflow-y: auto;
    background: var(--porcelain-surface);
    border-right: 1px solid var(--porcelain-border);
    border-top: 3px solid var(--porcelain-brand);
  }

  .sidebar-brand {
    margin: 0 0 var(--space-6) var(--space-3);
  }

  .secondary-nav {
    margin-top: var(--space-6);
  }

  .sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-6);
  }

  .app-main {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    padding: var(--space-8) var(--space-10) var(--space-6);
  }

  .app-column {
    min-height: calc(100vh - var(--space-8) - var(--space-6));
  }
}

/* Phones and tablets: top bar, bottom tab bar. */
@media (max-width: 991.98px) {
  /* Keyboard focus and in-page jumps never land under the sticky top bar or the tab bar. */
  html:has(> .app-body) {
    scroll-padding-top: calc(var(--topbar-height) + var(--space-2));
    scroll-padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-2));
  }

  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--topbar-height);
    padding: 0 var(--space-4);
    background: var(--porcelain-surface);
    border-bottom: 1px solid var(--porcelain-border);
    border-top: 3px solid var(--porcelain-brand);
  }

  .sidebar-brand,
  .secondary-nav,
  .sidebar-foot {
    display: none;
  }

  .primary-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--porcelain-surface);
    border-top: 1px solid var(--porcelain-border);
  }

  .primary-nav ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    max-width: 36rem;
    margin: 0 auto;
  }

  .primary-nav .nav-item {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    height: var(--tabbar-height);
    padding: var(--space-1) 2px;
    border-radius: 0;
    font-size: 0.6875rem;
    text-align: center;
  }

  .primary-nav .nav-item:hover {
    background: none;
  }

  /* The current tab: label in the primary, icon on a tinted pill. */
  .primary-nav .nav-item .nav-icon {
    box-sizing: content-box;
    width: 1.375rem;
    height: 1.375rem;
    padding: 2px 1rem;
    border-radius: var(--radius-pill);
    transition: background-color 0.12s ease;
  }

  .primary-nav .nav-item.active {
    background: none;
    color: var(--porcelain-primary-active);
  }

  .primary-nav .nav-item.active .nav-icon {
    background: var(--porcelain-primary-tint);
  }

  .nav-label {
    max-width: 100%;
  }

  .app-main {
    padding: var(--space-5) var(--space-4)
      calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-6));
  }
}

@media (max-width: 575.98px) {
  h1 {
    font-size: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .primary-nav .nav-item .nav-icon {
    transition: none;
  }
}

/* Account menu (phones and tablets): the avatar button opens a popover with the
   account pages and sign-out. Anchored to the button where supported. */
.user-menu {
  position: relative;
}

@supports (top: anchor(bottom)) {
  .user-menu-panel {
    top: calc(anchor(bottom) + 0.5rem);
    right: anchor(right);
  }
}

.user-menu-toggle {
  anchor-name: --user-menu;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-1) 0.625rem var(--space-1) var(--space-1);
  color: var(--porcelain-text);
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  cursor: pointer;
}

.user-menu-toggle:hover,
.user-menu-toggle:focus-visible,
.user-menu:has(:popover-open) .user-menu-toggle {
  background: var(--porcelain-surface-alt);
  border-color: var(--porcelain-border-strong);
}

.user-menu-toggle:focus-visible,
.user-menu-item:focus-visible {
  outline: 2px solid var(--porcelain-primary);
  outline-offset: 2px;
}

.user-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--porcelain-primary);
  color: var(--porcelain-surface);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.user-avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.95rem;
}

.user-menu-name {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* A down arrow after the name hints that the button opens a menu. */
.user-menu-caret {
  display: inline-block;
  margin-left: 0.1rem;
  vertical-align: middle;
  transition: transform 0.15s ease;
  border-top: 0.32em solid currentColor;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

.user-menu:has(:popover-open) .user-menu-caret {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .user-menu-caret {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .user-menu-name {
    display: none;
  }
}

.user-menu-panel:not(:popover-open) {
  display: none;
}

.user-menu-panel {
  /* Popovers live in the top layer, so anchor to the button; browsers
     without anchor positioning fall back to the top-right corner. */
  position: fixed;
  inset: auto;
  margin: 0;
  top: calc(var(--topbar-height) + 0.25rem);
  right: var(--space-3);
  position-anchor: --user-menu;
  min-width: 15rem;
  max-width: calc(100vw - 1.5rem);
  padding: var(--space-2);
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
}

.user-menu-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-menu-id span {
  font-size: 0.8125rem;
  color: var(--porcelain-text-secondary);
}

.user-menu-divider {
  margin: var(--space-2) 0;
  border-color: var(--porcelain-border);
  opacity: 1;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2);
  color: var(--porcelain-text);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.user-menu-item .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--porcelain-text-secondary);
  vertical-align: 0;
}

.user-menu-item:hover {
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text);
}

/* The current page among the menu's items: the sidebar's current-item pill (P43, P44). */
.user-menu-item[aria-current="page"] {
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary-active);
  font-weight: 600;
}

.user-menu-item[aria-current="page"] .icon {
  color: var(--porcelain-primary);
}

.user-menu-signout,
.user-menu-signout .icon {
  color: var(--porcelain-danger-text);
}

.user-menu-signout:hover {
  background: var(--porcelain-danger-bg);
  color: var(--porcelain-danger-text);
}

/* ------------------------------------------------------------------------
   Signed-out and public pages (docs/specs/ui-redesign.md step 7)

   Login errors, the unlinked account, the legal documents (`ui/templates/base.html`'s signed-out
   branch) and the receiver pages (`notify/templates/base.html`): the animated wordmark above a
   centred column on the page background, the legal links (or the receiver privacy notice) below.
   ------------------------------------------------------------------------ */

.public-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4px);
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
}

.public-shell > main {
  flex: 1 0 auto;
}

.public-shell-wide {
  max-width: 52rem;
}

.brand-header {
  margin: 0 0 var(--space-6);
  text-align: center;
}

.public-card > .card-body {
  padding: var(--space-6) var(--space-5);
}

.public-shell > .site-footer {
  margin-top: var(--space-8);
}

/* A status card: the icon in a tinted circle, the title, one sentence, one action. */
.public-card-status {
  text-align: center;
}

.public-card-status h1 {
  margin-bottom: var(--space-3);
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.status-icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.status-icon-warning {
  background: var(--porcelain-warning-bg);
  color: var(--porcelain-warning);
}

.status-icon-danger {
  background: var(--porcelain-danger-bg);
  color: var(--porcelain-danger);
}

.status-icon-success {
  background: var(--porcelain-success-bg);
  color: var(--porcelain-success);
}

.status-icon-neutral {
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
}

.public-lead {
  margin: 0 0 var(--space-3);
  font-size: 1.0625rem;
}

.public-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.public-actions .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .public-shell {
    padding-top: var(--space-10);
  }

  .public-card > .card-body {
    padding: var(--space-8);
  }
}

/* Legal documents: a readable measure, airy lines, numbered sections one hairline apart. */
.legal {
  max-width: 46rem;
  line-height: 1.65;
}

.legal > p:first-child {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
}

.legal h2 {
  margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--porcelain-border);
  font-size: 1.15rem;
}

.legal h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1rem;
}

.legal p,
.legal ul,
.legal ol {
  margin-bottom: var(--space-4);
}

.legal ul,
.legal ol {
  padding-left: var(--space-5);
}

.legal li + li {
  margin-top: var(--space-2);
}

.legal .table-responsive {
  margin-bottom: var(--space-5);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius-sm);
}

.legal table {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.legal .table > thead th {
  background: var(--porcelain-surface-alt);
  vertical-align: bottom;
}

.legal .table > :not(caption) > * > * {
  padding: var(--space-2) var(--space-3);
}

.legal .table > tbody > tr:last-child > * {
  border-bottom: 0;
}

@media (min-width: 576px) {
  .public-shell-wide .public-card > .card-body {
    padding: var(--space-10) var(--space-10) var(--space-8);
  }
}

/* Receiver pages (notify): a status card, or the receipt and the receiver form. */
.receiver-shell-wide {
  max-width: 40rem;
}

.receiver-title {
  margin-bottom: var(--space-4);
}

.receiver-shell-wide .card + .card {
  margin-top: var(--space-4);
}

/* The receipt: issuer, facts, concept lines, totals. */
.receipt {
  padding: var(--space-5);
}

.receipt-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.receipt-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary-active);
  font-size: 1.25rem;
  font-weight: 700;
}

.receipt-issuer {
  min-width: 0;
}

.receipt-title {
  margin: 0;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.receipt-rfc {
  margin: var(--space-1) 0 0;
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
}

.receipt-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--porcelain-surface-alt);
}

.receipt-meta dt,
.receipt-facts dt {
  color: var(--porcelain-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.receipt-meta dd {
  margin: 0;
  font-weight: 500;
}

/* Phones: the date and time take the whole first row. */
.receipt-meta > div:first-child {
  grid-column: 1 / -1;
}

.receipt-lines {
  width: 100%;
  border-collapse: collapse;
}

.receipt-lines th {
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--porcelain-border);
  color: var(--porcelain-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.receipt-lines td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--porcelain-border);
  vertical-align: top;
}

.receipt-lines td + td {
  padding-left: var(--space-4);
}

.receipt-line-name {
  display: block;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.receipt-line-detail {
  display: block;
  margin-top: var(--space-1);
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
}

.receipt-totals {
  margin: var(--space-3) 0 0;
}

.receipt-totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0;
}

.receipt-totals dt {
  color: var(--porcelain-text-secondary);
  font-weight: 400;
}

.receipt-totals dd {
  margin: 0;
}

.receipt-totals > .receipt-total {
  align-items: baseline;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--porcelain-surface-alt);
}

.receipt-total dt {
  color: var(--porcelain-text);
  font-weight: 600;
}

.receipt-total dd {
  font-size: 1.25rem;
  font-weight: 700;
}

/* The stamped invoice's facts on the done page: label above value, hairline rows. */
.receipt-facts {
  margin: var(--space-5) 0 0;
  text-align: left;
  border-top: 1px solid var(--porcelain-border);
}

.receipt-fact {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--porcelain-border);
}

.receipt-fact dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.receipt-uuid {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.receipt-fact-total dd {
  font-size: 1.125rem;
  font-weight: 700;
}

.receiver-downloads .icon {
  margin-right: var(--space-2);
}

.receiver-note {
  margin: var(--space-4) 0 0;
  font-size: 0.875rem;
}

/* The receiver form. */
.receiver-section-title {
  margin: 0 0 var(--space-2);
  font-size: 1.125rem;
}

.receiver-form {
  margin-top: var(--space-5);
}

.receiver-form .field-short .form-control {
  max-width: 10rem;
}

.receiver-optional {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--porcelain-border);
}

.receiver-submit {
  width: 100%;
  margin-top: var(--space-2);
}

@media (min-width: 576px) {
  .receipt {
    padding: var(--space-6);
  }

  .receipt-meta {
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: space-between;
  }

  .receipt-meta > div:first-child {
    grid-column: auto;
  }

  .receiver-optional {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
  }

  .public-actions.receiver-downloads {
    flex-direction: row;
  }

  .receiver-downloads .btn {
    flex: 1 1 0;
  }
}

/* The receiver privacy notice: kept word for word, set quietly under the page. */
.receiver-footer {
  display: block;
  max-width: 34rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.6;
}

.receiver-privacy {
  margin: 0 0 var(--space-2);
}

.receiver-footer-links {
  margin: 0;
}

/* Breadcrumb */
.crumbs {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crumbs li + li::before {
  content: "/";
  padding: 0 0.5rem;
  color: var(--porcelain-text-secondary);
}

.crumbs li[aria-current="page"] {
  color: var(--porcelain-text-secondary);
}

/* ------------------------------------------------------------------------
   Layout and residual rules
   ------------------------------------------------------------------------ */

/* Code and details: neutral, readable, no default pink. */
pre {
  background: var(--porcelain-surface-alt);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  overflow-x: auto;
}

pre code {
  color: var(--porcelain-text);
}

details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--porcelain-primary);
}

dt {
  color: var(--porcelain-text-secondary);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .form-select {
    transition: none;
  }
}

/* A value to copy (MCP URL, referral link): one line, ellipsised, with its Copy button.
   copy-v2.js copies the element's full text, not what is visible. */
.copy-field {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
}

.copy-field-value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  color: var(--porcelain-text);
  background: var(--porcelain-surface-alt);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius-sm);
}

.copy-field .btn {
  flex: none;
}

/* ------------------------------------------------------------------------
   Dashboard (pages/home.html, docs/specs/ui-redesign.md step 3)
   ------------------------------------------------------------------------ */

.dash {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dash > * {
  margin: 0;
}

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--porcelain-primary);
}

.card-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--porcelain-text-secondary);
}

.card-header-link,
.dash-panel-link {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Needs attention: a white panel with an amber accent, one row per issuer. */
.attention {
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
  border-left: 4px solid var(--porcelain-warning);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.attention-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.attention-icon {
  display: inline-flex;
  color: var(--porcelain-warning);
}

.attention-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.attention-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.375rem;
  padding: 0 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--porcelain-warning-bg);
  color: var(--porcelain-warning-text);
}

.attention-rows {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-2);
}

.attention-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "text action"
    "reason action";
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--porcelain-border);
}

.attention-text {
  grid-area: text;
  min-width: 0;
}

.attention-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.attention-rfc {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--porcelain-text-secondary);
}

.attention-reason {
  grid-area: reason;
}

.attention-action {
  grid-area: action;
  margin: 0;
}

/* Phones: the reason and the action share the line under the name, never a squeezed column. */
@media (max-width: 575.98px) {
  .attention-head {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .attention-rows {
    padding: 0 var(--space-4) var(--space-2);
  }

  .attention-row {
    grid-template-areas:
      "text text"
      "reason action";
    row-gap: var(--space-2);
  }
}

/* KPI tiles: each one is a link to the list behind its number. Below 1200px two columns: on
   phones Balance spans both (and so does a tile left alone on the last row, `.kpi-wide`); from
   768px Balance is an ordinary tile (`.kpi-wide-md` for the orphan). From 1200px, one row. */
.ledger-retry {
  margin: 0;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--porcelain-text);
  text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

a.kpi:hover {
  color: var(--porcelain-text);
  border-color: var(--porcelain-border-strong);
  box-shadow: var(--shadow-2);
}

.kpi-balance,
.kpi-wide {
  grid-column: 1 / -1;
}

.kpi-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.kpi-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.kpi-balance .kpi-icon,
.balance-card .kpi-icon {
  background: var(--porcelain-primary);
  color: var(--porcelain-surface);
}

.kpi-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--porcelain-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-value {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.kpi-value .currency {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kpi-balance .kpi-value {
  font-size: 2rem;
}

.kpi-hint {
  font-size: 0.8125rem;
  color: var(--porcelain-text-secondary);
}

@media (min-width: 768px) {
  .kpi-grid {
    gap: var(--space-4);
  }

  .kpi {
    padding: var(--space-5);
  }

  .kpi-balance,
  .kpi-wide {
    grid-column: auto;
  }

  .kpi-wide-md {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .kpi-wide-md {
    grid-column: auto;
  }
}

/* Activity beside issuers and referral from 1200px (beside the sidebar a 1024px laptop leaves
   the third column too narrow for the issuer rows and the referral figures); one column below,
   in the order issuers, activity, referral. */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1200px) {
  .dash-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "activity issuers"
      "activity referral";
  }

  .dash-issuers {
    grid-area: issuers;
  }

  .dash-activity {
    grid-area: activity;
  }

  .dash-referral {
    grid-area: referral;
  }

  .dash-grid-no-activity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: "issuers referral";
  }
}

.dash-panel .card-header {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.dash-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--porcelain-border);
}

.dash-panel-foot .btn {
  margin-left: calc(-1 * var(--space-3));
}

/* Your issuers: avatar, name, RFC and CSD badge; the whole row is the link. */
.issuer-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
}

.issuer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--porcelain-text);
  text-decoration: none;
}

.issuer-row:hover {
  color: var(--porcelain-text);
  background: var(--porcelain-surface-alt);
}

.issuer-row:focus-visible {
  outline-offset: -2px;
}

.issuer-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary-active);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.issuer-avatar:has(.issuer-avatar-img) {
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
}

.issuer-avatar-img {
  width: 100%;
  height: 100%;
  padding: 0.2rem;
}

.issuer-row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.issuer-row-name {
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.issuer-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.issuer-row-rfc {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--porcelain-text-secondary);
}

.issuer-row-meta .status-badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem 0.125rem 0.4rem;
}

.issuer-row-chevron {
  color: var(--porcelain-text-secondary);
}

/* Recent activity: what the assistant did, for which issuer, when, and how it went. */
.activity-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
}

.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
}

.activity-row + .activity-row {
  border-top: 1px solid var(--porcelain-border);
}

.activity-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.activity-tool {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.activity-meta {
  font-size: 0.8125rem;
  color: var(--porcelain-text-secondary);
  overflow-wrap: anywhere;
}

.activity-meta code {
  font-size: 0.75rem;
}

.activity-sep {
  margin: 0 0.4em;
}

.activity-error {
  color: var(--porcelain-danger);
}

.activity-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.activity-time {
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--porcelain-text-secondary);
}

.dash-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.dash-empty-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-primary);
}

.dash-empty-title {
  font-weight: 600;
}

/* Referral card: rules, the link and three figures inline. */
.referral-rules {
  margin-bottom: var(--space-3);
  font-size: 0.875rem;
  color: var(--porcelain-text-secondary);
}

.dash-referral form {
  margin: 0;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--porcelain-border);
}

.mini-stat dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--porcelain-text-secondary);
}

.mini-stat dd {
  margin: 0.15rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

.mini-stat .currency {
  font-size: 0.75rem;
}

/* The first top-up bonus: a slim banner. */
.welcome-banner {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.welcome-banner-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.welcome-banner-text {
  flex: 1 1 18rem;
  min-width: 0;
}

.welcome-banner-title {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 600;
}

.welcome-banner .btn {
  margin: 0;
}

/* First run: the onboarding hero and its stepper. */
.onboarding-hero {
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--porcelain-border);
}

.onboarding-title {
  margin: 0 0 var(--space-2);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.onboarding-lead {
  max-width: 38rem;
  margin: 0 0 var(--space-5);
  color: var(--porcelain-text-secondary);
}

.onboarding-steps {
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .onboarding-hero {
    padding: var(--space-8) var(--space-8) var(--space-6);
  }

  .onboarding-steps {
    padding: var(--space-6) var(--space-8) var(--space-8);
  }
}

.setup-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 22rem;
}

.setup-card .setup-progress {
  flex: 0 1 14rem;
}

.setup-progress-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--porcelain-text-secondary);
}

.setup-progress-track {
  height: 0.375rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--porcelain-surface-alt);
}

.setup-progress-bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--porcelain-primary);
}

.setup-progress-bar.progress-0 {
  width: 0;
}

.setup-progress-bar.progress-1 {
  width: 33.333%;
}

.setup-progress-bar.progress-2 {
  width: 66.667%;
}

.setup-progress-bar.progress-3 {
  width: 100%;
}

/* The stepper: a numbered marker on a connecting line, then the step's text and action. */
.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

.step:last-child {
  padding-bottom: 0;
}

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: var(--space-1);
  left: calc(1rem - 1px);
  width: 2px;
  border-radius: 1px;
  background: var(--porcelain-border);
}

.step-marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
}

.step-done .step-marker {
  background: var(--porcelain-success-bg);
  color: var(--porcelain-success);
}

.step-current .step-marker {
  background: var(--porcelain-primary);
  color: var(--porcelain-surface);
  box-shadow: 0 0 0 4px var(--porcelain-primary-tint);
}

.step-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.25rem;
}

.step-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  font-weight: 600;
}

.step-current .step-title {
  font-size: 1.0625rem;
}

.step-text {
  max-width: 40rem;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--porcelain-text-secondary);
}

.step-done .step-text {
  font-size: 0.875rem;
}

.step-upcoming .step-title {
  color: var(--porcelain-text-secondary);
}

.step-action {
  margin-top: var(--space-3);
  max-width: 36rem;
}

.step-action > .btn {
  margin: 0;
}

.step-hint {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  color: var(--porcelain-text-secondary);
}

.step-upcoming .step-action {
  margin-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .kpi {
    transition: none;
  }
}

/* ------------------------------------------------------------------------
   Lists: CFDIs, Logs, Connections (docs/specs/ui-redesign.md step 4)

   One card per list: the header is the toolbar (status segments, search,
   issuer), the body is `#list-results`, which htmx swaps in place. Each item
   is one `<tr>`: a table from 992px (where the sidebar appears), a stacked
   card below. `.cell-desk` cells are table-only; `.cell-meta` is the stacked
   card's summary line; each layout shows every fact once.
   ------------------------------------------------------------------------ */

.list-card {
  overflow: hidden;
}

.content > .card + .connect-card {
  margin-top: var(--space-5);
}

.list-toolbar {
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* Status as tab-like links with counts. */
.segmented {
  display: inline-flex;
  flex: 0 1 auto;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  background: var(--porcelain-surface-alt);
  border: 1px solid var(--porcelain-border);
  border-radius: 10px;
}

.segment {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 7px;
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.segment:hover {
  color: var(--porcelain-text);
}

.segment[aria-current="page"] {
  color: var(--porcelain-text);
  background: var(--porcelain-surface);
  box-shadow: 0 0 0 1px var(--porcelain-border), var(--shadow-1);
}

.segment:focus-visible {
  outline-offset: -2px;
}

.segment-count {
  min-width: 1.5rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--porcelain-border);
  color: var(--porcelain-text-secondary);
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
}

.segment[aria-current="page"] .segment-count {
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary-active);
}

/* Search and issuer filter; applied live by htmx, the hidden "Filter" button is the fallback. */
.list-filter {
  display: flex;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
}

@media (min-width: 992px) {
  .list-filter {
    flex-wrap: nowrap;
  }

  .search-field {
    min-width: 10rem;
  }
}

.list-toolbar > .list-filter:only-child {
  justify-content: flex-start;
}

.search-field {
  position: relative;
  flex: 1 1 14rem;
  max-width: 26rem;
}

.search-field-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  color: var(--porcelain-text-secondary);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-field .form-control {
  padding-left: 2.25rem;
}

.issuer-select {
  flex: 0 1 12rem;
  width: auto;
  min-width: 0;
  max-width: 16rem;
}

.list-clear:empty {
  display: none;
}

.list-clear .btn {
  --bs-btn-padding-x: 0.5rem;
  white-space: nowrap;
}

/* While htmx fetches, the results dim; the swap brings them back. */
.list-results {
  container: list / inline-size;
  transition: opacity 0.15s ease;
}

.list-results.htmx-request {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .list-results {
    transition: none;
  }
}

/* The table. */
.list-table {
  margin: 0;
}

.list-table > :not(caption) > * > * {
  padding: var(--space-3);
  border-bottom-color: var(--porcelain-border);
}

.list-table > thead th {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  white-space: nowrap;
  overflow-wrap: normal;
}

.list-table > :not(caption) > * > :first-child {
  padding-left: var(--space-6);
}

.list-table > :not(caption) > * > :last-child {
  padding-right: var(--space-6);
}

.list-table > tbody > tr:last-child > * {
  border-bottom: 0;
}

.list-table td {
  height: 3.5rem;
}

.list-row:hover {
  --bs-table-bg-state: var(--porcelain-surface-alt);
}

.cell-title {
  display: block;
  font-weight: 600;
}

.cell-sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--porcelain-text-secondary);
}

.cell-meta {
  display: none;
}

.cell-date,
.cell-when,
.cell-side,
.cell-side2 {
  white-space: nowrap;
  overflow-wrap: normal;
}

.cell-date .cell-sub,
.cell-folio {
  font-variant-numeric: tabular-nums;
}

.cell-issuer {
  font-size: 0.875rem;
}

/* CFDIs: the issuer is one line, cut with an ellipsis (the full name is the title); the
   receiver wraps at word boundaries and keeps a readable minimum. Below 61.5rem of list width
   the Issuer column folds into a line under the receiver. */
.cell-truncate {
  display: block;
  width: 9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cell-issuer-inline {
  display: none;
}

.cfdi-table .cell-main {
  min-width: 10rem;
}

.cfdi-table > :not(caption) > * > * {
  padding-right: var(--space-2);
  padding-left: var(--space-2);
}

@container list (max-width: 61.49rem) {
  .cfdi-table .col-issuer {
    display: none;
  }

  .cfdi-table .cell-issuer-inline {
    display: block;
  }
}

.cell-code,
.id-short {
  font-size: 0.75rem;
  color: var(--porcelain-text-secondary);
}

.cell-error {
  color: var(--porcelain-danger);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
}

.cell-doc-line {
  display: block;
  white-space: nowrap;
}

.type-chip {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.cell-folio {
  font-weight: 600;
  white-space: nowrap;
}

.cell-side .money {
  font-weight: 600;
}

.cell-side .status-badge + .cell-sub {
  margin-top: 0.25rem;
}

/* A shortened id that copies its full value. */
.id-copy {
  min-height: 1.75rem;
  margin-left: -0.375rem;
  padding: 0.125rem 0.375rem;
  gap: 0.25rem;
  color: var(--porcelain-text-secondary);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.id-copy:hover {
  color: var(--porcelain-text);
}

.id-copy .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.cell-title-copy {
  color: var(--porcelain-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.cell-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* Compact download buttons in the table: icon and a short word, tight padding. */
.row-actions .btn-sm {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.8125rem;
  gap: 0.25rem;
}

.row-actions .btn-sm .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.list-table .btn {
  white-space: nowrap;
}

/* A failed call: a thin danger accent on the row's leading edge. */
.row-error > :first-child {
  box-shadow: inset 3px 0 0 var(--porcelain-danger),
    inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.phone-only {
  display: none !important;
}

/* The pager: under a card's table, or (on a list card) as the card's footer. */
.pager-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 0.875rem;
}

.list-results .pager-bar {
  margin-top: 0;
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--porcelain-border);
}

.pager-summary {
  margin: 0;
  color: var(--porcelain-text-secondary);
}

.pager {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pager-page {
  padding: 0 var(--space-1);
  color: var(--porcelain-text-secondary);
  white-space: nowrap;
}

.icon-flip {
  transform: scaleX(-1);
}

/* Below 992px the toolbar stacks. (The rows follow the width of the results region: see the
   `list` container query below. A stacked row has its primary line and summary on the left,
   the amount or state on the right and its actions underneath; no squeezing, no sideways
   scroll.) */
@media (max-width: 991.98px) {
  .list-toolbar {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .segmented {
    flex: 1 1 100%;
  }
}

/* Phones: four segments side by side, each with its count under the label. */
@media (max-width: 575.98px) {
  .segment {
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.3125rem 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  .segment-count {
    line-height: 1.125rem;
  }
}

@media (max-width: 991.98px) {
  .list-filter,
  .search-field {
    flex-basis: 100%;
    max-width: none;
  }

  .issuer-select {
    flex: 1 1 8rem;
    max-width: none;
  }
}

/* The results region is a size container: below 56rem of its own width (tablets, phones, a
   1024px laptop beside the sidebar) every row is a stacked card. */
@container list (max-width: 55.99rem) {
  .list-table,
  .list-table > tbody {
    display: block;
  }

  .list-table > thead {
    display: none;
  }

  .list-table > tbody > .list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main side"
      "main side2"
      "actions actions";
    align-items: start;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--porcelain-border);
  }

  .list-table > tbody > .list-row:last-child {
    border-bottom: 0;
  }

  .list-table > tbody > .list-row > td {
    height: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .list-row:hover {
    background: var(--porcelain-surface-alt);
  }

  .row-error {
    box-shadow: inset 3px 0 0 var(--porcelain-danger);
  }

  .list-table .cell-desk,
  .list-table .cell-rfc {
    display: none;
  }

  .list-table .cell-main {
    grid-area: main;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .list-table .cell-issuer-inline {
    display: none;
  }

  .list-table .cell-side {
    grid-area: side;
    justify-self: end;
    text-align: right;
  }

  .list-table .cell-side2 {
    grid-area: side2;
    justify-self: end;
    text-align: right;
  }

  .list-table .cell-when {
    font-size: 0.75rem;
    color: var(--porcelain-text-secondary);
  }

  .list-table .cell-actions {
    grid-area: actions;
    width: auto;
    text-align: left;
  }

  .list-table .cell-actions:empty {
    display: none;
  }

  .list-table .cell-actions > form,
  .row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: var(--space-2);
  }

  .cell-meta {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--porcelain-text-secondary);
    overflow-wrap: anywhere;
  }

  .phone-only {
    display: inline-flex !important;
  }

  .row-actions .id-copy {
    margin-left: 0;
    margin-right: auto;
  }

  .list-results .pager-bar {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .pager {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* "Connect an MCP client": a secondary card under the connections list. */
.connect-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--porcelain-text);
  list-style: none;
}

.connect-summary::-webkit-details-marker {
  display: none;
}

.connect-summary-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.connect-summary-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.connect-summary-title {
  font-weight: 600;
}

.connect-summary-hint {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--porcelain-text-secondary);
}

.connect-summary-chevron {
  flex: none;
  color: var(--porcelain-text-secondary);
  transition: transform 0.15s ease;
}

.connect-details[open] .connect-summary-chevron {
  transform: rotate(180deg);
}

.connect-details[open] .connect-summary {
  border-bottom: 1px solid var(--porcelain-border);
}

.connect-summary:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius);
}

.connect-body {
  padding: var(--space-5);
}

.connect-steps {
  margin-bottom: var(--space-5);
  padding-left: 1.25rem;
}

.connect-steps li + li {
  margin-top: var(--space-1);
}

.connect-label {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.connect-body .copy-field + .connect-label,
.connect-body pre + .connect-label {
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .connect-summary,
  .connect-body {
    padding-right: var(--space-6);
    padding-left: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .connect-summary-chevron {
    transition: none;
  }
}

/* ------------------------------------------------------------------------
   Issuers: list grid, issuer page, register form (docs/specs/ui-redesign.md step 5)
   ------------------------------------------------------------------------ */

/* The RFC as a quiet chip (lists, the issuer header). */
.rfc-chip {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.5;
  vertical-align: middle;
}

.rfc-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.rfc-copy-btn {
  min-height: 1.75rem;
  padding: 0.125rem 0.5rem;
  gap: 0.25rem;
  font-size: 0.8125rem;
}

.rfc-copy-btn .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.issuer-avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: 0.9375rem;
}

.issuer-avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

/* The list: a grid of cards, each one link (its ::after covers the card). */
.issuer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.issuer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.issuer-card:hover {
  border-color: var(--porcelain-border-strong);
  box-shadow: var(--shadow-2);
}

.issuer-card:has(.issuer-card-link:focus-visible) {
  outline: 2px solid var(--porcelain-primary);
  outline-offset: 2px;
}

.issuer-card-link {
  color: var(--porcelain-text);
  text-decoration: none;
}

.issuer-card-link:hover {
  color: var(--porcelain-text);
}

/* The ring is drawn on the card (above); a transparent outline still shows in forced colours. */
.issuer-card-link:focus-visible {
  outline: 2px solid transparent;
}

.issuer-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.issuer-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.issuer-card-id {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.issuer-card-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.issuer-card-chevron {
  flex: none;
  margin-top: 0.125rem;
  color: var(--porcelain-text-secondary);
}

.issuer-card:hover .issuer-card-chevron {
  color: var(--porcelain-primary);
}

.issuer-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--porcelain-border);
}

.issuer-card-label {
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* The closing "Register an issuer" card: dashed, quiet until hovered. */
.issuer-card-new {
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--porcelain-border-strong);
  box-shadow: none;
}

.issuer-card-new:hover {
  background: var(--porcelain-surface);
  border-color: var(--porcelain-primary);
}

.issuer-card-new .issuer-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 7.5rem;
  padding: var(--space-5);
  color: var(--porcelain-primary);
}

.issuer-card-new-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.issuer-card-new-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.issuer-card-new-title {
  font-weight: 600;
}

.issuer-card-new-hint {
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

/* The issuer page: cards in a main column, Readiness and Quick links beside them from 1200px. */
.issuer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.issuer-main,
.issuer-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.issuer-aside {
  gap: var(--space-4);
}

@media (min-width: 1200px) {
  .issuer-layout {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  }

  .issuer-aside {
    position: sticky;
    top: var(--space-8);
  }
}

/* A card's section header: icon square or step number, title and description, action right. */
.section-head {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-3);
}

.section-icon,
.section-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.section-step {
  border-radius: 50%;
  background: var(--porcelain-primary);
  color: var(--porcelain-surface);
  font-weight: 700;
}

.section-head-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.125rem;
}

.section-head-desc {
  margin: 0.125rem 0 0;
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
}

.section-head-action {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

/* Phones: the decorative icon square gives its room to the title and the action. */
@media (max-width: 575.98px) {
  .section-icon {
    display: none;
  }
}

/* Read-only facts: label small and muted above the value, two columns from 576px. */
.fact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  margin: 0;
}

.fact {
  min-width: 0;
}

.fact dt {
  margin-bottom: 0.125rem;
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.fact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.fact-mono {
  font-family: var(--bs-font-monospace);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

.fact-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.fact-copy .id-copy {
  margin-left: 0;
}

@media (min-width: 576px) {
  .fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact-wide {
    grid-column: 1 / -1;
  }
}

/* A tone banner: the alert's colours, with an icon, one sentence and its action. */
.tone-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}

.tone-banner-icon {
  display: inline-flex;
  flex: none;
  margin-top: 0.1875rem;
}

.alert-warning .tone-banner-icon {
  color: var(--porcelain-warning);
}

.alert-danger .tone-banner-icon {
  color: var(--porcelain-danger);
}

.alert-success .tone-banner-icon {
  color: var(--porcelain-success);
}

.alert-info .tone-banner-icon {
  color: var(--porcelain-primary);
}

.tone-banner-text {
  flex: 1 1 0;
  min-width: 10rem;
  margin: 0;
}

.tone-banner-action {
  flex: none;
  margin-left: auto;
}

/* The certificate's raw subject, folded away. */
.cert-details {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--porcelain-border);
}

.cert-details > summary {
  font-size: 0.875rem;
}

.cert-details-list {
  margin: var(--space-3) 0 0;
}

.cert-details-list dt {
  font-size: 0.8125rem;
}

.cert-details-list dd {
  margin: 0.125rem 0 0;
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

/* Form fields in a grid; `.field-wide` spans both columns. */
.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
}

.field {
  min-width: 0;
}

.field .form-text {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .field-grid:not(.field-grid-md) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-grid .field-wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .field-grid-md {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.form-actions-note {
  flex: 1 1 16rem;
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

.form-subhead {
  margin: 0 0 0.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.csd-form-replace {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--porcelain-border);
}

.small {
  font-size: 0.875rem;
}

/* The branding card: the logo frame beside its upload, then the text fields. */
.logo-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--porcelain-border);
}

.logo-block-fields {
  flex: 1 1 16rem;
  min-width: 0;
}

.logo-block-fields .form-actions {
  margin-top: var(--space-3);
}

.logo-frame {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 7rem;
  margin: 0;
  padding: var(--space-2);
  background: repeating-conic-gradient(#eef3f5 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
  border: 1px dashed var(--porcelain-border-strong);
  border-radius: var(--radius-sm);
}

.logo-frame-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-frame-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--porcelain-surface);
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

.logo-frame-empty .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.logo-frame-empty[hidden] {
  display: none;
}

.issuer-logo {
  flex-shrink: 0;
  object-fit: contain;
}

/* Readiness: one worded, toned item per card. */
.checklist {
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
}

.check-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
}

.check-icon .icon {
  width: 1rem;
  height: 1rem;
}

.check-ok .check-icon {
  background: var(--porcelain-success-bg);
  color: var(--porcelain-success);
}

.check-warning .check-icon {
  background: var(--porcelain-warning-bg);
  color: var(--porcelain-warning);
}

.check-danger .check-icon {
  background: var(--porcelain-danger-bg);
  color: var(--porcelain-danger);
}

.check-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.check-title {
  font-weight: 600;
  line-height: 1.4;
}

.check-text {
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

.check-warning .check-text {
  color: var(--porcelain-warning-text);
}

.check-danger .check-text {
  color: var(--porcelain-danger-text);
}

/* Quick links: full-width rows with an icon and a chevron. */
.quick-links-list {
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  color: var(--porcelain-text);
  text-decoration: none;
}

.quick-link > .icon:first-child {
  color: var(--porcelain-primary);
}

.quick-link:hover {
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text);
}

.quick-link:focus-visible {
  outline-offset: -2px;
}

.quick-link > span {
  flex: 1 1 auto;
}

.quick-link-chevron {
  color: var(--porcelain-text-secondary);
}

/* Register an issuer: the form's section cards beside "What you need" from 992px. */
.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.form-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--porcelain-surface);
  border: 1px solid var(--porcelain-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.help-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
}

.help-term {
  display: block;
  color: var(--porcelain-text);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  /* Above the fixed bottom tab bar. */
  .form-footer {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-2));
  }
}

@media (min-width: 992px) {
  .register-layout {
    grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
  }

  .register-aside {
    position: sticky;
    top: var(--space-8);
  }

  .form-footer {
    bottom: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .issuer-card {
    transition: none;
  }
}

/* ------------------------------------------------------------------------
   Billing, Referrals, Ledger (docs/specs/ui-redesign.md step 6)
   ------------------------------------------------------------------------ */

/* A page of stacked sections: banners, cards and tile rows one rhythm apart. */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.page-stack > * {
  margin: 0;
}

/* Tiles that are figures, not links (Referrals, Ledger): three across from 768px; on phones the
   first spans the row and the other two share the next. */
.kpi-grid-3 > :first-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .kpi-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kpi-grid-3 > :first-child {
    grid-column: auto;
  }
}

.kpi-warning .kpi-icon {
  background: var(--porcelain-warning-bg);
  color: var(--porcelain-warning);
}

/* The credit beside "Add credit": 5/12 and 7/12 from 1200px; stacked below, where a column of
   the content width would leave the credit card mostly empty beside the taller Add credit. */
.billing-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 1200px) {
  .billing-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.balance-card {
  display: flex;
  flex-direction: column;
}

.balance-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-5);
}

.balance-main .kpi-head {
  margin-bottom: var(--space-4);
}

/* The figure sits right under the label; the foot stays at the bottom of the row's height. */
.balance-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.balance-main .kpi-label {
  margin: 0;
}

.balance-amount {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.balance-amount .currency {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.balance-amount-none {
  font-size: 1.5rem;
  color: var(--porcelain-text-secondary);
}

.balance-stamps {
  margin: var(--space-2) 0 0;
  font-weight: 600;
}

.balance-price {
  margin: 0;
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
}

.balance-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--porcelain-border);
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

@media (min-width: 768px) {
  .balance-main {
    padding: var(--space-6);
  }

  .balance-foot {
    padding: var(--space-3) var(--space-6);
  }
}

/* Add credit: preset tiles (two across, all in one row when the card is wide enough), then
   "Other amount" with its currency and Pay. */
.topup-card {
  container: topup / inline-size;
}

.topup-card form {
  margin: 0;
}

.topup-welcome {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-text);
  font-size: 0.875rem;
}

.topup-welcome .icon {
  margin-top: 0.125rem;
  color: var(--porcelain-primary);
}

/* "Facturar a" (topup-invoicing.md req 3): the receiver of the invoice, above the amounts. */
.topup-receiver {
  min-width: 0;
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--porcelain-border);
}

.topup-receiver legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: 1rem;
  font-weight: 600;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@container topup (min-width: 34rem) {
  .preset-grid {
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  }
}

.preset-tile {
  --bs-btn-padding-y: var(--space-3);
  --bs-btn-padding-x: var(--space-2);
  --bs-btn-color: var(--porcelain-text);
  --bs-btn-bg: var(--porcelain-surface);
  --bs-btn-border-color: var(--porcelain-border);
  --bs-btn-hover-color: var(--porcelain-text);
  --bs-btn-hover-bg: var(--porcelain-primary-tint);
  --bs-btn-hover-border-color: var(--porcelain-primary);
  --bs-btn-active-color: var(--porcelain-text);
  --bs-btn-active-bg: var(--porcelain-primary-tint);
  --bs-btn-active-border-color: var(--porcelain-primary-active);
  flex-direction: column;
  gap: var(--space-2);
  min-height: 5rem;
  box-shadow: var(--shadow-1);
}

.preset-amount {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.preset-amount .currency {
  font-size: 0.75rem;
}

.bonus-chip {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--porcelain-success-bg);
  color: var(--porcelain-success);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.topup-card .amount-form {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--porcelain-border);
}

.amount-row {
  display: flex;
  gap: var(--space-2);
}

.amount-row .input-group {
  flex: 1 1 auto;
  width: auto;
}

.input-group-text {
  border-color: var(--porcelain-border-strong);
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.amount-row .btn-primary {
  flex: none;
  min-width: 6rem;
}

.topup-secure {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

.topup-secure .icon {
  color: var(--porcelain-success);
}

.topup-card .list-empty {
  padding: var(--space-4) 0;
}

/* History: the movement's icon square beside its label, reference and (pending) actions. */
.movement {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.movement-text {
  min-width: 0;
}

.movement-text .id-copy {
  margin-top: 0.125rem;
}

.movement-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--porcelain-surface-alt);
  color: var(--porcelain-text-secondary);
}

.movement-icon .icon {
  width: 1rem;
  height: 1rem;
}

.movement-plus {
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.movement-gift {
  background: var(--porcelain-success-bg);
  color: var(--porcelain-success);
}

/* The CFDI of a credited top-up under its movement (topup-invoicing.md req 13). */
.movement-invoice {
  margin-top: var(--space-2);
}

.movement-invoice-reason {
  margin: var(--space-1) 0 0;
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.movement-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* On a wide list the date, amount and status columns hug their content, so the amount and the
   status sit together at the right instead of spreading across the card (the Ledger's order). */
@container list (min-width: 56rem) {
  .history-table .cell-date,
  .history-table .cell-side2,
  .history-table .cell-side {
    width: 1%;
  }

  .history-table > :not(caption) > * > :nth-child(2) {
    padding-left: var(--space-6);
  }

  .history-table > :not(caption) > * > :nth-child(3) {
    padding-left: var(--space-8);
  }
}

/* Amounts: the sign always leads; a completed credit is also green. Pending and rejected
   movements moved nothing, so their amount is quiet. */
.amount-credit {
  color: var(--porcelain-success);
}

.amount-void,
.amount-credit.amount-void {
  color: var(--porcelain-text-secondary);
  font-weight: 500;
}

.cell-sub-inline {
  color: var(--porcelain-text-secondary);
  font-size: 0.8125rem;
}

/* A payment the ledger could not credit: a thin warning accent on the row's leading edge. */
.row-warning > :first-child {
  box-shadow: inset 3px 0 0 var(--porcelain-warning),
    inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

@container list (max-width: 55.99rem) {
  .row-warning {
    box-shadow: inset 3px 0 0 var(--porcelain-warning);
  }

  .history-table .movement-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* Referrals: the code, and the rules as two short lines with an icon each. */
.referral-code {
  margin: var(--space-2) 0 0;
  color: var(--porcelain-text-secondary);
  font-size: 0.875rem;
}

.referral-code-value {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.referral-link-card form {
  margin: 0;
}

.referral-rules-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--porcelain-border);
  list-style: none;
}

.referral-rules-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.referral-rule-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--porcelain-primary-tint);
  color: var(--porcelain-primary);
}

.referral-rule-icon .icon {
  width: 1rem;
  height: 1rem;
}

.referral-rule-who {
  font-weight: 600;
}

.referral-rules-list li > span:last-child {
  padding-top: 0.25rem;
}

@media (min-width: 768px) {
  .referral-rules-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}