/* TaskVault `ui-` component vocabulary — the « Vault » skin. Loaded AFTER lowbid-tokens.css and
   BEFORE tailwind.css. Everything is theme-token driven; never hardcode a colour here.
   Shapes: 8px corners (5px chips, 12px panels), 1px hairlines + a faint top bevel, no pills. Steel-white =
   an off-chain decision, Signal mint = a signature that moves money ([data-pay-step], [data-fund], [data-validate-submit],
   .ui-btn-signal). On-chain facts (amounts, addresses, hashes) are mono with tabular figures.
   Touch targets stay 44px on coarse pointers. */

html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body { font-size: var(--text-body); line-height: 1.5; }
.font-mono, code, kbd { font-family: var(--font-mono); }
.text-muted { color: var(--muted); }
.text-strong { color: var(--text); }
.hover\:text-strong:hover { color: var(--text); }

/* ====== .ui-underline: kept as a hook, the Vault direction has no decorative underline ====== */
.ui-underline { text-decoration: none; }

/* ====== On-chain figures: mono, tabular; trailing decimals faint (|usdc_parts) ====== */
.ui-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-dec { color: var(--text-faint); font-weight: 400; }

/* ====== Icon tile: small rounded square on a light grey fill (list rows, empty states, KPI, modal) ====== */
.ui-icon-tile {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); display: inline-grid; place-items: center;
    background: var(--surface-soft); color: var(--text); font-size: 0.9rem;
}

/* ====== Surfaces ====== */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.glass-card:hover { border-color: var(--hover-border); box-shadow: var(--hover-shadow); }
.glass-soft {
    background: var(--soft-bg);
    border: 1px solid var(--soft-border);
    border-radius: var(--radius-sm);
}
.ui-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
}
.ui-panel + .ui-panel { margin-top: 0.9rem; }
.ui-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; }
.ui-panel-title { font-size: var(--text-heading); font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.005em; }
.ui-panel-sub { font-size: var(--text-meta); color: var(--muted); margin: 0.2rem 0 0; line-height: 1.45; }

/* ====== Page header ====== */
.ui-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.35rem; }
.ui-page-title { font-size: var(--text-display); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--text); margin: 0; }
.ui-page-sub { color: var(--muted); font-size: var(--text-body); margin: 0.3rem 0 0; }
.ui-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ====== Text roles ====== */
.ui-meta { color: var(--muted); font-size: var(--text-meta); font-weight: 500; line-height: 1.4; }
.ui-label {
    display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem;
}
.ui-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.15em; font-weight: 500; transition: text-decoration-color 0.15s ease; }
.ui-link:hover { text-decoration-color: var(--text); }
.ui-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.ui-num-strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }

/* ====== Forms ====== */
.ui-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ui-input, .ui-select, .ui-textarea {
    min-height: 42px; width: 100%; padding: 0.5rem 0.8rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: var(--text-body); font-family: inherit; font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-faint); }
.ui-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
    outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring);
}
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { opacity: 0.55; cursor: not-allowed; }
/* Range slider (the arbiter's split on /litiges/): track in the surface tone, thumb in Signal mint, 44px hit area */
.ui-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.ui-range:focus { outline: none; }
.ui-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-500) var(--range-pct, 50%), var(--surface-soft) var(--range-pct, 50%)); border: 1px solid var(--divider); }
.ui-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-soft); border: 1px solid var(--divider); }
.ui-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brand-500); }
.ui-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--brand-500); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--divider); }
.ui-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-500); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--divider); }
.ui-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brand-soft, var(--surface-soft)); }
.ui-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--brand-soft, var(--surface-soft)); }
.ui-split-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ui-split-side { padding: 0.75rem 0.9rem; border: 1px solid var(--divider); border-radius: 8px; background: var(--surface-soft); min-width: 0; }
.ui-split-side .ui-split-label { display: block; font-size: var(--text-meta); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ui-split-side .ui-split-amount { display: block; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--text); overflow-wrap: anywhere; }
.ui-split-side .ui-split-pct { color: var(--brand-500); font-weight: 700; }
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--error); }
.ui-help { font-size: var(--text-meta); color: var(--muted); }
.ui-error { font-size: var(--text-meta); color: var(--error); font-weight: 500; }
.ui-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem 1rem; }
@media (min-width: 640px) { .ui-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-form-grid .ui-field-wide { grid-column: 1 / -1; } }
.ui-input-group { display: flex; align-items: stretch; }
.ui-input-group .ui-input { border-start-end-radius: 0; border-end-end-radius: 0; }
.ui-input-addon {
    display: inline-flex; align-items: center; padding: 0 0.8rem; min-height: 42px;
    border: 1px solid var(--border); border-inline-start: none; background: var(--surface-soft);
    color: var(--muted); font-size: var(--text-meta); font-weight: 600;
    border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
}

/* ====== Buttons — 8px blocks. Primary = steel-white, signal = mint (moves money), secondary = hairline, ghost, danger. ====== */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 40px; padding: 0.5rem 1.05rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: var(--text-body); font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.ui-btn:hover { border-color: var(--border-strong); background: var(--row-hover); }
.ui-btn:active:not(:disabled) { transform: translateY(1px); }
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"], .ui-btn.is-loading { opacity: 0.5; cursor: not-allowed; }
.ui-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ui-btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }
.ui-btn-signal, .ui-btn-primary[data-pay-step], .ui-btn-primary[data-fund], .ui-btn-primary[data-validate-submit] {
    background: var(--brand-500); border-color: var(--brand-500); color: var(--brand-ink);
}
.ui-btn-signal:hover, .ui-btn-primary[data-pay-step]:hover, .ui-btn-primary[data-fund]:hover, .ui-btn-primary[data-validate-submit]:hover {
    background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink);
}
.ui-btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.ui-btn-ghost:hover { color: var(--text); background: var(--surface-soft); border-color: transparent; }
.ui-btn-danger { background: var(--surface); border-color: var(--error-soft); color: var(--error); }
.ui-btn-danger:hover { background: var(--error-soft); border-color: var(--error-soft); }
.ui-btn-danger-solid { background: var(--error); border-color: var(--error); color: var(--on-error); }
.ui-btn-danger-solid:hover { background: var(--error); border-color: var(--error); color: var(--on-error); opacity: 0.92; }
.ui-btn-sm { min-height: 34px; padding: 0.3rem 0.8rem; font-size: 0.8125rem; gap: 0.4rem; }
.ui-btn-lg { min-height: 46px; padding: 0.65rem 1.4rem; font-size: 0.95rem; }
.ui-btn-block { width: 100%; }
.ui-btn i { font-size: 0.85em; }
.ui-btn .fa-spinner { animation: lb-spin 0.9s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (pointer: coarse) { .ui-btn { min-height: 44px; } .ui-btn-sm { min-height: 40px; } }

/* ====== Badges / status — 5px chips, soft tint + dark text; .ui-badge-brand is the FILLED Signal chip ====== */
.ui-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 600; line-height: 1;
    padding: 0.34rem 0.6rem; border-radius: var(--radius-xs);
    background: var(--surface-soft); color: var(--muted); white-space: nowrap;
}
.ui-badge-ok      { background: var(--success-soft); color: var(--ui-badge-ok-text); }
.ui-badge-attn    { background: var(--warning-soft); color: var(--ui-badge-attn-text); }
.ui-badge-danger  { background: var(--error-soft);   color: var(--ui-badge-danger-text); }
.ui-badge-info    { background: var(--info-soft);    color: var(--ui-badge-info-text); }
.ui-badge-brand   { background: var(--brand-500);    color: var(--ui-badge-brand-text); }  /* "Recommandé", "Choisi", prices */
.ui-badge-neutral { background: var(--surface-soft); color: var(--muted); }
.ui-status { display: inline-flex; align-items: center; gap: 0.375rem; }
.ui-dot { width: 0.45rem; height: 0.45rem; border-radius: 1px; background: currentColor; flex: none; }
.ui-tag {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--text-meta); font-weight: 500; line-height: 1.2;
    padding: 0.26rem 0.55rem; border-radius: var(--radius-xs); background: var(--surface-soft); border: 1px solid transparent; color: var(--text);
    text-decoration: none; font-family: inherit; cursor: default;
}
a.ui-tag, button.ui-tag { cursor: pointer; }
a.ui-tag:hover, button.ui-tag:hover { border-color: var(--border-strong); }
.ui-tag.is-match { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ====== Alerts ====== */
.ui-alert {
    display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-soft); color: var(--text);
    font-size: 0.8125rem; line-height: 1.5;
}
.ui-alert > i { margin-top: 0.15rem; color: var(--muted); }
.ui-alert-ok     { background: var(--success-soft); border-color: transparent; }
.ui-alert-attn   { background: var(--warning-soft); border-color: transparent; }
.ui-alert-danger { background: var(--error-soft);   border-color: transparent; }
.ui-alert-info   { background: var(--info-soft);    border-color: transparent; }
.ui-alert-ok > i     { color: var(--ui-badge-ok-text); }
.ui-alert-attn > i   { color: var(--ui-badge-attn-text); }
.ui-alert-danger > i { color: var(--ui-badge-danger-text); }
.ui-alert-info > i   { color: var(--ui-badge-info-text); }

