/* ==========================================================================
   Efe design tokens and base styles. Light by default; dark from the system
   preference unless the user picks a theme (data-theme on <html>).
   ========================================================================== */

:root {
    --font-ui: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
    --font-size: 14px;
    --font-size-small: 12px;
    --font-size-large: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --radius: 6px;
    --radius-small: 4px;
    --activity-width: 48px;
    --side-width: 260px;
    --inspector-width: 280px;
    --header-height: 44px;
    --timebar-height: 44px;

    --surface: #f7f7f5;
    --surface-sunken: #efefec;
    --raised: #ffffff;
    --border: #dcdcd6;
    --border-strong: #c3c3bb;
    --text: #1d1d1b;
    --text-muted: #67675f;
    --accent: #4a3fb5;
    --accent-text: #ffffff;
    --accent-soft: #e8e6f8;
    --selection: #fff2b8;
    --danger: #b3261e;
    --warning: #8a5a00;
    --focus: #4a3fb5;

    --fire: #c0392b;
    --earth: #5d7a2e;
    --air: #b08900;
    --water: #2364aa;

    --aspect-hard: #c0392b;
    --aspect-soft: #2364aa;
    --aspect-neutral: #6b4fa0;
    --aspect-minor: #888880;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #17171a;
        --surface-sunken: #111114;
        --raised: #202024;
        --border: #34343a;
        --border-strong: #4a4a52;
        --text: #e9e9e4;
        --text-muted: #a2a29a;
        --accent: #9d93ff;
        --accent-text: #15141f;
        --accent-soft: #2c2945;
        --selection: #4a4220;
        --danger: #ff8a80;
        --warning: #ffc266;
        --focus: #9d93ff;
        --fire: #ff7a6b;
        --earth: #9ccc65;
        --air: #ffd54f;
        --water: #64b5f6;
        --aspect-hard: #ff7a6b;
        --aspect-soft: #64b5f6;
        --aspect-neutral: #b39ddb;
        --aspect-minor: #8a8a84;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --surface: #17171a;
    --surface-sunken: #111114;
    --raised: #202024;
    --border: #34343a;
    --border-strong: #4a4a52;
    --text: #e9e9e4;
    --text-muted: #a2a29a;
    --accent: #9d93ff;
    --accent-text: #15141f;
    --accent-soft: #2c2945;
    --selection: #4a4220;
    --danger: #ff8a80;
    --warning: #ffc266;
    --focus: #9d93ff;
    --fire: #ff7a6b;
    --earth: #9ccc65;
    --air: #ffd54f;
    --water: #64b5f6;
    --aspect-hard: #ff7a6b;
    --aspect-soft: #64b5f6;
    --aspect-neutral: #b39ddb;
    --aspect-minor: #8a8a84;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--font-size);
    line-height: 1.4;
}

h1, h2, h3 { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.25; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--accent); }
code, .mono { font-family: var(--font-mono); font-size: 0.95em; }

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

/* Controls ---------------------------------------------------------------- */

button, input, select, textarea { font: inherit; color: inherit; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--raised);
    cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover { border-color: var(--border-strong); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:disabled:hover { border-color: var(--accent); }
.btn-danger { color: var(--danger); }
.btn-danger:hover, .btn-danger.confirming { border-color: var(--danger); }
.btn-danger.confirming { background: color-mix(in srgb, var(--danger) 10%, var(--raised)); }
.btn-sm { padding: 2px 8px; font-size: var(--font-size-small); gap: var(--space-1); }
.btn-icon { padding: 5px 8px; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text); }
.icon-btn[aria-pressed="true"] { color: var(--accent); }

.input, select.input {
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
    background: var(--raised);
}

/* Glyphs and icons ------------------------------------------------------- */

.glyph-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.glyph, .icon { display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glyph .fill, .icon .fill, .glyph-sprite .fill { fill: currentColor; }
.glyph-sprite symbol { overflow: visible; }

.point-label { display: inline-flex; align-items: center; gap: var(--space-1); }
.point-abbr { font-size: 0.85em; font-weight: 600; letter-spacing: 0.02em; }

.el-fire { color: var(--fire); }
.el-earth { color: var(--earth); }
.el-air { color: var(--air); }
.el-water { color: var(--water); }

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

.data-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.data-table.fit { width: auto; }
.data-table th, .data-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { font-weight: 600; color: var(--text-muted); font-size: var(--font-size-small); }
.data-table tbody tr { cursor: default; }
.data-table tbody tr:hover { background: var(--surface-sunken); }
.data-table tbody tr.selected { background: var(--selection); }
.num { text-align: right !important; }
.muted { color: var(--text-muted); }
.small { font-size: var(--font-size-small); }
.warning { color: var(--warning); }
.error { color: var(--danger); }
.pre-wrap { white-space: pre-wrap; }

/* Spacing and layout utilities (ux.md §13, rule 7: no inline styles). */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.input.w-xs { width: 5em; }
.input.w-sm { width: 7em; }
.input.w-md { width: 9.5em; }
.mb-3 { margin-bottom: var(--space-3); }
.m-0 { margin: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.w-full { width: 100%; }
.stack { display: grid; gap: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Messages (ux.md §13, rule 3). */
.notice {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    margin: 0 0 var(--space-3);
    padding: 6px 10px;
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-small);
    background: var(--surface-sunken);
    font-size: var(--font-size-small);
}
.notice-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--raised)); }
.notice-danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--raised)); }
.notice-info { border-left-color: var(--accent); background: var(--accent-soft); }

/* Empty and loading states (ux.md §13, rule 4). */
.empty-state { padding: var(--space-3) 0; color: var(--text-muted); font-size: var(--font-size-small); }
.empty-state .empty-title { margin: 0 0 var(--space-1); color: var(--text); font-size: var(--font-size); font-weight: 600; }
.empty-state p { margin: 0 0 var(--space-2); }
.empty-state.compact { padding: var(--space-2) 0; }
.loading { color: var(--text-muted); font-size: var(--font-size-small); }

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

/* Blazor framework UI ---------------------------------------------------- */

#blazor-error-ui {
    background: var(--warning);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: var(--danger); padding: 1rem; color: white; border-radius: var(--radius); }
.blazor-error-boundary::after { content: "An error has occurred in this view."; }

.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle { fill: none; stroke: var(--border); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }