/* /Layout/MainLayout.razor.rz.scp.css */
/* The offer of a newer build: small, at the top, over everything, and gone when put off. */
.update[b-qqvf777m1c] {
    position: fixed;
    inset-block-start: var(--size-2);
    inset-inline-start: 50%;
    z-index: 70;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: var(--size-2);
    max-inline-size: calc(100vw - var(--size-4));
    padding: var(--size-1) var(--size-1) var(--size-1) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-round, 999px);
    background: var(--tabule-surface);
    box-shadow: var(--shadow-3);
    color: var(--tabule-ink);
    font-size: var(--tabule-text-small);
}

.update__reload[b-qqvf777m1c] {
    padding: var(--size-1) var(--size-3);
    border: none;
    border-radius: var(--radius-round, 999px);
    background: var(--tabule-accent, var(--indigo-7));
    color: var(--gray-0);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.update__later[b-qqvf777m1c] {
    padding: 0 var(--size-2);
    border: none;
    background: transparent;
    color: var(--tabule-ink-muted);
    font: inherit;
    font-size: var(--font-size-2);
    line-height: 1;
    cursor: pointer;
}
/* /Layout/SharePeople.razor.rz.scp.css */
/* The people a board or folder is shared with. The address takes the room; what they may do and the
   way to stop sit at the end. */
.people__section[b-3srie8572f] {
    margin: var(--size-3) 0 var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-caption);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-2);
}

.people__row[b-3srie8572f] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding-block: var(--size-1);
}

.people__address[b-3srie8572f] {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--tabule-text-small);
}

/* Reached through a folder further up: quieter, and saying so where the controls would be. */
.people__row--inherited .people__address[b-3srie8572f] {
    color: var(--tabule-ink-muted);
}

.people__via[b-3srie8572f] {
    flex-shrink: 0;
    max-inline-size: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
}

.people__choice[b-3srie8572f] {
    padding: var(--size-1);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--tabule-text-small);
}

.people__remove[b-3srie8572f] {
    padding: var(--size-1) var(--size-2);
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    font: inherit;
    cursor: pointer;
}

.people__invite[b-3srie8572f] {
    display: flex;
    gap: var(--size-2);
    margin-block-start: var(--size-2);
}

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

.people__invite button[b-3srie8572f] {
    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(--tabule-text-small);
    cursor: pointer;
}

.people__invite button:disabled[b-3srie8572f] {
    opacity: 0.5;
    cursor: not-allowed;
}

.people__problem[b-3srie8572f] {
    margin: var(--size-2) 0 0;
    color: var(--red-8);
    font-size: var(--tabule-text-small);
}

.people__hint[b-3srie8572f] {
    margin: var(--size-2) 0 0;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    line-height: var(--font-lineheight-3);
}

/* The message to send whoever it was just shared with, and the way to copy it. */
.people__message[b-3srie8572f] {
    margin: var(--size-3) 0 0;
    padding: var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
}

.people__messagehead[b-3srie8572f] {
    margin: 0 0 var(--size-2);
    color: var(--tabule-ink);
    font-size: var(--tabule-text-small);
    font-weight: 600;
}

.people__messagetext[b-3srie8572f] {
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    padding: var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--tabule-text-small);
    line-height: var(--font-lineheight-3);
    resize: vertical;
}

.people__messageactions[b-3srie8572f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--size-2);
    margin-block-start: var(--size-2);
}

.people__copy[b-3srie8572f],
.people__messageclose[b-3srie8572f] {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    padding: var(--size-1) var(--size-3);
    border-radius: var(--radius-2);
    font: inherit;
    font-size: var(--tabule-text-small);
    font-weight: 600;
    cursor: pointer;
}

.people__copy[b-3srie8572f] {
    border: 1px solid transparent;
    background: var(--tabule-accent, var(--indigo-7));
    color: var(--gray-0);
}

.people__messageclose[b-3srie8572f] {
    border: 1px solid var(--tabule-line);
    background: transparent;
    color: var(--tabule-ink);
}
/* /Layout/Waking.razor.rz.scp.css */
.waking[b-d5e7fez0ds] {
    display: flex;
    align-items: center;
    gap: var(--size-3);
}

.waking__mark[b-d5e7fez0ds] {
    flex: none;
    border-radius: var(--radius-2);
}

/* The stroke draws itself, pauses, and starts again.
 *
 * dasharray 100 against pathLength 100 makes the dash exactly the length of the curve, so the
 * offset is a percentage of it: 100 is nothing drawn, 0 is the whole line. The pause at the end
 * is deliberate — a line that restarts the instant it finishes reads as a spinner, and the point
 * of drawing a stroke rather than spinning something is that it is a board being written on. */
.waking__ink[b-d5e7fez0ds] {
    stroke-dasharray: 100;
    animation: waking-stroke-b-d5e7fez0ds 2.4s ease-in-out infinite;
}

@keyframes waking-stroke-b-d5e7fez0ds {
    0% { stroke-dashoffset: 100; }
    45% { stroke-dashoffset: 0; }
    75% { stroke-dashoffset: 0; }

    /* Out the far end rather than back the way it came, so it reads as another stroke rather than
       as the first one being taken away. */
    100% { stroke-dashoffset: -100; }
}

/* Somebody who has asked for less movement gets the mark and the words, and no animation. The
   message is the part that matters; the drawing is decoration on top of it. */
@media (prefers-reduced-motion: reduce) {
    .waking__ink[b-d5e7fez0ds] {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.waking__text[b-d5e7fez0ds] {
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    line-height: var(--font-lineheight-3);
}
/* /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 top of the screen, not beside it, and at the end of it: the start is the tool's
       options. 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-end: 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);
}

/* Quiet, and to the right of the badge: it is there to be read out when something is wrong, not
   to be looked at the rest of the time. */
.hud__version[b-385zf4xrhi] {
    margin-inline-start: auto;
    padding-inline-end: var(--size-2);
    color: var(--tabule-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
}

.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);
}

/* ---------------------------------------------------------------------------------------------
   The chrome, laid out as Excalidraw lays out its own: islands floating over the board at its
   edges. White islands with a soft shadow for what is worked with — the tools, the options of the
   one in hand, the panels that open — and quieter grey buttons standing on their own for what is
   reached for now and then: the menu, the board's name, zoom and undo.

   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.
   --------------------------------------------------------------------------------------------- */

/* The measures everything here is built from, in one place: a tool's button, the room left at the
   edge of the screen, the width of the options panel, and how far the boards push it all over
   while they are docked. */
.chrome[b-385zf4xrhi] {
    --tool: 2.25rem;
    --edge: var(--size-3);
    --island-pad: 0.25rem;
    --props-width: 12.5rem;
    --panel-width: 20rem;
    --panel-inset: 0px;

    /* Zoom and undo at the bottom left, side by side: the room kept clear of them when the tools are
       along the bottom too. */
    --footline-width: 15.25rem;
}

/* Docked beside the board only where there is room for both and for the top of the screen beside them:
   docked on a 1024 px screen, the board's name was squeezed to an empty pill. Narrower, the boards
   are a drawer over the left of the board; on a phone, a sheet over all of it. */
@media (width >= 80rem) {
    .chrome.with-panel[b-385zf4xrhi] {
        --panel-inset: var(--panel-width);
    }
}

/* A finger is not a mouse pointer. 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) {
    .chrome[b-385zf4xrhi] {
        --tool: 2.75rem;
        --props-width: 15.5rem;
        --footline-width: 17.75rem;
    }
}

@media (width <= 48rem) {
    .chrome[b-385zf4xrhi] {
        --edge: var(--size-2);
    }
}

/* An island: something worked with. */
.toolbar[b-385zf4xrhi],
.props[b-385zf4xrhi],
.popover[b-385zf4xrhi],
.menu[b-385zf4xrhi],
.palette[b-385zf4xrhi] {
    border-radius: var(--tabule-island-radius);
    background: var(--tabule-surface);
    box-shadow: var(--tabule-island-shadow);
}

/* Standing on its own, quieter: reached for now and then. */
.corner__menu[b-385zf4xrhi],
.topbar__board[b-385zf4xrhi],
.topbar__whoami[b-385zf4xrhi],
.zoom[b-385zf4xrhi],
.history[b-385zf4xrhi],
.footline__fold[b-385zf4xrhi] {
    border: none;
    border-radius: var(--tabule-island-radius);
    background: var(--tabule-quiet);
    color: var(--tabule-ink);
}

/* The top of the screen, in three: the menu and the board at the start, the tools in the middle,
   people and sharing at the end. A grid rather than three boxes pinned to their corners, so the
   tools keep to the middle while there is room for them to, and give way rather than slide under
   a long board name when there is not. */
.topline[b-385zf4xrhi] {
    position: fixed;
    inset-block-start: var(--edge);
    inset-inline: calc(var(--panel-inset) + var(--edge)) var(--edge);
    /* Over the options down the left, so the menu opening from the top of them covers them. */
    z-index: 21;
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) auto minmax(max-content, 1fr);
    align-items: start;
    gap: var(--size-3);

    /* Only what is in it takes the pointer: the gaps between are board. */
    pointer-events: none;
}