/* ====== KPI band — a ledger line: heavy top rule, hairline bottom, figures in mono, no boxes ====== */
.ui-kpi-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .ui-kpi-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ui-kpi-tile {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 0; min-width: 0;
    background: transparent; border: none; text-decoration: none; color: inherit;
}
.ui-kpi-label { font-size: var(--text-meta); font-weight: 500; color: var(--muted); }
.ui-kpi-value { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ui-kpi-value .ui-price-unit { font-size: 0.55em; font-weight: 600; color: var(--muted); margin-inline-start: 0.3em; opacity: 1; }
.ui-kpi-hint { margin: 0; }

/* ====== Price — a mono figure, faint decimals, small asset code (« 300.00 USDC ») ====== */
.ui-price {
    display: inline-flex; align-items: baseline; gap: 0.3em; padding: 0.18em 0.5em; border-radius: var(--radius-xs);
    background: var(--surface-soft); color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 650;
    font-size: 0.8125rem; line-height: 1.35; white-space: nowrap; vertical-align: middle; letter-spacing: -0.01em;
}
.ui-price-unit { font-size: 0.74em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ui-kpi-value .ui-price, .ui-price.is-bare { background: none; padding: 0; }

/* ====== Lists / rows — hairline-separated, a rank/icon tile on the left ====== */
.ui-list { display: flex; flex-direction: column; }
.ui-list-row {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.25rem; min-height: 48px;
    border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none;
}
.ui-list-row:last-child { border-bottom: none; }
a.ui-list-row:hover { background: var(--row-hover); }
.ui-rank {
    flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-sm); display: inline-grid; place-items: center;
    background: var(--surface-soft); font-size: var(--text-meta); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}

/* ====== Empty state — icon tile, bold title, grey line, black pill CTA ====== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.75rem 1.5rem; text-align: center; }
.empty-state-icon {
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); display: grid; place-items: center; margin-bottom: 0.85rem;
    background: var(--surface-soft); color: var(--text); font-size: 1.05rem;
}
.empty-state-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
.empty-state-desc { font-size: 0.8125rem; color: var(--muted); max-width: 340px; line-height: 1.5; margin: 0; }

/* ====== Segmented tabs — white pills, the active one black ====== */
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.seg-tab {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 36px; padding: 0.25rem 0.95rem; border-radius: var(--radius-sm);
    font-size: 0.8125rem; font-weight: 600; color: var(--text); white-space: nowrap; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-family: inherit; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.seg-tab:hover { border-color: var(--border-strong); }
.seg-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.seg-count { font-size: 0.7rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg-tab.is-active .seg-count { color: var(--on-ink); opacity: 0.75; }
@media (max-width: 480px) { .seg-tabs { display: flex; width: 100%; } .seg-tab { flex: 1; justify-content: center; } }

/* ====== .rcard — table that becomes stacked cards below 720px of CONTAINER width.
   Always the WRAPPER DIV around a <table>; each <td> carries data-label="Colonne". ====== */
.rcard { width: 100%; container-type: inline-size; container-name: rcard; }
.rcard table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.rcard th, .rcard td { padding: 0.7rem 0.75rem; text-align: start; border-bottom: 1px solid var(--divider); color: var(--text); overflow-wrap: anywhere; }
.rcard th { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.rcard tbody tr:last-child td { border-bottom: none; }
.rcard tbody tr:hover { background: var(--row-hover); }
.rcard th.ui-col-end, .rcard td.ui-col-end { text-align: end; }
.rcard th.ui-num, .rcard td.ui-num { overflow-wrap: normal; }
@container rcard (max-width: 720px) {
    .rcard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .rcard tr { display: flex; flex-direction: column; border-bottom: 1px solid var(--divider); padding: 0.35rem 0; }
    .rcard tr:last-child { border-bottom: none; }
    .rcard td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: none; padding: 0.4rem 0.5rem; }
    .rcard td::before { content: attr(data-label); color: var(--muted); font-weight: 500; font-size: 0.75rem; flex-shrink: 0; }
    .rcard td:empty { display: none; }
    /* .is-stack: a cell holding several blocks (title + tags + description) — label above, content below, full width. */
    .rcard td.is-stack { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .rcard th.ui-col-end, .rcard td.ui-col-end { text-align: end; }
}

/* ====== Toasts (white cards, top-end) ====== */
.lb-toast-container {
    position: fixed; top: 4.5rem; inset-inline-end: 1rem; z-index: 9999;
    display: flex; flex-direction: column; gap: 0.6rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none;
}
.lb-toast {
    pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem 2rem 0.8rem 0.85rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    animation: lb-toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lb-toast-icon {
    flex: none; width: 2.3rem; height: 2.3rem; border-radius: var(--radius-sm); display: grid; place-items: center;
    background: var(--surface-soft); color: var(--text); font-size: 1rem;
}
.lb-toast[data-type="success"] .lb-toast-icon { background: var(--success-soft); color: var(--ui-badge-ok-text); }
.lb-toast[data-type="error"]   .lb-toast-icon { background: var(--error-soft);   color: var(--ui-badge-danger-text); }
.lb-toast[data-type="warning"] .lb-toast-icon { background: var(--warning-soft); color: var(--ui-badge-attn-text); }
.lb-toast[data-type="info"]    .lb-toast-icon { background: var(--info-soft);    color: var(--ui-badge-info-text); }
.lb-toast-body { min-width: 0; flex: 1 1 auto; }
.lb-toast-title { font-size: 0.86rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.lb-toast-message { margin-top: 0.1rem; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.lb-toast-close {
    position: absolute; top: 0.4rem; inset-inline-end: 0.45rem; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm);
    display: grid; place-items: center; background: none; border: none; color: var(--muted); cursor: pointer; opacity: 0.6;
}
.lb-toast-close:hover { opacity: 1; color: var(--text); background: var(--surface-soft); }
.lb-toast.is-leaving { opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease; }
@keyframes lb-toast-in { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 640px) { .lb-toast-container { left: 0.75rem; right: 0.75rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .lb-toast, .seg-tab, .ui-btn, .glass-card { animation: none; transition: none; } }

/* ====== Navbar — wordmark left, links CENTERED in a white pill (active = black pill), actions right ====== */
.lb-nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.lb-nav-inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .lb-nav-inner { padding: 0 1.5rem; } }
@media (min-width: 1536px) { .lb-nav-inner { max-width: 80rem; } }
@media (min-width: 1024px) { .lb-nav-inner { padding: 0 2rem; } }
.lb-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text); flex: none; }
.lb-brand-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.035em; line-height: 1; }
.lb-brand-accent { color: var(--brand-500); }
/* The vault-door mark (inline SVG in navbar.html, stroked in currentColor): a mint dial on a steel plate. */
.lb-brand-mark {
    flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: var(--radius-sm);
    background: linear-gradient(160deg, var(--surface-soft), var(--surface)); border: 1px solid var(--border-strong);
    box-shadow: inset 0 1px 0 var(--bevel); color: var(--brand-500);
}
.lb-brand-mark svg { width: 1.2rem; height: 1.2rem; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.lb-brand:hover .lb-brand-mark svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .lb-brand-mark svg { transition: none; } }
.lb-brand .ui-badge { font-size: 0.625rem; padding: 0.25rem 0.5rem; }
.lb-nav-links {
    display: none; align-items: center; gap: 0.15rem; justify-self: center;
    padding: 0.25rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
@media (min-width: 1024px) { .lb-nav-links { display: inline-flex; } }
@media (min-width: 1024px) and (max-width: 1199.98px) { .lb-nav-links .lb-nav-link span { display: none; } .lb-nav-links .lb-nav-link { padding: 0 0.75rem; } .lb-nav-links .lb-nav-link i { font-size: 0.9rem; } }
.lb-nav-link {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0 0.85rem; border-radius: var(--radius-sm); white-space: nowrap;
    color: var(--text); font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.lb-nav-link i { font-size: 0.78rem; color: var(--muted); }
.lb-nav-link:hover { background: var(--nav-link-hover-bg); }
.lb-nav-link.is-active { background: var(--nav-active); color: var(--text); box-shadow: inset 0 -2px 0 var(--brand-500); }
.lb-nav-link.is-active i { color: var(--brand-500); }
.lb-nav-actions { justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
.lb-icon-btn {
    width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem;
}
.lb-icon-btn:hover { border-color: var(--border-strong); background: var(--row-hover); }
/* Very small phones: the connected wallet button keeps its identicon, the address lives in the menu. */
@media (max-width: 400px) { .lb-wallet-btn.is-connected > .font-mono { display: none; } }
.lb-wallet-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 38px; padding: 0 0.95rem; border-radius: var(--radius-sm); cursor: pointer;
    border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 0.8125rem; font-family: inherit;
    list-style: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease;
}
.lb-wallet-btn::-webkit-details-marker { display: none; }
.lb-wallet-btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.lb-wallet-btn.is-connected { background: var(--surface); border-color: var(--border); color: var(--text); padding-inline-start: 0.35rem; }
.lb-wallet-btn.is-connected:hover { border-color: var(--border-strong); background: var(--row-hover); }
.lb-wallet-dot { width: 0.45rem; height: 0.45rem; border-radius: 1px; background: var(--success); }
.lb-wallet-menu { position: relative; }
.lb-wallet-dropdown { position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); min-width: 260px; padding: 0.4rem; z-index: 60; box-shadow: var(--shadow-pop); }
.lb-dropdown-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 40px; padding: 0 0.75rem; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--text); font: inherit; font-size: var(--text-body); text-align: start; cursor: pointer;
}
.lb-dropdown-item i { color: var(--muted); width: 1rem; text-align: center; }
.lb-dropdown-item:hover { background: var(--surface-soft); }
.lb-mobile-nav { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.5rem 1rem 0.75rem; border-top: 1px solid var(--border); }
.lb-mobile-nav .lb-nav-link { min-height: 42px; }
.lb-mobile-nav[hidden] { display: none; }
@media (min-width: 1024px) { .lb-mobile-nav { display: none !important; } }

/* ====== Landing: the vault hero band (full bleed without overflow) = the scroll story track, the ledger tape ====== */
.lb-hero-band {
    margin-top: -1.5rem; padding: 3rem 0 3.5rem;
    box-shadow: 0 0 0 100vmax var(--bg-1); clip-path: inset(0 -100vmax);
    background: radial-gradient(closest-side at 72% 38%, var(--glow-1), transparent), var(--bg-1);
}
@media (min-width: 768px) { .lb-hero-band { padding: 4.5rem 0 4.5rem; } }
.lb-hero { min-width: 0; }
.lb-kicker { margin: 0 0 1.25rem; font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-500); }
.lb-hero-title { font-size: clamp(2.1rem, 5.4vw, 3.75rem); line-height: 1.03; font-weight: 800; letter-spacing: -0.045em; color: var(--text); margin: 0 0 1.4rem; max-width: 13ch; }
.lb-hero-accent { color: var(--brand-500); }
.lb-hero-sub { font-size: 1.05rem; line-height: 1.65; color: var(--muted); max-width: 52ch; margin: 0 0 2rem; }
.lb-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lb-hero-cta .ui-btn:not(.ui-btn-signal) { background: transparent; }
.lb-hero-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; margin: 2.25rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.lb-hero-stats strong { color: var(--text); font-weight: 600; }

.lb-tape { overflow: hidden; background: var(--brand-500); color: var(--brand-ink); border-block: 1px solid var(--ink); box-shadow: 0 0 0 100vmax var(--brand-500); clip-path: inset(0 -100vmax); }
.lb-tape-track { display: flex; width: max-content; animation: lb-tape 60s linear infinite; }
.lb-tape:hover .lb-tape-track { animation-play-state: paused; }
.lb-tape-list { display: flex; margin: 0; padding: 0; list-style: none; }
.lb-tape-item { display: flex; gap: 0.6rem; padding: 0.8rem 1.6rem; white-space: nowrap; font-family: var(--font-mono); font-size: 0.8125rem; border-inline-end: 1px solid color-mix(in srgb, var(--brand-ink) 22%, transparent); }
.lb-tape-item b { font-weight: 700; }
.lb-tape-tx { opacity: 0.65; }
@keyframes lb-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.lb-section-title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; max-width: 18ch; color: var(--text); }

