/* _content/Ayva.Integrations.Mercury/Components/MercuryAccountsCard.razor.rz.scp.css */
/* MercuryAccountsCard — the treasury role picker.

   Card shell, buttons and the scrolling table frame come from the panel's
   shared ::deep vocabulary (MercuryPanel.razor.css); this file owns the radio
   group, which nothing else on the panel draws. Tokens only. */

.mercury-roles[b-5urov3kq89] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    min-width: 0;
}

/* The whole label is the target, not just the 13px dot — a role change is a
   deliberate act and it should not need aim. */
.mercury-role[b-5urov3kq89] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: var(--tap-target-min);
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    white-space: nowrap;
    cursor: pointer;
}

.mercury-role:hover[b-5urov3kq89] {
    color: var(--text-primary);
}

.mercury-role input[b-5urov3kq89] {
    accent-color: var(--accent-color);
    cursor: pointer;
}

.mercury-role input:focus-visible[b-5urov3kq89] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.mercury-role input:disabled[b-5urov3kq89],
.mercury-role:has(input:disabled)[b-5urov3kq89] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* What a read-only actor sees in the role column: the answer, not a control
   they cannot use. */
.mercury-role-value[b-5urov3kq89] {
    color: var(--text-primary);
    font-size: var(--text-2xs);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .mercury-roles[b-5urov3kq89] {
        flex-direction: column;
        gap: var(--space-2xs);
    }
}
/* _content/Ayva.Integrations.Mercury/Components/MercuryLifetimeCard.razor.rz.scp.css */
/* MercuryLifetimeCard — the 45-day countdown strip.

   Chips and fact lists come from the panel's shared ::deep vocabulary
   (MercuryPanel.razor.css). Tokens only. */

.mercury-countdown[b-hzq4d7drsf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.mercury-countdown-sentence[b-hzq4d7drsf] {
    flex: 1 1 18rem;
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .mercury-countdown[b-hzq4d7drsf] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}
/* _content/Ayva.Integrations.Mercury/Components/MercuryTokenCard.razor.rz.scp.css */
/* MercuryTokenCard — the credential card's own strip.

   The card shell, chips, buttons, fields and fact lists come from the panel's
   shared ::deep vocabulary (see MercuryPanel.razor.css); this file owns the
   "is a token stored?" line, which nothing else on the panel draws. Tokens
   only. */

.mercury-token-state[b-lfkkopakjb] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
}
/* _content/Ayva.Integrations.Mercury/Components/MercuryWebhookCard.razor.rz.scp.css */
/* MercuryWebhookCard — subscription state and the delivery table.

   Card shell, chips, buttons and the scrolling table frame come from the
   panel's shared ::deep vocabulary (MercuryPanel.razor.css). Tokens only. */