.topline > *[b-385zf4xrhi] {
    pointer-events: auto;
}

.corner[b-385zf4xrhi] {
    position: relative;
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: var(--size-2);
    min-inline-size: 0;
    max-inline-size: 100%;
}

.corner__menu[b-385zf4xrhi] {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: var(--tool);
    block-size: var(--tool);
    padding: 0;
    cursor: pointer;
}

.corner__menu:hover[b-385zf4xrhi],
.corner__menu.is-active[b-385zf4xrhi],
.topbar__board:hover:not(:disabled, .is-static, .topbar__name)[b-385zf4xrhi] {
    background: var(--tabule-quiet-hover);
}

/* The board's name, beside the menu: what is open, before anything about it. It gives way to the
   tools on a narrow screen, down to an ellipsis, rather than pushing them off the middle. */
.topbar__board[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-1);

    /* Never squeezed to an empty pill: the tools move over first. */
    min-inline-size: 6rem;
    block-size: var(--tool);
    padding: 0 var(--size-3);
    font: inherit;
    font-size: var(--tabule-text);
    font-weight: var(--font-weight-6);
    text-decoration: none;
    cursor: pointer;
}

.topbar__title[b-385zf4xrhi] {
    min-inline-size: 0;
    max-inline-size: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Whose a shared board is, beside its name: quieter, and the first thing to go when space runs out. */
.topbar__by[b-385zf4xrhi] {
    flex-shrink: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-start: var(--size-1);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    font-weight: var(--font-weight-4);
}

.topbar__board:disabled[b-385zf4xrhi],
.topbar__board.is-static[b-385zf4xrhi] {
    cursor: default;
}

/* The board's name being typed over: the same pill, as a box, as wide as the name in it where the
   browser can size it so — a fixed width pushed the rest of a narrow top bar off the screen. */
.topbar__name[b-385zf4xrhi] {
    inline-size: 10rem;
    background: var(--tabule-surface);
    box-shadow: inset 0 0 0 1px var(--tabule-accent);
    outline: none;
    cursor: text;
}

@supports (field-sizing: content) {
    .topbar__name[b-385zf4xrhi] {
        inline-size: auto;
        min-inline-size: 5rem;
        max-inline-size: 16rem;
        field-sizing: content;
    }
}

/* Where the board is kept, beside its name. A cloud alone while all is well — the words are there
   for a screen reader and a hover — and words as well when it is not where it belongs. On an island
   of its own: standing on the board, its colours would be read against whatever paper the board has,
   and the ones that read on white are lost on slate. The surface rather than the name's quiet grey,
   which is for something to press, and against which the amber words measured 4.4. */
.topbar__state[b-385zf4xrhi] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--size-1);
    block-size: var(--tool);
    padding: 0 var(--size-2);
    border-radius: var(--tabule-island-radius);
    background: var(--tabule-surface);
    box-shadow: var(--tabule-island-shadow);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    white-space: nowrap;
}

/* In the colour of what it says: kept in green, on its way in the accent's blue, and kept nowhere —
   a board held by nothing but this tab — in red. Amber is below. The scratch canvas is kept nowhere
   by design and says so in grey, which is not a warning. */
.topbar__state.is-saved[b-385zf4xrhi] {
    color: var(--tabule-good-ink);
}

.topbar__state.is-pending[b-385zf4xrhi] {
    color: var(--tabule-accent);
}

.topbar__state.is-ephemeral[b-385zf4xrhi] {
    color: var(--tabule-danger);
}

.topbar__state.is-saved .topbar__statetext[b-385zf4xrhi],
.topbar__state.is-pending .topbar__statetext[b-385zf4xrhi] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Words only where there is room for them beside the name and the tools; the cloud says it, and a
   hover says it in words. */
@media (width < 64rem) {
    .topbar__state .topbar__statetext[b-385zf4xrhi] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Kept, but not where it belongs yet. Amber rather than the muted grey of "not kept at all": the
   work is safe and the sync is not, and those are different things to be told. */
.topbar__state.is-local[b-385zf4xrhi] {
    color: var(--tabule-warn-ink);
}

/* The tools, in the middle of the top. */
.toolbar[b-385zf4xrhi] {
    grid-column: 2;
    display: flex;
    align-items: center;
    padding: var(--island-pad);
}

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

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

.tool[b-385zf4xrhi] {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--tool);
    block-size: var(--tool);
    padding: 0;
    border: none;
    border-radius: var(--tabule-island-radius);
    background: transparent;
    color: var(--tabule-ink);
    font-size: var(--font-size-2);
    line-height: 1;
    cursor: pointer;
}

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

/* The tool in hand: tinted, as Excalidraw marks it, rather than filled solid — a dark square in the
   middle of the top of the screen pulled the eye from the board every time it was looked past. */
.tool.is-active[b-385zf4xrhi] {
    background: var(--tabule-chosen);
    color: var(--tabule-on-chosen);
}

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

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

/* The key that picks it, small in its corner — at the caption size, as everything here that is
   meant to be read is. Not on a touch screen, which has no keys to press. */
.tool__key[b-385zf4xrhi] {
    position: absolute;
    inset-block-end: 1px;
    inset-inline-end: 3px;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-caption);
    line-height: 1;
    pointer-events: none;
}

@media (pointer: coarse) {
    .tool__key[b-385zf4xrhi] {
        display: none;
    }
}

/* Where the tools would be, for a guest who may only look. As tall as a tool, so the bar keeps its
   shape when the pen is granted and the tools arrive in its place. */
.toolbar__viewonly[b-385zf4xrhi] {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    block-size: var(--tool);
    padding-inline: var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    white-space: nowrap;
}

/* People and sharing, at the end of the top. */
.topbar[b-385zf4xrhi] {
    position: relative;
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--size-2);
}