/* ====== Landing: the scroll story — the hero band is ONE track: hero copy + four steps on the left, the CSS 3D
   « project cube » (one slab per task) sticky on the right, scrubbed by anime.js ======
   .lb-hero-band.lb-story[data-story] › .lb-story-grid[data-story-grid] (areas: hero / scene / flow) ›
     .lb-hero[data-story-hero] · .lb-scene-wrap (sticky) › .lb-scene › .lb-cube[data-cube] › .lb-slab[data-slab] × 4 ›
     .lb-face.is-{front,back,left,right,top,bottom} + .lb-bids › .lb-bid(.is-chosen) · .lb-story-flow › .lb-story-intro +
     .lb-story-steps › .lb-step[data-story-step] (.is-active follows the chapter, dimmed only once .lb-story.is-live)
   Geometry lives in the --w / --d / --h variables of .lb-scene; lowbid-landing.js animates ONLY transforms and
   opacity on .lb-cube, .lb-slab, .lb-bid, [data-face-*] (never set a CSS transform on those four). The CSS
   below is also the no-JS pose: cube closed, padlocks on, bids hidden. */
.lb-story-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "scene" "flow"; gap: 1.5rem; align-items: start; }
.lb-story-grid > .lb-hero { grid-area: hero; }
.lb-story-flow { grid-area: flow; min-width: 0; }
.lb-story-intro { display: grid; gap: 0.9rem; margin: 2.5rem 0 1.5rem; }
.lb-story-sub { margin: 0; max-width: 58ch; color: var(--muted); font-size: 1rem; line-height: 1.65; }
@media (min-width: 1024px) {
    .lb-story-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "hero scene" "flow scene"; gap: 2rem 3.5rem; }
    .lb-story-intro { margin: 10vh 0 2rem; }
}

.lb-scene-wrap {
    grid-area: scene; align-self: start; position: sticky; top: 3.5rem; z-index: 2;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 44vh; min-height: 17rem; background: var(--bg-1); overflow: hidden;
}
@media (min-width: 1024px) { .lb-scene-wrap { top: 5rem; height: calc(100vh - 7rem); min-height: 30rem; background: transparent; z-index: auto; overflow: visible; } }

.lb-scene {
    --w: 15rem; --d: 10rem; --h: 2.6rem; --n: 4; --scene-scale: 1;
    position: relative; width: var(--w); height: calc(var(--h) * var(--n));
    perspective: 1100px; perspective-origin: 50% 35%;
    transform: translateX(-3.5rem) scale(var(--scene-scale));
}
@media (max-width: 1023.98px) { .lb-scene { --scene-scale: 0.78; } }
@media (max-width: 399.98px) { .lb-scene { --scene-scale: 0.62; } }

