/* /Pages/Home.razor.rz.scp.css */
.stage[b-385zf4xrhi] {
    position: fixed;
    inset: 0;
}

.stage__canvas[b-385zf4xrhi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* The pen must never scroll or zoom the page; gestures are interpreted in C# instead. */
    touch-action: none;
}

.stage__canvas--overlay[b-385zf4xrhi] {
    pointer-events: none;
}

.hud[b-385zf4xrhi] {
    position: fixed;
    /* Below the topbar, not beside it. At its old width it ran the full span of a narrow window
       and passed under the board menu and the sharing controls. */
    inset-block-start: calc(var(--size-3) + 3.25rem);
    inset-inline-start: var(--size-4);
    z-index: 10;
    width: min(22rem, calc(100vw - var(--size-6)));
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    padding: var(--size-4);
    border: 1px solid var(--tabule-line);
    border-radius: var(--tabule-chrome-radius);
    background: color-mix(in srgb, var(--tabule-surface) 88%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: var(--tabule-chrome-shadow);
    font-size: var(--font-size-0);
}

.hud__head[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    margin-block-end: var(--size-3);
}

.hud__title[b-385zf4xrhi] {
    font-weight: var(--font-weight-6);
    letter-spacing: var(--font-letterspacing-1);
}

.hud__badge[b-385zf4xrhi] {
    padding: var(--size-1) var(--size-2);
    border-radius: var(--radius-round);
    background: var(--tabule-accent-strong);
    color: var(--tabule-on-accent);
    font-size: var(--font-size-00);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-2);
}

.hud__caps[b-385zf4xrhi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--size-1) var(--size-3);
    /* No trailing rule or padding: those separated this from an action row that no longer
       exists, and left a ruled-off empty band at the foot of the panel. */
    margin: 0;
}

.hud__cap[b-385zf4xrhi] {
    display: flex;
    justify-content: space-between;
    gap: var(--size-2);
}

.hud__cap dt[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
}

.hud__cap dd[b-385zf4xrhi] {
    margin: 0;
    font-family: var(--font-mono);
}

.hud__cap dd.is-yes[b-385zf4xrhi] {
    color: var(--tabule-live);
}

.hud__cap dd.is-no[b-385zf4xrhi] {
    color: var(--tabule-danger);
}

.hud__results tr.is-headline th[b-385zf4xrhi],
.hud__results tr.is-headline td[b-385zf4xrhi] {
    font-weight: var(--font-weight-7);
}

.hud__detail[b-385zf4xrhi] {
    padding-inline: var(--size-2);
    color: var(--tabule-ink-muted);
    white-space: nowrap;
}

.hud__value[b-385zf4xrhi] {
    font-family: var(--font-mono);
    text-align: end;
    white-space: nowrap;
}

.hud__error[b-385zf4xrhi] {
    margin-block: var(--size-3) 0;
    padding: var(--size-2);
    border-radius: var(--radius-2);
    background: var(--red-1);
    color: var(--red-9);
    font-family: var(--font-mono);
}

/* Floating tool chrome. Deliberately hand-rolled: a data-app component library has no shape for
   a floating canvas toolbar, and this is less code than bending one into it. */
.toolbar[b-385zf4xrhi] {
    position: fixed;
    inset-block-end: var(--size-5);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-4);
    background: color-mix(in srgb, var(--tabule-surface) 92%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-4);
}

.toolbar__group[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-1);
}

.toolbar__divider[b-385zf4xrhi] {
    width: 1px;
    align-self: stretch;
    margin-inline: var(--size-1);
    background: var(--tabule-line);
}

.tool[b-385zf4xrhi] {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink);
    font-size: var(--font-size-2);
    line-height: 1;
    cursor: pointer;
}

.tool:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
}

.tool.is-active[b-385zf4xrhi] {
    background: var(--tabule-accent-strong);
    color: var(--tabule-on-accent);
}

.swatch[b-385zf4xrhi] {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-round);
    background: var(--swatch);
    cursor: pointer;
    /* The ring sits outside the colour so a dark swatch still reads as selected. */
    outline-offset: 2px;
}

.swatch.is-active[b-385zf4xrhi] {
    outline: 2px solid var(--tabule-accent);
}

/* The custom chip: current colour in the middle, hue ring around it. The ring is the whole point —
   without it this is a seventh preset, and nothing says the range is open. */
.swatch--custom[b-385zf4xrhi] {
    position: relative;
    background:
        linear-gradient(var(--swatch), var(--swatch)) padding-box,
        conic-gradient(
            var(--red-6), var(--yellow-5), var(--lime-5), var(--cyan-5), var(--blue-6), var(--violet-6), var(--red-6)
        ) border-box;
}

/* Covers the chip so a click anywhere opens the picker, invisible so the chip shows the colour. */
.swatch--custom input[b-385zf4xrhi] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

/* The input is transparent, so its own focus ring never shows. */
.swatch--custom:focus-within[b-385zf4xrhi] {
    outline: 2px solid var(--tabule-accent);
}

.toolbar__size[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    font-size: var(--font-size-0);
    font-family: var(--font-mono);
    color: var(--tabule-ink-muted);
}

.toolbar__size input[b-385zf4xrhi] {
    inline-size: 6rem;
    accent-color: var(--tabule-accent);
}

/* The nib preview. A fixed well, so the toolbar does not reflow while the slider is being
   dragged — a layout that jumps under the pointer is worse than one that holds still. */
.toolbar__size .nib[b-385zf4xrhi] {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
}