/* Where the banners that ask for a decision hang: just under the top of the screen. On a phone the
   top wraps to an unknown height, and a banner over it for the moment it is needed is better than
   one somewhere it might not be seen. */
.asktoedit[b-385zf4xrhi],
.alsoopen[b-385zf4xrhi] {
    --below-topbar: calc(var(--size-3) + 2.75rem + var(--size-2));
}

@media (width <= 48rem) {
    .asktoedit[b-385zf4xrhi],
    .alsoopen[b-385zf4xrhi] {
        --below-topbar: var(--size-3);
    }
}

.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);
}

/* What the tool in hand offers, down the left under the menu, as Excalidraw has its properties. A
   column of short sections, each with a word over it saying what it sets. As wide as the widest of
   them on any tool, so it keeps its edge as the tools change and the colour editor beside it has a
   fixed place to open. */
.props[b-385zf4xrhi] {
    position: fixed;
    inset-block-start: calc(var(--edge) + var(--tool) + var(--size-3));
    inset-inline-start: calc(var(--panel-inset) + var(--edge));
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    inline-size: var(--props-width);

    /* Clear of zoom and undo at the bottom, scrolling rather than running under them. */
    max-block-size: calc(100dvh - 2 * (var(--edge) + var(--tool) + var(--size-3)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--size-3);
}

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

.props__label[b-385zf4xrhi] {
    margin: 0;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    font-weight: 400;
}

/* Five to a row, and as many rows as there are colours. */
.props__colors[b-385zf4xrhi] {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: start;
    gap: var(--size-2);
}

.props__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);
}

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

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

    /* On the board's own paper, so the mark shows as it will on the board. On the panel's colour
       black ink vanished into a dark panel, and yellow into a light one. */
    border-radius: var(--radius-round);
    background: var(--paper, transparent);
    box-shadow: inset 0 0 0 1px var(--tabule-line);
}

/* 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. */
.props__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. */
.props__size .nib.is-eraser .nib__dot[b-385zf4xrhi] {
    border: 1px dashed var(--tabule-ink-muted);
    background: var(--tabule-surface);
}

/* A choice of a few, as one segmented control. */
.props__modes[b-385zf4xrhi] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    inline-size: max-content;
    max-inline-size: 100%;
    block-size: 2rem;
    padding: 2px;
    border-radius: var(--tabule-island-radius);
    background: var(--tabule-surface-sunken);
}

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

/* Deleting is the one of these that loses something, so it says so where the pointer already is. */
.props__delete:hover[b-385zf4xrhi] {
    color: var(--tabule-danger);
}

/* What opens from the end of the top — sharing, the account, a guest's name — hanging under it. */
.popover[b-385zf4xrhi] {
    position: absolute;
    inset-block-start: calc(100% + var(--size-2));
    inset-inline-end: 0;
    inline-size: min(22rem, calc(100vw - 2 * var(--edge)));
    padding: var(--size-3);
    font-size: var(--font-size-0);

    /* Never past the bottom of the screen, where it would hide what is under it with no way to
       scroll it back. */
    max-block-size: calc(100dvh - var(--tool) - 3 * var(--edge));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Where a board made from the menu goes. A row of its own under the name, so the row above keeps
   its one verb. */
.boards__where[b-385zf4xrhi] {
    display: flex;
    align-items: stretch;
    gap: var(--size-2);
    margin: calc(-1 * var(--size-2)) 0 var(--size-3);
    color: var(--tabule-ink-muted);
}

/* The folder in front of the picker, and the way up out of it: a quiet button that looks like the
   icon it was until it is pointed at, starting where the field above it starts. Bigger than the text
   beside it: at that size it was found too small, and a house or an arrow inside a folder is a mark
   inside a mark. */
.boards__up[b-385zf4xrhi] {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

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

/* At the top of the library, where there is no further out: the house says where it is, and does nothing. */
.boards__up:disabled[b-385zf4xrhi] {
    cursor: default;
}

.boards__where select[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
    padding: var(--size-1) 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[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(--tabule-text-small);
    font-weight: var(--font-weight-4);
    white-space: nowrap;
}

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

.boards__empty[b-385zf4xrhi],
.boards__note[b-385zf4xrhi] {
    margin: 0;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    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);
}

/* The panel of boards, docked to the left edge for as long as it is wanted: a column the height of
   the window, whose head stays put while the boards scroll under it. */
.boardpanel[b-385zf4xrhi] {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 22;
    display: flex;
    flex-direction: column;
    inline-size: var(--panel-width);
    border-inline-end: 1px solid var(--tabule-line);
    background: var(--tabule-surface);
    box-shadow: var(--tabule-island-shadow);

    /* Reading size: the names of the boards are what is read here. At 12 px, in pale grey, they were
       found hard to read. */
    font-size: var(--tabule-text);
}

.boardpanel__head[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-3) var(--size-2) var(--size-4);
}

.boardpanel__title[b-385zf4xrhi] {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-7);
}

/* The way to the page with every board on it, for what the panel leaves out: folders made and
   moved, files brought in and taken away. */
.boardpanel__all[b-385zf4xrhi] {
    color: var(--tabule-accent);
    font-weight: 600;
    text-decoration: none;
}

.boardpanel__all:hover[b-385zf4xrhi] {
    color: var(--tabule-accent-strong);
    text-decoration: underline;
}

.boardpanel__close[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: none;
    border-radius: var(--tabule-island-radius);
    background: var(--tabule-quiet);
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

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

.boardpanel__body[b-385zf4xrhi] {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--size-2) var(--size-3) var(--size-3);
}

/* The list is the panel's to scroll, not a box of its own inside it. */
.boardpanel .boards__list[b-385zf4xrhi] {
    max-block-size: none;
    overflow: visible;
}

/* "Shared with you", under the boards of one's own: a heading over a rule, as the page of every
   board has it. Alone, for somebody with no library, it is the top of the panel. */
.boards__section[b-385zf4xrhi] {
    margin: var(--size-4) 0 var(--size-2);
    padding-block-start: var(--size-3);
    border-block-start: 1px solid var(--tabule-line);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    font-weight: 600;
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

.boards__section:first-child[b-385zf4xrhi] {
    margin-block-start: 0;
    padding-block-start: 0;
    border: none;
}

/* A board in a shared folder open above it, set in under the folder. */
.board--inside .board__open[b-385zf4xrhi] {
    padding-inline-start: var(--size-5);
}

/* The way to the boards: a tab on the left edge, halfway down — the screen's edge while the panel is
   in, the panel's while it is out. */
.boardtab[b-385zf4xrhi] {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: var(--panel-inset);
    z-index: 23;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 3.5rem;
    padding: 0;
    border: none;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--tabule-island-radius);
    border-end-end-radius: var(--tabule-island-radius);
    background: var(--tabule-surface);
    box-shadow: var(--tabule-island-shadow);
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

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

.boardtab.is-open[b-385zf4xrhi] {
    inset-inline-start: var(--panel-width);
}

@media (pointer: coarse) {
    .boardtab[b-385zf4xrhi] {
        inline-size: 1.75rem;
        block-size: 4rem;
    }
}

/* No room beside the board on a phone: a sheet over all of it, with its own way out. */
@media (width <= 48rem) {
    .boardpanel[b-385zf4xrhi] {
        inline-size: 100vw;
        z-index: 30;
    }

    .boardtab.is-open[b-385zf4xrhi] {
        display: none;
    }
}

.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(--tabule-text-small);
    cursor: pointer;
}