.lb-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-8deg); will-change: transform; }
.lb-slab { position: absolute; left: 0; top: calc(var(--i) * var(--h)); width: var(--w); height: var(--h); transform-style: preserve-3d; will-change: transform; }
.lb-face {
    position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); box-sizing: border-box;
    border: 1px solid var(--border-strong); background: var(--surface); backface-visibility: hidden;
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--text);
}
.lb-face.is-front { transform: translateZ(calc(var(--d) / 2)); display: flex; align-items: center; gap: 0.6rem; padding: 0 2.1rem 0 0.75rem; }
.lb-face.is-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); display: flex; align-items: center; padding: 0 0.75rem; background: var(--bg-2); }
.lb-face.is-left, .lb-face.is-right { width: var(--d); margin-left: calc(var(--d) / -2); background: var(--surface-soft); }
.lb-face.is-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); display: flex; align-items: center; justify-content: flex-end; padding: 0 0.6rem; }
.lb-face.is-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; padding: 0 0.7rem 0 0.9rem; background: var(--surface); box-shadow: inset 3px 0 0 var(--brand-500); }
.lb-face.is-top, .lb-face.is-bottom { height: var(--d); margin-top: calc(var(--d) / -2); }
.lb-face.is-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: color-mix(in srgb, var(--surface-soft) 55%, var(--border-strong)); }
.lb-face.is-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: var(--bg-3); }
.lb-face-no { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.04em; white-space: nowrap; }
.lb-face-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem; letter-spacing: -0.01em; }
.lb-face-price { color: var(--brand-500); font-weight: 600; white-space: nowrap; }
.lb-face-lock { position: absolute; right: 0.55rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); background: var(--brand-500); color: var(--brand-ink); font-size: 0.55rem; will-change: transform; }
.lb-face-glow { position: absolute; inset: -1px; border: 1.5px solid var(--brand-500); box-shadow: 0 0 0 3px var(--brand-soft), 0 0 22px var(--brand-soft); pointer-events: none; will-change: opacity; }
.lb-face-release { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--success); font-weight: 700; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.lb-face-release-sub { color: var(--muted); font-size: 0.6rem; white-space: nowrap; opacity: 0; will-change: transform, opacity; }

.lb-bids { position: absolute; left: calc(100% + 1rem); top: 50%; display: flex; flex-direction: column; gap: 0.2rem; transform: translateY(-50%) translateZ(calc(var(--d) / 2)); }
.lb-bid {
    display: inline-flex; align-items: center; gap: 0.4rem; height: 1.3rem; padding: 0 0.5rem 0 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-xs);
    background: var(--surface); font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); white-space: nowrap; opacity: 0; will-change: transform, opacity;
}
.lb-bid .ui-identicon { width: 0.85rem; height: 0.85rem; border-radius: 2px; }
.lb-bid-name { overflow: hidden; text-overflow: ellipsis; max-width: 7rem; }
.lb-bid-score { color: var(--text); font-weight: 700; }
.lb-bid.is-chosen { border-color: var(--brand-500); color: var(--text); box-shadow: 0 0 0 1px var(--brand-soft); }
.lb-bid.is-chosen .lb-bid-score { color: var(--brand-500); }

.lb-scene-caption { display: flex; align-items: center; gap: 0.6rem; margin: 1.25rem 0 0; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lb-scene-caption-no { color: var(--brand-500); font-weight: 700; }

.lb-story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lb-story.is-live .lb-step { opacity: 0.5; transition: opacity 0.35s ease, border-color 0.35s ease; }
.lb-story.is-live .lb-step.is-active { opacity: 1; border-color: var(--border-strong); }
@media (min-width: 1024px) { .lb-story-steps { padding: 4vh 0 36vh; gap: 38vh; } }   /* 38vh: the chapter windows of lowbid-landing.js must not overlap; 36vh: the last chapter ends while the scene is still pinned */
@media (prefers-reduced-motion: reduce) { .lb-story.is-live .lb-step { transition: none; } }

/* ====== Receipt (escrow panel head, landing hero): always rendered inside .theme-coffre ====== */
.ui-receipt { padding: 1.1rem 1.25rem; background: var(--surface); color: var(--text); }
.ui-receipt-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    margin: -1.1rem -1.25rem 1rem; padding: 0.85rem 1.25rem; border-bottom: 1px dashed var(--border-strong);
}
.ui-receipt-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; color: var(--muted); }
.ui-receipt-title .ui-badge { font-family: var(--font-sans); }
.ui-receipt-sub { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.ui-receipt-amount { margin: 0.35rem 0 0.15rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.75rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; overflow-wrap: anywhere; }
.ui-receipt-amount + .ui-receipt-sub { margin-bottom: 0.25rem; }
.ui-receipt-unit { font-size: 0.875rem; letter-spacing: 0; color: var(--brand-500); font-weight: 600; }
.ui-receipt-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 1rem 0 0; font-size: 0.8125rem; }
.ui-receipt-rows dt { color: var(--muted); padding: 0.55rem 0; border-top: 1px solid var(--divider); }
.ui-receipt-rows dd { margin: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; padding: 0.55rem 0 0.55rem 1rem; border-top: 1px solid var(--divider); color: var(--text); font-variant-numeric: tabular-nums; }
.ui-receipt-rows dd.flex { padding-block: 0.3rem; }
.ui-receipt-card { padding: 0; overflow: hidden; }
.ui-receipt-card:hover { border-color: var(--border); box-shadow: none; }
.ui-receipt-body { padding: 1.1rem 1.25rem 1.25rem; }
.ui-receipt-body > :first-child { margin-top: 0; }
.lb-step { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.35rem; min-height: 15rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); }
.lb-step.is-signal { background: var(--brand-500); color: var(--brand-ink); }
.lb-step-head { display: flex; justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-meta); }
.lb-step-head span + span { opacity: 0.7; }
.lb-step-title { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.03em; margin: 2.25rem 0 0.5rem; }
.lb-step-desc { font-size: var(--text-body); line-height: 1.55; margin: 0; opacity: 0.85; }
.lb-step-call { align-self: flex-start; margin-top: auto; padding: 0.25rem 0.5rem; border: 1px solid currentColor; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--text-meta); opacity: 0.85; }
.lb-step-desc + .lb-step-call { margin-top: 1.25rem; }
.lb-hero-tagline { display: block; margin-bottom: 0.4rem; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }

/* ====== Landing: the five chapters under the story track (templates/core/landing.html, [data-chapter]) ======
   01 price (.lb-prices table + ol.lb-rules › .lb-rule-no / .lb-rule-desc / code.lb-formula) · 02 sponsorship
   (ol.lb-loop + .lb-cand example) · 03 security (ol.lb-guards › li.lb-guard, CSS-counted, › .lb-guard-text +
   code.lb-guard-chip) · 04 composed (ol.lb-bricks › li.lb-brick(.is-mint), CSS-counted) · 05 money path
   (ol.lb-path[--steps] › li.lb-path-step(.is-final) › .lb-path-who / h3 / p / code.lb-path-call) ·
   .lb-close (tagline, the hero CTA again, meta). Ledger lines, no boxes: a heavy --rule on top of each list,
   --divider between the lines; the Signal mint marks money and the chosen / final state only. */
.lb-chapter { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .lb-chapter { margin-top: 5rem; padding-top: 5rem; } }
.lb-chapter-head { display: grid; gap: 1rem; max-width: 60rem; margin-bottom: 2.25rem; }
.lb-chapter-head .lb-kicker { margin: 0; }
.lb-chapter-title { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; max-width: 22ch; color: var(--text); overflow-wrap: anywhere; }
.lb-lede { margin: 0; max-width: 62ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }
.lb-chapter-sub { margin: 1.75rem 0 0.75rem; font-size: 1.35rem; line-height: 1.25; font-weight: 750; letter-spacing: -0.03em; color: var(--text); max-width: 26ch; }
.lb-chapter-foot { margin: 2rem 0 0; max-width: 62ch; font-size: var(--text-body); line-height: 1.55; color: var(--muted); }
.lb-chapter-foot strong { color: var(--text); }
.lb-chapter .ui-kpi-band { margin-top: 2.5rem; }
.lb-chapter.ui-section .ui-section-title { font-size: 1.3rem; letter-spacing: -0.02em; }
.lb-chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .lb-chapter-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 4rem; } }