/* Sized and coloured from the live tool, so this is the mark that is about to be made rather
   than a picture of one. A 1 px nib shows as 1 px, which is the honest answer. */
.toolbar__size .nib__dot[b-385zf4xrhi] {
    inline-size: var(--nib);
    block-size: var(--nib);
    border-radius: var(--radius-round);
    background: var(--nib-ink);
}

/* The eraser removes coverage rather than adding ink, so it previews as an outline. */
.toolbar__size .nib.is-eraser .nib__dot[b-385zf4xrhi] {
    border: 1px dashed var(--tabule-ink-muted);
    background: var(--tabule-surface);
}

/* Board switcher and save state. */
.topbar[b-385zf4xrhi] {
    position: fixed;
    inset-block-start: var(--size-3);
    inset-inline-end: var(--size-4);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--size-3);
}

.topbar__board[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--tabule-surface) 92%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: var(--tabule-chrome-shadow);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    cursor: pointer;
}

.topbar__chevron[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
}

.topbar__state[b-385zf4xrhi] {
    font-size: var(--font-size-00);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-2);
}

.topbar__state.is-saved[b-385zf4xrhi] { color: var(--green-7); }
.topbar__state.is-pending[b-385zf4xrhi] { color: var(--tabule-warn-ink); }
.topbar__state.is-ephemeral[b-385zf4xrhi] { color: var(--tabule-ink-muted); }

.boards[b-385zf4xrhi] {
    position: absolute;
    inset-block-start: calc(100% + var(--size-2));
    inset-inline-end: 0;
    inline-size: min(22rem, 90vw);
    padding: var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--tabule-chrome-radius);
    background: var(--tabule-surface);
    box-shadow: var(--shadow-5);
    font-size: var(--font-size-0);

    /* Never long enough to reach the toolbar. Both panels that use this box can grow without
       limit — one lists every board, the other every setting — and one that runs underneath the
       tools hides them with no way to scroll it back. */
    max-block-size: calc(100dvh - 14rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Reads as a way out of the menu rather than another item in it, so it does not compete with
   the boards above for the same glance. */
.boards__manage[b-385zf4xrhi] {
    display: block;
    margin-block-start: var(--size-3);
    padding-block-start: var(--size-3);
    border-block-start: 1px solid var(--tabule-line);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    text-align: center;
    text-decoration: none;
}

.boards__manage:hover[b-385zf4xrhi] {
    color: var(--tabule-ink);
}

.boards__new[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-2);
    margin-block-end: var(--size-3);
}

/* Square, so it reads as an icon action next to the Create button rather than a second verb. */
.boards__new .boards__refresh[b-385zf4xrhi] {
    flex: none;
    inline-size: 2.25rem;
    padding-inline: 0;
    background: transparent;
    border: 1px solid var(--tabule-line);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-2);
    line-height: 1;
}

.boards__new .boards__refresh:hover:not(:disabled)[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

.boards__new .boards__refresh:disabled[b-385zf4xrhi] {
    opacity: 0.5;
}

.boards__new input[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
    font: inherit;
}

.boards__new button[b-385zf4xrhi] {
    padding: var(--size-2) var(--size-3);
    border: none;
    border-radius: var(--radius-2);
    background: var(--tabule-accent-strong);
    color: var(--tabule-on-accent);
    font: inherit;
    cursor: pointer;
}

.boards__new button:disabled[b-385zf4xrhi] {
    background: var(--tabule-line);
    color: var(--tabule-ink-muted);
    cursor: default;
}

.boards__list[b-385zf4xrhi] {
    max-block-size: 18rem;
    /* Vertical only. A horizontal bar here means a row is overflowing, which is a bug to fix
       rather than a thing to scroll. */
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Amber, matching the warning it precedes — this is the same fact, told earlier. */
.boards__busy[b-385zf4xrhi] {
    padding: 0 var(--size-2);
    border-radius: var(--radius-round);
    background: var(--yellow-2);
    color: var(--yellow-11);
    font-size: var(--font-size-00);
    white-space: nowrap;
}

.boards__list time[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    white-space: nowrap;
}

.boards__empty[b-385zf4xrhi],
.boards__note[b-385zf4xrhi] {
    margin: 0;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    line-height: var(--font-lineheight-3);
}

.boards__note[b-385zf4xrhi] {
    margin-block-start: var(--size-3);
    padding-block-start: var(--size-3);
    border-block-start: 1px solid var(--tabule-line);
}

.tool:disabled[b-385zf4xrhi] {
    opacity: 0.35;
    cursor: default;
}

.tool:disabled:hover[b-385zf4xrhi] {
    background: transparent;
}

.toolbar__modes[b-385zf4xrhi] {
    gap: 2px;
    /* Matches the tool buttons beside it, so the row has one height rather than three. */
    block-size: 2.25rem;
    align-items: stretch;
    padding: 2px;
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
}

.mode[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    padding-inline: var(--size-2);
    border: none;
    border-radius: var(--radius-1);
    background: transparent;
    color: var(--tabule-ink-muted);
    font: inherit;
    font-size: var(--font-size-00);
    cursor: pointer;
}

.mode.is-active[b-385zf4xrhi] {
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    box-shadow: var(--shadow-1);
}

/* Presence and sharing. */
.peers[b-385zf4xrhi] {
    display: flex;
    gap: -0.25rem;
}

.peer[b-385zf4xrhi] {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    display: grid;
    place-items: center;
    margin-inline-start: -0.4rem;
    border: 2px solid var(--tabule-surface);
    border-radius: var(--radius-round);
    background: var(--peer);
    color: var(--gray-0);
    font-size: var(--font-size-00);
    font-weight: var(--font-weight-7);
    letter-spacing: 0;
}

/* A ring marks who can actually draw, so the host can see permissions at a glance. */
.peer.can-edit[b-385zf4xrhi] {
    outline: 2px solid var(--peer);
    outline-offset: 1px;
}

.topbar__share[b-385zf4xrhi] {
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--tabule-surface) 92%, transparent);
    backdrop-filter: blur(16px);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    cursor: pointer;
}