/* Centred on the letters, not on the line box around them. The text labels are each set in their
   own face, and faces disagree about how much room sits above and below the letters — so
   centring the line box left "Serif", "Mono" and the italic I nearly two pixels higher than their
   neighbours. Trimmed to cap height and baseline, every face centres alike.

   On the label rather than the button: the trim applies to a box's own lines, and text directly
   inside a grid lives in an anonymous item that would never see it.

   Every face also brought to the same cap height. Faces declare different ones, so trimmed boxes
   of different heights still centred a pixel apart — and names of typefaces set side by side read
   better at one size anyway. */
.mode > span[b-385zf4xrhi] {
    text-box: trim-both cap alphabetic;
    font-size-adjust: cap-height 0.7;
}

.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;
}

/* Overlapping like a stack of coins — against each other only. The overlap used to be on every
   avatar, so the first in the row was pulled into the save state beside it, and an avatar inside
   a button hung out over the button's edge. */
.peers .peer + .peer[b-385zf4xrhi] {
    margin-inline-start: -0.4rem;
}

.peer[b-385zf4xrhi] {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--tabule-surface);
    border-radius: var(--radius-round);
    background: var(--peer);
    color: var(--gray-0);
    font-size: var(--tabule-text-caption);
    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;
}

/* Sharing, and a guest's asking for the pen: the one filled button on the screen, as Excalidraw
   fills its own, because it is the thing on it that reaches other people. */
.topbar__share[b-385zf4xrhi] {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    block-size: var(--tool);
    padding: 0 var(--size-3);
    border: 1px solid transparent;
    border-radius: var(--tabule-island-radius);
    background: var(--tabule-accent-strong);
    color: var(--tabule-on-accent);
    font: inherit;
    font-size: var(--tabule-text);
    font-weight: var(--font-weight-6);
    white-space: nowrap;
    cursor: pointer;
}

.topbar__share:hover:not(:disabled)[b-385zf4xrhi] {
    background: color-mix(in srgb, var(--tabule-accent-strong) 86%, var(--tabule-ink));
}

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

/* Disabled here means "nothing to press", not "unavailable". This button doubles as the guest'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] {
    background: var(--tabule-quiet);
    color: var(--tabule-ink-muted);
}

.share__hint[b-385zf4xrhi] {
    margin: 0 0 var(--size-3);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    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(--tabule-text-small);
}

/* 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(--tabule-text-small);
    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);
}

/* Public, but not the way the user set it up: the relay refused and a temporary tunnel took over.
   Amber rather than green, because the link works and the arrangement does not — green here would
   be the same signal as a relay that is fine, and the difference is the whole message. */
.share__reach.is-degraded[b-385zf4xrhi] {
    color: var(--tabule-warn-ink);
}

.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(--tabule-text-small);
    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(--tabule-text-caption);
    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;
}

/* No link yet, on the hosted app: making one is a choice, not what opening the panel does. */
.share__create[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;
    font-size: var(--tabule-text-small);
    cursor: pointer;
}

/* People the board is shared with by address are the SharePeople component, styled there. */

.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(--below-topbar);
    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(--tabule-text);
    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 and undo, at the bottom left. */
.footline[b-385zf4xrhi] {
    position: fixed;
    inset-block-end: var(--edge);
    inset-inline-start: calc(var(--panel-inset) + var(--edge));
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--size-2);
}

.zoom[b-385zf4xrhi],
.history[b-385zf4xrhi] {
    display: flex;
    align-items: center;
}

.zoom .tool:hover[b-385zf4xrhi],
.history .tool:hover:not(:disabled)[b-385zf4xrhi] {
    background: var(--tabule-quiet-hover);
}

/* Zoom. Promoted out of the diagnostics panel because it is the one figure there that a person
   steers by rather than inspects. Pressed, it goes back to 100%. */
.zoom__level[b-385zf4xrhi] {
    min-inline-size: 3.5rem;
    block-size: var(--tool);
    padding: 0 var(--size-1);
    border: none;
    border-radius: var(--tabule-island-radius);
    background: transparent;
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--tabule-text-small);
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
}

.zoom__level:hover[b-385zf4xrhi] {
    background: var(--tabule-quiet-hover);
}

/* A phone's own, beside undo: folding the options away. The colour in hand is on it, so what is
   folded away is still in view. */
.footline__fold[b-385zf4xrhi] {
    display: none;
    align-items: center;
    gap: var(--size-2);
    block-size: var(--tool);
    margin-inline-start: auto;
    padding: 0 var(--size-3);
    color: var(--tabule-ink-muted);
    cursor: pointer;
}

.footline__ink[b-385zf4xrhi] {
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: var(--radius-round);
    background: var(--ink);
    box-shadow: 0 0 0 1px var(--tabule-line);
}


/* 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(--tabule-text);
}

.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;
    display: block;
    inline-size: 2.75rem;
    block-size: 1.75rem;
    margin-inline-end: var(--size-2);
    overflow: hidden;
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-1);
    background: var(--tabule-surface-sunken);
}

.board__shot img[b-385zf4xrhi] {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

/* A folder's row wears a folder where a board wears its picture, so the two line up and the
   folder still reads as a different kind of thing. */
.board__foldericon[b-385zf4xrhi] {
    display: grid;
    place-items: center;
    border-style: dashed;
    color: var(--tabule-ink-muted);
}

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

/* In the weight the board's name has in the top bar, so the names stand out from the line about
   each under it: in the same weight, a list of boards read as one block of grey and black. */
.board__name[b-385zf4xrhi] {
    display: flex;
    align-items: baseline;
    gap: var(--size-2);
    font-weight: var(--font-weight-6);
}

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

/* 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(--tabule-text-small);
    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(--tabule-text-small);
    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;
}


/* The question a destructive action asks: the same scrim and card as the name prompt, with the
   safe answer first and the destructive one in the danger colour. What it will do is the sentence
   worth reading, so it is at reading size rather than the prompt's small print. */
.confirm .intro__hint[b-385zf4xrhi] {
    color: var(--tabule-ink);
    font-size: var(--font-size-1);
}

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

.confirm__actions button[b-385zf4xrhi] {
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    font: inherit;
    font-size: var(--font-size-0);
    font-weight: 600;
    cursor: pointer;
}

.confirm__cancel[b-385zf4xrhi] {
    border: 1px solid var(--tabule-line);
    background: transparent;
    color: var(--tabule-ink);
}

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

.confirm__danger[b-385zf4xrhi] {
    border: 1px solid transparent;
    background: var(--red-8);
    color: var(--gray-0);
}

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

/* "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(--tabule-text-small);
    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(--tabule-text-small);
}

/* 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(--tabule-on-accent);
    color: var(--tabule-accent-strong);
    font-size: var(--tabule-text-caption);
    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(--below-topbar);
    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(--tabule-text);
    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;
}

/* The menu, hanging from its button at the top left: the board taken away or cleared, then the
   preferences, ticked when on. A menu's rows rather than a settings form, as Excalidraw's is. */
