/* =============================================================================
   Prediction Markets — Global design system.

   Tokens are declared on :root so any component CSS can pull from a single
   palette. Component-scoped CSS (.razor.css files) should reference --pm-*
   tokens rather than re-declaring colours; they may declare their own scoped
   tokens (e.g. --fx-accent inside .fx-card) that DEFAULT to --pm-* but get
   overridden per-status (e.g. amber for live games).

   Primitive classes (.pm-page-header, .pm-banner, .pm-chip, .pm-modal-*,
   .pm-table, .pm-form-*) are opt-in utilities — components add them where
   they want a coherent look, and supplement with scoped CSS for the rest.
   ============================================================================= */

:root {
    /* Accent (anchored to FluentUI's accent so theme tints flow through) */
    --pm-accent:        var(--accent-fill-rest);
    --pm-accent-soft:   color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    --pm-accent-ghost:  color-mix(in srgb, var(--accent-fill-rest)  7%, transparent);
    --pm-accent-ink:    var(--accent-foreground-rest);

    /* Signal palette */
    --pm-pos:           #1f8a4c;
    --pm-neg:           #b42318;
    --pm-warn:          #c2740d;
    --pm-pos-soft:      color-mix(in srgb, #1f8a4c 14%, transparent);
    --pm-neg-soft:      color-mix(in srgb, #b42318 14%, transparent);
    --pm-warn-soft:     color-mix(in srgb, #c2740d 14%, transparent);
    --pm-pos-ghost:     color-mix(in srgb, #1f8a4c  7%, transparent);
    --pm-neg-ghost:     color-mix(in srgb, #b42318  7%, transparent);

    /* Inks */
    --pm-ink:           var(--neutral-foreground-rest);
    --pm-ink-soft:      color-mix(in srgb, var(--neutral-foreground-rest) 60%, transparent);
    --pm-ink-faint:     color-mix(in srgb, var(--neutral-foreground-rest) 38%, transparent);

    /* Surfaces */
    --pm-surface:       var(--neutral-layer-2);
    --pm-surface-deep:  var(--neutral-layer-1);
    --pm-surface-tint:  color-mix(in srgb, var(--neutral-foreground-rest) 2.5%, transparent);

    /* Hairlines */
    --pm-hairline:      var(--neutral-stroke-divider-rest);
    --pm-hairline-soft: color-mix(in srgb, var(--neutral-stroke-divider-rest) 50%, transparent);
    --pm-hairline-bold: var(--neutral-stroke-rest);

    /* Typography stacks. Reach for refined faces first; fall back to a
       hand-picked stack so the design holds whether or not Inter / Plex is
       installed locally. Numbers always reach for a true mono before fallback. */
    --pm-font-display:  "Inter Tight", "IBM Plex Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --pm-font-body:     "Inter", "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --pm-font-mono:     "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Radii */
    --pm-radius-sm:     4px;
    --pm-radius:        8px;
    --pm-radius-lg:     12px;

    /* Shadows */
    --pm-shadow-flat:   0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 16px -10px rgba(0, 0, 0, 0.14);
    --pm-shadow-pop:    0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root {
        --pm-pos:           #4ade80;
        --pm-neg:           #f87171;
        --pm-warn:          #fbbf24;
        --pm-pos-soft:      color-mix(in srgb, #4ade80 18%, transparent);
        --pm-neg-soft:      color-mix(in srgb, #f87171 18%, transparent);
        --pm-warn-soft:     color-mix(in srgb, #fbbf24 18%, transparent);
        --pm-pos-ghost:     color-mix(in srgb, #4ade80  9%, transparent);
        --pm-neg-ghost:     color-mix(in srgb, #f87171  9%, transparent);
        --pm-surface-tint:  color-mix(in srgb, #ffffff 3%, transparent);
        --pm-shadow-flat:   0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 22px -10px rgba(0, 0, 0, 0.45);
        --pm-shadow-pop:    0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    }
}

/* =============================================================================
   PAGE-LEVEL CHROME
   ============================================================================= */

.pm-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pm-hairline);
}

.pm-page-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pm-page-eyebrow {
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pm-accent-ink);
    line-height: 1;
}

.pm-page-title {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 1.55rem;
    font-weight: 650;
    letter-spacing: -0.014em;
    color: var(--pm-ink);
    line-height: 1.1;
    font-feature-settings: "ss01", "cv11";
}

.pm-page-subtitle {
    font-size: 0.85rem;
    color: var(--pm-ink-soft);
    line-height: 1.4;
    margin-top: 2px;
}

.pm-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* =============================================================================
   EYEBROW LABEL (small uppercase tracked text)
   ============================================================================= */

.pm-eyebrow {
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    line-height: 1;
}

.pm-eyebrow-accent { color: var(--pm-accent-ink); }
.pm-eyebrow-pos    { color: var(--pm-pos); }
.pm-eyebrow-neg    { color: var(--pm-neg); }
.pm-eyebrow-ink    { color: var(--pm-ink); }

/* =============================================================================
   BANNERS (page-level status strips)
   ============================================================================= */

.pm-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    border-radius: var(--pm-radius);
    font-size: 0.85rem;
    border: 1px solid var(--pm-hairline);
    background: var(--pm-surface-tint);
    color: var(--pm-ink);
    line-height: 1.3;
}

.pm-banner-ok {
    background: var(--pm-pos-soft);
    border-color: color-mix(in srgb, var(--pm-pos) 30%, transparent);
    color: var(--pm-pos);
}

.pm-banner-warn {
    background: var(--pm-warn-soft);
    border-color: color-mix(in srgb, var(--pm-warn) 30%, transparent);
    color: var(--pm-warn);
}

.pm-banner-error {
    background: var(--pm-neg-soft);
    border-color: color-mix(in srgb, var(--pm-neg) 30%, transparent);
    color: var(--pm-neg);
}

/* =============================================================================
   CHIPS / PILLS (status, badge, tag)
   ============================================================================= */

.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pm-surface-tint);
    border: 1px solid var(--pm-hairline);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pm-ink-soft);
    line-height: 1;
    white-space: nowrap;
}

.pm-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.pm-chip-accent { background: var(--pm-accent-soft); border-color: transparent; color: var(--pm-accent-ink); }
.pm-chip-pos    { background: var(--pm-pos-soft);    border-color: transparent; color: var(--pm-pos); }
.pm-chip-neg    { background: var(--pm-neg-soft);    border-color: transparent; color: var(--pm-neg); }
.pm-chip-warn   { background: var(--pm-warn-soft);   border-color: transparent; color: var(--pm-warn); }

.pm-chip-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.66rem;
}

/* =============================================================================
   CARD (basic surface container)
   ============================================================================= */

.pm-card {
    position: relative;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    padding: 18px 22px;
    box-shadow: var(--pm-shadow-flat);
}

.pm-card-rule {
    height: 1px;
    background: var(--pm-hairline);
    border: 0;
    margin: 14px 0;
}

/* =============================================================================
   MODALS
   ============================================================================= */

.pm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: pm-overlay-fade 160ms ease-out;
}

@keyframes pm-overlay-fade { from { opacity: 0; } to { opacity: 1; } }

.pm-modal-panel {
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-pop);
    max-width: 580px;
    width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--pm-font-body);
    animation: pm-panel-rise 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pm-panel-rise {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.pm-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--pm-hairline);
    flex-shrink: 0;
}