.topbar__share.is-live[b-385zf4xrhi] {
    background: var(--tabule-live);
    border-color: transparent;
    color: var(--tabule-on-live);
}

/* Disabled here means "nothing to press", not "unavailable". This button doubles as the guest\u's
   own status, so the granted and waiting states are badges: dimming their text left the one that
   says you may now draw as the least readable thing on screen. Only the neutral state dims. */
.topbar__share:disabled[b-385zf4xrhi] {
    cursor: default;
}

.topbar__share:disabled:not(.is-live):not(.is-waiting)[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
}

.share__hint[b-385zf4xrhi] {
    margin: 0 0 var(--size-3);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    line-height: var(--font-lineheight-3);
}

.share__link[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-2);
}

.share__link input[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
}

/* How far the link above actually reaches. A dot rather than a badge: it is a standing fact about
   the session, not an alert, and it sits under the thing it describes. */
.share__reach[b-385zf4xrhi] {
    display: flex;
    align-items: baseline;
    gap: var(--size-2);
    margin: var(--size-2) 0 0;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    line-height: var(--font-lineheight-3);
}

.share__reach[b-385zf4xrhi]::before {
    flex: none;
    inline-size: var(--size-2);
    block-size: var(--size-2);
    border-radius: var(--radius-round);
    background: currentcolor;
    content: "";
    translate: 0 -0.1em;
}

.share__reach.is-public[b-385zf4xrhi] {
    color: var(--tabule-live);
}

.share__link button[b-385zf4xrhi],
.share__row button[b-385zf4xrhi] {
    padding: var(--size-1) var(--size-3);
    border: none;
    border-radius: var(--radius-2);
    background: var(--tabule-accent-strong);
    color: var(--tabule-on-accent);
    font: inherit;
    font-size: var(--font-size-00);
    cursor: pointer;
}

.share__row button.is-subtle[b-385zf4xrhi] {
    background: transparent;
    color: var(--tabule-ink-muted);
}

.share__section[b-385zf4xrhi] {
    margin: var(--size-3) 0 var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-2);
}

.share__row[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding-block: var(--size-1);
}

.share__row span:nth-of-type(2)[b-385zf4xrhi] {
    flex: 1;
}

.share__stop[b-385zf4xrhi] {
    inline-size: 100%;
    margin-block-start: var(--size-3);
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-danger);
    font: inherit;
    cursor: pointer;
}

/* "Also open elsewhere" — advisory, so it reads as information rather than an error. Amber, not
   red: nothing has gone wrong yet, and the user is allowed to carry on. */
.alsoopen[b-385zf4xrhi] {
    position: fixed;
    inset-block-start: var(--size-3);
    inset-inline-start: 50%;
    /* Above the HUD and the toolbar. It is a decision the user has to see, and being tucked
       behind a debug panel is how a warning becomes decoration. */
    z-index: 30;
    translate: -50% 0;
    inline-size: min(30rem, calc(100vw - var(--size-8)));
    padding: var(--size-3) var(--size-4);
    border: 1px solid var(--yellow-4);
    border-radius: var(--tabule-chrome-radius);
    background: var(--yellow-0);
    box-shadow: var(--tabule-chrome-shadow);
    color: var(--yellow-11);
    font-size: var(--font-size-00);
    line-height: var(--font-lineheight-3);
}

.alsoopen__lead[b-385zf4xrhi] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    margin: 0;
}

.alsoopen__who[b-385zf4xrhi] {
    font-family: var(--font-mono);
}

.alsoopen__risk[b-385zf4xrhi] {
    margin: var(--size-2) 0 0;
    opacity: 0.85;
}

.alsoopen__actions[b-385zf4xrhi] {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-2);
    margin-block-start: var(--size-3);
}

.alsoopen__actions button[b-385zf4xrhi] {
    padding: var(--size-1) var(--size-3);
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    font: inherit;
    cursor: pointer;
}

/* "Join them" is the best outcome when it is on offer, so it takes the solid treatment and
   "Leave it" steps back to an outline. */
.alsoopen__join[b-385zf4xrhi] {
    background: var(--green-8);
    color: var(--gray-0);
}

/* "Leave it" is the safe choice, and the solid one whenever joining is not possible. */
.alsoopen__back[b-385zf4xrhi] {
    background: var(--yellow-9);
    color: var(--gray-0);
}

.alsoopen:has(.alsoopen__join) .alsoopen__back[b-385zf4xrhi] {
    border-color: var(--yellow-5);
    background: transparent;
    color: inherit;
}

.alsoopen__go[b-385zf4xrhi] {
    border-color: var(--yellow-5);
    background: transparent;
    color: inherit;
}

/* Zoom. Promoted out of the diagnostics panel because it is the one figure there that a person
   steers by rather than inspects. */
.toolbar__zoom[b-385zf4xrhi] {
    align-items: center;
}

.toolbar__zoomlevel[b-385zf4xrhi] {
    min-inline-size: 3.5rem;
    padding: var(--size-1) var(--size-2);
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    font: inherit;
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    text-align: center;
    cursor: pointer;
}

.toolbar__zoomlevel:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