.menu[b-385zf4xrhi] {
    position: absolute;
    inset-block-start: calc(100% + var(--size-2));
    inset-inline-start: 0;
    inline-size: min(16rem, calc(100vw - 2 * var(--edge)));
    padding: var(--size-2);
    font-size: var(--tabule-text);

    max-block-size: calc(100dvh - var(--tool) - 3 * var(--edge));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.menu__item[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    inline-size: 100%;
    min-block-size: 2rem;
    padding: var(--size-1) var(--size-2);
    border: none;
    border-radius: var(--tabule-island-radius);
    background: transparent;
    color: var(--tabule-ink);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.menu__item:hover[b-385zf4xrhi] {
    background: var(--tabule-quiet);
}

/* The words take the row, so what is said at the end of it lines up down the menu. */
.menu__item > span:not(.menu__tick, .menu__hint)[b-385zf4xrhi] {
    flex: 1;
    min-inline-size: 0;
}

.menu__hint[b-385zf4xrhi] {
    flex: none;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-caption);
    font-family: var(--font-mono);
}

/* Where a ticked preference has its tick: a column of its own, so the words line up whether or not. */
.menu__tick[b-385zf4xrhi] {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--tabule-accent);
}

/* It takes everything off the board for everybody on it — said in the danger colour, and asked
   again before it does anything. */
.menu__item--danger[b-385zf4xrhi] {
    color: var(--tabule-danger);
}

/* Only where zoom has given its buttons up to the tools. */
.menu__item--phone[b-385zf4xrhi] {
    display: none;
}

.menu__rule[b-385zf4xrhi] {
    margin: var(--size-2) 0;
    border: none;
    border-block-start: 1px solid var(--tabule-line);
}

.menu__label[b-385zf4xrhi] {
    margin: var(--size-2) var(--size-2) var(--size-1);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
}

.menu__choices[b-385zf4xrhi] {
    display: flex;
    gap: var(--size-1);
    padding: 0 var(--size-2) var(--size-1);
}

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

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

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

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

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

/* Written in the ink that suits the paper, so the name is a sample too — and can be read. It was in
   the colour of the dots, put through a contrast filter, and the slate's name was black on black. */
.menu__paper-name[b-385zf4xrhi] {
    padding: 1px var(--size-1);
    border-radius: var(--radius-1);
    background: var(--paper);
    color: var(--paper-ink);
    font-size: var(--tabule-text-small);
}

/* The menu in two halves, each under a heading saying what it is about: the board on screen, for
   everybody on it, then this person's own settings, on every board. */
.menu__section:not(:first-child)[b-385zf4xrhi] {
    margin-block-start: var(--size-2);
    padding-block-start: var(--size-1);
    border-block-start: 1px solid var(--tabule-line);
}

.menu__heading[b-385zf4xrhi] {
    margin: var(--size-2) var(--size-2) var(--size-1);
    color: var(--tabule-ink);
    font-size: var(--tabule-text-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.menu__heading + .menu__note[b-385zf4xrhi] {
    margin-block-start: calc(-1 * var(--size-1));
}

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

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

.menu__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(--tabule-text-small);
}

.menu__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);
}


/* A guest's own name, and the way to change it. */
.topbar__whoami[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    block-size: var(--tool);
    padding: 0 var(--size-3) 0 var(--size-1);
    font: inherit;
    font-size: var(--tabule-text-small);
    cursor: pointer;
}

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

/* Signed in: the avatar alone, round, the height of a tool. The pill's padding is lopsided on
   purpose, for a name, and with no name it pushed the avatar off centre. */
.topbar__whoami--account[b-385zf4xrhi] {
    justify-content: center;
    inline-size: var(--tool);
    padding: 0;
    border-radius: var(--radius-round);
    background: transparent;
}

.topbar__whoami--account .peer[b-385zf4xrhi] {
    inline-size: 2rem;
    block-size: 2rem;
}

/* The account panel: who you are, and the way out. Sized to that rather than to the board list
   whose box it borrows, which left three short lines in a panel built for a column of cards. */
.account[b-385zf4xrhi] {
    inline-size: max-content;
    min-inline-size: 12rem;
    max-inline-size: min(20rem, 90vw);
}

.account__name[b-385zf4xrhi] {
    margin: 0;
    color: var(--tabule-ink);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-6);
    overflow-wrap: anywhere;
}

/* What tells two accounts with the same name apart, so it is shown — as the second thing to read. */
.account__address[b-385zf4xrhi] {
    margin: var(--size-1) 0 0;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
    overflow-wrap: anywhere;
}

.account__signout[b-385zf4xrhi] {
    margin-block-start: var(--size-3);
    padding: var(--size-1) 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-0);
    cursor: pointer;
}

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

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

.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(--tabule-text-small);
}

/* 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(--tabule-text-small);
    cursor: pointer;
}

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

/* The colour editor, opening beside the panel whose swatches it edits, as Excalidraw opens its own.
   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: fixed;
    inset-block-start: calc(var(--edge) + var(--tool) + var(--size-3));
    inset-inline-start: calc(var(--panel-inset) + var(--edge) + var(--props-width) + var(--size-2));
    z-index: 21;
    inline-size: min(20rem, calc(100vw - var(--size-6)));
    padding: var(--size-3);
}

.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 there is no room beside the options for it. It takes the bottom of the screen instead
   and covers the tools rather than pushing them up: while colours are being edited, the tools
   underneath are not what anyone is reaching for. */
@media (width <= 48rem) {
    .palette[b-385zf4xrhi] {
        inset-block: auto 0;
        inset-inline: 0;
        inline-size: auto;
        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. Through
   ::deep, since the icon is another component's element: without it this had never applied. */
.swatch--edit[b-385zf4xrhi]  .icon {
    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 options panel'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 <= 48rem) {
    .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;
}

/* Wherever the swatch row is hidden, this line is the top one and the room has to be here instead:
   with it only on the row, the close button was drawn over the delete button on every wide screen. */
@media (width > 48rem) {
    .palette__line[b-385zf4xrhi] {
        padding-inline-end: 2rem;
    }
}

.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);
}

/* The one action in the panel, for whoever is chasing a recognition bug. Quiet like the rest. */
.hud__action[b-385zf4xrhi] {
    margin-block-start: var(--size-3);
    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;
    cursor: pointer;
}

.hud__action: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(--tabule-text-small);
    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;
}

/* The text editor, laid over the canvas where the words will end up.

   Transparent and chromeless on purpose: what the user sees while typing must be what the canvas
   draws afterwards, so a border, a background or a different font would each be a visible jump at
   the moment they click away. The font stack is the shim's, through a custom property, so there is
   one definition of what board text looks like rather than two that drift. */
.stage__text[b-385zf4xrhi] {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    resize: none;
    overflow: hidden;
    background: transparent;
    font-family: var(--board-text-font);
    font-weight: 400;
    white-space: pre-wrap;
    /* Matches TextItem.LineHeight, which is what the measurement and the canvas both use. */
    line-height: 1.3;
    /* Above the overlay canvas, which does not take pointer events anyway. */
    z-index: 1;
}

/* A closed editor on its way out. Clicks go through it to the canvas, which is already drawing the
   same words underneath. */
.stage__text--leaving[b-385zf4xrhi] {
    pointer-events: none;
}

/* The type-size preview: a letter rather than a dot, because the slider means something different
   with the text tool and the control has to say so without a label. Fixed size — unlike the nib
   dot, which shows the actual width, a glyph at 96px would not fit a toolbar. */
.nib--text[b-385zf4xrhi] {
    display: grid;
    place-items: center;
}

.nib__letter[b-385zf4xrhi] {
    font-family: var(--board-text-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--nib-ink);
}

/* The style toggles say what they do by being it: a bold B, a slanted I, and each typeface name
   set in its own face. Cheaper to read than three words and a tooltip, and it works before anyone
   has learned the toolbar. */