/* 01 · the worked example (a ledger table, full width so .rcard keeps it a table from 720px) then the four rules */
.lb-prices-flow { display: grid; gap: 2.5rem; }
.lb-prices thead th { border-bottom: 1px solid var(--rule); }
.lb-prices th:first-child, .lb-prices td:first-child { padding-inline-start: 0; }
.lb-prices th:last-child, .lb-prices td:last-child { padding-inline-end: 0; }
.lb-prices tbody tr:hover { background: transparent; }
.lb-prices-agreed { font-weight: 600; color: var(--brand-500); }
.lb-prices-refused td { color: var(--muted); }
.lb-prices-refused s { text-decoration-color: var(--error); }
.lb-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lb-rules li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 0.5rem; padding: 1rem 0; border-bottom: 1px solid var(--divider); }
@media (min-width: 768px) {
    .lb-rules.is-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
    .lb-rules.is-2col li { padding: 1.25rem 0; }
}
.lb-rule-no { padding-top: 0.2rem; font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 700; color: var(--brand-500); }
.lb-rules strong { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text); }
.lb-rule-desc { display: block; margin-top: 0.3rem; font-size: var(--text-body); line-height: 1.55; color: var(--muted); }
.lb-formula { display: block; margin-top: 0.7rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.lb-formula b { font-weight: 600; color: var(--brand-500); }
.lb-formula span { display: block; color: var(--muted); }

/* 02 · the loop (three stations on one rule) and a candidate row as the example */
.lb-loop { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lb-loop li { display: inline-flex; align-items: center; gap: 0.5rem; }
.lb-loop li + li::before { content: ""; width: 1.5rem; height: 1px; background: var(--border-strong); }
.lb-loop li:last-child { color: var(--warning); }
.lb-keys { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; font-size: var(--text-body); color: var(--text); }
.lb-keys li { display: inline-flex; align-items: center; }
.lb-keys li + li::before { content: "·"; margin: 0 0.6rem; color: var(--brand-500); font-weight: 700; }
.lb-cand { padding: 1.4rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.lb-cand-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.lb-cand-name { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; color: var(--text); }
.lb-cand-msg { margin: 0.9rem 0; font-size: var(--text-body); line-height: 1.55; color: var(--muted); }
.lb-cand .ui-netquote { margin-top: 0.75rem; font-size: var(--text-body); }

/* 03 · one ledger line per guard: number, title + text, the proof as a mono chip (right-aligned from 1024px) */
.lb-guards { list-style: none; margin: 0; padding: 0; counter-reset: guard; border-top: 1px solid var(--rule); }
.lb-guard { counter-increment: guard; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.6rem 0.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--divider); }
.lb-guard::before { content: "0" counter(guard); grid-row: 1 / span 2; padding-top: 0.25rem; font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 700; color: var(--brand-500); }
.lb-guard-text { min-width: 0; }
.lb-guard-text h3 { margin: 0 0 0.35rem; font-size: 1.1rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.3; color: var(--text); }
.lb-guard-text p { margin: 0; max-width: 58ch; font-size: var(--text-body); line-height: 1.6; color: var(--muted); }
.lb-guard-chip { grid-column: 2; justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.35rem 0.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.lb-guard-chip b { font-weight: 600; color: var(--text); }
.lb-guard-chip .is-mint { color: var(--brand-500); }
.lb-guard-chip .is-ok { color: var(--success); }
.lb-guard-chip .is-bad { color: var(--error); }
.lb-guard-chip i { font-size: 0.85em; }
@media (min-width: 1024px) {
    .lb-guard { grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 22rem); column-gap: 1.5rem; align-items: start; }
    .lb-guard::before { grid-row: auto; }
    .lb-guard-chip { grid-column: 3; justify-self: end; margin-top: 0.2rem; }
}

/* 04 · the building blocks: flat tiles, a rule on top, numbered by CSS (direct mode skips two) */
.lb-bricks { list-style: none; margin: 0; padding: 0; counter-reset: brick; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
@media (min-width: 640px) { .lb-bricks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lb-bricks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
.lb-brick { counter-increment: brick; min-width: 0; padding-top: 0.85rem; border-top: 1px solid var(--border-strong); }
.lb-brick::before { content: "0" counter(brick); display: block; margin-bottom: 0.6rem; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--muted); }
.lb-brick strong { display: block; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.lb-brick span { display: block; margin-top: 0.3rem; font-size: var(--text-body); line-height: 1.5; color: var(--muted); }
.lb-brick.is-mint { border-top-color: var(--brand-500); }
.lb-brick.is-mint::before, .lb-brick.is-mint strong { color: var(--brand-500); }

/* 05 · one column per signature, the payout framed in mint */
.lb-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .lb-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .lb-path { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); } }
.lb-path-step { display: flex; flex-direction: column; min-width: 0; min-height: 10rem; padding-top: 1rem; border-top: 1px solid var(--border-strong); }
.lb-path-who { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--muted); }
.lb-path-step h3 { margin: 0.9rem 0 0.4rem; font-size: 1.3rem; font-weight: 750; letter-spacing: -0.03em; color: var(--text); }
.lb-path-step p { margin: 0; font-size: var(--text-body); line-height: 1.55; color: var(--muted); }
.lb-path-call { align-self: flex-start; margin-top: auto; padding-top: 1rem; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--muted); }
.lb-path-step.is-final { border-top-color: var(--brand-500); }
.lb-path-step.is-final .lb-path-who, .lb-path-step.is-final h3, .lb-path-step.is-final .lb-path-call { color: var(--brand-500); }

/* the closing band */
.lb-close { display: grid; gap: 1.5rem; justify-items: start; margin-top: 5rem; padding: 3.5rem 0 1.5rem; border-top: 1px solid var(--rule); }
.lb-close-tagline { margin: 0; max-width: 20ch; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--text); }
.lb-close-meta { margin: 0; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--muted); }

/* ====== Task board: score bar, candidate rows, project cards, kanban, star rating ====== */
.ui-scorebar {
    display: flex; flex: none; width: 160px; max-width: 45vw; height: 9px; overflow: hidden; background: var(--surface-soft);
    /* ten blocks: the bar is cut into cells by a mask, the segments below fill them */
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
    mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
.ui-scorebar-seg { display: block; height: 100%; min-width: 0; transition: width 0.25s ease; }
.ui-scorebar-seg.is-history { background: var(--brand-500); }
.ui-scorebar-seg.is-rating  { background: var(--secondary-500); }
.ui-scorebar-seg.is-skills  { background: var(--success); }
/* Legend swatch under the candidates list: same colours as the segments, square like the rest. */
.ui-scorebar-key { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 1px; vertical-align: middle; }
.ui-scorebar-key.is-history { background: var(--brand-500); }
.ui-scorebar-key.is-rating  { background: var(--secondary-500); }
.ui-scorebar-key.is-skills  { background: var(--success); }
.cand-row { align-items: flex-start; padding-block: 0.9rem; transition: background 0.2s ease, opacity 0.2s ease; }
.cand-row .ui-rank { margin-top: 0.05rem; }
.cand-row.is-chosen { background: var(--brand-soft); border-radius: var(--radius-sm); padding-inline: 0.6rem; border-bottom-color: transparent; }
.cand-row.is-chosen .ui-rank { background: var(--brand-500); color: var(--brand-ink); }
.cand-row.is-rejected { opacity: 0.55; }
.cand-row.is-rejected:hover { opacity: 0.85; }
/* Narrow rows: the text keeps at least 13rem and the Choose button wraps under it, pushed to the end. */
.cand-row { flex-wrap: wrap; }
.cand-row > .flex-1 { flex-basis: 13rem; }
.cand-row > [data-choose] { margin-inline-start: auto; }
.project-card { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.project-card:hover { transform: translateY(-1px); }

/* Kanban: 4 columns on wide screens, horizontal snap-scroll of full-width columns under 640px of CONTAINER width. */
.kanban-wrap { container-type: inline-size; container-name: kanban; width: 100%; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.kanban-col { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 0.25rem 0; }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.25rem; }
.kanban-col-title { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-size: var(--text-body); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.kanban-col-hint { margin: -0.25rem 0 0; padding: 0 0.25rem; }
.kanban-count { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 600; color: var(--text); padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.kanban-cards { display: flex; flex-direction: column; gap: 0.6rem; }
.kanban-card { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.85rem; }
.kanban-card.is-applied { border-color: var(--ink); }
.kanban-card-title { margin: 0; font-size: var(--text-body); font-weight: 600; line-height: 1.35; }
.kanban-empty { padding: 1.1rem 0.75rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.ui-dot.is-open { color: var(--info); } .ui-dot.is-taken { color: var(--brand-500); } .ui-dot.is-delivered { color: var(--warning); } .ui-dot.is-paid { color: var(--success); }
@container kanban (max-width: 1023px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container kanban (max-width: 639px) {
    /* One full-width column at a time, horizontal snap-scroll between them (tables never scroll sideways; a kanban may). */
    .kanban { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .kanban-col { flex: 0 0 86%; scroll-snap-align: start; }
}

/* Star rating: 5 radios, the labels are the stars (keyboard-friendly, 44px targets). */
.ui-stars { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.ui-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-stars label { display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.5rem; color: var(--border-strong); cursor: pointer; border-radius: var(--radius-sm); transition: color 0.15s ease, transform 0.15s ease; }
.ui-stars label:hover, .ui-stars label:hover ~ label, .ui-stars input:checked ~ label { color: var(--icon-accent); }
.ui-stars label:hover { transform: scale(1.1); }
.ui-stars input:focus-visible + label { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ====== Payments: the escrow chain (one block per on-chain step) + live balance ====== */
.ui-stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.35rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.ui-step {
    min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.5rem 0.55rem;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--muted);
}
.ui-step-dot { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.85; }
.ui-step.is-done { background: var(--brand-500); border: 1px solid var(--brand-500); color: var(--brand-ink); }
.ui-step.is-current { border: 1px solid var(--ink); color: var(--text); }
.ui-step.is-current .ui-step-dot::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-inline-end: 0.3rem; border-radius: 1px; background: var(--brand-500); box-shadow: 0 0 0 1px var(--ink); animation: lb-blink 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.ui-step-label { font-size: 0.72rem; line-height: 1.2; font-weight: 650; overflow-wrap: anywhere; }
.ui-balance { display: inline-block; transition: color 0.3s ease, transform 0.3s ease; }
.ui-balance.is-bumped { color: var(--success); transform: scale(1.12); }

/* =====================================================================================
   v2 component layer. Everything below is theme-token driven like the rest of the file.
   Markup contracts are documented in docs/FRONTEND.md; the JS counterparts live in lowbid-ui.js.
   ===================================================================================== */

/* ====== Focus ring (keyboard only) ====== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none; box-shadow: 0 0 0 3px var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ====== Section title (an h2 above a grid of cards) ====== */
.ui-section { margin-top: 2rem; }
.ui-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.ui-section-title { font-size: var(--text-heading); font-weight: 700; color: var(--text); margin: 0; display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.005em; }
.ui-section-title i { color: var(--muted); font-size: 0.8em; }
.ui-section-sub { font-size: var(--text-meta); color: var(--muted); margin: 0.15rem 0 0; }

/* ====== Wallet chip: pixel identicon + short address (+ copy / profile link) ======
   <span class="ui-wallet" data-identicon="G…"><span class="ui-identicon"></span><span class="ui-wallet-addr">GABC…WXYZ</span></span>
   lowbid-ui.js paints a mirrored 5×5 pixel grid derived from the address as the background-image. */
.ui-identicon {
    flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-xs); overflow: hidden;
    background-color: var(--surface-soft); background-size: 100% 100%; image-rendering: pixelated;
}
.ui-identicon.is-lg { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); }
.ui-identicon.is-xl { width: 4rem; height: 4rem; border-radius: var(--radius-sm); }
.ui-wallet { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--text); text-decoration: none; }
a.ui-wallet:hover .ui-wallet-addr { text-decoration: underline; }
.ui-wallet-addr { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.ui-wallet-name { font-weight: 600; font-size: var(--text-body); }
.ui-wallet.is-stacked { align-items: center; }
.ui-wallet-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ui-wallet-text .ui-wallet-addr { font-size: var(--text-meta); color: var(--muted); }
.ui-page-title .ui-title { min-width: 0; overflow-wrap: anywhere; }
.ui-page-title .ui-wallet { gap: 0.75rem; }
.ui-page-title .ui-wallet-name { font-size: inherit; font-weight: inherit; }
.ui-copy-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.8rem; font-family: inherit;
}
.ui-copy-btn:hover { color: var(--text); background: var(--surface-soft); }

/* ====== Modal (native <dialog>, top layer) ======
   <dialog class="ui-modal"><form method="dialog" class="ui-modal-card">…</form></dialog> */
.ui-modal { border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.ui-modal::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ui-modal-card {
    width: min(440px, calc(100vw - 2rem)); margin: 0; padding: 1.3rem 1.35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop); color: var(--text);
    animation: lb-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-modal[open] { display: grid; place-items: center; }
.ui-modal-icon {
    width: 2.6rem; height: 2.6rem; border-radius: var(--radius-sm); display: grid; place-items: center; margin-bottom: 0.85rem;
    background: var(--surface-soft); color: var(--text); font-size: 1.05rem;
}
.ui-modal.is-danger .ui-modal-icon { background: var(--error-soft); color: var(--error); }
.ui-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.ui-modal-body { color: var(--muted); font-size: var(--text-body); line-height: 1.55; margin: 0; white-space: pre-line; }
.ui-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }
@media (max-width: 480px) { .ui-modal-actions { flex-direction: column-reverse; } .ui-modal-actions .ui-btn { width: 100%; } }
@keyframes lb-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ====== Dropdown menu (details-based, no JS needed to open; lowbid-ui.js closes on outside click / Esc) ======
   <details class="ui-menu"><summary class="ui-btn ui-btn-sm">…</summary><div class="ui-menu-panel">…</div></details> */
.ui-menu { position: relative; display: inline-block; }
.ui-menu > summary { list-style: none; cursor: pointer; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + 0.35rem); z-index: 60; min-width: 220px; padding: 0.35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
    animation: lb-modal-in 0.16s ease;
}
.ui-menu-panel.is-start { inset-inline-end: auto; inset-inline-start: 0; }
.ui-menu-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 40px; padding: 0 0.75rem; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--text); font: inherit; font-size: var(--text-body); text-align: start; cursor: pointer; text-decoration: none;
}
.ui-menu-item:hover { background: var(--surface-soft); }
.ui-menu-item.is-active { font-weight: 600; }
.ui-menu-item i { width: 1rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
.ui-menu-sep { height: 1px; background: var(--divider); margin: 0.3rem 0.25rem; }
.ui-menu-label { padding: 0.4rem 0.75rem 0.2rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }

/* ====== Toolbar (list pages: search · tabs · sort · count) ====== */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin-bottom: 1.1rem; }
.ui-toolbar-grow { flex: 1 1 220px; min-width: 0; }
.ui-toolbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
/* Search: a white pill with a round black magnifier button at its end (coutrio "Rechercher une activité") */
.ui-search { position: relative; display: flex; align-items: center; }
.ui-search .ui-input { border-radius: var(--radius-sm); min-height: 40px; padding-inline-start: 1rem; padding-inline-end: 3rem; }
.ui-search > i { position: absolute; inset-inline-start: 0.9rem; color: var(--muted); font-size: 0.8rem; pointer-events: none; }
.ui-search > i + .ui-input { padding-inline-start: 2.3rem; }
.ui-search-btn {
    position: absolute; inset-inline-end: 0.3rem; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center;
    background: var(--ink); color: var(--on-ink); border: none; cursor: pointer; font-size: 0.72rem; font-family: inherit;
}
.ui-search-btn:hover { background: var(--ink-hover); }
.ui-search .ui-search-clear {
    position: absolute; inset-inline-end: 2.4rem; width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center;
    background: none; border: none; color: var(--muted); cursor: pointer;
}
.ui-search .ui-search-clear:hover { color: var(--text); background: var(--surface-soft); }
.ui-search:has(.ui-search-clear) .ui-input { padding-inline-end: 4.6rem; }
.ui-select-inline { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; }
.ui-select-inline .ui-select { min-height: 38px; width: auto; padding-inline-end: 2rem; font-weight: 500; border-radius: var(--radius-sm); }
@media (max-width: 480px) { .ui-toolbar-end { width: 100%; margin-inline-start: 0; justify-content: space-between; flex-wrap: wrap; } .ui-toolbar-end [data-result-count] { white-space: normal; } }

/* Chip row (tag filters) — bordered pills that wrap at every width (nothing hidden off-screen) */
.ui-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 0.25rem; }
.ui-chip-row > * { flex: none; }
.ui-chip-row .ui-tag { background: var(--surface); border-color: var(--border); min-height: 32px; padding-inline: 0.8rem; font-weight: 600; }
.ui-chip-row .ui-tag.is-match { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ====== Pager ====== */
.ui-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--divider); }
.ui-pager-count { font-size: var(--text-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-pager-nav { display: flex; align-items: center; gap: 0.35rem; }
.ui-pager-btn, .ui-pager-num {
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 36px; padding: 0 0.7rem; border-radius: var(--radius-sm);
    font-size: var(--text-meta); font-weight: 600; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.ui-pager-btn:hover, .ui-pager-num:hover { border-color: var(--border-strong); }
.ui-pager-num.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ui-pager-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.ui-pager-gap { min-width: 1.5rem; text-align: center; }
@media (max-width: 480px) { .ui-pager-num, .ui-pager-gap { display: none; } }

/* ====== Skeleton (loading placeholders; aria-hidden) ====== */
.ui-skeleton { position: relative; overflow: hidden; background: var(--surface-soft); border-radius: var(--radius-sm); min-height: 0.9rem; }
.ui-skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--border), transparent); animation: lb-shimmer 1.4s infinite;
}
.ui-skeleton-line { height: 0.8rem; margin-bottom: 0.5rem; }
.ui-skeleton-line.w-1\/2 { width: 50%; } .ui-skeleton-line.w-1\/3 { width: 33%; } .ui-skeleton-line.w-3\/4 { width: 75%; }
@keyframes lb-shimmer { to { transform: translateX(100%); } }