/* Errors live outside the diagnostics panel, because a failure must not be hidden along with it. */
.banner[b-385zf4xrhi] {
    position: fixed;
    inset-block-end: var(--size-8);
    inset-inline-start: 50%;
    z-index: 25;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: var(--size-3);
    max-inline-size: min(34rem, calc(100vw - var(--size-8)));
    margin: 0;
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    box-shadow: var(--tabule-chrome-shadow);
    font-size: var(--font-size-00);
}

.banner--error[b-385zf4xrhi] {
    background: var(--red-1);
    color: var(--red-10);
}

.banner__dismiss[b-385zf4xrhi] {
    border: none;
    background: transparent;
    color: inherit;
    font-size: var(--font-size-3);
    line-height: 1;
    cursor: pointer;
}

/* A board row: what it is on top, when it was last touched underneath, and a way to remove it. */
.board[b-385zf4xrhi] {
    display: flex;
    align-items: stretch;
    gap: var(--size-1);
    border-radius: var(--radius-2);
}

.board:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
}

.board.is-current[b-385zf4xrhi] {
    background: color-mix(in srgb, var(--tabule-accent) 16%, transparent);
}

/* A grid rather than a column, so a preview can sit beside both lines of text. The first column
   collapses to nothing for the boards that have no picture, which is most of them to begin with,
   and the gap rides on the image so those rows are not indented for an absent thing. */
.board__open[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 2px;
    padding: var(--size-2);
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.board__shot[b-385zf4xrhi] {
    grid-row: 1 / span 2;
    inline-size: 2.75rem;
    block-size: 1.75rem;
    margin-inline-end: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-1);
    background: var(--tabule-surface-sunken);
    object-fit: contain;
}

.board__name[b-385zf4xrhi],
.board__meta[b-385zf4xrhi] {
    grid-column: 2;
}

.board__name[b-385zf4xrhi] {
    display: flex;
    align-items: baseline;
    gap: var(--size-2);
}

.board__meta[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

/* Visible on hover or keyboard focus only: a delete button on every row, always lit, invites the
   accident it should be discouraging. */
.board__delete[b-385zf4xrhi] {
    flex: none;
    inline-size: 2rem;
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-0);
    cursor: pointer;
    opacity: 0;
}

.board:hover .board__delete[b-385zf4xrhi],
.board__delete:focus-visible[b-385zf4xrhi] {
    opacity: 1;
}

.board__delete:hover[b-385zf4xrhi] {
    background: var(--red-2);
    color: var(--red-9);
}

/* Inline, not a dialog. Deleting a board removes the file and undo does not reach across that,
   so the confirmation belongs on the row being talked about.
   Stacked rather than one line: a long board name on one line squeezes the buttons into a column
   of single words, and the question stops being readable exactly when it matters. */
.board__confirm[b-385zf4xrhi] {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    inline-size: 100%;
    min-inline-size: 0;
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    background: var(--red-1);
    color: var(--red-10);
    font-size: var(--font-size-00);
    line-height: var(--font-lineheight-3);
}

.board__confirm p[b-385zf4xrhi] {
    margin: 0;
    /* A pasted or generated name can be one very long word. */
    overflow-wrap: anywhere;
}

.board__confirm div[b-385zf4xrhi] {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-2);
}

.board__confirm button[b-385zf4xrhi] {
    flex: none;
    padding: var(--size-1) var(--size-3);
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    font: inherit;
    font-size: var(--font-size-00);
    white-space: nowrap;
    cursor: pointer;
}

.board__yes[b-385zf4xrhi] {
    background: var(--red-8);
    color: var(--gray-0);
}

.board__no[b-385zf4xrhi] {
    background: transparent;
    border-color: var(--red-4);
    color: inherit;
}

/* Acts on the open board, so it sits under the list rather than in it. */
.boards__clear[b-385zf4xrhi] {
    inline-size: 100%;
    margin-block-start: var(--size-3);
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    font: inherit;
    font-size: var(--font-size-00);
    cursor: pointer;
}

.boards__clear:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

/* "empty" is the one fact you want before opening something, so it is said rather than shown as
   a zero among other numbers. */
.board__empty[b-385zf4xrhi] {
    padding: 0 var(--size-2);
    border-radius: var(--radius-round);
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink-muted);
}

/* The live link, shown only when it has something to say. Silent while connected and alone: a
   permanent badge trains the eye to ignore the spot the real warning will appear in. */
.topbar__link[b-385zf4xrhi] {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    padding: 0 var(--size-2);
    border-radius: var(--radius-round);
    font-size: var(--font-size-00);
    white-space: nowrap;
}

.topbar__link[b-385zf4xrhi]::before {
    inline-size: var(--size-2);
    block-size: var(--size-2);
    border-radius: var(--radius-round);
    background: currentcolor;
    content: "";
}

.topbar__link.is-good[b-385zf4xrhi] {
    color: var(--tabule-live);
}

/* Offline with a library: the board is still being saved, so this is information, not alarm. */
.topbar__link.is-warn[b-385zf4xrhi] {
    color: var(--yellow-9);
}

/* Offline without one: the socket is the only thing holding the work. */
.topbar__link.is-bad[b-385zf4xrhi] {
    color: var(--red-8);
}