.mode--bold[b-385zf4xrhi] {
    font-weight: 800;
}

.mode--italic[b-385zf4xrhi] {
    font-style: italic;
    /* A serif I is a letter; a sans-serif one is a vertical line, which reads as a caret. */
    font-family: var(--board-text-serif);
}

.mode--sans[b-385zf4xrhi] {
    font-family: var(--board-text-sans);
}

.mode--serif[b-385zf4xrhi] {
    font-family: var(--board-text-serif);
}

.mode--mono[b-385zf4xrhi] {
    font-family: var(--board-text-mono);
}
/* ---------------------------------------------------------------------------------------------
   Where the tools and their options are, chosen in the menu, on a screen wide enough to choose.

   Along the bottom by default, the options in a strip over the tools: under the hand that draws,
   where they were before the chrome took after Excalidraw — the colours along the bottom were
   found the better place for them. The rules above are the other way, Excalidraw's: the tools
   along the top and the options down the left. Either can be had with either.
   --------------------------------------------------------------------------------------------- */
@media (width > 48rem) {
    /* Centred along the bottom, with the room zoom and undo take at the bottom left kept clear at
       both ends: where that leaves too little, the tools start where zoom and undo end instead of
       over them. */
    .chrome.tools-bottom .toolbar[b-385zf4xrhi] {
        position: fixed;
        inset-block-end: var(--edge);
        inset-inline:
            calc(var(--panel-inset) + var(--edge) + var(--footline-width) + var(--size-3))
            calc(var(--edge) + var(--footline-width) + var(--size-3));
        z-index: 20;
        inline-size: fit-content;
        margin-inline: auto;
    }

    /* The options in a strip beside the tools, as wide as what they hold, centred: no word over each
       group — what each is shows in it, and says so on a hover — and a rule between them. */
    .chrome.options-beside .props[b-385zf4xrhi] {
        inset-inline: calc(var(--panel-inset) + var(--edge)) var(--edge);
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: var(--size-2) var(--size-3);
        inline-size: fit-content;
        max-inline-size: calc(100vw - var(--panel-inset) - (2 * var(--edge)));
        max-block-size: none;
        margin-inline: auto;
        overflow: visible;
        padding: var(--island-pad) var(--size-3);
    }

    .chrome.options-beside .props__label[b-385zf4xrhi] {
        display: none;
    }

    .chrome.options-beside .props__section[b-385zf4xrhi] {
        flex-direction: row;
        align-items: center;
    }

    .chrome.options-beside .props__section + .props__section[b-385zf4xrhi] {
        padding-inline-start: var(--size-3);
        border-inline-start: 1px solid var(--tabule-line);
    }

    .chrome.options-beside .props__colors[b-385zf4xrhi] {
        display: flex;
        flex-wrap: wrap;
        max-inline-size: 22rem;
    }

    .chrome.options-beside .props__size input[b-385zf4xrhi] {
        flex: none;
        inline-size: 7rem;
    }

    /* Over the tools when they are along the bottom … */
    .chrome.tools-bottom.options-beside .props[b-385zf4xrhi] {
        inset-block: auto calc(var(--edge) + var(--tool) + (2 * var(--island-pad)) + var(--size-2));
    }

    /* … and under them when they are along the top. */
    .chrome.tools-top.options-beside .props[b-385zf4xrhi] {
        inset-block-start: calc(var(--edge) + var(--tool) + (2 * var(--island-pad)) + var(--size-2));
    }

    /* The colour editor beside the swatches it edits, wherever they are: over the strip at the
       bottom, under it at the top. */
    .chrome.options-beside .palette[b-385zf4xrhi] {
        inset-inline: calc(var(--panel-inset) + var(--edge)) var(--edge);
        margin-inline: auto;
    }

    .chrome.tools-bottom.options-beside .palette[b-385zf4xrhi] {
        inset-block: auto calc(var(--edge) + (2 * (var(--tool) + (2 * var(--island-pad)))) + (2 * var(--size-2)));
    }

    .chrome.tools-top.options-beside .palette[b-385zf4xrhi] {
        inset-block-start: calc(var(--edge) + (2 * (var(--tool) + (2 * var(--island-pad)))) + (2 * var(--size-2)));
    }

    /* An error over the tools and their options rather than on them. In rems, being outside the
       chrome whose measures these are. */
    .chrome.tools-bottom ~ .banner[b-385zf4xrhi] {
        inset-block-end: 8rem;
    }
}

/* ---------------------------------------------------------------------------------------------
   Phones.

   Guests arrive on phones — that is the entire point of a share link — so this is the common case,
   not the edge one. The top keeps the menu and the board's name and sharing; the tools go to the
   bottom, under the thumb, with undo on a line over them where zoom was — pinching zooms — and the
   options of the tool in hand over that, folding away to leave the board.
   --------------------------------------------------------------------------------------------- */
@media (width <= 48rem) {
    /* Two at the top, with the tools gone to the bottom: the board's name has all that sharing
       leaves it, rather than half of a row whose middle is empty. */
    .topline[b-385zf4xrhi] {
        grid-template-columns: minmax(0, 1fr) max-content;
        column-gap: var(--size-2);
    }

    .topbar[b-385zf4xrhi] {
        grid-column: 2;
    }

    .toolbar[b-385zf4xrhi] {
        position: fixed;
        inset-block-end: var(--edge);
        inset-inline: var(--edge);
        z-index: 20;
        inline-size: fit-content;
        max-inline-size: calc(100vw - 2 * var(--edge));
        margin-inline: auto;
    }

    /* Decoration, and the width of a tool between them. */
    .toolbar__divider[b-385zf4xrhi] {
        display: none;
    }

    /* The tools share the line rather than spill past it. At a finger's 44 px eight need 380 px,
       more than a phone narrower than that has, so they give up width until eight fit — full height
       stays, which is the half a finger needs. 54px is the margins and padding round the bar and the
       gaps between the eight, and a pixel to spare so rounding cannot tip the last off the end. */
    .toolbar .tool[b-385zf4xrhi] {
        inline-size: min(var(--tool), calc((100vw - 54px) / 8));
    }

    .footline[b-385zf4xrhi] {
        inset-block-end: calc(var(--edge) + var(--tool) + 2 * var(--island-pad) + var(--size-2));
        inset-inline: var(--edge);
    }

    .zoom[b-385zf4xrhi] {
        display: none;
    }

    .footline__fold[b-385zf4xrhi] {
        display: flex;
    }

    /* The width of the screen over the tools, its sections side by side as far as they fit. */
    .props[b-385zf4xrhi] {
        inset-block: auto calc(var(--edge) + 2 * var(--tool) + 2 * var(--island-pad) + 2 * var(--size-2));
        inset-inline: var(--edge);
        flex-flow: row wrap;
        gap: var(--size-2) var(--size-4);
        inline-size: auto;
        max-block-size: 45dvh;
    }

    /* Closer together, so the shipped seven and the editor make one row on a phone at a finger's
       size: at the panel's own spacing the editor went onto a row by itself. */
    .props__colors[b-385zf4xrhi] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-1);
    }

    .props__size input[b-385zf4xrhi] {
        flex: none;
        inline-size: 7rem;
    }

    /* Folded, it keeps only what acts on a selection — a finger has no other way to — and is gone
       when there is none. */
    .props.is-folded .props__section:not(.props__section--selection)[b-385zf4xrhi] {
        display: none;
    }

    .props.is-folded:not(:has(.props__section--selection))[b-385zf4xrhi] {
        display: none;
    }

    .menu__item--phone[b-385zf4xrhi] {
        display: flex;
    }

    .topbar__title[b-385zf4xrhi] {
        max-inline-size: 9rem;
    }

    .topbar__by[b-385zf4xrhi] {
        display: none;
    }

    /* A guest's own name is their initials here, beside Ask to edit: whole, the two pushed the board's
       name off the line. Pressed, it still opens with the name to change. */
    .topbar__whoami:not(.topbar__whoami--account)[b-385zf4xrhi] {
        justify-content: center;
        inline-size: var(--tool);
        padding: 0;
    }

    .topbar__whoami-name[b-385zf4xrhi] {
        display: none;
    }

    /* Anchored to the screen 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 it. */
    .popover[b-385zf4xrhi] {
        position: fixed;
        inset-block-start: calc(var(--edge) + var(--tool) + var(--size-2));
        inset-inline: var(--edge);
        inline-size: auto;
    }
}

/* A finger's sizes for what is not a tool. A slider is the hardest control to hit and the easiest to
   knock; the segmented controls are sized as a group, not per segment — giving each of hold, auto
   and off its own 44 px made the pill taller than everything beside it. */
@media (pointer: coarse) {
    .props__modes[b-385zf4xrhi] {
        block-size: 2.75rem;
    }

    .props__size input[b-385zf4xrhi] {
        block-size: 2.75rem;
    }
}


/* ---------------------------------------------------------------------------------------------
   A board's version history: the dialog over everything, wider than a question, with the versions
   in a list that scrolls inside it — a month of afternoons is a long one.
   --------------------------------------------------------------------------------------------- */
.history__card[b-385zf4xrhi] {
    display: flex;
    flex-direction: column;
    inline-size: min(30rem, 100%);
    max-block-size: min(40rem, calc(100dvh - var(--size-8)));
}

.history__head[b-385zf4xrhi] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--size-3);
}

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

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

.history__made[b-385zf4xrhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-2);
    margin: 0 0 var(--size-3);
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
    color: var(--tabule-ink);
    font-size: var(--tabule-text-small);
}

.history__list[b-385zf4xrhi] {
    flex: 1;
    min-block-size: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.history__version[b-385zf4xrhi] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-2) 0;
    border-block-start: 1px solid var(--tabule-line);
}

.history__shot[b-385zf4xrhi] {
    display: block;
    inline-size: 4.5rem;
    block-size: 2.75rem;
    overflow: hidden;
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-1);
    background: var(--tabule-surface-sunken);
}

.history__shot img[b-385zf4xrhi] {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    background: #ffffff;
}

.history__when[b-385zf4xrhi] {
    color: var(--tabule-ink);
    font-size: var(--font-size-1);
    font-variant-numeric: tabular-nums;
}

.history__restore[b-385zf4xrhi],
.history__open[b-385zf4xrhi] {
    padding: var(--size-1) 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(--tabule-text-small);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.history__restore:hover:not(:disabled)[b-385zf4xrhi],
.history__open:hover[b-385zf4xrhi] {
    background: var(--tabule-surface-sunken);
}

.history__restore:disabled[b-385zf4xrhi] {
    cursor: default;
    opacity: 0.6;
}
/* /Pages/Library.razor.rz.scp.css */
/* A page, not a panel: it scrolls, it has margins, and nothing here floats over a canvas. */
/* Its own scroller. The page as a whole never scrolls — the board beside this needs the body held
   still — so a library taller than the window simply ran off the bottom with no way to reach it.
   Full width, with the column centred by padding, so the scrollbar sits at the window's edge
   rather than beside the column. */
.library[b-zb8xpgok17] {
    box-sizing: border-box;
    block-size: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--size-5) max(var(--size-4), calc((100% - 64rem) / 2)) 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(--tabule-text-small);
}

/* The path can be long and is the one thing here that must not push the page wide. Held to the
   column as well as to 38rem: on a phone 38rem is wider than the screen, and the path ran off its
   edge rather than ending in an ellipsis. */
.library__head > div:first-child[b-zb8xpgok17] {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.library__path[b-zb8xpgok17] {
    overflow: hidden;
    max-inline-size: min(38rem, 100%);
    font-family: var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Read to the end rather than truncated, and not in the monospace the folder path uses — this is
   a sentence about why the list looks different, not a path. Amber because the list is usable and
   incomplete, which is neither the green of fine nor the red of broken. */
.library__offline[b-zb8xpgok17] {
    max-inline-size: 46rem;
    color: var(--tabule-warn-ink);
    font-family: inherit;
    white-space: normal;
}

.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(--tabule-text);
    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(--tabule-text);
    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(--tabule-text);
}

/* A newer release: the note's quiet panel, with the two things to do about it on the same line. */
.library__update[b-zb8xpgok17] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-2) var(--size-3);
    margin: 0 0 var(--size-4);
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    background: var(--tabule-surface-sunken);
    font-size: var(--tabule-text);
}

.library__update > span[b-zb8xpgok17] {
    margin-inline-end: auto;
}

/* A link dressed as the primary button, which has no underline to take off being a button. */
.library__update a[b-zb8xpgok17] {
    text-decoration: none;
}

.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(--tabule-text);
}

/* The count, and the order beside it at the far end. */
.library__listhead[b-zb8xpgok17] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-3);
    margin: 0 0 var(--size-2);
}

.library__order[b-zb8xpgok17] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
}

.library__order select[b-zb8xpgok17] {
    padding: var(--size-1) var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    font: inherit;
}

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

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

/* Where you are, with what can be done to the folder you are in beside it. */
.library__where[b-zb8xpgok17] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-2) var(--size-3);
    margin: 0 0 var(--size-4);
}

/* Where you are among the folders. Each step back up is a link; the last is where you are. */
.library__crumbs[b-zb8xpgok17] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--size-2);
    margin: 0;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-1);
}

.library__crumbs a[b-zb8xpgok17] {
    color: var(--tabule-ink-muted);
    text-decoration: none;
}

.library__crumbs a:hover[b-zb8xpgok17] {
    color: var(--tabule-ink);
    text-decoration: underline;
}

.library__crumbhere[b-zb8xpgok17] {
    color: var(--tabule-ink);
    font-weight: 600;
}

/* The folder's own name, which renames it: the same words, with a hint of a button under the pointer. */
.library__crumbrename[b-zb8xpgok17] {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    padding: 0 var(--size-1);
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

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

.library__crumbrename:hover[b-zb8xpgok17],
.library__crumbrename:focus-visible[b-zb8xpgok17] {
    background: var(--tabule-surface-hover, rgb(0 0 0 / 0.05));
}

/* The box the name turns into: about the size of a name, and no taller than the line it is on, so
   nothing below moves as it opens. */
.library__crumbname[b-zb8xpgok17] {
    flex: 0 1 auto;
    inline-size: min(16rem, 60vw);
    margin-block: calc(-1 * var(--size-1));
    padding: var(--size-1) var(--size-2);
    font: inherit;
    font-weight: 600;
}

/* A folder's card: the same card as a board's, with the folder where the picture would be. */
.library__folderpreview[b-zb8xpgok17] {
    color: var(--tabule-ink-muted);
}

/* Through ::deep: the icon is the Icon component's own element, which this page's scoped rules do
   not otherwise reach, so without it this had never applied. */
.library__folderpreview[b-zb8xpgok17]  .icon {
    opacity: 0.55;
}

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

/* Where to put a board, opened from its card. */
.library__move[b-zb8xpgok17] {
    inline-size: 100%;
    margin-block-start: var(--size-2);
    padding: var(--size-1) var(--size-2);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    font: inherit;
    font-size: var(--tabule-text-small);
}

/* "Shared with you", under the library's own boards. Worded like the count above it so the two
   lists read as one page of boards, not a second screen tacked on. */
.library__section[b-zb8xpgok17] {
    margin: var(--size-6) 0 var(--size-2);
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-caption);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* The heading with a refresh beside it, for the page that is nothing but what is shared. */
.library__sectionhead[b-zb8xpgok17] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-2);
    margin: var(--size-6) 0 var(--size-2);
}

