/* ==================================================================================================
   Learning Platform — member web app shell styles.

   This is the SHELL only: boot state, tenant frame, responsive nav, update banner. It is deliberately
   minimal — the SDUI renderer and its components (blueprint §6) are a later phase and bring their own
   styles. No invented product design here.

   Theme tokens are declared as CSS custom properties keyed by SEMANTIC ROLE (bg/surface/text/accent/…),
   never by brand name. At runtime the app will overwrite these from the tenant bundle's theme
   (tenant.theme.colors, with colorsDark under the .dark scope). The values below are neutral fallbacks
   so the shell is legible before a bundle loads. Iswara's navy/gold is just tenant #1's row.
   ================================================================================================== */

:root {
    --color-bg: #f4f3ef;
    --color-surface: #ffffff;
    --color-text: #1a1a18;
    --color-textMuted: #5a5a55;
    --color-hairline: #e3e2dd;
    --color-accent: #14213D;
    --color-onAccent: #ffffff;
    --color-heroBg: #14213D;

    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --radius-card: 14px;

    /* The ONE non-themeable colour on the whole platform — the recording red, mirrored from iOS
       rgb(0.78,0.10,0.12). Never a tenant token, never overridden by a bundle. */
    --record-red: #C71A1F;
}

.dark {
    --color-bg: #141414;
    --color-surface: #1e1e1e;
    --color-text: #f2f1ec;
    --color-textMuted: #a5a49e;
    --color-hairline: #2f2f2b;
    --color-accent: #C8A951;
    --color-onAccent: #14213D;
    --color-heroBg: #0f1830;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }

a, .btn-link { color: var(--color-accent); }

/* ── First-load / boot state ────────────────────────────────────────────────────────────────────── */
.app-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--color-bg);
    text-align: center;
    padding: 24px;
}
.app-boot-mark {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--color-accent);
    color: var(--color-onAccent);
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, serif; font-size: 24px; font-weight: 700;
}
.app-boot-title { font-family: Georgia, serif; font-size: 20px; letter-spacing: 0.04em; }
.app-boot-sub { font-size: 13px; color: var(--color-textMuted); }

.loading-progress {
    position: relative;
    display: block;
    width: 6rem; height: 6rem;
    margin: 4px auto;
}
.loading-progress circle {
    fill: none;
    stroke: var(--color-hairline);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--color-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: 700;
    inset: calc(20% + 3.25rem) 0 auto 0;
    color: var(--color-textMuted);
    font-size: 13px;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Update handling is silent (js/app.js auto-activates a genuine update and reloads once) — no banner. */

/* ── Blazor error UI (template default, restyled to tokens) ──────────────────────────────────────── */
#blazor-error-ui {
    background: #fbeaea;
    color: #7a1f1f;
    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;
}