/* The host's own row. Not a button: the host role is not granted and cannot be taken away. */
.share__role[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

/* A guest waiting on the host. Distinct from both "can edit" and "ask", because the whole
   complaint was that pressing the button changed nothing visible. */
.topbar__share.is-waiting[b-385zf4xrhi] {
    border-color: var(--yellow-5);
    background: var(--yellow-0);
    color: var(--yellow-11);
}

/* Count of requests still unanswered. Survives dismissing the banner, so putting a request off
   does not hide it completely. */
.topbar__badge[b-385zf4xrhi] {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.25rem;
    margin-inline-start: var(--size-1);
    padding-inline: 0.25rem;
    border-radius: var(--radius-round);
    background: var(--blue-7);
    color: var(--gray-0);
    font-size: var(--font-size-00);
    font-variant-numeric: tabular-nums;
}

/* Sits where the "also open elsewhere" warning does, deliberately: both are things the user must
   decide, and one place for them means neither can hide behind the other. Blue rather than
   yellow — somebody asking politely is not a hazard. */
.asktoedit[b-385zf4xrhi] {
    position: fixed;
    inset-block-start: var(--size-3);
    inset-inline-start: 50%;
    z-index: 31;
    translate: -50% 0;
    inline-size: min(26rem, calc(100vw - var(--size-8)));
    padding: var(--size-3) var(--size-4);
    border: 1px solid var(--blue-4);
    border-radius: var(--tabule-chrome-radius);
    background: var(--blue-0);
    box-shadow: var(--tabule-chrome-shadow);
    color: var(--blue-11);
    font-size: var(--font-size-00);
    line-height: var(--font-lineheight-3);
}

.asktoedit__lead[b-385zf4xrhi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-2);
    margin: 0;
}

.asktoedit__more[b-385zf4xrhi] {
    opacity: 0.75;
}

.asktoedit__actions[b-385zf4xrhi] {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-2);
    margin-block-start: var(--size-3);
}

.asktoedit__actions button[b-385zf4xrhi] {
    padding: var(--size-1) var(--size-3);
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    font: inherit;
    cursor: pointer;
}

/* Allowing is the common answer, so it is the solid one. */
.asktoedit__allow[b-385zf4xrhi] {
    background: var(--blue-7);
    color: var(--gray-0);
}

.asktoedit__deny[b-385zf4xrhi] {
    border-color: var(--blue-4);
    background: transparent;
    color: inherit;
}

/* "Not now" answers nobody — it only puts the banner away — so it reads as the quietest option
   of the three rather than competing with the two that decide something. */
.asktoedit__later[b-385zf4xrhi] {
    background: transparent;
    color: inherit;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------------------------
   Small screens.

   The chrome was laid out for a desktop window and nothing below it: the toolbar is one
   non-wrapping row pinned at left:50%, so on a phone it simply ran off both edges and half the
   tools could not be reached at all. Guests arrive on phones — that is the entire point of a
   share link — so this is the common case, not the edge one.

   Wrapping rather than scrolling, because a horizontal scroller hides controls behind a gesture
   nobody thinks to try on a toolbar. Rows cost canvas, so the parts that earn their place least
   give up their width first.
   --------------------------------------------------------------------------------------------- */

.toolbar[b-385zf4xrhi] {
    /* Never wider than the screen, whatever is in it. Applies at every size: the desktop layout
       is unchanged because it was already narrower than this. */
    max-inline-size: calc(100vw - (2 * var(--size-3)));
    flex-wrap: wrap;
    justify-content: center;
}

@media (width <= 48rem) {
    .toolbar[b-385zf4xrhi] {
        inset-block-end: var(--size-2);
        gap: var(--size-1);
        padding: var(--size-1);
    }

    /* Decoration, and misleading once the row has wrapped — a vertical rule between two groups
       that are no longer side by side reads as a boundary that is not there. */
    .toolbar__divider[b-385zf4xrhi] {
        display: none;
    }

    .toolbar__size input[b-385zf4xrhi] {
        inline-size: 4rem;
    }

    .toolbar__zoomlevel[b-385zf4xrhi] {
        min-inline-size: 3rem;
    }

    /* The board menu keeps the title honest rather than pushing the sharing controls off screen. */
    .topbar[b-385zf4xrhi] {
        inset-inline: var(--size-2);
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--size-2);
    }

    .topbar__title[b-385zf4xrhi] {
        display: inline-block;
        max-inline-size: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Anchored to the viewport rather than to the button, which at this width is close enough to
       the edge that a panel hanging off it would be half off screen. */
    .boards[b-385zf4xrhi] {
        position: fixed;
        inset-block-start: calc(var(--size-3) + 2.75rem);
        inset-inline: var(--size-2);
        inline-size: auto;
    }
}

/* Phone-sized: drop to the essentials and let the rest wrap under them. */
@media (width <= 30rem) {
    .toolbar[b-385zf4xrhi] {
        inline-size: calc(100vw - (2 * var(--size-2)));
    }

    .toolbar__size input[b-385zf4xrhi] {
        inline-size: 3.5rem;
    }

    /* The shape-assist modes are a preference, not a per-stroke control, and they are the widest
       thing competing for the row. Reachable still — just last in line. */
    .toolbar__modes .mode[b-385zf4xrhi] {
        padding-inline: 6px;
    }
}

/* A finger is not a mouse pointer. Touch targets grow on anything without a fine pointer, which
   is the honest test — a phone, a tablet, a touchscreen laptop being used by hand. */
@media (pointer: coarse) {
    .tool[b-385zf4xrhi] {
        inline-size: 2.75rem;
        block-size: 2.75rem;
    }

    /* The segmented control is sized as a group, not per segment — giving each of hold/auto/off
       its own 44 px minimum made the pill taller than everything beside it. */
    .toolbar__modes[b-385zf4xrhi] {
        block-size: 2.75rem;
    }

    .toolbar__zoomlevel[b-385zf4xrhi],
    .topbar__share[b-385zf4xrhi] {
        min-block-size: 2.75rem;
    }

    /* A slider is the hardest control to hit and the easiest to knock. */
    .toolbar__size input[b-385zf4xrhi] {
        block-size: 2.75rem;
    }
}

/* A guest's board name. Same pill as the host's so the bar keeps its shape, but it is a label:
   there is no other board to switch to and no library to list. */
.topbar__board.is-static[b-385zf4xrhi] {
    cursor: default;
}

/* Quiet toolbar affordances — diagnostics, peer visibility. Present but not competing with the
   tools, which are what the row is for. */
.tool--quiet[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
    opacity: 0.65;
}

.tool--quiet:hover[b-385zf4xrhi],
.tool--quiet.is-active[b-385zf4xrhi] {
    opacity: 1;
}

/* A guest's own name, and the way to change it. */
.topbar__whoami[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-1) var(--size-2) var(--size-1) var(--size-1);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--tabule-surface) 92%, transparent);
    backdrop-filter: blur(16px);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-00);
    cursor: pointer;
}