/* ====== Timeline (activity, escrow events) ======
   <ol class="ui-timeline"><li class="ui-timeline-item is-brand"><span class="ui-timeline-dot"></span><div class="ui-timeline-body">…</div></li></ol> */
.ui-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ui-timeline::before { content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem; inset-inline-start: 0.55rem; width: 2px; background: var(--divider); }
.ui-timeline-item { position: relative; display: flex; gap: 0.85rem; padding: 0.45rem 0 0.45rem 0; min-height: 2.4rem; }
.ui-timeline-dot {
    flex: none; width: 1.2rem; height: 1.2rem; border-radius: var(--radius-xs); margin-top: 0.15rem; position: relative; z-index: 1;
    background: var(--surface); border: 2px solid var(--border-strong); display: grid; place-items: center; font-size: 0.5rem; color: var(--muted);
}
.ui-timeline-item.is-brand .ui-timeline-dot { border-color: var(--brand-500); background: var(--brand-500); color: var(--brand-ink); }
.ui-timeline-item.is-ok .ui-timeline-dot { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.ui-timeline-item.is-danger .ui-timeline-dot { border-color: var(--error); background: var(--error-soft); color: var(--error); }
.ui-timeline-item.is-muted { opacity: 0.6; }
.ui-timeline-body { flex: 1; min-width: 0; font-size: var(--text-body); line-height: 1.4; }
.ui-timeline-title { color: var(--text); font-weight: 500; }
.ui-timeline-time { font-size: var(--text-meta); color: var(--muted); }

/* ====== "What's next" card (dashboard to-do + detail hint) ======
   Tone via .act (viewer must act) / .wait (someone else) / .done */
.ui-next-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: inherit; text-decoration: none;
    --next-tone: var(--border-strong);
}
.ui-next-card.act { background: var(--brand-soft); border-color: var(--brand-500); }
.ui-next-card.act { --next-tone: var(--ink); }
.ui-next-card.wait { --next-tone: var(--info); }
.ui-next-card.done { --next-tone: var(--success); }
a.ui-next-card:hover { border-color: var(--hover-border); }
.ui-next-kicker { display: flex; align-items: center; gap: 0.4rem; font-size: 0.625rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ui-next-dot { width: 0.5rem; height: 0.5rem; border-radius: 1px; flex: none; background: var(--next-tone); }
.ui-next-headline { font-size: var(--text-body); font-weight: 600; color: var(--text); line-height: 1.35; margin: 0; }
.ui-next-body { margin: 0; font-size: var(--text-meta); color: var(--muted); }
.ui-next-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ui-next-list { display: grid; gap: 0.6rem; }

/* ====== Progress bar ====== */
.ui-progress { height: 6px; border-radius: 1px; background: var(--surface-soft); border: 1px solid var(--soft-border); overflow: hidden; }
.ui-progress > span { display: block; height: 100%; background: var(--brand-500); border-radius: 0; transition: width 0.3s ease; }
.ui-progress.is-ok > span { background: var(--success); }

/* ====== Sparkline (price history; SVG built by lowbid-ui.js from data-points) ====== */
.ui-sparkline { display: block; width: 100%; height: 56px; overflow: visible; }
.ui-sparkline .sl-line { fill: none; stroke: var(--brand-500); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-sparkline .sl-area { fill: var(--brand-soft); }
.ui-sparkline .sl-dot { fill: var(--brand-500); stroke: var(--surface); stroke-width: 2; }
.ui-sparkline .sl-cap { stroke: var(--border-strong); stroke-dasharray: 3 4; stroke-width: 1; }
.ui-sparkline-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--text-meta); color: var(--muted); margin-top: 0.25rem; }

/* ====== Stat rows (facts): label left, value right, hairlines (coutrio "Statistiques de voyage") ====== */
.ui-facts { display: grid; grid-template-columns: auto 1fr; gap: 0; align-items: center; margin: 0; font-size: var(--text-body); }
.ui-facts dt { color: var(--muted); font-size: var(--text-meta); font-weight: 500; padding: 0.6rem 0; border-bottom: 1px solid var(--divider); }
.ui-facts dd { margin: 0; text-align: end; color: var(--text); font-weight: 700; min-width: 0; overflow-wrap: anywhere; padding: 0.6rem 0 0.6rem 1rem; border-bottom: 1px solid var(--divider); font-variant-numeric: tabular-nums; }
.ui-facts dt:last-of-type, .ui-facts dd:last-of-type { border-bottom: none; }

/* ====== Live badge (blinking brand dot) ====== */
.ui-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-meta); color: var(--muted); font-weight: 500; }
.ui-live { font-family: var(--font-mono); }
.ui-live-dot { width: 0.45rem; height: 0.45rem; border-radius: 1px; background: var(--brand-500); box-shadow: 0 0 0 1px var(--ink); animation: lb-blink 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes lb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ====== Sticky actions: static on wide screens, a white bottom bar under 640px ======
   Wrap the page/form in .ui-form-scope so the container query resolves. */
.ui-form-scope { container-type: inline-size; }
.ui-sticky-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; padding: 0.75rem 0 0; }
@container (max-width: 639.98px) {
    .ui-sticky-actions {
        position: sticky; bottom: calc(var(--tabbar-h, 0px)); z-index: 30;
        margin: 0.75rem -0.25rem 0; padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: var(--shadow-pop);
    }
    .ui-sticky-actions > a, .ui-sticky-actions > button { flex: 1 1 auto; }
}