.library__sectionhead .library__section[b-zb8xpgok17] {
    margin: 0;
}

/* At the far end of the way back up, out of the path's reading line. */
.library__crumbrefresh[b-zb8xpgok17] {
    margin-inline-start: auto;
}

/* 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(--tabule-text-small);
}

.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(--tabule-text);
}

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

/* The sign-in address, after the name and quieter than it. It is the part that tells two accounts
   with the same display name apart, so it is shown rather than tucked into a tooltip — but it is
   the second thing to read, not the first. */
.library__address[b-zb8xpgok17] {
    margin-left: var(--size-2);
    color: var(--gray-6);
}

/* Who a folder is shared with. A card above the folders rather than a dialog over them, so the
   folder it is about stays in sight below. */
.library__sharepanel[b-zb8xpgok17] {
    margin-block-end: var(--size-4);
    padding: var(--size-3) var(--size-4) var(--size-4);
    border: 1px solid var(--tabule-line);
    border-radius: var(--tabule-chrome-radius);
    background: var(--tabule-surface);
    outline: none;
}

.library__sharehead[b-zb8xpgok17] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-2);
}

.library__sharetitle[b-zb8xpgok17] {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    margin: 0;
    font-size: var(--font-size-1);
    font-weight: 600;
}

/* On a folder's card when it is shared with anybody: small, beside the count, so it is noticed
   by whoever is looking for it and ignored by everybody else. */
.library__sharedtag[b-zb8xpgok17] {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    padding: 0 var(--size-1);
    border-radius: var(--radius-1);
    background: var(--tabule-surface-sunken);
}

/* Whose shared folder this is, under the way down to it. */
.library__sharedby[b-zb8xpgok17] {
    margin-block-end: var(--size-4);
}

/* A card that can be carried. Held without selecting its text or opening the phone's menu for it,
   because holding is how a finger picks it up. */
.library__card[data-drag-id][b-zb8xpgok17] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Where it came from, while it is away. */
.library__card.is-dragging[b-zb8xpgok17] {
    opacity: 0.4;
}

/* Where it would go if let go now. */
.library__card.is-drop-target[b-zb8xpgok17] {
    outline: 3px solid var(--tabule-accent);
    outline-offset: 2px;
}

.library__crumbs a.is-drop-target[b-zb8xpgok17] {
    border-radius: var(--radius-1);
    outline: 2px solid var(--tabule-accent);
    outline-offset: 2px;
}

/* Two to a row on a phone. One card took the whole width and most of the height — a folder icon
   the size of a hand — so a library of twenty boards was twenty screens of scrolling. */
@media (width <= 32rem) {
    .library__grid[b-zb8xpgok17] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--size-2);
    }

    .library__monogram[b-zb8xpgok17] {
        font-size: var(--font-size-5);
    }

    .library__folderpreview[b-zb8xpgok17]  .icon {
        inline-size: 3rem;
        block-size: 3rem;
    }

    .library__meta[b-zb8xpgok17] {
        padding: var(--size-2) var(--size-2) var(--size-1);
    }

    .library__actions[b-zb8xpgok17] {
        flex-wrap: wrap;
        padding: 0 var(--size-1) var(--size-1);
    }
}

/* The mark drawing itself while the library is slow to answer. Through ::deep, being the Waking
   component's own element. */
.library[b-zb8xpgok17]  .library__waking {
    margin-block-end: var(--size-4);
}

/* The trash: a list rather than cards, because what matters is which board and how long it has
   left, not what it looked like. */
.library__trashnote[b-zb8xpgok17] {
    margin: 0 0 var(--size-3);
    color: var(--tabule-ink-muted);
}

.library__trash[b-zb8xpgok17] {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.library__trashed[b-zb8xpgok17] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-2) var(--size-3);
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
}

.library__trashedname[b-zb8xpgok17] {
    font-weight: 600;
}

.library__trashedwhen[b-zb8xpgok17] {
    flex: 1;
    min-inline-size: 12rem;
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
}

/* Armed, as the delete button on a card is: red is the warning seen from where the pointer is. */
.library__purge.is-armed[b-zb8xpgok17] {
    border-color: var(--tabule-danger);
    background: var(--tabule-danger);
    color: var(--tabule-on-danger);
}
/* /Pages/Owners.razor.rz.scp.css */
/* The owner list. Laid out like the library it hangs off, so it reads as part of the same place
   rather than a settings screen from somewhere else. */
/* Its own scroller, for the same reason as the library: the page never scrolls. */
.owners[b-w3m7iagfvj] {
    box-sizing: border-box;
    block-size: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--size-5) max(var(--size-4), calc((100% - 40rem) / 2)) var(--size-8);
    color: var(--tabule-ink);
}

.owners__head[b-w3m7iagfvj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-3);
    margin-block-end: var(--size-4);
}

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

.owners__lead[b-w3m7iagfvj] {
    margin: 0 0 var(--size-4);
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-0);
    line-height: 1.5;
}

.owners__note[b-w3m7iagfvj] {
    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(--tabule-text-small);
}

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

.owners__input[b-w3m7iagfvj] {
    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(--tabule-text);
}

.owners__primary[b-w3m7iagfvj] {
    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(--tabule-text);
    font-weight: 600;
    cursor: pointer;
}

.owners__primary:disabled[b-w3m7iagfvj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.owners__ghost[b-w3m7iagfvj],
.owners__danger[b-w3m7iagfvj] {
    display: inline-flex;
    align-items: center;
    padding: var(--size-1) 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(--tabule-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.owners__danger[b-w3m7iagfvj] {
    border-color: var(--red-7);
    color: var(--red-8);
}

.owners__problem[b-w3m7iagfvj] {
    margin: 0 0 var(--size-3);
    color: var(--red-8);
    font-size: var(--tabule-text-small);
}

.owners__empty[b-w3m7iagfvj] {
    margin: var(--size-4) 0 0;
    color: var(--tabule-ink-muted);
    font-size: var(--font-size-0);
}

.owners__list[b-w3m7iagfvj] {
    display: grid;
    gap: var(--size-2);
    margin: var(--size-4) 0 0;
    padding: 0;
    list-style: none;
}

.owners__row[b-w3m7iagfvj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-3);
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--tabule-line);
    border-radius: var(--radius-2);
    background: var(--tabule-surface);
}

.owners__who[b-w3m7iagfvj] {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.owners__address[b-w3m7iagfvj] {
    overflow-wrap: anywhere;
    font-size: var(--font-size-0);
}

.owners__state[b-w3m7iagfvj] {
    color: var(--tabule-ink-muted);
    font-size: var(--tabule-text-small);
}

.owners__confirm[b-w3m7iagfvj] {
    font-size: var(--tabule-text-small);
    overflow-wrap: anywhere;
}

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