.topbar__whoami-name[b-385zf4xrhi] {
    max-inline-size: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whoami__label[b-385zf4xrhi] {
    display: block;
    margin-block-end: var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

.whoami__row[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-2);
}

.whoami__row input[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    font: inherit;
    font-size: var(--font-size-0);
}

.whoami__done[b-385zf4xrhi] {
    padding: var(--size-2) var(--size-3);
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    background: var(--blue-7);
    color: var(--gray-0);
    font: inherit;
    cursor: pointer;
}

.whoami__hint[b-385zf4xrhi] {
    margin: var(--size-2) 0 0;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

/* Palette editing. The swatches keep their place and change job, because there is no room for a
   parallel row of delete buttons and a mode you turned on yourself is easy to reason about. */
.swatch.is-editing[b-385zf4xrhi] {
    cursor: not-allowed;
}

.swatch.is-editing[b-385zf4xrhi]::after {
    content: "×";
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--gray-9) 55%, transparent);
    color: var(--gray-0);
    font-size: var(--font-size-0);
    line-height: 1;
}

.palette__reset[b-385zf4xrhi] {
    padding: var(--size-1) var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    font: inherit;
    font-size: var(--font-size-00);
    cursor: pointer;
}

.palette__reset:hover[b-385zf4xrhi] {
    color: var(--tabule-ink);
}

/* Wraps on its own once someone has collected a lot of colours. */
.toolbar__colors[b-385zf4xrhi] {
    flex-wrap: wrap;
    justify-content: center;
}

/* The colour editor. Sits above the toolbar it belongs to, and everything in it is a real DOM
   control — no native colour dialog, which cannot be styled, cannot be tested, and is miserable
   on a phone. */
.palette[b-385zf4xrhi] {
    position: absolute;
    inset-block-end: calc(100% + var(--size-2));
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: min(20rem, calc(100vw - var(--size-6)));
    padding: var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--tabule-chrome-radius);
    background: var(--tabule-surface);
    box-shadow: var(--shadow-5);
}

.swatch--add[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    border: 1px dashed var(--tabule-line);
    background: transparent;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-1);
    line-height: 1;
}

.swatch--add:disabled[b-385zf4xrhi] {
    opacity: 0.4;
    cursor: not-allowed;
}

.palette__slider[b-385zf4xrhi] {
    display: block;
    margin-block-end: var(--size-2);
}

.palette__slider input[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
    accent-color: var(--tabule-accent);
}

/* The hue track shows the hues it selects, so the slider is its own legend. */
.palette__hue[b-385zf4xrhi] {
    appearance: none;
    block-size: 0.75rem;
    border-radius: var(--radius-round);
    background: linear-gradient(to right,
        #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}



/* Typed hex, the way in when a specific colour is wanted rather than one that looks right. */
.palette__hex[b-385zf4xrhi] {
    inline-size: 100%;
    margin-block-end: var(--size-3);
    padding: var(--size-3) var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    /* Shows the colour it names — the preview and the field are one control. */
    background: var(--ink);
    color: var(--on-ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    text-align: center;
}

/* Vividness and lightness draw their own range, so neither needs a word beside it. */
.palette__band[b-385zf4xrhi] {
    appearance: none;
    inline-size: 100%;
    block-size: 0.75rem;
    border-radius: var(--radius-round);
    background: linear-gradient(to right, var(--from), var(--to));
}

/* On a phone the toolbar is already a third of the screen, so a panel stacked above it does not
   fit — measured at 254 px of toolbar with another 250 of panel to go on top. It takes the bottom
   of the screen instead and covers the toolbar rather than pushing it up: while colours are being
   edited, the tools underneath are not what anyone is reaching for. */
@media (width <= 30rem) {
    .palette[b-385zf4xrhi] {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 21;
        inline-size: auto;
        translate: none;
        border-radius: var(--tabule-chrome-radius) var(--tabule-chrome-radius) 0 0;
        padding-block-end: var(--size-4);
    }
}


/* Sits in the row of swatches, so it is shaped like one. It was a .tool before — a 36 px rounded
   square among 24 px circles, which stretched the row and sat visibly off its line. */
.swatch--edit[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    border: 1px dashed var(--tabule-line);
    background: transparent;
    /* A button inherits the browser's black button text unless told otherwise. .swatch never had
       to care — it is a filled circle — so this one came out black on the dark toolbar. */
    color: var(--tabule-ink-muted);
}

/* Sized as a share of the button rather than in pixels, so it keeps its proportions when the
   swatch grows for touch. A fixed size left it looking like a speck in a 36 px circle. */
.swatch--edit .icon[b-385zf4xrhi] {
    inline-size: 72%;
    block-size: 72%;
}

.swatch--edit:hover[b-385zf4xrhi] {
    border-color: var(--tabule-ink-muted);
}

/* The swatch row inside the editor. Only ever visible where the toolbar's own row is not. */
.palette__row[b-385zf4xrhi] {
    display: none;
    flex-wrap: wrap;
    gap: var(--size-2);
    margin-block-end: var(--size-3);
}

.palette__hue[b-385zf4xrhi] {
    inline-size: 100%;
}

@media (width <= 30rem) {
    .palette__row[b-385zf4xrhi] {
        display: flex;
    }
}

/* A 24 px circle is a fine mouse target and a poor finger one. Eight of them plus the editor still
   fit a 375 px screen at this size, which is what decides it. */
@media (pointer: coarse) {
    .swatch[b-385zf4xrhi] {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }
}

/* Drawn icons rather than glyphs from whatever font the platform picked. They inherit colour, so
   a disabled or active button tints them with no extra rule. */
.icon[b-385zf4xrhi] {
    display: block;
    flex: none;
}

/* Top-right of the panel, out of the way of everything but always reachable. */
.palette__close[b-385zf4xrhi] {
    position: absolute;
    inset-block-start: var(--size-2);
    inset-inline-end: var(--size-2);
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-round);
    background: transparent;
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

.palette__close:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

/* Room for it, so the swatch row does not run underneath. */
.palette__row[b-385zf4xrhi] {
    padding-inline-end: 2rem;
}

/* Settings: everything that is a preference rather than a tool. */
.topbar__cog[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--tabule-surface) 92%, transparent);
    backdrop-filter: blur(16px);
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

.topbar__cog:hover[b-385zf4xrhi],
.topbar__cog.is-active[b-385zf4xrhi] {
    color: var(--tabule-ink);
}

.settings__group[b-385zf4xrhi] {
    margin: var(--size-3) 0 var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.settings__group:first-child[b-385zf4xrhi] {
    margin-block-start: 0;
}

.settings__row[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-3);
    inline-size: 100%;
    padding: var(--size-2);
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-0);
    text-align: start;
    cursor: pointer;
}

.settings__row:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
}

.settings__state[b-385zf4xrhi] {
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    font-family: var(--font-mono);
}

/* Each option shows the paper it selects, dots and all — the setting is the sample. */
.settings__papers[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-2);
}

.settings__paper[b-385zf4xrhi] {
    flex: 1;
    padding: var(--size-3) var(--size-2);
    border: 2px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background-color: var(--paper);
    background-image: radial-gradient(var(--paper-dots) 1.1px, transparent 1.2px);
    background-size: 9px 9px;
    cursor: pointer;
}

.settings__paper.is-active[b-385zf4xrhi] {
    border-color: var(--tabule-accent);
}

.settings__paper-name[b-385zf4xrhi] {
    padding: 1px var(--size-1);
    border-radius: var(--radius-1);
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    color: var(--paper-dots);
    font-size: var(--font-size-00);
    filter: contrast(2.2);
}

/* Folding the toolbar down to the tools alone. */
.toolbar__fold[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    align-self: stretch;
    padding: 0;
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

.toolbar__fold:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

/* Collapsed keeps the tools and nothing else — switching pen to eraser is the thing you do
   mid-drawing; colour, size, zoom and assist are all one tap away again. Listed by what stays
   rather than what goes, because the toolbar gains children over time and a blocklist would let
   each new one quietly survive being collapsed. */
.toolbar.is-collapsed > *:not(.toolbar__fold):not(.toolbar__group:nth-of-type(1))[b-385zf4xrhi] {
    display: none;
}

.hud__close[b-385zf4xrhi] {
    margin-inline-start: auto;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-round);
    background: transparent;
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

.hud__close:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

/* Hex field and the two things you can do with a colour, on one line. */
.palette__line[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-2);
    margin-block-end: var(--size-3);
}

.palette__line .palette__hex[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
    margin-block-end: 0;
}

.palette__act[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

.palette__act:hover:not(:disabled)[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

.palette__act:disabled[b-385zf4xrhi] {
    opacity: 0.35;
    cursor: not-allowed;
}

.palette__act--danger:hover:not(:disabled)[b-385zf4xrhi] {
    color: var(--red-8);
}

/* The first-run name prompt. A scrim rather than a popover: it is asked once, on arrival, before
   the guest has any reason to touch the canvas — so interrupting is the point, and a panel that
   could be ignored would be answered by nobody. */
.intro[b-385zf4xrhi] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--size-4);
    background: color-mix(in oklab, var(--tabule-ink) 32%, transparent);
    backdrop-filter: blur(4px);
}

.intro__card[b-385zf4xrhi] {
    inline-size: min(22rem, 100%);
    padding: var(--size-4);
    border: 1px solid var(--tabule-line);
    border-radius: var(--tabule-chrome-radius);
    background: var(--tabule-surface);
    box-shadow: var(--shadow-5);
}

.intro__title[b-385zf4xrhi] {
    margin: 0 0 var(--size-3);
    color: var(--tabule-ink);
    font-size: var(--font-size-2);
    font-weight: 600;
}

.intro__input[b-385zf4xrhi] {
    inline-size: 100%;
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-1);
}

.intro__hint[b-385zf4xrhi] {
    margin: var(--size-2) 0 var(--size-4);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    line-height: 1.4;
}