.mercury-webhook-state[b-r1y0qxodv2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.mercury-webhook-sentence[b-r1y0qxodv2] {
    flex: 1 1 18rem;
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .mercury-webhook-state[b-r1y0qxodv2] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}
/* _content/Ayva.Integrations.Mercury/Panels/MercuryPanel.razor.rz.scp.css */
/* MercuryPanel — the Mercury console inside the /coms shell.

   Framing and the shared card/chip vocabulary the five cards use. Tokens only;
   every colour, radius, spacing and timing comes from ayva-theme.css. */

.mercury-panel[b-8oyasrtyz8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    width: 100%;
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.mercury-panel-head[b-8oyasrtyz8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.mercury-panel-title-row[b-8oyasrtyz8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.mercury-panel-title[b-8oyasrtyz8] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mercury-panel-sub[b-8oyasrtyz8] {
    margin: 0;
    max-width: 68ch;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.mercury-panel-chip[b-8oyasrtyz8] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-md);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mercury-panel-chip-ok[b-8oyasrtyz8] {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-text);
}

.mercury-panel-chip-warn[b-8oyasrtyz8] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.mercury-panel-chip-bad[b-8oyasrtyz8] {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

/* ── States ────────────────────────────────────────────────────────────── */

.mercury-panel-centre[b-8oyasrtyz8] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-3xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.mercury-panel-fatal[b-8oyasrtyz8] {
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-lg);
    color: var(--error-text);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

/* Desktop-first, two explicit columns rather than auto-placement with spans:
   the left column is the workflow an operator moves DOWN (paste a token, then
   test it), and the right is what that workflow produced. Explicit columns keep
   that reading order true at every width instead of leaving it to the grid's
   packing order. */
.mercury-panel-cards[b-8oyasrtyz8] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-xl);
    min-width: 0;
}

.mercury-panel-column[b-8oyasrtyz8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
}

/* The accounts table needs the width more than the layout needs two columns. */
@media (max-width: 1200px) {
    .mercury-panel-cards[b-8oyasrtyz8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .mercury-panel[b-8oyasrtyz8] {
        gap: var(--space-lg);
    }

    .mercury-panel-title[b-8oyasrtyz8] {
        font-size: var(--text-xl);
    }

    .mercury-panel-cards[b-8oyasrtyz8],
    .mercury-panel-column[b-8oyasrtyz8] {
        gap: var(--space-lg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED CARD VOCABULARY

   The five cards draw the same card shell, chips, buttons, fact lists and
   tables. Those rules live HERE, once, behind ::deep — a scoped rule reaches
   its own component's elements only, so the alternative is five byte-identical
   copies that drift the first time one is touched. Each card's own .razor.css
   holds what is genuinely its own (the role picker, the countdown strip), and
   nothing in this block names a colour, radius or timing that is not a token.
   ═══════════════════════════════════════════════════════════════════════════ */

.mercury-panel[b-8oyasrtyz8]  .mercury-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-card-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-card-title {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-card-sub {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-width: 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-subhead-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.mercury-panel[b-8oyasrtyz8]  .mercury-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-md);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-chip-ok {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-chip-warn {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-chip-bad {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-chip-info {
    background: var(--info-color-10);
    border-color: var(--info-color-30);
    color: var(--info-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-chip-quiet {
    background: transparent;
    color: var(--text-muted);
}

/* ── Banners and refusals ──────────────────────────────────────────────── */

.mercury-panel[b-8oyasrtyz8]  .mercury-banner,
.mercury-panel[b-8oyasrtyz8]  .mercury-refusal {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-banner-warn,
.mercury-panel[b-8oyasrtyz8]  .mercury-refusal {
    background: var(--warning-color-5);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-banner-danger {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-refusal p,
.mercury-panel[b-8oyasrtyz8]  .mercury-banner p {
    margin: var(--space-2xs) 0 0;
}

/* A control that cannot proceed, with the reason in place of the button. */
.mercury-panel[b-8oyasrtyz8]  .mercury-step-blocked {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--warning-color-5);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-sm);
    color: var(--warning-text);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

/* Explanatory copy that is NOT a refusal — the steering paragraphs. Quiet on
   purpose: an operator who has read it once should be able to skip it. */
.mercury-panel[b-8oyasrtyz8]  .mercury-help {
    margin: 0;
    max-width: 68ch;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-refusal code,
.mercury-panel[b-8oyasrtyz8]  .mercury-banner code,
.mercury-panel[b-8oyasrtyz8]  .mercury-help code,
.mercury-panel[b-8oyasrtyz8]  .mercury-step-blocked code {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    overflow-wrap: anywhere;
}

/* ── Fields ────────────────────────────────────────────────────────────── */

.mercury-panel[b-8oyasrtyz8]  .mercury-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-lg);
    min-width: 0;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-field,
.mercury-panel[b-8oyasrtyz8]  .mercury-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-field-error {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--error-color-10);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-sm);
    color: var(--error-text);
    font-size: var(--text-2xs);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    line-height: 1.6;
}

/* A read-only field is a value to copy, not one to edit — the mono face is what
   stops an operator mis-reading an l for a 1 in a URL they are about to paste
   into a vendor console. ::deep because .mud-input-root belongs to
   MudTextField's own scope, never this component's (recurring bug class). */
.mercury-panel[b-8oyasrtyz8]  .mercury-copy .mud-input-root {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
}

/* ── Facts ─────────────────────────────────────────────────────────────── */

.mercury-panel[b-8oyasrtyz8]  .mercury-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-md) var(--space-lg);
    margin: 0;
    min-width: 0;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-fact-wide {
    grid-column: 1 / -1;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-fact dt {
    color: var(--text-muted);
    font-size: var(--text-4xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-fact dd {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-2xs);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-fact-warn {
    color: var(--warning-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-mono {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.mercury-panel[b-8oyasrtyz8]  .mercury-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    min-width: 0;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-button {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-xl);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-button:hover:not(:disabled) {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-button-primary {
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
    color: var(--accent-color-light);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-button-danger {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-button-quiet {
    min-height: auto;
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--text-4xs);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

/* Every wide table scrolls inside its OWN container — the panel body must never
   scroll horizontally (spec §9). */
.mercury-panel[b-8oyasrtyz8]  .mercury-table-scroll {
    overflow-x: auto;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-2xs);
}

.mercury-panel[b-8oyasrtyz8]  .mercury-table th {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: var(--text-4xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    vertical-align: top;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-table tr:last-child td {
    border-bottom: none;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-cell-strong {
    color: var(--text-primary);
    font-weight: 600;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-cell-quiet {
    color: var(--text-muted);
    white-space: nowrap;
}

/* A money column reads down, so the digits line up and the face is tabular —
   otherwise a proportional 1 makes two equal balances look different. */
.mercury-panel[b-8oyasrtyz8]  .mercury-cell-number {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-cell-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.mercury-panel[b-8oyasrtyz8]  .mercury-table-detail td {
    background: var(--bg-hover);
}

/* A column whose header is an action word nobody needs to read, but a screen
   reader does. */
.mercury-panel[b-8oyasrtyz8]  .mercury-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .mercury-panel[b-8oyasrtyz8]  .mercury-card {
        padding: var(--space-lg);
        gap: var(--space-md);
    }

    .mercury-panel[b-8oyasrtyz8]  .mercury-fields,
    .mercury-panel[b-8oyasrtyz8]  .mercury-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .mercury-panel[b-8oyasrtyz8]  .mercury-actions .mercury-button {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mercury-panel[b-8oyasrtyz8]  .mercury-button {
        transition: none;
    }
}