/* ====== Mobile tab bar (fixed bottom, < 1024px, signed-in only) — white, active tab = black pill ====== */
:root { --tabbar-h: 0px; }
.lb-tabbar { display: none; }
@media (max-width: 1023.98px) {
    body.has-tabbar { --tabbar-h: 60px; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    body.has-tabbar .lb-tabbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
        min-height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface); border-top: 1px solid var(--border);
    }
    body.has-tabbar .lb-toast-container { bottom: auto; }
}
.lb-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 56px; padding: 0.35rem 0.2rem;
    color: var(--muted); text-decoration: none; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.01em;
}
.lb-tab i { font-size: 0.95rem; width: 3rem; height: 1.7rem; border-radius: var(--radius-sm); display: grid; place-items: center; }
.lb-tab.is-primary i { background: var(--brand-500); color: var(--brand-ink); }
.lb-tab.is-active { color: var(--text); }
.lb-tab.is-active i { background: var(--brand-soft); color: var(--brand-500); }

/* ====== Stat tile with icon + trend (dashboard) ====== */
.ui-kpi-tile.is-link:hover { box-shadow: var(--hover-shadow), inset 0 0 0 1px var(--hover-border); }  /* the tile has no border */
.ui-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ui-kpi-icon { width: 1.9rem; height: 1.9rem; border-radius: var(--radius-xs); display: grid; place-items: center; background: var(--surface-soft); color: var(--text); font-size: 0.78rem; }
.ui-kpi-band.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .ui-kpi-band.is-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* ====== Two-column page body (main + aside) with container-aware stacking ====== */
.ui-split { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ui-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .ui-split.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-split > * { min-width: 0; }
.ui-stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* ====== Segmented control as radio group (duration picker) ====== */
.seg-radio { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.seg-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-radio label {
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 0.9rem; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: var(--text-body); font-weight: 500;
}
.seg-radio input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 600; }
.seg-radio input:focus-visible + label { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ====== Table (plain, inside .rcard) tweaks ====== */
.rcard td .ui-badge + .ui-badge { margin-inline-start: 0.25rem; }
.rcard tbody tr.is-attn { background: var(--brand-soft); }

/* ====== Trust network: badges (one hop through the wallets you follow), candidate highlight, profile panel, dashboard feed.
   Never Signal yellow here: a network signal is a social hint, not money. Strong = info tint (someone you follow
   recommends), weak = muted dashed chip (someone you follow follows), following = neutral hairline. ====== */
.ui-netbadges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; vertical-align: middle; }
.ui-netbadge { border: 1px solid transparent; max-width: 100%; }
.ui-netbadge i { font-size: 0.9em; }
/* Inside a page title (profile header) the h1's display tracking / weight must not leak into the chip. */
.ui-page-title .ui-netbadge { letter-spacing: normal; font-weight: 600; }
.ui-netbadge.is-strong    { background: var(--info-soft); border-color: var(--info); color: var(--ui-badge-info-text); }
.ui-netbadge.is-weak      { background: var(--surface-soft); border-color: var(--border-strong); border-style: dashed; color: var(--muted); }
.ui-netbadge.is-following { background: transparent; border-color: var(--border); color: var(--text); }
/* Candidate rows: a light hint only (inset left rule, faint tint), no padding / layout change; .is-chosen keeps its fill. */
.cand-row.is-network { box-shadow: inset 2px 0 0 var(--border-strong); }
.cand-row.is-network-strong { box-shadow: inset 2px 0 0 var(--info); }
.cand-row.is-network-strong:not(.is-chosen) { background: var(--info-soft); }
/* Sponsorship on a candidate row: the sponsor's quote (one hop), the Sponsor toggle and its inline form. */
.ui-netquote { margin: 0.35rem 0 0; padding-inline-start: 0.6rem; border-inline-start: 2px solid var(--info); color: var(--muted); font-size: var(--text-meta); font-style: italic; line-height: 1.45; overflow-wrap: anywhere; }
.ui-netquote .ui-meta { font-style: normal; }
[data-sponsor].is-sponsoring { border-color: var(--info); color: var(--ui-badge-info-text); }
.ui-sponsor-form { margin-top: 0.6rem; }
.ui-sponsor-form .ui-textarea { min-height: 72px; }
.ui-sponsor-actions { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

/* Profile block (#network-panel): counters row · action buttons · recommend form (textarea + live n / 280 counter). */
.ui-network-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.ui-network-panel > .ui-panel-head { margin-bottom: 0; }
.ui-network-counts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0 0 0.75rem; list-style: none; border-bottom: 1px solid var(--divider); }
.ui-network-count { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ui-network-count-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.ui-network-count-label { font-size: var(--text-meta); color: var(--muted); font-weight: 500; }
.ui-network-known { margin: 0; font-size: var(--text-meta); color: var(--muted); line-height: 1.45; }
.ui-network-known strong { color: var(--text); font-weight: 600; }
.ui-network-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ui-network-actions .ui-btn { min-height: 44px; }
.ui-network-actions [hidden] { display: none; }
[data-follow].is-following { border-color: var(--border-strong); color: var(--text); }
[data-follow].is-following i { color: var(--success); }
.ui-network-form { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.ui-network-form[hidden] { display: none; }
.ui-network-form .ui-textarea { min-height: 96px; }
.ui-network-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ui-network-counter { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-meta); color: var(--muted); }
.ui-network-counter.is-near { color: var(--warning); }
.ui-network-counter.is-over { color: var(--error); font-weight: 600; }
.ui-network-quote { margin: 0.25rem 0 0; padding-inline-start: 0.6rem; border-inline-start: 2px solid var(--border-strong); color: var(--text); font-size: var(--text-body); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }

/* Dashboard block (#network-feed "In your network"): hairline-separated items, an icon tile per kind. */
.ui-network-feed { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-network-feed-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.25rem; min-height: 48px; border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none; }
.ui-network-feed-item:last-child { border-bottom: none; }
a.ui-network-feed-item:hover { background: var(--row-hover); }
.ui-network-feed-icon { flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-sm); display: inline-grid; place-items: center; background: var(--surface-soft); color: var(--text); font-size: 0.8rem; }
.ui-network-feed-item.is-recommendation .ui-network-feed-icon { background: var(--info-soft); color: var(--ui-badge-info-text); }
.ui-network-feed-body { flex: 1; min-width: 0; font-size: var(--text-body); line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.ui-network-feed-time { font-size: var(--text-meta); color: var(--muted); }
.ui-network-feed-item .ui-network-quote { font-size: var(--text-meta); color: var(--muted); }

/* ====== Print ====== */
@media print { .lb-nav, .lb-tabbar, .lb-toast-container, .ui-sticky-actions, footer { display: none !important; } }

@media (prefers-reduced-motion: reduce) { .ui-modal-card, .ui-menu-panel, .ui-skeleton::after, .ui-live-dot, .ui-step.is-current .ui-step-dot::before, .lb-tape-track { animation: none; } }

/* ====== External user-supplied link (components/ext_link.html) ====== */
.ui-ext-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; max-width: 100%; }
.ui-ext-label { color: var(--muted); font-size: var(--text-meta); font-weight: 500; }
.ui-ext-anchor { display: flex; flex-direction: column; min-width: 0; max-width: 100%; color: var(--text); text-decoration: none; min-height: 44px; justify-content: center; }
.ui-ext-anchor:hover .ui-link-host { text-decoration: underline; text-decoration-color: var(--text); }
.ui-ext-anchor:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--radius-sm); }
.ui-link-host { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.15em; }
.ui-link-host i { font-size: 0.65em; color: var(--icon-accent); vertical-align: 0.15em; }
.ui-link-url { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--font-mono); font-size: var(--text-meta); }
.ui-link-warn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--text-meta); font-weight: 600; }
.ui-ext-link.is-sm .ui-ext-anchor { min-height: 0; }
.ui-ext-link.is-sm .ui-link-host { font-size: var(--text-body); }
.ui-ext-link.is-untrusted .ui-link-host i { color: var(--warning); }