.intro__done[b-385zf4xrhi] {
    inline-size: 100%;
    padding: var(--size-2) var(--size-3);
    border: none;
    border-radius: var(--radius-2);
    background: var(--tabule-accent-strong);
    color: var(--tabule-on-accent);
    font: inherit;
    font-size: var(--font-size-0);
    font-weight: 600;
    cursor: pointer;
}

/* Explanations, not labels: these carry the one sentence a setting needs to be understood, so
   they wrap rather than truncate. */
.settings__note[b-385zf4xrhi] {
    margin: 0 0 var(--size-2);
    padding-inline: var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    line-height: 1.4;
}

.settings__note--quiet[b-385zf4xrhi] {
    opacity: 0.75;
}

.settings__field[b-385zf4xrhi] {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    padding: var(--size-1) var(--size-2) var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

.settings__field input[b-385zf4xrhi] {
    inline-size: 100%;
    min-inline-size: 0;
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-0);
}

.settings__languages[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-2);
}

.settings__language[b-385zf4xrhi] {
    flex: 1;
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-00);
    cursor: pointer;
}

.settings__language.is-active[b-385zf4xrhi] {
    border-color: var(--tabule-accent);
    background: var(--tabule-surface-sunken);
}
/* /Pages/Library.razor.rz.scp.css */
/* A page, not a panel: it scrolls, it has margins, and nothing here floats over a canvas. */
.library[b-zb8xpgok17] {
    box-sizing: border-box;
    inline-size: min(64rem, 100%);
    min-block-size: 100dvh;
    margin-inline: auto;
    padding: var(--size-5) var(--size-4) var(--size-8);
    color: var(--tabule-ink);
}

.library__head[b-zb8xpgok17] {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--size-3);
    margin-block-end: var(--size-5);
}

.library__title[b-zb8xpgok17] {
    margin: 0;
    font-size: var(--font-size-5);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.library__folder[b-zb8xpgok17] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    margin: var(--size-1) 0 0;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

/* The path can be long and is the one thing here that must not push the page wide. */
.library__path[b-zb8xpgok17] {
    overflow: hidden;
    max-inline-size: 38rem;
    font-family: var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library__synced[b-zb8xpgok17] {
    color: var(--tabule-warn-ink);
}

.library__headactions[b-zb8xpgok17] {
    display: flex;
    gap: var(--size-2);
}

.library__ghost[b-zb8xpgok17] {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-00);
    text-decoration: none;
    cursor: pointer;
}

.library__ghost:hover[b-zb8xpgok17] {
    background: var(--tabule-surface-sunken);
}

.library__primary[b-zb8xpgok17] {
    padding: var(--size-2) var(--size-4);
    border: none;
    border-radius: var(--radius-2);
    background: var(--tabule-accent-strong);
    color: var(--tabule-on-accent);
    font: inherit;
    font-size: var(--font-size-00);
    font-weight: 600;
    cursor: pointer;
}

.library__primary:disabled[b-zb8xpgok17] {
    opacity: 0.4;
    cursor: default;
}

.library__small[b-zb8xpgok17] {
    padding-inline: var(--size-3);
}

.library__note[b-zb8xpgok17] {
    margin: 0 0 var(--size-4);
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

.library__new[b-zb8xpgok17] {
    display: flex;
    gap: var(--size-2);
    margin-block-end: var(--size-4);
}

.library__input[b-zb8xpgok17] {
    flex: 1;
    min-inline-size: 0;
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-0);
}

.library__count[b-zb8xpgok17] {
    margin: 0 0 var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.library__empty[b-zb8xpgok17] {
    color: var(--tabule-ink-muted);
}

/* auto-fill rather than auto-fit: one board should look like one board, not stretch across the
   whole page as a single enormous card. */
.library__grid[b-zb8xpgok17] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--size-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.library__card[b-zb8xpgok17] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tabule-line);
    border-radius: var(--tabule-chrome-radius);
    background: var(--tabule-surface);
}

.library__preview[b-zb8xpgok17] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    inline-size: 100%;
    padding: 0;
    border: none;
    border-block-end: 1px solid var(--tabule-line);
    background: var(--tabule-surface-sunken);
    cursor: pointer;
}

/* Over the monogram, filling the tile. contain rather than cover: a board is an arbitrary shape
   and cropping it would cut off the very strokes that identify it. */
.library__shot[b-zb8xpgok17] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.library__monogram[b-zb8xpgok17] {
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-6);
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.5;
}

.library__meta[b-zb8xpgok17] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--size-1);
    padding: var(--size-3) var(--size-3) var(--size-2);
}

.library__name[b-zb8xpgok17] {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--font-size-1);
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.library__facts[b-zb8xpgok17] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    margin: 0;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-00);
}

.library__busy[b-zb8xpgok17] {
    color: var(--tabule-warn-ink);
}

.library__actions[b-zb8xpgok17] {
    display: flex;
    justify-content: end;
    gap: var(--size-1);
    padding: 0 var(--size-2) var(--size-2);
}

.library__icon[b-zb8xpgok17] {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

.library__icon:hover[b-zb8xpgok17] {
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
}

/* Armed, waiting for the second press. Red is the whole warning — the label changes too, but the
   colour is what is seen from where the cursor already is. */
.library__icon.is-armed[b-zb8xpgok17] {
    background: var(--tabule-danger);
    color: var(--tabule-on-danger);
}

.library__rename[b-zb8xpgok17] {
    font-size: var(--font-size-0);
}

.library__emptytag[b-zb8xpgok17] {
    padding: 0 var(--size-1);
    border-radius: var(--radius-1);
    background: var(--tabule-surface-sunken);
}