.pm-modal-title-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pm-modal-title {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--pm-ink);
    font-feature-settings: "ss01", "cv11";
}

.pm-modal-body {
    padding: 18px 26px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pm-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 26px;
    border-top: 1px solid var(--pm-hairline);
    background: var(--pm-surface-tint);
    flex-shrink: 0;
}

.pm-modal-close {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pm-ink);
    opacity: 0.5;
    padding: 6px 8px;
    border-radius: var(--pm-radius);
    flex-shrink: 0;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.pm-modal-close:hover {
    opacity: 1;
    background: var(--pm-surface-tint);
    border-color: var(--pm-hairline);
}

/* =============================================================================
   TABLES (terminal-precision data grid)
   ============================================================================= */

.pm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-feature-settings: "tnum";
}

.pm-table thead th {
    text-align: left;
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    padding: 9px 12px;
    border-bottom: 1px solid var(--pm-hairline);
    white-space: nowrap;
    background: var(--pm-surface);
}

.pm-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--pm-hairline-soft);
    white-space: nowrap;
}

.pm-table tbody tr:last-child td {
    border-bottom: none;
}

.pm-table tbody tr:hover td {
    background: var(--pm-surface-tint);
}

.pm-table .num,
.pm-table th.num,
.pm-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pm-table .mono,
.pm-table td.mono {
    font-family: var(--pm-font-mono);
}

.pm-table .ink-soft  { color: var(--pm-ink-soft); }
.pm-table .ink-faint { color: var(--pm-ink-faint); }
.pm-table .pos       { color: var(--pm-pos); }
.pm-table .neg       { color: var(--pm-neg); }

.pm-table-wrap {
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    overflow: hidden;
}

/* =============================================================================
   FORM FIELDS
   ============================================================================= */

.pm-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-form-label {
    font-family: var(--pm-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pm-ink-soft);
    line-height: 1.2;
}

.pm-form-sub {
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: 0.65;
    margin-left: 4px;
}

.pm-form-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pm-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
}

.pm-unit-prefix,
.pm-unit-suffix {
    font-family: var(--pm-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pm-ink-faint);
}

/* =============================================================================
   EMPTY & UTILITY
   ============================================================================= */

.pm-empty {
    padding: 32px 24px;
    text-align: center;
    color: var(--pm-ink-faint);
    font-style: italic;
    font-size: 0.85rem;
}

.pm-mono    { font-family: var(--pm-font-mono); font-variant-numeric: tabular-nums; }
.pm-display { font-family: var(--pm-font-display); }

/* =============================================================================
   BUTTONS (compact icon button — used in toolbars next to FluentButton)
   ============================================================================= */

.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--pm-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--pm-ink-soft);
    gap: 6px;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

.pm-btn:hover:not(:disabled) {
    color: var(--pm-ink);
    background: var(--pm-surface-tint);
    border-color: var(--pm-hairline-bold);
}

.pm-btn:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 1px;
}

.pm-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pm-btn-accent {
    color: var(--pm-accent-ink);
    border-color: color-mix(in srgb, var(--pm-accent) 35%, transparent);
    background: var(--pm-accent-ghost);
}

.pm-btn-accent:hover:not(:disabled) {
    background: var(--pm-accent-soft);
    border-color: color-mix(in srgb, var(--pm-accent) 50%, transparent);
}

/* =============================================================================
   BLAZOR FRAMEWORK CHROME (unchanged behaviour, refreshed visuals)
   ============================================================================= */

html, body {
    height: 100%;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--pm-radius);
    margin: 12px 0;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}