/* Global shell only. Component styling lives in .razor.css files next to each component,
   so anything that ends up here should be genuinely app-wide. */

:root {
    --tabule-surface: var(--gray-0);
    --tabule-surface-sunken: var(--gray-1);
    --tabule-ink: var(--gray-9);
    /* Between grey 6 and 7: 5:1 on the panels, where grey 6 measured 3.2 and the boards' dates and
       counts were found hard to read. Small text needs 4.5. */
    --tabule-ink-muted: color-mix(in srgb, var(--gray-6) 45%, var(--gray-7));
    --tabule-line: var(--gray-3);
    --tabule-accent: var(--indigo-6);

    /* Filled controls, paired with the ink that goes on them.
       The accent on its own is a brand colour and gets used for outlines, tints and focus rings,
       where it only has to be visible. A button filled with it and labelled in white is a
       different problem: indigo-6 against gray-0 measures 4.10, green-6 measures 2.24, red-6
       measures 3.12 — all under the 4.5 small text needs, and the green one was the state badge
       telling a guest they may now draw. These are the measured replacements, and they come in
       pairs so dark mode can flip which side is light rather than keep white text on a pale fill. */
    --tabule-accent-strong: var(--indigo-8);
    --tabule-on-accent: var(--gray-0);
    --tabule-live: var(--green-10);
    --tabule-on-live: var(--gray-0);
    --tabule-danger: var(--red-9);
    --tabule-on-danger: var(--gray-0);

    /* Warnings written as text rather than filled: orange-7 on white is 2.89. */
    --tabule-warn-ink: var(--orange-10);

    /* All well, said in a mark or a word rather than a fill: kept, done. */
    --tabule-good-ink: var(--green-10);

    --tabule-chrome-radius: var(--radius-3);
    --tabule-chrome-shadow: var(--shadow-3);

    /* The chrome over the board, drawn as Excalidraw draws its own: white islands under a shadow
       soft enough to float, quiet grey for the buttons standing alone, and a tint rather than a
       solid fill for the tool in hand. The grey and the tint are the accent's, so they belong with
       it in either scheme. */
    --tabule-island-radius: 0.5rem;
    --tabule-island-shadow:
        0 0 1px rgb(0 0 0 / 0.17), 0 0 3px rgb(0 0 0 / 0.08), 0 7px 14px rgb(0 0 0 / 0.05);
    --tabule-quiet: color-mix(in srgb, var(--tabule-accent) 7%, var(--gray-1));
    --tabule-quiet-hover: color-mix(in srgb, var(--tabule-accent) 12%, var(--gray-2));
    --tabule-chosen: color-mix(in srgb, var(--tabule-accent) 20%, var(--tabule-surface));
    --tabule-on-chosen: var(--indigo-9);

    /* Type for the chrome, smallest first. Open Props' smallest step is 8 px, and it had become
       the size of anything secondary — the share panel's explanation, the question before a
       board is deleted, a guest asking for the pen, every button on the library page. Nothing a
       person is meant to read goes below the caption size; only the diagnostics panel does. */
    --tabule-text-caption: 0.6875rem; /* 11 px: upper-case headings, badges, initials */
    --tabule-text-small: var(--font-size-0); /* 12 px: menus, panels, meta lines */
    --tabule-text: 0.875rem; /* 14 px: page buttons and fields, banners that need an answer */
}

@media (prefers-color-scheme: dark) {
    :root {
        --tabule-surface: var(--gray-9);
        --tabule-surface-sunken: var(--gray-10);
        --tabule-ink: var(--gray-1);
        --tabule-ink-muted: var(--gray-5);
        --tabule-line: var(--gray-7);
        --tabule-accent: var(--indigo-4);

        /* Flipped: a pale fill with dark ink. Keeping white text over indigo-4 would be 2.81,
           which is worse than the light-mode figure this whole set exists to fix. */
        --tabule-accent-strong: var(--indigo-4);
        --tabule-on-accent: var(--gray-9);
        --tabule-live: var(--green-4);
        --tabule-on-live: var(--gray-9);
        --tabule-danger: var(--red-4);
        --tabule-on-danger: var(--gray-9);
        --tabule-warn-ink: var(--orange-4);
        --tabule-good-ink: var(--green-4);

        --tabule-island-shadow:
            0 0 1px rgb(0 0 0 / 0.5), 0 0 3px rgb(0 0 0 / 0.3), 0 7px 14px rgb(0 0 0 / 0.25);
        --tabule-quiet: color-mix(in srgb, var(--tabule-accent) 10%, var(--gray-8));
        --tabule-quiet-hover: color-mix(in srgb, var(--tabule-accent) 16%, var(--gray-7));
        --tabule-chosen: color-mix(in srgb, var(--tabule-accent) 30%, var(--tabule-surface));
        --tabule-on-chosen: var(--indigo-1);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    font-family: var(--font-system-ui);
    font-size: var(--font-size-1);
}

#app {
    height: 100%;
}

/* Boot placeholder, replaced the moment Blazor mounts. */
.boot {
    height: 100%;
    display: grid;
    place-content: center;
    gap: var(--size-3);
    justify-items: center;
}

.boot__mark {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-6);
    letter-spacing: var(--font-letterspacing-3);
    color: var(--tabule-ink-muted);
}

/* Why the start is slow, once it has been slow long enough to ask. See sayOnBootScreen. */
.boot__note {
    max-inline-size: min(28rem, calc(100vw - var(--size-6)));
    margin: 0;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text);
    line-height: var(--font-lineheight-3);
    text-align: center;
}

.boot__bar {
    width: 12rem;
    height: 3px;
    border-radius: var(--radius-round);
    background: var(--tabule-line);
    overflow: hidden;
}

.boot__bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: var(--tabule-accent);
    animation: boot-slide 1.1s var(--ease-in-out-3) infinite;
}

@keyframes boot-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: var(--size-3) var(--size-4);
    background: var(--yellow-2);
    color: var(--gray-9);
    box-shadow: var(--shadow-4);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: inline-end;
}

/* A library card being carried to a folder: its name, following the pointer. Here rather than in
   the library's own styles because the shim puts it on the body, outside anything scoped. */
.tabule-drag-ghost {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1000;
    max-inline-size: 16rem;
    padding: var(--size-2) var(--size-3);
    overflow: hidden;
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    box-shadow: var(--tabule-chrome-shadow);
    font-size: var(--font-size-0);
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

body.is-carrying-card,
body.is-carrying-card * {
    cursor: grabbing !important;
    user-select: none;
}