/* Pento — doodle whiteboard UI (docs/design/ui-canvases.md).
   Everything is marker on a whiteboard: hand-drawn outlines, hard offset shadows,
   sticky notes and magnets. No rails, no top bar: canvas + pins + dock is the chrome. */

@font-face {
    font-family: "Caveat";
    src: url("fonts/caveat.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: "Permanent Marker";
    src: url("fonts/permanent-marker.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Patrick Hand";
    src: url("fonts/patrick-hand.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

/* ============ tokens ============
   The ONLY place colours are written (besides the canvas-palette presets below, which are
   user-facing data). Three layers, same idea as Bootstrap's --bs-* variables:

   1. palette  — raw, fixed colours: --blue-500, --gray-900, --cream… Never changes per theme.
                 Use these directly for things that look the same in every theme (a sticky note's
                 paper, a doodle pad's ink, a button's white label).
   2. roles    — what a colour is FOR: --wall, --surface, --paper, --ink, --accent, --danger-text…
                 These are the theme switch. Dark / palettes / custom theme only ever redefine roles.
   3. shades   — rgba() is never written by hand: color-mix(in srgb, var(--gray-900) 20%, transparent).

   Rule of thumb: text/background that must follow the theme → a role. Fixed object → a palette
   colour. A raw #hex or rgb() anywhere else in the CSS/razor is a bug (ops/check-colours.sh). */

:root {
    color-scheme: light;
    --font-marker: "Caveat", "Comic Sans MS", cursive;
    --font-logo: "Caveat", "Comic Sans MS", cursive;
    --font-hand: "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;

    /* ---- 1. palette (fixed) ---- */
    /* neutrals */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1efe8;
    --gray-200: #d6dae2;
    --gray-300: #c9ced6;
    --gray-500: #9aa1ad;
    --gray-600: #5b6272;
    --gray-700: #4a5060;
    --gray-900: #1f2430;

    /* paper */
    --cream: #fffef8;
    --snow: #fdfdfb;
    --bone: #e8e4dc;
    --sand: #d9d5ca;
    --navy: #1b2940;

    /* night (dark theme surfaces + ink) */
    --night-900: #11141b;
    --night-800: #1b202b;
    --night-700: #232a37;
    --night-600: #1d2330;
    --night-500: #3b4459;
    --mist-100: #eef1f6;
    --mist-300: #b3bac8;
    --mist-500: #737c8e;

    /* blue */
    --blue-50: #dbe7fb;   /* catch-up's blue paper */
    --blue-100: #c8e2ff;
    --blue-300: #6ab0ff;
    --blue-500: #2f6fdb;
    --blue-700: #2657b8;
    --blue-900: #10294d;

    /* red */
    --red-100: #ffd6cc;
    --red-200: #ff9b93;
    --red-300: #ff6b5e;
    --red-500: #e0453a;
    --red-600: #d63a2f;
    --red-700: #c22f25;
    --red-800: #b0261c;
    --red-900: #7d1a12;

    /* green */
    --green-100: #d9f3e6;
    --green-200: #bff0d4;
    --green-300: #4fd49a;
    --green-500: #1f9d68;
    --green-700: #167a50;
    --green-900: #12382a;

    /* yellow */
    --yellow-100: #fff9d6;
    --yellow-200: #fff1a1;
    --yellow-300: #ffd23f;
    --yellow-500: #ffe45c;
    --yellow-700: #9a7c12;
    --yellow-800: #6b5a00;
    --yellow-900: #4a4527;
    --yellow-950: #3a3310;

    /* amber / kraft */
    --amber-200: #f6e7b8;
    --amber-300: #f3d27a;
    --amber-500: #f0b429;
    --amber-600: #d98a00;
    --brown-500: #9b6b3c;
    --amber-900: #5c3b14;
    --amber-950: #3a2a14;

    /* orange */
    --orange-300: #ffae57;
    --orange-500: #f08a24;
    --orange-600: #c96a10;
    --orange-700: #a34a00;

    /* purple */
    --purple-50: #efe8fb; /* doodle a day's lilac card */
    --purple-100: #dccbff;
    --purple-200: #c7adf5;
    --purple-300: #b595ff;
    --purple-500: #7a4cd9;

    /* sky (Vimeo's blue) */
    --sky-300: #a8d6f5;
    --sky-500: #2f8fcf;

    /* teal */
    --teal-300: #5fd0db;
    --teal-500: #0f9aa8;

    /* pink */
    --pink-150: #ffd9e6;  /* gift wrap: the gift band, the present, paper scraps */
    --pink-100: #ffc9dd;  /* the focus timer's card */
    --pink-200: #ffb3cf;
    --pink-300: #ff7fae;
    --pink-500: #e0457b;
    --pink-700: #b0265c;
    --pink-950: #4a1430;

    /* kraft, sage, dusk, olive (your wall's widgets) */
    --kraft-200: #f3d2a8; /* the clocks' kraft tag */
    --kraft-300: #e3c496; /* the photo frame's tile */
    --sage-200: #c8d9c0;  /* an empty photo frame */
    --sage-800: #2c4a32;
    --dusk-200: #c8cfe0;  /* a clock face at night there */
    --olive-950: #2a2a1f; /* ink on sticky-note paper */
    --link-ink: #1d4fa8;  /* links on the video card's paper */

    /* ---- 2. roles (themed) ---- */
    /* app surfaces (auth, dialogs, dock, friends) */
    --wall: var(--bone);
    --sheet: var(--white); /* the whiteboard you draw on: white in every theme, only your own theme changes it */
    --surface: var(--snow);
    --paper: var(--cream);
    --ink: var(--gray-900);
    --ink-soft: var(--gray-600);
    --ink-faint: var(--gray-500);
    --line: var(--gray-900);
    --on-accent: var(--white);

    /* marker set */
    --m-black: var(--gray-900);
    --m-red: var(--red-500);
    --m-blue: var(--blue-500);
    --m-green: var(--green-500);
    --m-orange: var(--orange-500);
    --m-purple: var(--purple-500);
    --m-pink: var(--pink-500);
    --hi-yellow: var(--yellow-500);

    --accent: var(--m-blue);
    --accent-strong: var(--blue-700); /* primary buttons: AA-contrast blue under white text */
    --danger: var(--m-red);
    --note: var(--yellow-200);

    /* coloured text that sits on a themed surface (Bootstrap's *-text-emphasis) */
    --success-text: var(--green-700);
    --warning-text: var(--orange-700);
    --danger-text: var(--red-800);

    /* charts + status (admin › how it's running). Steps / typical / slowest 5% were picked to be
       told apart with colour-blindness; status follows fine / look / over everywhere. */
    --chart-typical: var(--blue-500);
    --chart-slow: var(--orange-600);
    --chart-limit: var(--red-700);
    --chart-step-1: var(--blue-500);
    --chart-step-2: var(--orange-600);
    --chart-step-3: var(--teal-500);
    --chart-step-4: var(--purple-500);
    --state-ok: var(--green-500);
    --state-warn: var(--amber-500);
    --state-down: var(--red-600);

    --shadow-hard: 3px 3px 0 var(--line);
    --shadow-hard-lg: 5px 6px 0 var(--line);
    --shadow-soft: 0 10px 30px color-mix(in srgb, var(--gray-900) 14%, transparent);

    /* hand-drawn blob radii */
    --wobble-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --wobble-2: 15px 255px 15px 225px / 225px 15px 255px 15px;
    --wobble-3: 185px 25px 145px 20px / 20px 155px 25px 175px;
}

/* night: a dark glass board with bright markers — roles only, the palette stays put.
   Two selectors (OS preference unless forced light, or forced dark) hold the same values. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --wall: var(--night-900);
        --surface: var(--night-800);
        --paper: var(--night-700);
        --ink: var(--mist-100);
        --ink-soft: var(--mist-300);
        --ink-faint: var(--mist-500);
        --line: var(--mist-100);
        --m-black: var(--mist-100);
        --m-blue: var(--blue-300);
        --m-green: var(--green-300);
        --m-red: var(--red-300);
        --m-orange: var(--orange-300);
        --m-purple: var(--purple-300);
        --m-pink: var(--pink-300);
        --hi-yellow: var(--yellow-700);
        --note: var(--yellow-900);
        --accent-strong: var(--blue-500);
        --success-text: var(--green-300);
        --warning-text: var(--orange-300);
        --danger-text: var(--red-300);
        --chart-typical: var(--blue-300);
        --chart-slow: var(--orange-300);
        --chart-limit: var(--red-300);
        --chart-step-1: var(--blue-300);
        --chart-step-2: var(--orange-300);
        --chart-step-3: var(--teal-300);
        --chart-step-4: var(--purple-300);
        --shadow-hard: 3px 3px 0 var(--black);
        --shadow-hard-lg: 5px 6px 0 var(--black);
        --shadow-soft: 0 10px 30px color-mix(in srgb, var(--black) 45%, transparent);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --wall: var(--night-900); --surface: var(--night-800); --paper: var(--night-700);
    --ink: var(--mist-100); --ink-soft: var(--mist-300); --ink-faint: var(--mist-500); --line: var(--mist-100);
    --m-black: var(--mist-100); --m-blue: var(--blue-300); --m-green: var(--green-300); --m-red: var(--red-300);
    --m-orange: var(--orange-300); --m-purple: var(--purple-300); --m-pink: var(--pink-300); --hi-yellow: var(--yellow-700);
    --note: var(--yellow-900); --accent-strong: var(--blue-500);
    --success-text: var(--green-300); --warning-text: var(--orange-300); --danger-text: var(--red-300);
    --chart-typical: var(--blue-300); --chart-slow: var(--orange-300); --chart-limit: var(--red-300);
    --chart-step-1: var(--blue-300); --chart-step-2: var(--orange-300); --chart-step-3: var(--teal-300); --chart-step-4: var(--purple-300);
    --shadow-hard: 3px 3px 0 var(--black); --shadow-hard-lg: 5px 6px 0 var(--black);
    --shadow-soft: 0 10px 30px color-mix(in srgb, var(--black) 45%, transparent);
}

/* ============ canvas palettes ============
   data-palette on canvas-page / canvas-frame / board pin.
   --p-wall behind the board · --p-canvas board surface · --p-ink text + outlines
   --p-note sticky-note paper · --p-note-ink · --p-accent marker highlight */

[data-palette="classic"],
[data-palette="auto"]      { --p-wall: var(--wall); --p-canvas: var(--surface); --p-ink: var(--ink); --p-note: var(--note); --p-note-ink: #2a2a1f; }
[data-palette="sunny"]     { --p-wall: #efe6cf; --p-canvas: #fffdf5; --p-ink: #2c2a22; --p-note: #ffe98a; --p-note-ink: #3a3310; }
[data-palette="mint"]      { --p-wall: #dde9e2; --p-canvas: #fbfefc; --p-ink: #1d2f28; --p-note: #bff0d4; --p-note-ink: #12382a; }
[data-palette="bubblegum"] { --p-wall: #f1e0e6; --p-canvas: #fffcfd; --p-ink: #34202a; --p-note: #ffc9dd; --p-note-ink: #4c1730; }
[data-palette="sky"]       { --p-wall: #dfe7f1; --p-canvas: #fcfdff; --p-ink: #1b2940; --p-note: #c8e2ff; --p-note-ink: #10294d; }
[data-palette="grape"]     { --p-wall: #e6e0f1; --p-canvas: #fdfcff; --p-ink: #271d3d; --p-note: #dccbff; --p-note-ink: #2c1760; }
[data-palette="tangerine"] { --p-wall: #f1e3d6; --p-canvas: #fffdfa; --p-ink: #33241a; --p-note: #ffd2a8; --p-note-ink: #4d2508; }
[data-palette="night"]     { --p-wall: #11141b; --p-canvas: #1d2330; --p-ink: #eef1f6; --p-note: #3b4459; --p-note-ink: #f3f5fa; }
/* your own theme: these are the fallbacks until the user's picks arrive from prefs
   (MainLayout overrides them per part); accent default matches classic */
[data-palette="custom"]    { --p-wall: #efe9dc; --p-canvas: #fffdf8; --p-ink: #2a2a22; --p-note: #ffe98a; --p-note-ink: #3a3310; }

/* accents: the shell carries the page's one too, so bookmarks (outside the page)
   match the screen you're looking at. Your avatar no longer uses these — it keeps
   the pen colour you picked */
[data-palette="classic"], [data-palette="auto"],
.canvases-shell:has(> :is([data-palette="classic"], [data-palette="auto"])) { --p-accent: var(--m-blue); }
[data-palette="sunny"], .canvases-shell:has(> [data-palette="sunny"]) { --p-accent: var(--orange-500); }
[data-palette="mint"], .canvases-shell:has(> [data-palette="mint"]) { --p-accent: var(--green-500); }
[data-palette="bubblegum"], .canvases-shell:has(> [data-palette="bubblegum"]) { --p-accent: var(--pink-500); }
[data-palette="sky"], .canvases-shell:has(> [data-palette="sky"]) { --p-accent: var(--blue-500); }
[data-palette="grape"], .canvases-shell:has(> [data-palette="grape"]) { --p-accent: var(--purple-500); }
[data-palette="tangerine"], .canvases-shell:has(> [data-palette="tangerine"]) { --p-accent: var(--orange-500); }
[data-palette="night"], .canvases-shell:has(> [data-palette="night"]) { --p-accent: var(--blue-300); }
[data-palette="custom"], .canvases-shell:has(> [data-palette="custom"]) { --p-accent: var(--blue-500); }

/* explicit palettes pin the board chrome (rail, dock, popovers) too: the owner
   picked this look, so OS dark mode must not recolor it. Remap the global
   tokens to the palette's so every var(--ink/--paper/--line) consumer inside
   the board follows the palette. classic/auto are excluded: they alias the
   global tokens (this would self-cycle) and intentionally follow OS dark mode. */
[data-palette="sunny"], [data-palette="mint"], [data-palette="bubblegum"],
[data-palette="sky"], [data-palette="grape"], [data-palette="tangerine"],
[data-palette="night"], [data-palette="custom"] {
    color-scheme: light;
    --wall: var(--p-wall);
    --surface: var(--p-canvas);
    --paper: var(--p-canvas);
    --ink: var(--p-ink);
    --ink-soft: color-mix(in srgb, var(--p-ink) 65%, var(--p-canvas));
    --ink-faint: color-mix(in srgb, var(--p-ink) 45%, var(--p-canvas));
    --line: var(--p-ink);
    --note: var(--p-note);
    --hi-yellow: var(--yellow-500); /* bright swash under dark ink; night darkens it below */
}
[data-palette="night"] {
    color-scheme: dark;
    --hi-yellow: var(--yellow-700); /* dark swash under the light ink: 3.5:1 on a 2.9rem title (AA large) */
    --shadow-hard: 3px 3px 0 var(--black);
    --shadow-hard-lg: 5px 6px 0 var(--black);
    --shadow-soft: 0 10px 30px color-mix(in srgb, var(--black) 45%, transparent);
}

/* carries a palette to things drawn outside the page shell (dialogs, overlays) without a box of its own */
.pal { display: contents; }

/* auto follows system dark mode for the home wall */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-palette="auto"] { --p-canvas: var(--night-600); --p-note: var(--yellow-900); --p-note-ink: #fbf3c4; --p-accent: var(--blue-300); }
}

/* ============ base ============ */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-hand);
    font-size: 17px;
    line-height: 1.4;
    background: var(--wall);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    /* UI chrome never drag-selects (whiteboard, wall, panels); written text opts
       back in below — chat messages, notes, and anything the person types in */
    user-select: none;
    -webkit-user-select: none;
}

/* written text stays selectable: chat message bodies and anything typed */
.chat-msg-content, .notepad-pin-text {
    user-select: text;
    -webkit-user-select: text;
}

input, textarea, select, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
}

h1, h2, h3 { font-family: var(--font-marker); font-weight: 700; line-height: 1.1; }
h1 { font-size: 2.6rem; margin: 0 0 .4em; }
h2 { font-size: 1.8rem; margin: 1.2em 0 .4em; }
h3 { font-size: 1.9rem; margin: 0 0 .5em; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }

.icon { display: block; flex-shrink: 0; }

:focus-visible { outline: 3px dashed var(--accent); outline-offset: 3px; }
h1[tabindex="-1"]:focus { outline: none; } /* FocusOnNavigate's programmatic focus */

/* marker-swash highlight behind text */
.hi {
    background: linear-gradient(104deg, transparent .9%, var(--hi-yellow) 2.4%, var(--hi-yellow) 97%, transparent 98.5%);
    padding: 0 .2em;
    border-radius: .6em .2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* Caveat stops at 700; a stroke in its own colour makes titles read heavier */
    -webkit-text-stroke: .035em currentColor;
    paint-order: stroke fill;
}

/* the "Pento chat" wordmark: thick Caveat, "Pen" in ink + "to" in blue, "chat" small, grey, unstroked */
.wm { font-family: var(--font-logo); font-weight: 700; line-height: 1; -webkit-text-stroke: .035em currentColor; paint-order: stroke fill; }
.wm b { font-weight: inherit; color: var(--blue-500); }
.wm small { font-size: .45em; color: var(--ink-soft); margin-left: .12em; -webkit-text-stroke: 0; }

/* squiggle underline as an SVG mask so it inherits colour */
.squiggle {
    position: relative;
    display: inline-block;
}
.squiggle::after {
    content: "";
    position: absolute;
    left: -2%; right: -2%; bottom: -.18em;
    height: .32em;
    background: currentColor;
    -webkit-mask: url("svg/underline.svg") center / 100% 100% no-repeat;
            mask: url("svg/underline.svg") center / 100% 100% no-repeat;
    opacity: .85;
}

/* ============ form controls ============ */

input, textarea, select {
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--wobble-3);
    padding: 10px 14px;
    transition: box-shadow .12s ease, transform .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: var(--shadow-hard);
    transform: translate(-1px, -1px);
}

.btn, button.primary, .canvas-dialog .dialog-actions button {
    font: inherit;
    font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 18px;
    border: 2px solid var(--line);
    border-radius: var(--wobble-1);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-hard);
    transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
.btn:hover:not(:disabled), button.primary:hover:not(:disabled),
.canvas-dialog .dialog-actions button:hover:not(:disabled) {
    transform: translate(-1px, -1px) rotate(-.6deg);
    box-shadow: 4px 5px 0 var(--line);
}
.btn:active:not(:disabled), button.primary:active:not(:disabled),
.canvas-dialog .dialog-actions button:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--line);
}
button.primary, .btn.primary, .canvas-dialog .dialog-actions button.primary { background: var(--accent-strong); color: var(--white); border-color: var(--line); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost, .canvas-dialog .dialog-actions button.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn.danger { background: var(--danger); color: var(--white); }
.btn { min-height: 44px; text-decoration: none; }
.btn.sm { min-height: 34px; font-size: .92rem; padding: 2px 12px; box-shadow: 2px 2px 0 var(--line); }
.btn.big { min-height: 50px; font-size: 1.3rem; }
.btn.wide { width: 100%; }
.btn.grow { flex: 1; }
.btn.icon-only { padding: 6px 12px; }
.btn.ghost:hover:not(:disabled) { box-shadow: none; }

.error {
    color: var(--danger);
    font-size: 1rem;
    margin: 0;
}
.error::before { content: "✗ "; font-weight: 700; }
.notice { color: var(--ink-soft); margin-left: 8px; }

/* ============ boot + blazor error ============ */

.boot {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    color: var(--ink-soft);
    font-family: var(--font-marker);
    font-size: 1.7rem;
}
.boot-logo { font-size: 4.2rem; color: var(--ink); line-height: 1; }
.boot-pento {
    width: 220px; height: 60px; color: var(--accent);
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: scrawl 1.6s ease-in-out infinite;
}
@keyframes scrawl {
    0% { stroke-dashoffset: 600; }
    60% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -600; }
}
.boot-progress::after { content: var(--blazor-load-percentage-text, ""); font-family: var(--font-hand); font-size: 1rem; }
.boot-note { padding: 40px; color: var(--ink-soft); text-align: center; font-size: 1.2rem; }

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 50%; bottom: 20px;
    translate: -50% 0;
    z-index: 1000;
    padding: 10px 18px;
    background: var(--danger);
    color: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--wobble-1);
    box-shadow: var(--shadow-hard);
}
#blazor-error-ui .reload { color: var(--white); margin-left: 10px; font-weight: 700; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 14px; }

/* ============ app shell: one layout for every page ============
   top strip (88px): page title over the left column, search beside it, bookmarks
   hanging top-right · left column 340px with your name card under it (102px
   clearance) · main area. Content runs 16px under the strip, 24px gutters all round;
   the wall runs on down past the name card to the 24px gutter. */

.app-page {
    --col-w: 340px;
    --top-h: 88px;
    --dock-h: 102px;
    --content-h: calc(max(100dvh, 720px) - var(--top-h) - 16px - var(--dock-h));
    height: max(100vh, 720px);
    height: max(100dvh, 720px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--col-w) minmax(0, 1fr);
    grid-template-rows: var(--top-h) minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 16px;
    padding: 0 24px var(--dock-h);
    background: var(--p-wall, var(--wall));
    transition: background .25s ease;
    overflow: hidden;
}
.app-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--col-w) minmax(0, 420px);
    column-gap: 24px;
    align-items: start;
    padding-right: 380px; /* the bookmarks */
    min-width: 0;
}
.app-title { padding-top: 14px; min-width: 0; color: var(--p-ink, var(--ink)); }
.ttl { margin: 0; font-family: var(--font-marker); font-weight: 700; font-size: 2.9rem; line-height: 1; rotate: -2deg; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0 4px 4px; }
.tsub { font-size: 1.05rem; margin-top: 2px; color: color-mix(in srgb, var(--p-ink, var(--ink)) 62%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tbar { position: relative; z-index: 45; padding-top: 22px; min-width: 0; }
.app-left { display: flex; flex-direction: column; gap: 18px; min-height: 0; min-width: 0; }
.app-left > .paper:first-child { flex: 1; min-height: 0; }
.app-main { position: relative; min-width: 0; min-height: 0; }

/* the board: sheet tabs over a 16:10 whiteboard that fills the main area and never moves.
   Centered like the docked chat notepad (same main area), so swapping chat <-> board
   keeps the same anchor instead of hugging the left edge. */
.sheet { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; }
.sheet-tabs { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-bottom: 8px; padding-left: 6px; }
.sheet-tab {
    display: flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 2px 14px 6px; box-sizing: border-box;
    font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; line-height: 1;
    color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 70%, var(--wall));
    border: 2.5px solid var(--line); border-bottom: none; border-radius: 12px 14px 0 0;
    text-decoration: none;
}
.sheet-tab.on { min-height: 40px; color: var(--p-ink, var(--ink)); background: var(--p-canvas, var(--paper)); }
.sheet-tab:hover { color: var(--ink); }
.sheet-tab-input { width: 11ch; outline: none; cursor: text; }
.sheet-tab-input:focus-visible { box-shadow: inset 0 -3px 0 var(--amber-500); }
.sheet-add {
    display: grid; place-items: center; width: 40px; min-height: 38px; padding: 0; box-sizing: border-box;
    background: transparent; color: var(--gray-700); cursor: pointer;
    border: 2.5px dashed var(--line); border-bottom: none; border-radius: 12px 14px 0 0;
}
.sheet-add:hover { background: var(--hi-yellow); color: var(--gray-900); }
.sheet-cnt { font-family: var(--font-hand); font-weight: 400; font-size: .8rem; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center; background: var(--line); color: var(--paper); }
.board-page .canvas-frame { width: min(100%, calc((var(--content-h) - 48px) * var(--ar, 1.6))); flex-shrink: 0; }

/* the whiteboard: rounded aluminium frame. The sheet is white paper (--sheet) in every
   palette and theme — only your own theme can recolour it, for you. The ink/paper
   pins keep on-frame chrome (toolbar, hints) readable even on a night board. */
.canvas-frame {
    position: relative;
    width: min(1180px, 96vw, calc((100vh - 150px) * var(--ar, 1.6)));
    aspect-ratio: var(--ar, 1.6);
    --p-canvas: var(--sheet);
    --p-ink: var(--night-800);
    background:
        radial-gradient(ellipse 30% 18% at 22% 30%, color-mix(in srgb, var(--night-800) 4%, transparent), transparent 70%),
        radial-gradient(ellipse 26% 14% at 76% 68%, color-mix(in srgb, var(--night-800) 3%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--white) 45%, transparent) 0%, transparent 35%),
        var(--sheet);
    color: var(--p-ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 0 0 7px var(--gray-300),
        0 0 0 8px var(--gray-500),
        0 18px 40px color-mix(in srgb, var(--night-900) 28%, transparent);
}

/* background patterns (data-pattern on canvas-frame) */
.canvas-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.canvas-frame[data-pattern="dots"]::before {
    background-image: radial-gradient(var(--p-ink) 1.1px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .16;
}
.canvas-frame[data-pattern="grid"]::before {
    background-image:
        linear-gradient(var(--p-accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--p-accent) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .12;
}
.canvas-frame[data-pattern="lines"]::before {
    background-image: linear-gradient(var(--p-accent) 1px, transparent 1px);
    background-size: 100% 32px;
    opacity: .16;
}

/* the board proper: ink layers + pins. On the wall it keeps its world size inside the
   sheet (pan.js); everywhere else it is the frame, top to bottom. */
.canvas-world { position: absolute; inset: 0; }
.canvas-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-layer.base { z-index: 1; }
.canvas-layer.live {
    z-index: 2;
    touch-action: none;
    /* marker-tip cursor */
    cursor: url("svg/cursor-marker.svg") 3 23, crosshair;
}
.canvas-frame.erasing .canvas-layer.live {
    cursor: url("svg/cursor-eraser.svg") 6 20, cell;
}
.canvas-frame:is(.tool-shape, .tool-tape) .canvas-layer.live { cursor: crosshair; }
.canvas-frame:is(.tool-stamp, .tool-text) .canvas-layer.live { cursor: copy; }
.canvas-layer.live.readonly { pointer-events: none; }
.canvas-frame.ink-hidden .canvas-layer,
.canvas-frame.ink-hidden .draw-tools { visibility: hidden; pointer-events: none; } /* doodles off = no ink, no invisible drawing */

.canvas-pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.canvas-warning {
    position: absolute;
    left: 14px; bottom: 14px;
    z-index: 5;
    background: var(--hi-yellow);
    color: var(--amber-950);
    font-size: .95rem;
    padding: 4px 12px;
    border: 2px solid var(--amber-950);
    border-radius: var(--wobble-2);
    rotate: -1deg;
}

/* ============ pins ============ */

.pin {
    position: absolute;
    transform: translate(-50%, -50%);
    rotate: var(--tilt, 0deg);
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    color: var(--p-ink);
    transition: rotate .18s ease, scale .18s ease, filter .18s ease;
}
.pin:hover { rotate: 0deg; scale: 1.04; z-index: 6; }
.pin.draggable { cursor: grab; }
.pin.dragging { cursor: grabbing; scale: 1.08; rotate: 2deg; z-index: 10; filter: drop-shadow(8px 14px 10px color-mix(in srgb, var(--black) 22%, transparent)); }
/* Linux desktop paints with WebKitGTK's software renderer (compositing off): a drop-shadow
   filter pushes the dragged pin through an offscreen layer whose old damage rects never
   repaint, so stale frames trail the drag. box-shadow paints inline instead. !important
   beats the always-on drop-shadow filters (.pin.board.custom) and their box-shadow: none. */
.software-render .pin.dragging { filter: none !important; box-shadow: 8px 14px 10px color-mix(in srgb, var(--black) 22%, transparent) !important; }

.pin-name {
    font-family: var(--font-marker);
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.05;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pin-sub { font-size: .92rem; opacity: .7; }

/* Caveat's slanted glyphs ink past their advance width, so clipped single-line
   marker text needs room on the trailing edge or the last letter gets cut. */
.pin-name, .ttl, .walkie-room, .dm-name, .bs-chip-t b, .polaroid-cap { padding-inline-end: .18em; }
.pin .icon { opacity: .85; }

/* board: a sticky note held by a magnet, paper tinted by that board's palette */
.pin.board {
    width: 150px;
    min-height: 132px;
    padding: 26px 12px 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--black) 4%, transparent), transparent 22%),
        var(--p-note);
    color: var(--p-note-ink);
    border-radius: 2px 2px 26px 2px / 2px 2px 14px 2px;
    box-shadow:
        0 1px 1px color-mix(in srgb, var(--black) 12%, transparent),
        4px 10px 14px -6px color-mix(in srgb, var(--black) 35%, transparent);
}
.pin.board::before { /* the magnet */
    content: "";
    position: absolute;
    top: -9px; left: 50%;
    translate: -50% 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--white) 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, var(--black) 30%, var(--p-accent)));
    box-shadow: 0 3px 4px color-mix(in srgb, var(--black) 35%, transparent);
}
.pin.board .pin-name { padding: 0 .12em; font-size: 1.75rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* text channel: an index card with a peeled corner */
.pin.channel.text {
    min-width: 150px;
    max-width: 210px;
    padding: 12px 16px 12px;
    background:
        linear-gradient(transparent 27px, color-mix(in srgb, var(--p-accent) 40%, transparent) 27px 29px, transparent 29px),
        repeating-linear-gradient(transparent 0 22px, color-mix(in srgb, var(--p-accent) 14%, transparent) 22px 23px),
        var(--p-note);
    background-position: 0 0, 0 29px, 0 0;
    color: var(--p-note-ink);
    align-items: flex-start;
    text-align: left;
    border-radius: 3px 3px 22px 3px / 3px 3px 12px 3px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 3px 8px 12px -6px color-mix(in srgb, var(--black) 35%, transparent);
}
.pin.channel.text .pin-name { display: flex; align-items: center; gap: 4px; font-size: 1.45rem; }
.pin.channel.text .pin-sub { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }

/* a chat message stuck on the board: yellow sticky held by a strip of tape */
.pin.sticky {
    width: 190px;
    padding: 22px 14px 12px;
    box-sizing: border-box;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    background: var(--yellow-200);
    color: var(--amber-950);
    border-radius: 2px 2px 22px 2px / 2px 2px 12px 2px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 4px 10px 14px -6px color-mix(in srgb, var(--black) 35%, transparent);
}
.pin.sticky::before { /* the tape */
    content: "";
    position: absolute;
    top: -11px; left: 50%;
    width: 70px; height: 20px;
    translate: -50% 0;
    rotate: -4deg;
    background: color-mix(in srgb, var(--blue-100) 85%, transparent);
    border-left: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
    border-right: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
}
.sticky-from { font-size: .8rem; opacity: .7; }
.sticky-who { display: flex; align-items: center; gap: 6px; font-size: .95rem; }
.sticky-text {
    font-size: 1rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}
.sticky-text p { margin: 0; }
.sticky-x {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    display: none;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.pin.sticky:hover .sticky-x, .sticky-x:focus-visible { display: grid; }
.sticky-x:hover { background: color-mix(in srgb, var(--black) 10%, transparent); }

/* voice channel: a doodled bubble */
.pin.channel.voice {
    min-width: 130px;
    padding: 16px 24px;
    background: color-mix(in srgb, var(--p-accent) 14%, var(--p-canvas));
    border: 2.5px solid var(--p-accent);
    border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
    color: var(--p-ink);
}
.pin.channel.voice .pin-name { display: flex; align-items: center; gap: 6px; font-size: 1.4rem; max-width: 150px; }
.pin.channel.voice .icon { color: var(--p-accent); }

/* category: a scrawled, underlined heading */
.pin.category {
    cursor: default;
    font-family: var(--font-marker);
    font-weight: 700;
    font-size: 1.35rem;
    color: color-mix(in srgb, var(--p-ink) 70%, transparent);
    letter-spacing: .02em;
}
.pin.category.draggable { cursor: grab; }

/* action: a dashed marker outline */
.pin.action {
    flex-direction: row;
    gap: 6px;
    padding: 8px 16px;
    border: 2.5px dashed color-mix(in srgb, var(--p-ink) 55%, transparent);
    border-radius: var(--wobble-1);
    color: color-mix(in srgb, var(--p-ink) 75%, transparent);
    background: transparent;
}
.pin.action .pin-name { font-size: 1.35rem; font-weight: 600; }
.pin.action:hover {
    border-style: solid;
    border-color: var(--p-accent);
    color: var(--p-accent);
    background: color-mix(in srgb, var(--p-canvas) 70%, transparent);
}

/* unread + mention badges */
.pin .pin-unread {
    position: absolute;
    top: -5px; right: -5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--m-red);
    border: 2px solid var(--p-canvas);
}
.pin .pin-mentions {
    position: absolute;
    top: -12px; right: -12px;
    min-width: 26px; height: 26px;
    padding: 0 7px;
    display: grid; place-items: center;
    border-radius: 50% 45% 50% 40%;
    background: var(--m-red);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid var(--p-canvas);
    rotate: 8deg;
}

/* empty-state hint drawn on the home wall */
.canvas-hint {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    font-family: var(--font-marker);
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    color: color-mix(in srgb, var(--p-ink) 55%, transparent);
    display: flex;
    align-items: flex-end;
    gap: 6px;
    rotate: -3deg;
}
.canvas-hint .icon { color: var(--p-accent); }

/* ============ drawing tools: a rail + one small flyout (wide), a bar + slim tray + sheet (phone) ============
   Everything lands as ink when you let go (canvas.js). Two layers everywhere: the quick
   picks (recent shapes, style, colour) and the whole library only when asked for. */

.draw-tools { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.draw-tools > * { pointer-events: auto; }
/* the rail floats to document.body (rail.js), so its buttons lose the .draw-tools ancestor —
   mirror the scoped rules under .draw-rail too */
.draw-tools button, .draw-rail button { font: inherit; color: var(--ink); }

.draw-rail {
    position: absolute; left: 12px; top: 50%; translate: 0 -50%;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: 16px 12px 18px 14px;
    box-shadow: 3px 4px 0 var(--line);
}
.draw-tools .dt, .draw-rail .dt {
    position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    border: 2px solid transparent; border-radius: 12px 10px 13px 9px; background: none; cursor: pointer;
}
.draw-tools .dt:hover, .draw-rail .dt:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.draw-tools .dt.on, .draw-rail .dt.on { background: var(--hi-yellow); border-color: var(--line); color: var(--gray-900); }
.draw-tools .dt:disabled, .draw-rail .dt:disabled { opacity: .35; cursor: default; background: none; }
.draw-rail .cap { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--c); }
.draw-rail .sep { width: 26px; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--line); opacity: .25; }

.draw-fly {
    position: absolute; left: calc(100% + 12px); top: -2px; width: 292px; box-sizing: border-box;
    padding: 12px 14px;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px;
    box-shadow: 4px 5px 0 var(--line);
    cursor: default;
}
.draw-fly .lbl { margin: 8px 0 4px; font-family: var(--font-marker); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.draw-fly .lbl:first-child { margin-top: 0; }
.draw-hint { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .9rem; color: var(--ink-soft); }
.draw-hint .icon { flex-shrink: 0; }

/* segmented choices: pen, lettering, pattern, sizes */
.draw-sq.on, .draw-grid5 button.on, .draw-lgrid button.on, .draw-cats button.on { background: var(--ink); color: var(--paper); }

.draw-row { display: flex; align-items: center; gap: 6px; }

/* brush size: thin dot, slider, fat dot, the real size in your ink (thumb styles sit with the colour wheel's strip) */
.draw-size { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.draw-size input { flex: 1; min-width: 60px; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
.draw-size .sdot { width: var(--d); height: var(--d); flex-shrink: 0; border-radius: 50%; background: var(--ink); }
.draw-size .prev { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; box-sizing: border-box; background: var(--surface); border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 12px 16px 10px 14px; }
.draw-size .prev span { width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); }
.draw-size .prev.hl span { opacity: .45; }
.draw-dopts .lbl small, .draw-fly .lbl small { font-family: var(--font-hand); font-weight: 400; font-size: .85rem; color: var(--ink-soft); margin-left: 6px; }
.draw-row + .draw-row { margin-top: 8px; }
.draw-sq {
    width: 36px; height: 40px; flex-shrink: 0; display: grid; place-items: center; padding: 0; cursor: pointer;
    background: var(--surface); border: 2px solid var(--line); border-radius: 10px 8px 11px 9px;
}
.draw-sq:hover { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }
.draw-sq.all { border-style: dashed; background: transparent; }
/* flyout + docked: the 6 recent and "all" share one row and shrink to fit it (the phone tray scrolls instead) */
.draw-fly .draw-recent, .draw-dopts .draw-recent { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.draw-fly .draw-recent .draw-sq, .draw-dopts .draw-recent .draw-sq { width: auto; min-width: 0; }

.draw-sw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.draw-sw button { width: 30px; height: 30px; flex-shrink: 0; padding: 0; cursor: pointer; background: var(--c); border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%; }
.draw-sw button.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--line); }

.draw-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.draw-grid5 button, .draw-lgrid button {
    height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
    background: var(--surface); border: 2px solid var(--line); border-radius: 10px 8px 11px 9px;
}
.draw-grid5 button:hover, .draw-lgrid button:hover { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }

.draw-words {
    width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 1.05rem; padding: 6px 10px;
    background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--wobble-3);
}
.draw-words:focus { outline: none; box-shadow: 3px 3px 0 var(--line); }

/* the whole library: inside the flyout (wide), or a sheet (phone) */
.draw-libhead { display: flex; align-items: center; gap: 6px; margin: -4px 0 6px -6px; }
.draw-libhead .mk, .draw-lhead .mk { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.draw-libhead small, .draw-lhead small { margin-left: auto; font-size: .82rem; color: var(--ink-soft); }
.draw-cats { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.draw-cats.wrap { flex-wrap: wrap; overflow: visible; margin-top: 0; }
.draw-cats button {
    flex-shrink: 0; white-space: nowrap; min-height: 28px; padding: 0 9px; font-size: .85rem; cursor: pointer;
    background: var(--surface); border: 2px solid var(--line); border-radius: 18px 14px 16px 12px;
}
.draw-lgrid { height: 184px; overflow: auto; margin-top: 8px; padding: 2px 4px 2px 2px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-content: start; }
.draw-lgrid button { height: 42px; }
.draw-lgrid .none { grid-column: 1 / -1; font-size: .9rem; color: var(--ink-soft); padding: 6px 2px; }

/* ---- phone: bar along the bottom, tray above it, the library as a sheet ---- */
.draw-tools.compact { position: absolute; inset: 0; }
.draw-bar {
    position: absolute; left: 50%; bottom: 12px; translate: -50% 0;
    display: flex; align-items: center; gap: 2px; padding: 4px 6px;
    background: var(--paper); border: 2.5px solid var(--line); border-radius: 26px; box-shadow: 3px 3px 0 var(--line);
}
.draw-bar .dt { border-radius: 50%; }
.draw-undo { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.draw-step {
    width: 40px; height: 40px; display: grid; place-items: center; padding: 0; cursor: pointer;
    background: var(--paper); border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%; box-shadow: 2px 2px 0 var(--line);
}
.draw-step:disabled { opacity: .4; cursor: default; }
.draw-tray {
    position: absolute; left: 8px; right: 8px; bottom: 70px;
    display: flex; flex-direction: column; gap: 6px; padding: 8px;
    background: var(--paper); border: 2.5px solid var(--line); border-radius: 16px 14px 18px 12px; box-shadow: 3px 3px 0 var(--line);
}
.draw-tray .draw-row { overflow-x: auto; scrollbar-width: none; margin: 0; }
.draw-tray .draw-row::-webkit-scrollbar { display: none; }
.draw-tray .draw-sq { width: 44px; height: 44px; }
.draw-tray .draw-sq.all { width: auto; padding: 0 10px; display: flex; gap: 4px; font-size: .95rem; }
.draw-tray .draw-sw { flex-wrap: nowrap; }
.draw-tray .draw-sw button { width: 36px; height: 36px; }
.draw-tray .draw-words { height: 44px; }
.draw-tray .vsep { width: 2px; height: 28px; flex-shrink: 0; border-radius: 2px; background: var(--line); opacity: .2; }
.draw-cdot {
    width: 44px; height: 44px; flex-shrink: 0; padding: 0; cursor: pointer;
    background: var(--c); border: 2.5px solid var(--line); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--paper);
}
.draw-lscrim { position: absolute; inset: 0; z-index: 1; padding: 0; border: none; background: color-mix(in srgb, var(--night-900) 22%, transparent); cursor: pointer; }
.draw-lsheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: min(470px, 75%);
    display: flex; flex-direction: column;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-bottom: none; border-radius: 18px 22px 0 0;
    box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent), 0 -18px 40px color-mix(in srgb, var(--night-900) 25%, transparent);
}
.draw-grab { display: grid; place-items: center; width: 100%; height: 30px; margin-top: 6px; padding: 0; border: none; background: none; cursor: pointer; }
.draw-grab span { width: 56px; height: 6px; border-radius: 4px; background: var(--line); opacity: .35; }
.draw-lhead { display: flex; align-items: center; gap: 8px; padding: 0 12px 6px 16px; }
.draw-lhead .mk { font-size: 1.75rem; }
.draw-lhead small { margin-left: 0; font-size: .88rem; }
.draw-lsheet .draw-cats { padding: 8px 12px 6px; margin: 0; scrollbar-width: none; }
.draw-lsheet .draw-cats button { min-height: 36px; padding: 0 12px; font-size: .95rem; }
.draw-lsheet .draw-lgrid { flex: 1; height: auto; margin: 0; padding: 4px 12px 16px; gap: 8px; }
.draw-lsheet .draw-lgrid button { height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .7rem; line-height: 1; }

/* ============ dock: your name card, bottom of the left column ============ */

.dock {
    position: fixed;
    left: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 340px; height: 64px;
    padding: 0 8px 0 6px;
    box-sizing: border-box;
    border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px;
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--line);
    box-shadow: 3px 4px 0 var(--line);
}
.dock-scrim { position: fixed; inset: 0; z-index: 99; }
.dock-me {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0; height: 52px;
    padding: 0 8px 0 4px; box-sizing: border-box;
    border: none;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dock-me:hover, .dock-me.on { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dock-me .av { width: 42px; height: 42px; font-size: 1.55rem; border-width: 2.5px; transition: rotate .15s; }
.dock-me:hover .av, .dock-me.on .av { box-shadow: 3px 3px 0 var(--line); rotate: -4deg; }
.dock-me .av .dot { width: 10px; height: 10px; border-width: 2.5px; border-color: var(--paper); }
.dock-me-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.1; }
.dock-name { font-family: var(--font-marker); font-weight: 700; font-size: 1.55rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-mood { font-size: .88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-up { color: var(--ink-soft); rotate: 180deg; transition: rotate .15s; }
.dock-me.on .dock-up { rotate: 0deg; }

.presence-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.presence-dot.online { background: var(--m-green); }
.presence-dot.offline { background: var(--ink-faint); }

/* popovers rising out of the dock */
.dock-pop {
    position: absolute;
    bottom: calc(100% + 12px);
    width: 320px;
    padding: 18px 18px 16px;
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--line);
    border-radius: var(--wobble-2);
    box-shadow: var(--shadow-hard-lg);
    rotate: -.6deg;
    animation: slap .18s cubic-bezier(.2, 1.4, .5, 1);
}
.dock-pop.left { left: 0; }
.dock-pop.right { right: 0; }
.dock-pop.theme-pop { width: 340px; }
.pop-who { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.pop-who .av { width: 38px; height: 38px; }
.pop-who .n { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.pop-who .u { display: block; font-size: .88rem; color: var(--ink-soft); }
.pop-title { font-family: var(--font-marker); font-weight: 700; font-size: 2rem; line-height: 1; }
.pop-sub { font-size: .85rem; color: var(--ink-soft); }
.lbl { font-family: var(--font-marker); font-weight: 700; font-size: 1.3rem; color: var(--ink-soft); margin: 10px 0 6px; }
.lbl.first { margin-top: 0; }
.opt {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px;
    padding: 6px 10px;
    border: none; border-radius: 10px;
    background: none;
    font: inherit; font-size: 1.05rem;
    color: inherit; text-align: left;
    cursor: pointer;
}
.opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.opt.on { background: var(--hi-yellow); color: var(--gray-900); }
.opt .dot { border-color: transparent; }
.opt .d { font-size: .8rem; color: var(--ink-soft); margin-left: auto; }
.opt.on .d { color: var(--gray-600); }
.mood { width: 100%; font-size: 1rem; padding: 8px 12px; }
.pattern-row { display: flex; justify-content: space-between; }
.patb {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0; border: none; background: none;
    font: inherit; font-size: .85rem; color: inherit;
    cursor: pointer;
}
.patb .pv { width: 58px; height: 42px; border: 2.5px solid var(--line); border-radius: 8px; background-color: var(--surface); }
.patb.on .pv { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--line); }
.pv.dots { background-image: radial-gradient(var(--ink) 1px, transparent 1.4px); background-size: 9px 9px; }
.pv.grid { background-image: linear-gradient(color-mix(in srgb, var(--blue-500) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--blue-500) 35%, transparent) 1px, transparent 1px); background-size: 9px 9px; }
.pv.lines { background-image: linear-gradient(color-mix(in srgb, var(--blue-500) 40%, transparent) 1px, transparent 1px); background-size: 100% 9px; }
.toggles { display: flex; flex-direction: column; margin-top: 12px; }
.knob { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 12px; border: 2.5px solid var(--line); background: color-mix(in srgb, var(--ink) 10%, var(--paper)); }
.knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--line); transition: left .15s; }
.knob.on { background: var(--hi-yellow); }
.knob.on::after { left: 21px; }

/* ============ dialogs: a sheet of paper slapped on the board ============ */

.canvas-dialog-backdrop {
    position: fixed; inset: 0;
    z-index: 200;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--wall) 60%, transparent);
    backdrop-filter: blur(2px);
    animation: fade-in .15s ease;
}
.canvas-dialog {
    /* always light paper: OS dark mode must not recolor moderation UI, and the
       sheet of paper stays visually distinct from any board palette */
    color-scheme: light;
    --paper: var(--cream); --ink: var(--gray-900); --ink-soft: var(--gray-600); --line: var(--gray-900);
    --hi-yellow: var(--yellow-500); --accent-strong: var(--blue-700);
    --shadow-hard-lg: 5px 6px 0 var(--line);
    --shadow-soft: 0 10px 30px color-mix(in srgb, var(--gray-900) 14%, transparent);
    position: relative;
    width: min(400px, 92vw);
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--line);
    border-radius: var(--wobble-2);
    padding: 26px 24px 22px;
    box-shadow: var(--shadow-hard-lg), var(--shadow-soft);
    rotate: -1deg;
    animation: slap .22s cubic-bezier(.2, 1.4, .5, 1);
}
.canvas-dialog::before { /* tape */
    content: "";
    position: absolute;
    top: -14px; left: 50%;
    width: 110px; height: 26px;
    translate: -50% 0;
    rotate: 3deg;
    background: color-mix(in srgb, var(--hi-yellow) 70%, transparent);
    border-left: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
    border-right: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
}
.canvas-dialog h3 { margin: 0 0 12px; }
.canvas-dialog p { margin: 0 0 10px; color: var(--ink-soft); }
.canvas-dialog input { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.invite-code {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    letter-spacing: .12em;
    color: var(--ink) !important;
    background: var(--hi-yellow);
    padding: 10px;
    border: 2px dashed var(--line);
    border-radius: var(--wobble-3);
    text-align: center;
    user-select: all;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes slap { from { scale: 1.15; rotate: -6deg; opacity: 0; } }

/* ============ shared doodle bits: avatars, dots, chips, paper, tabs, fields ============ */

.av {
    position: relative;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50% 45% 55% 48%;
    border: 2px solid var(--line);
    background: var(--m-blue);
    color: var(--white);
    font-family: var(--font-marker);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
}
.av.sm { width: 28px; height: 28px; font-size: 1.1rem; }
.av.xl { width: 56px; height: 56px; font-size: 2.1rem; border-width: 2.5px; }
.av.faded { opacity: .55; }
.av .dot { position: absolute; right: -4px; bottom: -3px; }
.av-stack { display: flex; margin-top: 6px; }
.av-stack .av + .av { margin-left: -8px; }

.dot { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--paper); box-sizing: content-box; }
.st-online { background: var(--m-green); }
.st-idle { background: var(--m-orange); }
.st-dnd { background: var(--m-red); }
.st-invisible, .st-offline { background: var(--ink-faint); }

/* a board's colours in a thumbnail */
.chip { flex-shrink: 0; width: 22px; height: 22px; border-radius: 3px 3px 9px 3px; background: var(--p-note); border: 2px solid var(--p-accent); }
.chip.lg { width: 34px; height: 34px; border-radius: 3px 3px 12px 3px; }

.paper {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--line);
    border-radius: 12px 18px 14px 16px / 16px 12px 18px 14px;
    box-shadow: var(--shadow-hard-lg);
}

/* folder tabs over a ruled line */
.paper-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 10px 10px 0; border-bottom: 2.5px solid var(--line); }
.paper-tab {
    position: relative; top: 2.5px;
    display: flex; align-items: center; gap: 6px;
    min-height: 44px;
    padding: 2px 12px 4px;
    border: 2.5px solid transparent; border-bottom: none;
    border-radius: 12px 12px 0 0;
    background: none;
    color: var(--ink-soft);
    font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem;
    cursor: pointer;
}
.paper-tab.on { color: var(--ink); background: var(--paper); border-color: var(--line); }
.paper-tab:hover:not(.on) { color: var(--ink); }
.cnt {
    display: grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 10%, var(--paper));
    color: var(--ink);
    font-family: var(--font-hand); font-size: .8rem; font-weight: 400;
}
.cnt.hot, .unr { background: var(--red-600); color: var(--white); }
.unr { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: .85rem; }

.ibtn {
    display: grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px;
    border: 2px solid transparent;
    border-radius: 50% 45% 52% 48%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.ibtn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); rotate: -8deg; }
.ibtn:disabled { opacity: .35; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; }
.field input { width: 100%; font-size: 1.1rem; }
.field small { color: var(--ink-soft); font-size: .88rem; }
.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.pw button {
    position: absolute; right: 8px; top: 50%; translate: 0 -50%;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: none; border-radius: 50%;
    background: none; color: var(--ink-soft);
    cursor: pointer;
}
.pw button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

.check { display: flex; align-items: center; gap: 8px; padding: 0; border: none; background: none; font: inherit; font-size: 1rem; color: inherit; cursor: pointer; }
.box { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 4px 6px 4px 7px; background: var(--paper); color: var(--gray-900); }
.box.on { background: var(--hi-yellow); }
.linkish { padding: 0; border: none; background: none; font: inherit; font-size: 1rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; cursor: pointer; }
.linkish:disabled { color: var(--ink-faint); cursor: not-allowed; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .92rem; }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: var(--line); opacity: .18; border-radius: 2px; }
.small { font-size: .92rem; color: var(--ink-soft); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* palette swatch: canvas / note split + an accent magnet */
.psw {
    position: relative;
    width: 44px; height: 44px; padding: 0;
    border: 2.5px solid var(--line);
    border-radius: 3px 3px 14px 3px / 3px 3px 9px 3px;
    background: linear-gradient(135deg, var(--p-canvas) 0 50%, var(--p-note) 50%);
    cursor: pointer;
}
.psw::after { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--p-accent); }
.psw.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--line); }
/* classic/auto swatches alias the global tokens, so a custom theme's remap on the page
   would bleed into them. Pin the sources here: the previews must always show what
   classic/auto really look like (light, or the system/theme's dark). */
.psw[data-palette="classic"], .psw[data-palette="auto"] { --surface: var(--snow); --note: var(--yellow-200); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .psw[data-palette="classic"],
    :root:not([data-theme="light"]) .psw[data-palette="auto"] { --surface: var(--night-800); --note: var(--yellow-900); }
}
:root[data-theme="dark"] .psw[data-palette="classic"],
:root[data-theme="dark"] .psw[data-palette="auto"] { --surface: var(--night-800); --note: var(--yellow-900); }
.palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; justify-items: start; }
.palette-grid.centered { justify-items: center; }

/* loose marker ink drawn on a showcase board */
.ink { position: absolute; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ink.thin { stroke: var(--ink-soft); stroke-width: 2.4; }
.ink-icon { position: absolute; pointer-events: none; }
.ink-icon { stroke-width: 1.6; }

/* ============ auth: showcase whiteboard + taped card ============ */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 48px);
    background: var(--wall);
    /* the showcase is drawn at 832×804 and zoomed to fit the window's width and height */
    --zw: 1; --zh: 1;
    /* the whiteboard is always daylight, so the card stays paper even in dark mode */
    color-scheme: light;
    --wall: var(--bone); --surface: var(--snow); --paper: var(--cream);
    --ink: var(--gray-900); --ink-soft: var(--gray-600); --ink-faint: var(--gray-500); --line: var(--gray-900);
    --m-black: var(--gray-900); --m-red: var(--red-500); --m-blue: var(--blue-500); --m-green: var(--green-500);
    --m-orange: var(--orange-500); --m-purple: var(--purple-500); --m-pink: var(--pink-500); --hi-yellow: var(--yellow-500);
    --note: var(--yellow-200); --accent: var(--m-blue); --accent-strong: var(--blue-700); --danger: var(--m-red);
    --shadow-hard: 3px 3px 0 var(--line); --shadow-hard-lg: 5px 6px 0 var(--line);
    --shadow-soft: 0 10px 30px color-mix(in srgb, var(--gray-900) 14%, transparent);
}

/* one whiteboard: showcase on the left, the card taped on the right */
.auth-board {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 424px);
    align-items: center;
    column-gap: 40px;
    padding: 28px 48px 28px 0;
    color: var(--gray-900);
    background: linear-gradient(160deg, color-mix(in srgb, var(--white) 45%, transparent) 0%, transparent 35%), var(--snow);
    border-radius: 14px;
    box-shadow: 0 0 0 7px var(--gray-300), 0 0 0 8px var(--gray-500), 0 18px 40px color-mix(in srgb, var(--night-900) 28%, transparent);
}
.auth-board::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background-image: radial-gradient(var(--gray-900) 1.1px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .14;
    pointer-events: none;
}

.auth-showcase {
    position: relative;
    width: 832px; height: 804px;
    zoom: min(var(--zw), var(--zh));
    --ink-soft: var(--gray-600);
    --line: var(--gray-900);
}
.auth-showcase .pin { pointer-events: none; }
.auth-showcase .pin.channel.voice .pin-name .icon { color: var(--p-accent); }
.auth-hero { position: absolute; left: 52px; top: 36px; rotate: -3deg; }
.auth-wordmark { font-size: 5rem; }
.auth-wordmark .squiggle::after { color: var(--m-blue); height: .22em; bottom: -.1em; }
.auth-tagline { font-family: var(--font-marker); font-weight: 500; font-size: 1.9rem; color: var(--gray-600); margin-top: 10px; rotate: 1deg; }
.auth-tagline .hi { color: var(--gray-900); background: linear-gradient(104deg, transparent .9%, var(--yellow-500) 2.4%, var(--yellow-500) 97%, transparent 98.5%); }
.auth-ann { position: absolute; font-family: var(--font-marker); font-size: 1.6rem; color: var(--gray-600); line-height: 1; white-space: nowrap; }
.auth-ann.wrap { white-space: normal; width: 170px; font-size: 1.45rem; }
.auth-goat { position: absolute; left: 546px; top: 20px; width: 112px; height: 94px; overflow: visible; }
.auth-sig { position: absolute; font-family: var(--font-marker); font-size: 1.4rem; color: var(--pink-700); rotate: -6deg; }

.auth-here { display: flex; align-items: center; gap: 5px; }
.auth-here .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-green); }

/* a community server's sticky: its own paper, border and icon where the magnet would be */
.pin.board.auth-comm {
    padding-top: 30px;
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--amber-300) 7%, transparent) 0 6px, transparent 6px 12px), var(--night-700);
    color: var(--amber-200);
    border: 2.5px solid var(--amber-300);
    border-radius: 22px 4px 22px 4px;
}
.pin.board.auth-comm::before { display: none; }
.pin.board.auth-comm .pin-sub { opacity: .85; }
.auth-emblem {
    position: absolute; top: -22px; left: 50%; translate: -50% 0;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--night-700);
    border: 2.5px solid var(--amber-300);
    color: var(--amber-300);
    box-shadow: 0 3px 5px color-mix(in srgb, var(--black) 35%, transparent);
}
.auth-emblem .icon { opacity: 1; }
.auth-ctag { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 1px 9px; border-radius: 10px; background: var(--purple-500); color: var(--white); font-size: .8rem; rotate: -2deg; }
.auth-ctag .icon { opacity: 1; }

.pin.channel.text.auth-chat { width: 256px; max-width: none; gap: 6px; align-items: stretch; padding-bottom: 14px; background-position: 0 4px, 0 33px, 0 0; }
.auth-msg { font-size: .95rem; line-height: 1.25; }
.auth-msg b { margin-inline-end: .25em; font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; }

/* a voice room: marker lasso round taped polaroids, the talker lifted with sound lines */
.auth-voice {
    position: absolute;
    width: 270px; height: 150px;
    translate: -50% -50%;
    rotate: -1.2deg;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 12px;
    box-sizing: border-box;
    color: var(--p-ink);
}
.auth-lasso { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: color-mix(in srgb, var(--p-accent) 7%, transparent); stroke: var(--p-accent); stroke-width: 3; stroke-linecap: round; }
.auth-voice .pin-name { position: relative; display: flex; align-items: center; gap: 6px; font-size: 1.5rem; }
.auth-voice .pin-name .icon { color: var(--p-accent); }
.auth-pols { position: relative; display: flex; gap: 14px; margin-top: 16px; align-items: flex-end; }
.auth-pol { position: relative; display: flex; flex-direction: column; align-items: center; width: 48px; padding: 4px 4px 13px; box-sizing: border-box; background: var(--white); box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 14%, transparent), 2px 5px 8px -3px color-mix(in srgb, var(--black) 35%, transparent); }
.auth-pol::before { content: ""; position: absolute; top: -7px; left: 50%; translate: -50% 0; width: 26px; height: 11px; background: color-mix(in srgb, var(--yellow-500) 80%, transparent); rotate: -4deg; }
.auth-pol span { display: grid; place-items: center; width: 40px; height: 38px; color: var(--white); font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; }
.auth-pol i { position: absolute; bottom: -1px; font-style: normal; font-size: .7rem; color: var(--night-500); }
.auth-pol.talk { translate: 0 -8px; rotate: 3deg; }
.auth-sound { right: -18px; top: 2px; stroke: var(--p-accent); stroke-width: 2.2; }

.auth-wall-name { font-size: 1.5rem !important; margin-top: 4px; }

.auth-drop { animation: auth-drop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.auth-pop { animation: auth-pop .45s .35s ease-out both; }
@keyframes auth-drop { from { opacity: 0; translate: 0 -40px; scale: 1.15; } }
@keyframes auth-pop { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .auth-drop, .auth-pop { animation: none; } }

.auth-side { position: relative; width: 100%; }
.auth-brand-small { display: none; }

.brand {
    font-size: 4.2rem;
    line-height: 1;
    text-align: center;
    margin: 0 0 22px;
    rotate: -3deg;
    color: var(--ink);
}
.brand .squiggle::after { color: var(--m-blue); height: .22em; bottom: -.1em; }

.auth-card {
    position: relative;
    padding: 22px 30px 26px;
    background: var(--paper);
    border: 2.5px solid var(--line);
    border-radius: var(--wobble-2);
    box-shadow: var(--shadow-hard-lg), var(--shadow-soft);
    rotate: .5deg;
}
.auth-card::before { /* tape */
    content: "";
    position: absolute;
    top: -14px; left: 50%;
    width: 110px; height: 26px;
    translate: -50% 0;
    rotate: 3deg;
    background: color-mix(in srgb, var(--hi-yellow) 75%, transparent);
    border-left: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
    border-right: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
}
.auth-card .paper-tabs { padding: 0; gap: 6px; }
.auth-card .paper-tab { font-size: 1.75rem; padding: 4px 14px 6px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.auth-form h1 { font-size: 2.5rem; margin: 0; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-me { display: flex; align-items: center; gap: 14px; }
.auth-me h1 { font-size: 2.35rem; }
.auth-me .small { margin-top: 4px; }
.marker-row { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.marker-pick {
    width: 38px; height: 38px; padding: 0;
    border: 2.5px solid var(--line);
    border-radius: 50% 45% 55% 48%;
    cursor: pointer;
    transition: transform .1s;
}
.marker-pick:hover { transform: rotate(-8deg) scale(1.06); }
.marker-pick.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--line); }

.auth-hint { display: flex; align-items: center; gap: 5px; }
.auth-hint.ok { color: var(--green-700); }
.auth-hint.bad { color: var(--red-800); }
.auth-meter { display: flex; align-items: center; gap: 5px; }
.auth-meter i { flex: 1; height: 5px; border-radius: 4px 2px 5px 2px; background: color-mix(in srgb, var(--ink) 14%, var(--paper)); }
.auth-meter i.some { background: var(--orange-500); }
.auth-meter i.strong { background: var(--m-green); }
.auth-meter small { min-width: 92px; text-align: end; }
.auth-human { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 0; font-size: .88rem; color: var(--green-700); }
.auth-oops {
    position: relative;
    margin: 0;
    padding: 10px 14px 10px 40px;
    background: var(--red-100); color: var(--red-900);
    line-height: 1.25;
    border-radius: 3px 3px 16px 3px / 3px 3px 10px 3px;
    rotate: -.6deg;
    box-shadow: 2px 4px 8px -4px color-mix(in srgb, var(--black) 35%, transparent);
}
.auth-oops .icon { position: absolute; left: 12px; top: 11px; }

@media (max-width: 1439.98px) { .auth-page { --zw: .8; } }
@media (max-width: 1239.98px) { .auth-page { --zw: .66; } }
@media (max-height: 919.98px) { .auth-page { --zh: .85; } }
@media (max-height: 799.98px) { .auth-page { --zh: .72; } }
@media (max-width: 1099.98px) {
    .auth-page { padding-top: 40px; }
    .auth-board { display: block; width: min(100%, 440px); padding: 0; background: none; box-shadow: none; }
    .auth-board::before { display: none; }
    .auth-showcase { display: none; }
    .auth-brand-small { display: block; }
}

/* ============ home wall: whiteboard + paper column ============ */

.wall-stage { position: relative; height: 100%; min-width: 0; display: flex; flex-direction: column; }
/* the wall's sheet is a board's sheet: 16:10, the same size and spot as the whiteboard on
   a board page (under its 48px sheet-tab row). The board proper (a 1024 × 640 world)
   fills it at 100% and pans and zooms inside it. Phones keep the full-height sheet. */
@media (min-width: 760px) {
    .wall-page .wall-stage {
        width: min(100%, calc((max(100dvh, 720px) - var(--top-h) - 16px - var(--dock-h) - 48px - var(--wall-under-h, 0px)) * 1.6));
        height: auto; padding-top: 48px;
    }
    .wall-page .canvas-port { flex: none; aspect-ratio: 1.6; }
}
/* below 1280 the name card sits under the main area, so the hanging row needs its own
   room inside it — the sheet gives up those 52px of height */
@media (min-width: 760px) and (max-width: 1279.98px) {
    .wall-page .wall-stage { --wall-under-h: 52px; }
}
.wall-page .canvas-port {
    display: block; position: relative; flex: 1; min-height: 0; width: 100%;
    overflow: hidden; touch-action: none; border-radius: 14px;
    box-shadow: 0 0 0 7px var(--gray-300), 0 0 0 8px var(--gray-500),
        0 18px 40px color-mix(in srgb, var(--night-900) 28%, transparent);
}
.wall-page .canvas-port .canvas-frame {
    position: absolute; inset: 0; width: 100%; height: 100%; box-shadow: none;
}
.wall-page .canvas-world {
    position: absolute; left: 0; top: 0; width: 1024px; aspect-ratio: var(--ar, 1.6);
    transform-origin: 0 0; overflow: hidden; border-radius: 14px;
}
/* on the wall the paper pattern marks the board proper, not the whole sheet */
.wall-page .canvas-frame::before { content: none; }
.wall-page .canvas-world::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wall-page .canvas-frame[data-pattern="dots"] .canvas-world::before {
    background-image: radial-gradient(var(--p-ink) 1.1px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .16;
}
.wall-page .canvas-frame[data-pattern="grid"] .canvas-world::before {
    background-image:
        linear-gradient(var(--p-accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--p-accent) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .12;
}
.wall-page .canvas-frame[data-pattern="lines"] .canvas-world::before {
    background-image: linear-gradient(var(--p-accent) 1px, transparent 1px);
    background-size: 100% 32px;
    opacity: .16;
}
@media (min-width: 1280px) {
    /* no name card under the main area: the wall runs on down to the 24px gutter */
    .app-page.wall-page { --content-h: calc(max(100dvh, 720px) - var(--top-h) - 16px - 24px); }
    .wall-page .app-main { margin-bottom: calc(24px - var(--dock-h)); }
}

/* the wall's mini-map: hidden until the map tab (or the phone's map button) asks for it */
.wall-page .canvas-mini {
    display: none; position: absolute; right: 10px; bottom: 10px; z-index: 6;
    width: 230px; height: auto; aspect-ratio: 1.6; overflow: hidden; touch-action: none; cursor: pointer;
    border: 2.5px solid var(--line); border-radius: 6px 12px 8px 14px;
    background: var(--p-canvas, var(--paper)); box-shadow: 4px 4px 0 var(--line); rotate: .6deg;
}
.wall-page .canvas-mini.open { display: block; }

/* everything for the wall hangs off its bottom edge, cut like the toolkit drawer:
   ＋ new on the left, the toolkit handle in the middle, zoom & map on the right */
.wall-under {
    position: relative; z-index: 30; flex-shrink: 0;
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 7px; /* the frame's aluminium ring */ min-height: 44px;
}
.wall-under-right { margin-left: auto; display: flex; align-items: flex-start; gap: 10px; }
.wall-under .wall-kitdrawer { position: absolute; left: 50%; translate: -50% 0; margin-top: 0; }

.wall-tab {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px; min-width: 44px; padding: 0 14px 2px; box-sizing: border-box;
    border: 2.5px solid var(--line); border-top: none;
    border-radius: 0 0 16px 14px / 0 0 14px 16px;
    background: var(--paper); color: var(--ink);
    /* the second shadow runs the offset edge right up to the frame — no notch at the seam */
    box-shadow: 3px 4px 0 var(--line), 3px 0 0 var(--line);
    cursor: pointer; font: inherit;
    transition: height .15s;
}
/* hover grows the tab down, never moves it: its top stays on the frame's edge */
button.wall-tab:hover:not(.on) { height: 48px; }
.wall-tab.on { height: 52px; background: var(--hi-yellow); color: var(--gray-900); }
.wall-tab.add.on .icon { rotate: 45deg; }
.wall-tab-lbl { font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; line-height: 1; }

.wall-zoomg {
    display: flex; align-items: center; gap: 0; height: 44px; padding: 0 2px; box-sizing: border-box;
    border: 2.5px solid var(--line); border-radius: 22px 16px 22px 18px;
    background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line);
}
.wall-zoomg button {
    width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
    border: none; border-radius: 50%; background: none; color: inherit; font: inherit; cursor: pointer;
}
.wall-zoomg button:hover:not(:disabled) { background: color-mix(in srgb, var(--gray-900) 8%, transparent); }
.wall-zoomg button:disabled { opacity: .3; cursor: default; background: none; }
.wall-zoomg .pct { width: auto; min-width: 46px; padding: 0 4px; border-radius: 10px; font-size: .95rem; }
/* the hanging-tab cut for the desktop row */
.wall-zoomg-tab {
    border-top: none; border-radius: 0 0 22px 16px / 0 0 16px 22px;
    padding: 0 4px 2px; box-shadow: 3px 4px 0 var(--line), 3px 0 0 var(--line); cursor: default;
}
.wall-zoomg-phone { padding: 0 2px; }

/* the map tab (desktop) and map button (phone) */
.wall-mapbtn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; box-sizing: border-box;
    border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%;
    background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line);
    cursor: pointer; transition: rotate .18s;
}
.wall-mapbtn:hover { rotate: -6deg; }
.wall-mapbtn.on { background: var(--hi-yellow); color: var(--gray-900); }
.wall-mapbtn-tab { border-top: none; border-radius: 0 0 16px 14px / 0 0 14px 16px; box-shadow: 3px 4px 0 var(--line), 3px 0 0 var(--line); transition: height .15s; }
.wall-mapbtn-tab:hover { rotate: 0deg; }
.wall-mapbtn-tab:hover:not(.on) { height: 48px; }
.wall-under .kit-drawer-btn { box-shadow: 3px 4px 0 var(--gray-900), 3px 0 0 var(--gray-900); }
.wall-under .kit-drawer-btn:hover:not(.on) { height: 48px; }
.wall-mapbtn-tab.on { height: 52px; }

/* phone: zoom & map sit on the wall's top-right edge; the hanging row is desktop only */
.wall-wbar { display: none; }
.wall-hbtns { display: none; align-items: center; gap: 6px; position: relative; }
.wall-hb {
    position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    box-sizing: border-box; flex-shrink: 0; border: 2px solid transparent; border-radius: 50% 45% 52% 48%;
    background: transparent; color: var(--gray-900); cursor: pointer; transition: rotate .18s;
}
.wall-hb:hover { background: color-mix(in srgb, var(--gray-900) 8%, transparent); rotate: -8deg; }
.wall-hb.on { background: var(--hi-yellow); border-color: var(--line); }
.wall-hb.add.on { rotate: 42deg; }

/* the wall's own widgets: the × that takes a widget down, the countdown pin */
.wk-down {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
    border: none; border-radius: 50%; background: transparent; color: var(--wk-btn, var(--amber-950));
    cursor: pointer; opacity: .55;
}
.wk-down:hover { opacity: 1; background: color-mix(in srgb, var(--black) 8%, transparent); }
.pin.wk-cd { z-index: 4; --ww-done: var(--green-500); }
.pin.wk-cd .bw-on { font-size: 34px; color: var(--ww-done); }

/* "on your wall" tag on a toolkit tile you already have up */
.kit-have {
    position: absolute; top: -9px; right: 8px; rotate: 4deg;
    font-size: 12px; padding: 0 7px; border: 2px solid var(--line); border-radius: 8px;
    background: var(--green-200); color: var(--green-900);
}
.kit-type.have { border-style: dashed; background: var(--green-100); cursor: default; }
.kit-type.have:hover { background: var(--green-100); box-shadow: none; transform: none; }

/* the wall toolkit's countdown set-up */
.wk-setup { display: flex; gap: 6px; }
.wk-setup input { flex: 1; min-width: 0; }

/* ============ phone sheets: paper rising from the bottom edge (handover G2) ============
   The toolkit, add a friend, the "you" sheet… each is a .psheet over a .psheet-scrim. They
   sit above the tab bar (it's covered while one is up) and run to the bottom edge. The
   colours are knobs on the sheet, defaulting to the roles — so palettes, dark mode and your
   own theme recolour every sheet at once, and a sheet that must keep one look pins the
   knobs (or the roles) on itself, never raw colours. */
.psheet-scrim {
    --psheet-scrim: color-mix(in srgb, var(--night-900) 35%, transparent);
    position: fixed; inset: 0; z-index: 110; margin: 0; padding: 0; border: none;
    background: var(--psheet-scrim); cursor: pointer;
}
.psheet {
    --psheet-paper: var(--paper);
    --psheet-ink: var(--ink);
    --psheet-soft: var(--ink-soft);
    --psheet-line: var(--line);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 111;
    display: flex; flex-direction: column; box-sizing: border-box;
    max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
    background: var(--psheet-paper); color: var(--psheet-ink);
    border: 2.5px solid var(--psheet-line); border-bottom: none; border-radius: 18px 22px 0 0;
    box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent),
        0 -18px 40px color-mix(in srgb, var(--night-900) 20%, transparent);
    animation: psheet-up .2s cubic-bezier(.2, .9, .3, 1);
}
.psheet-grab { display: grid; place-items: center; flex-shrink: 0; width: 100%; height: 30px; margin-top: 4px; padding: 0; border: none; background: none; cursor: pointer; }
.psheet-grab span { width: 56px; height: 6px; border-radius: 4px; background: var(--psheet-line); opacity: .35; }
@keyframes psheet-up { from { translate: 0 48px; opacity: 0; } }
.calm .psheet { animation: none; }
@media (prefers-reduced-motion: reduce) { .psheet { animation: none; } }

/* the wall toolkit's sheet grows with its tiles; only a short screen scrolls its body */
.wall-sheet { max-height: calc(100dvh - 56px); overflow: hidden; }

/* "you" on a phone (canvas PhoneYou): your avatar raises this instead of the dock pop-up —
   who you are, how you're showing up, your status note, uploads, settings, log out */
.you-sheet { padding: 0 16px calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 16px; }
.you-who { display: flex; align-items: center; gap: 12px; padding: 2px 0 12px; border-bottom: 2px dashed color-mix(in srgb, var(--psheet-ink) 20%, transparent); }
.you-who .av { width: 52px; height: 52px; flex-shrink: 0; font-size: 1.9rem; border-width: 2.5px; }
.you-who .av .dot { width: 16px; height: 16px; right: -4px; bottom: -4px; border-width: 2.5px; border-color: var(--psheet-paper); box-sizing: border-box; }
.you-who-text { min-width: 0; }
.you-who .n { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 30px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.you-who .u { display: block; font-size: 15px; color: var(--psheet-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.you-sheet .lbl { font-size: 22px; color: var(--psheet-soft); margin: 12px 0 4px; }
.you-opt { gap: 12px; min-height: 48px; padding: 6px 12px; border-radius: 12px; font-size: 18px; }
.you-opt .dot { width: 14px; height: 14px; border: 2px solid var(--psheet-line); box-sizing: border-box; }
.you-opt .d { font-size: 14px; color: var(--psheet-soft); }
.you-mood {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px 0 14px; box-sizing: border-box;
    background: var(--surface); color: var(--psheet-ink); border: 2.5px solid var(--psheet-line); border-radius: var(--wobble-3);
}
.you-mood input, .you-mood input:focus { flex: 1; min-width: 0; padding: 0; border: none; border-radius: 0; outline: none; box-shadow: none; background: none; font: inherit; font-size: 17px; color: inherit; }
.you-mood:focus-within { box-shadow: 0 0 0 3px var(--hi-yellow); }
.you-mood button { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--psheet-soft); cursor: pointer; }
.you-sheet .dock-up2 { margin-top: 14px; padding: 10px 12px; gap: 6px; border-width: 2.5px; font-size: 17px; color: var(--psheet-ink); }
.you-sheet .dock-up2 .r { gap: 10px; }
.you-sheet .dock-up2 .r small { font-size: 14px; color: var(--psheet-soft); }
.you-sheet .dock-bar { height: 10px; }
.you-row, .you-out {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 4px; box-sizing: border-box;
    border: none; background: none; font: inherit; font-size: 18px; text-align: left; text-decoration: none; cursor: pointer;
}
.you-row { margin-top: 6px; color: var(--psheet-ink); border-bottom: 2px dashed color-mix(in srgb, var(--psheet-ink) 14%, transparent); }
.you-row:hover { color: var(--psheet-ink); }
.you-row .you-chev { margin-left: auto; rotate: -90deg; color: var(--psheet-soft); }
.you-out { margin-top: 2px; color: var(--danger-text); }
.wall-sheet-head { display: flex; align-items: center; gap: 8px; padding: 0 14px 4px; }
.wall-sheet-tabs { padding: 0 10px; }
.wall-sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 14px 18px; }
.wall-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wall-sheet-go { margin-top: 12px; }
.wall-kit .kit-tier { background: var(--yellow-200); color: var(--amber-950); }

.wall-hint {
    position: absolute;
    right: 4%; top: 17%;
    width: 230px;
    z-index: 3;
    pointer-events: none;
    font-family: var(--font-marker);
    font-size: 1.6rem;
    line-height: 1.1;
    text-align: center;
    color: color-mix(in srgb, var(--p-ink) 55%, transparent);
    rotate: 3deg;
}

/* search strip in the top bar */
.wall-search { position: relative; width: 100%; max-width: 420px; }
kbd {
    font-family: var(--font-mono); font-size: .72rem;
    padding: 1px 6px;
    border: 1.5px solid var(--ink-faint); border-radius: 5px;
    color: var(--ink-soft); background: var(--surface);
    white-space: nowrap;
}
.search-results {
    margin-top: 8px; padding: 6px;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line);
    border-radius: 12px 18px 14px 16px;
    box-shadow: 4px 5px 0 var(--line);
}
.search-res {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 8px 10px;
    border: none; border-radius: 8px;
    background: none; color: inherit;
    font: inherit; font-size: 1.05rem; text-align: left;
    cursor: pointer;
}
.search-res:hover, .search-res:focus-visible { background: var(--hi-yellow); color: var(--gray-900); }
.search-res .kind { margin-left: auto; font-size: .8rem; color: var(--ink-soft); }
.search-none { padding: 10px; color: var(--ink-soft); }

/* board stickies on the wall: selected ring */
.pin.board.sel { scale: 1.07; rotate: 0deg; z-index: 7; box-shadow: 0 0 0 4px var(--hi-yellow), 0 0 0 6.5px var(--gray-900), 6px 14px 18px -6px color-mix(in srgb, var(--black) 40%, transparent); }
.pin.board .pin-sub { font-size: .95rem; }
.pin.board:focus-visible { outline: 3px dashed var(--p-accent); outline-offset: 6px; }
.pin.action { min-height: 44px; }
.pin.action.disabled { opacity: .45; cursor: not-allowed; }
.pin.action.on, .pin.action.on:hover { border-style: solid; border-color: var(--p-ink); color: var(--p-ink); background: color-mix(in srgb, var(--hi-yellow) 70%, transparent); }
.pin.action.inline { position: relative; transform: none; flex-shrink: 0; }
/* the wall's + menu: new board / join / find a community / lock, folded into one paper
   menu. It hangs above the "new" tab on the wall's bottom edge (desktop) and drops from
   the top bar's + (phone) — nothing sits on the wall itself. */
.wall-add { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wall-under .wall-add-menu { position: absolute; left: 0; bottom: 56px; }
.wall-add-shade { position: fixed; inset: 0; z-index: -1; }
.wall-add-menu {
    display: flex; flex-direction: column; min-width: 220px; padding: 8px; box-sizing: border-box; rotate: -1deg;
    background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 6px 14px 8px 16px; box-shadow: 4px 4px 0 var(--line);
}
.wall-add-menu .mi {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px; box-sizing: border-box;
    border: none; border-radius: 10px; background: none; color: inherit; cursor: pointer; text-align: left; text-decoration: none; white-space: nowrap;
    font: inherit; font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem;
}
.wall-add-menu .mi:hover { background: color-mix(in srgb, var(--hi-yellow) 55%, transparent); color: inherit; }
.wall-add-menu .mi.on { background: var(--hi-yellow); color: var(--gray-900); }
.wall-add-menu .sep { margin: 4px 8px; border-top: 2px dashed color-mix(in srgb, var(--line) 25%, transparent); }
.pin.action.disabled:hover { border-style: dashed; border-color: color-mix(in srgb, var(--p-ink) 55%, transparent); color: color-mix(in srgb, var(--p-ink) 75%, transparent); background: transparent; }

/* your own taped-on "this week" note */
.pin.mine {
    width: 176px;
    padding: 22px 14px 12px 16px;
    align-items: stretch;
    text-align: left;
    cursor: default;
    /* always yellow paper and dark ink, whatever the wall (Home.dc.html) — pinned here as the
       wall widgets' --ww-* variables, so a theme can recolour it the same way as the others */
    --ww-paper: var(--yellow-200);
    --ww-ink: var(--amber-950);
    --ww-tape: color-mix(in srgb, var(--blue-100) 80%, transparent);
    background: var(--ww-paper);
    color: var(--ww-ink);
    border-radius: 2px 2px 26px 2px / 2px 2px 14px 2px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 4px 10px 14px -6px color-mix(in srgb, var(--black) 35%, transparent);
    user-select: text;
    -webkit-user-select: text;
}
.pin.mine:hover { scale: 1; }
/* dragged by its paper and title; the todos underneath keep their own taps */
.pin.mine.draggable { cursor: grab; }
.pin.mine.dragging { cursor: grabbing; scale: 1.04; }
.pin.mine .mine-title { user-select: none; -webkit-user-select: none; }
.pin.mine .mine-body { display: flex; flex-direction: column; gap: 2px; cursor: auto; }
.pin.mine::before { /* tape */
    content: "";
    position: absolute; top: -12px; left: 50%;
    width: 80px; height: 22px;
    translate: -50% 0; rotate: -4deg;
    background: var(--ww-tape);
    border-left: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
    border-right: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
}
.mine-title { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.todo-line { display: flex; align-items: center; }
.todo {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0;
    border: none; background: none;
    font: inherit; font-size: 1rem; color: inherit; text-align: left;
    cursor: pointer;
}
.todo .box { width: 18px; height: 18px; background: transparent; border-color: currentColor; color: inherit; }
.todo .t { overflow-wrap: anywhere; }
.todo.done .t { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .6; }
.todo-x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: none; color: inherit; opacity: 0; cursor: pointer; }
.todo-line:hover .todo-x, .todo-x:focus-visible { opacity: .6; }
.todo-x:hover { opacity: 1; background: color-mix(in srgb, var(--black) 8%, transparent); }
.todo-add input,
.todo-add input:focus {
    width: 100%;
    margin-top: 4px; padding: 2px 0;
    border: none; border-bottom: 1.5px dashed color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 0;
    background: none; box-shadow: none; transform: none;
    color: inherit; font-size: .95rem;
}
.todo-add input::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); }

/* peek: a board's sticky, enlarged, top right */
.peek {
    position: absolute; right: 24px; top: 96px;
    width: 270px;
    z-index: 15;
    padding: 22px 18px 18px;
    background: var(--p-note);
    color: var(--p-note-ink);
    border: 2.5px solid var(--gray-900);
    border-radius: var(--wobble-2);
    box-shadow: 5px 6px 0 var(--gray-900);
    rotate: .6deg;
    pointer-events: auto;
    animation: slap .2s cubic-bezier(.2, 1.4, .5, 1);
}
.peek::before { /* magnet */
    content: "";
    position: absolute; top: -12px; left: 50%;
    translate: -50% 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--white) 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, var(--black) 30%, var(--p-accent)));
    box-shadow: 0 3px 4px color-mix(in srgb, var(--black) 35%, transparent);
}
.peek-name { font-family: var(--font-marker); font-weight: 700; font-size: 2.1rem; line-height: 1.05; padding-right: 30px; overflow-wrap: anywhere; }
.peek-tag { font-size: .92rem; opacity: .8; margin-top: 2px; }
.peek-stats { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; font-size: .92rem; }
.peek-stats .faint { opacity: .75; }
.peek-chans { display: flex; flex-direction: column; gap: 6px; }
.chan {
    display: flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 6px 8px;
    border: none; border-radius: 8px;
    background: color-mix(in srgb, var(--p-canvas) 55%, transparent);
    color: inherit;
    font: inherit; font-size: 1.05rem; text-align: left;
    cursor: pointer;
}
.chan:hover:not(:disabled) { background: color-mix(in srgb, var(--p-canvas) 85%, transparent); }
.chan:disabled { cursor: default; }
.chan-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-tag { margin-left: auto; padding: 0 8px; border-radius: 9px; font-size: .8rem; }
.chan-tag.m { background: var(--red-600); color: var(--white); font-weight: 700; }
.chan-tag.new { background: color-mix(in srgb, var(--p-accent) 28%, transparent); }
.chan-more { font-size: .85rem; opacity: .7; padding-left: 8px; }
.peek-actions { display: flex; gap: 8px; margin-top: 14px; }
.peek-actions .btn { --line: var(--gray-900); color: var(--gray-900); background: var(--cream); padding: 6px 10px; font-size: 1.05rem; white-space: nowrap; }
.peek-actions .btn.primary { color: var(--white); background: var(--blue-700); }

/* paper column: tabbed panel + hop in */
.side-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-scroll { flex: 1; min-height: 0; overflow: auto; padding-bottom: 8px; }
.side-pad { padding: 12px 12px 4px; }
.side-sec { font-family: var(--font-marker); font-weight: 700; font-size: 1.25rem; color: var(--ink-soft); padding: 8px 12px 2px; }
.side-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 10px; margin: 0 2px; border-radius: 10px; }
.side-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.who { flex: 1; min-width: 0; line-height: 1.15; }
.who .n { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .a { font-size: .85rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-friend-row { display: flex; gap: 8px; padding: 12px 12px 6px; }
.add-friend-row input { flex: 1; min-width: 0; font-size: 1rem; padding: 8px 12px; }
.side-notice { padding: 0 14px 4px; font-size: .9rem; color: var(--ink-soft); }
.side-empty { padding: 16px 16px; color: var(--ink-soft); text-align: center; }
.side-empty-big { font-family: var(--font-marker); font-weight: 700; font-size: 1.8rem; color: var(--ink-soft); rotate: -2deg; margin: 20px 0 6px; }
.side-caught-up { font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; color: var(--ink-soft); text-align: center; margin-top: 60px; rotate: -2deg; }
.inbox-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 15%, transparent); }
.inbox-main { flex: 1; min-width: 0; }
.inbox-who { font-size: 1.05rem; }
.inbox-where { font-size: .85rem; color: var(--ink-soft); }
.inbox-text { font-size: 1rem; margin-top: 2px; }
.inbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.inbox-note { font-size: .82rem; color: var(--ink-soft); }
.av.team { background: var(--blue-700); }
.av.team.warn { background: var(--danger); }

/* report to Pento (design canvas "Report to Pento"): a message's flag, a chat's about sticky */
.report-sheet { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; background: color-mix(in srgb, var(--hi-yellow) 30%, var(--paper, var(--white))); color: var(--ink); box-shadow: 3px 3px 0 var(--line); }
.report-h { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.report-field { display: flex; flex-direction: column; gap: 4px; font-size: .95rem; }
.report-field small { color: var(--ink-soft); }
.report-field input { width: 100%; box-sizing: border-box; }
.report-fine { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.3; }
.report-row { display: flex; flex-wrap: wrap; gap: 8px; }
.report-done { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 8px 12px; border: 2px solid var(--m-green); border-radius: 12px 14px 10px 16px; background: color-mix(in srgb, var(--m-green) 16%, var(--paper, var(--white))); color: var(--ink); }
.about-report { align-self: flex-start; }
.quote { margin-top: 4px; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--hi-yellow) 45%, transparent); font-size: 1rem; }

.hop-in { padding: 12px 8px 10px; rotate: -.4deg; }
.hop-head { display: flex; align-items: baseline; gap: 8px; padding: 0 10px 4px; }
.hop-title { font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.hop-sub { font-size: .85rem; color: var(--ink-soft); }
.voice-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 10px; }
.voice-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.voice-row .who .n { font-size: 1.05rem; }
.hop-empty { padding: 8px 12px 4px; font-size: .92rem; color: var(--ink-soft); }

/* dialogs on the wall */
.canvas-dialog.wide { width: min(560px, 94vw); }
.canvas-dialog .field { color: var(--ink); }
.new-board { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px 24px; }
.new-board .error, .new-board .dialog-actions { grid-column: 1 / -1; }
.new-board .dialog-actions { margin-top: 6px; }
.new-board-main p { margin-bottom: 14px; }
.new-board-preview.canvas-frame {
    width: 180px; height: 230px; aspect-ratio: auto;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 0 0 5px var(--gray-300), 0 0 0 6px var(--gray-500), 0 8px 18px color-mix(in srgb, var(--night-900) 20%, transparent);
}
.new-board-preview .pin { pointer-events: none; }
.new-board-preview .pin.board { width: 140px; }
.canvas-dialog input.code { font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ============ chat notepad: text chat floating over the canvas (never shrinks it) ============ */

.canvases-shell { --pad-w: min(520px, 40vw); }
.canvases-shell.pad-wide { --pad-w: min(860px, 60vw); }
.pin.channel.text.open { box-shadow: 0 0 0 4px var(--hi-yellow), 0 0 0 6.5px var(--line), 3px 8px 12px -6px color-mix(in srgb, var(--black) 35%, transparent); }

.notepad {
    position: fixed;
    top: 104px;
    right: 24px;
    bottom: calc(102px + env(safe-area-inset-bottom, 0px));
    width: var(--pad-w);
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--line);
    border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px;
    box-shadow: 6px 7px 0 var(--line), var(--shadow-soft);
    transition: width .25s ease;
}
.notepad-rings { position: absolute; top: -15px; left: 24px; right: 24px; display: flex; justify-content: space-between; pointer-events: none; }
.notepad-rings span { width: 12px; height: 26px; border: 2.5px solid var(--line); border-radius: 8px; background: linear-gradient(90deg, var(--gray-300), var(--white) 50%, var(--gray-500)); }
.notepad-grab { display: none; }

.notepad-head { display: flex; align-items: flex-end; gap: 4px; padding: 18px 8px 0 12px; border-bottom: 2.5px solid var(--line); }
.notepad-tabs { display: flex; align-items: flex-end; gap: 2px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.notepad-tab {
    position: relative; top: 2.5px;
    display: flex; align-items: center;
    border: 2.5px solid transparent; border-bottom: none;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}
.notepad-tab.on { background: var(--paper); border-color: var(--line); }
.notepad-tab > button:first-child {
    display: flex; align-items: center; gap: 5px;
    min-height: 42px; padding: 2px 4px 4px 10px;
    font-family: var(--font-marker); font-weight: 700; font-size: 1.35rem;
    color: var(--ink-soft); background: none; border: none; cursor: pointer; white-space: nowrap;
}
.notepad-tab.on > button:first-child, .notepad-tab > button:first-child:hover { color: var(--ink); }
.notepad-tab .chip, .notepad-picker-sec .chip, .notepad-topic .chip { width: 14px; height: 14px; border-width: 2px; }
.notepad-tab-hash { opacity: .5; }
.notepad-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--m-red); flex-shrink: 0; }
.notepad-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--red-600); color: var(--white); font-family: var(--font-hand); font-weight: 400; font-size: .72rem; display: grid; place-items: center; }
.notepad-add { flex-shrink: 0; width: 36px; height: 36px; margin: 0 0 4px 4px; display: grid; place-items: center; border: 2px dashed var(--ink-faint); border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer; }
.notepad-add:hover, .notepad-add[aria-expanded="true"] { border-color: var(--line); color: var(--ink); }
.notepad-btns { display: flex; gap: 2px; padding-bottom: 5px; flex-shrink: 0; }
.notepad-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid transparent; border-radius: 50% 45% 52% 48%; background: transparent; color: var(--ink); cursor: pointer; }
.notepad-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); rotate: -8deg; }

.notepad-picker {
    position: absolute; left: 12px; top: 66px; z-index: 5;
    width: min(320px, calc(100% - 24px)); max-height: min(520px, 70%); overflow-y: auto;
    padding: 10px; box-sizing: border-box;
    background: var(--paper); border: 2.5px solid var(--line);
    border-radius: 12px 18px 14px 16px; box-shadow: 4px 5px 0 var(--line);
}
.notepad-picker-sec { display: flex; align-items: center; gap: 6px; padding: 8px 8px 2px; font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; color: var(--ink-soft); }
.notepad-picker-sec small { font-family: var(--font-hand); font-weight: 400; font-size: .78rem; }
.notepad-pick { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 4px 10px; border: none; border-radius: 8px; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.notepad-pick:hover { background: var(--hi-yellow); color: var(--gray-900); }
.notepad-pick .notepad-count, .notepad-pick .notepad-dot { margin-left: auto; }
.notepad-none { color: var(--ink-soft); padding: 6px 8px; margin: 0; }

.notepad-topic { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: .92rem; color: var(--ink-soft); border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); min-width: 0; }
.notepad-board { color: var(--ink); text-decoration: none; white-space: nowrap; }
.notepad-board:hover { text-decoration: underline; }
.notepad-topic-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notepad-pinned {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 2px 10px;
    box-sizing: border-box;
    font: inherit;
    font-size: .88rem;
    border: 2px solid var(--gray-900);
    border-radius: 14px 10px 14px 9px;
    background: var(--yellow-200);
    color: var(--amber-950);
    cursor: pointer;
}
.notepad-pinned:hover { rotate: -2deg; }
.notepad-pinned.on { background: var(--hi-yellow); }

/* pinned list: drops under the topic line; stickies are a per-board opt-in */
.notepad-pins {
    margin: 0 14px;
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow: auto;
    flex-shrink: 0;
    background: var(--yellow-100);
    color: var(--gray-900);
    border: 2.5px solid var(--gray-900);
    border-top: none;
    border-radius: 0 0 14px 18px;
    box-shadow: 3px 3px 0 var(--gray-900);
}
.notepad-pin { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-radius: 10px; font-size: .95rem; line-height: 1.25; }
.notepad-pin:hover { background: color-mix(in srgb, var(--gray-900) 6%, transparent); }
.notepad-pin-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notepad-pin-text b { margin-right: 4px; }
.notepad-pin-text p { display: inline; margin: 0; }
.notepad-pin-acts { display: flex; gap: 4px; flex-shrink: 0; }
.notepad-pin-acts button {
    font: inherit;
    font-size: .82rem;
    min-height: 28px;
    padding: 0 8px;
    border: 2px solid var(--gray-900);
    border-radius: 10px 8px 11px 7px;
    background: var(--white);
    color: var(--gray-900);
    cursor: pointer;
}
.notepad-pin-acts button:hover { background: var(--hi-yellow); }
.notepad-pin-acts button.ghost { border-style: dashed; background: transparent; }
.notepad-pins-note { margin: 0; padding: 4px 6px 0; font-size: .82rem; color: var(--gray-600); }
.notepad-pinned + .notepad-pinned { margin-left: 0; }

/* the chat's photos & files list (canvas: ChatPad .cp-frow + .cp-shelf) */
.chat-files { max-height: 320px; }
.chat-frow { align-items: center; }
.chat-frow .notepad-pin-text b { display: block; font-weight: 400; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-frow .st { display: block; font-size: 12px; color: var(--gray-600); }
.chat-frow .st.soon { color: var(--orange-700); }
.chat-frow .st.kept { color: var(--green-700); }
.chat-frow .chat-fi { width: 26px; height: 30px; font-size: 8px; padding-bottom: 1px; }
.chat-fthumb {
    width: 30px; height: 30px; flex-shrink: 0; box-sizing: border-box; object-fit: cover;
    border: 2px solid var(--gray-900); border-radius: 3px; background: repeating-linear-gradient(135deg, var(--gray-100) 0 5px, var(--bone) 5px 10px);
}
.chat-fthumb.gone, .chat-frow .chat-fi.gone { border-style: dashed; border-color: var(--gray-500); background: transparent; color: var(--gray-500); }
.chat-shelf { display: flex; align-items: center; gap: 8px; padding: 6px 6px 2px; font-size: 13px; color: var(--gray-600); }
.chat-meter { flex: 1; height: 12px; border: 2px solid var(--gray-900); border-radius: 8px 5px 8px 6px; background: var(--white); overflow: hidden; }
.chat-meter i { display: block; height: 100%; background: var(--green-500); }

/* the conversation inherits the board's palette for accents; paper stays paper */
.notepad-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; color: var(--ink); }
.chat-body {
    position: relative;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    background: linear-gradient(90deg, transparent 56px, color-mix(in srgb, var(--m-red) 28%, transparent) 56px 58px, transparent 58px);
}
.chat-send {
    flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center;
    border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%;
    background: var(--accent-strong); color: var(--white); cursor: pointer; box-shadow: 2px 2px 0 var(--line);
}
.chat-send:hover:not(:disabled) { rotate: -10deg; }
.chat-send:disabled { opacity: .5; cursor: default; }

.chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px 12px 10px;
}

.chat-load-older {
    display: block;
    margin: 6px auto 12px;
    padding: 4px 18px;
    font: inherit;
    border: 2px dashed currentColor;
    border-radius: var(--wobble-1);
    background: transparent;
    color: inherit;
    opacity: .65;
    cursor: pointer;
}
.chat-load-older:hover { opacity: 1; }

.chat-empty {
    text-align: center;
    margin-top: 12vh;
    font-family: var(--font-marker);
    font-size: 2rem;
    opacity: .6;
    rotate: -2deg;
}

.chat-new-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--m-red);
    font-family: var(--font-marker);
    font-weight: 700;
    font-size: 1.3rem;
    margin: 12px 0 2px;
}
.chat-new-divider::before, .chat-new-divider::after {
    content: "";
    flex: 1;
    height: 8px;
    background: currentColor;
    -webkit-mask: url("svg/wave.svg") 0 0 / 40px 8px repeat-x;
            mask: url("svg/wave.svg") 0 0 / 40px 8px repeat-x;
}

.chat-msg { display: flex; gap: 12px; padding: 2px 8px; border-radius: 10px; position: relative; }
.chat-msg.with-head { margin-top: 14px; }
.chat-msg:hover { background: color-mix(in srgb, var(--p-ink) 5%, transparent); }
.chat-msg-gutter { width: 38px; flex-shrink: 0; }
.chat-msg-main { flex: 1; min-width: 0; }
.chat-avatar {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    margin-top: 3px;
    border-radius: 50% 45% 55% 48%;
    background: var(--avatar, var(--m-blue));
    border: 2px solid var(--p-ink);
    color: var(--white);
    font-family: var(--font-marker);
    font-weight: 700;
    font-size: 1.4rem;
}
.chat-msg.mentioned { background: color-mix(in srgb, var(--hi-yellow) 30%, transparent); }
.chat-msg.mentioned:hover { background: color-mix(in srgb, var(--hi-yellow) 42%, transparent); }

.chat-msg-head { display: flex; align-items: baseline; gap: 8px; }
.chat-msg-author { font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; line-height: 1.1; color: var(--avatar, inherit); }
.chat-msg-time { font-size: .82rem; opacity: .5; }

.chat-msg-body { position: static; } /* hover tools anchor to the whole message corner */
.chat-msg-content { line-height: 1.45; overflow-wrap: anywhere; }
.chat-msg-content p { margin: 2px 0; }
.chat-msg-content pre {
    font-family: var(--font-mono);
    font-size: .88rem;
    background: color-mix(in srgb, var(--p-ink) 7%, transparent);
    border: 1.5px dashed color-mix(in srgb, var(--p-ink) 30%, transparent);
    padding: 8px 12px;
    border-radius: 8px;
    overflow-x: auto;
    max-width: 75ch;
}
.chat-msg-content code {
    font-family: var(--font-mono);
    background: color-mix(in srgb, var(--p-ink) 8%, transparent);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .85em;
}
.chat-msg-content pre code { background: none; padding: 0; }
.chat-msg-content blockquote {
    margin: 4px 0;
    padding-left: 12px;
    border-left: 3px solid var(--p-accent);
    opacity: .9;
}
.chat-msg-content a { color: var(--p-accent); }
.chat-msg-content .mention {
    background: linear-gradient(104deg, transparent .9%, color-mix(in srgb, var(--hi-yellow) 85%, transparent) 2.4%, color-mix(in srgb, var(--hi-yellow) 85%, transparent) 97%, transparent 98.5%);
    border-radius: .5em .2em;
    padding: 0 3px;
}
.chat-msg-edited { font-size: .78rem; opacity: .5; margin-left: 5px; }

.chat-msg-actions {
    position: absolute;
    top: -16px; right: 10px;
    display: none;
    gap: 2px;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: var(--wobble-1);
    padding: 2px 5px;
    box-shadow: var(--shadow-hard);
    z-index: 2;
}
.chat-msg:hover .chat-msg-actions, .chat-msg:focus-within .chat-msg-actions { display: flex; }
.chat-msg-actions button {
    display: grid; place-items: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 6px;
}
.chat-msg-actions button:hover, .chat-msg-actions button.on { background: var(--hi-yellow); color: var(--gray-900); }

.chat-msg-actions.show { display: flex; }
.chat-msg-ask { align-self: center; padding: 0 4px; font-size: .88rem; }
.chat-msg.replying { background: color-mix(in srgb, var(--hi-yellow) 24%, transparent); }
.chat-msg-short { display: none; padding-top: 4px; font-size: .72rem; opacity: .5; text-align: right; }
.chat-msg:hover .chat-msg-short { display: block; }
.chat-role { padding: 0 7px; border: 1.5px solid currentColor; border-radius: 8px 6px 9px 5px; font-size: .74rem; line-height: 1.5; opacity: .7; }

/* day + reply quote + stickers + photos (design: small board chat pad) */
.chat-day { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: .82rem; color: var(--ink-soft); }
.chat-day::before, .chat-day::after { content: ""; flex: 1; border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.chat-reply { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 2px 0; font-size: .88rem; color: var(--ink-soft); }
.chat-reply > svg, .chat-reply .av { flex-shrink: 0; }
.chat-reply-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-q b { margin-right: 4px; color: var(--ink); }
.chat-reply-q.gone { font-style: italic; opacity: .7; }
/* reactions — one piece for chat and what's new (canvas: Reactions.dc.html) */
.rx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.rx-chips.row { position: relative; margin-top: 0; }
.rx-react, .rx-add {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 28px; padding: 0 9px 0 6px;
    font: inherit; font-size: .88rem;
    border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
    border-radius: 12px 9px 13px 8px;
    background: var(--paper); color: var(--ink); cursor: pointer;
}
.rx-react.on { border-color: var(--line); background: var(--yellow-200); color: var(--gray-900); }
.rx-react:hover:not(:disabled) { rotate: -3deg; }
.rx-react:disabled { cursor: default; }
.rx-add { padding: 0 7px; border-style: dashed; color: var(--ink-soft); background: transparent; }
.rx-add:hover, .rx-add.on { border-style: solid; border-color: var(--line); background: var(--hi-yellow); color: var(--gray-900); }
.rx-react .emo, .rx-pick .emo { margin: 0; vertical-align: 0; }
.rx-pick {
    position: absolute; top: calc(100% + 6px); right: 0;
    display: flex; flex-direction: column; gap: 4px; padding: 4px;
    background: var(--paper); color: var(--ink); border: 2px solid var(--line);
    border-radius: 14px 12px 15px 11px; box-shadow: var(--shadow-hard); z-index: 4;
}
.rx-pick.row { right: auto; left: 0; }
.rx-quick { display: flex; gap: 2px; }
.rx-pick .rx-quick button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: none; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.rx-pick .rx-quick button:hover, .rx-pick .rx-quick button.on { background: var(--hi-yellow); color: var(--gray-900); }
.rx-quick .rx-plus { margin-left: 2px; border-left: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent) !important; border-radius: 0 10px 10px 0 !important; }
.rx-more { width: 290px; padding: 4px 4px 2px; }
.rx-more .chat-pksec { padding: 2px 4px; }
.rx-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rx-pick .rx-grid .chat-ebtn { width: auto; height: 38px; padding: 0; }
.rx-pick .rx-grid .chat-ebtn.on { background: var(--yellow-200); box-shadow: inset 0 0 0 2px var(--line); }
@media (max-width: 480px) { .rx-more { width: 258px; } .rx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* photos & files on a message (canvas: ChatPad .cp-att) — each with when it fades and "keep it" */
.chat-atts { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 6px 0 2px; }
.chat-att { max-width: 100%; }
.chat-file {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 300px; max-width: 100%;
    padding: 8px 8px 8px 10px; box-sizing: border-box; border: 2px solid var(--gray-900); border-radius: 10px 14px 10px 12px;
    background: var(--white); color: var(--gray-900); box-shadow: 3px 3px 0 color-mix(in srgb, var(--gray-900) 20%, transparent);
}
.chat-file audio { width: 100%; height: 36px; }
.chat-fi {
    width: 34px; height: 40px; flex-shrink: 0; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 3px; border: 2px solid var(--gray-900); border-radius: 3px 11px 3px 3px; background: var(--yellow-100); color: var(--gray-900);
    font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.chat-fn { flex: 1; min-width: 0; line-height: 1.15; }
.chat-fn b { display: block; font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-fn small { font-size: 13px; color: var(--gray-600); }
.chat-dl {
    width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box;
    border: 2px solid var(--gray-900); border-radius: 50% 45% 52% 48%; background: var(--cream); color: var(--gray-900);
}
.chat-dl:hover { background: var(--hi-yellow); rotate: -8deg; color: var(--gray-900); }
.chat-video {
    display: block; width: 320px; max-width: 100%; max-height: 260px; background: var(--gray-900);
    border: 2px solid var(--line); border-radius: 4px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--gray-900) 20%, transparent);
}
.chat-gone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 260px; max-width: 100%; height: 150px; box-sizing: border-box; padding: 12px;
    border: 2.5px dashed var(--ink-faint); border-radius: 6px; color: var(--ink-soft); text-align: center; font-size: 13px; line-height: 1.25;
    background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--ink-faint) 9%, transparent) 10px 20px);
}
.chat-gone .icon { color: var(--ink-faint); }
.chat-gone b { font-weight: 400; color: var(--ink); font-size: 16px; }
.chat-gone.file { flex-direction: row; justify-content: flex-start; width: 300px; height: auto; min-height: 60px; text-align: left; gap: 10px; }
.chat-gone.file .chat-fi { border-style: dashed; border-color: var(--ink-faint); background: transparent; color: var(--ink-faint); }
.chat-fade { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.chat-fade.soon { color: var(--warning-text); }
.chat-fade.kept { color: var(--success-text); }
.chat-keep {
    min-height: 26px; padding: 0 10px; font: inherit; font-size: 13px; border: 2px solid var(--gray-900); border-radius: 10px 8px 11px 7px;
    background: var(--yellow-200); color: var(--gray-900); cursor: pointer;
}
.chat-keep:hover { rotate: -2deg; background: var(--hi-yellow); }
.chat-keep.ghost { background: transparent; border-style: dashed; border-color: var(--line); color: var(--ink); }
.chat-keep-err { color: var(--danger-text); }
.chat-photo {
    display: block; max-width: min(320px, 100%);
    padding: 6px 6px 14px; background: var(--white);
    border: 2px solid var(--line); border-radius: 4px;
    box-shadow: 3px 4px 0 color-mix(in srgb, var(--gray-900) 25%, transparent); rotate: -1deg;
}
.chat-att:nth-child(even) .chat-photo { rotate: 1.2deg; }
.chat-photo img { display: block; max-width: 100%; max-height: 260px; object-fit: contain; }

/* KLIPY gifs + stickers (canvas: ChatPad .cp-gif) — shown straight from KLIPY's link */
.chat-gif {
    position: relative; margin: 6px 0 2px; max-width: 100%;
    border: 2px solid var(--line); border-radius: 4px; overflow: hidden;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    box-shadow: 3px 4px 0 color-mix(in srgb, var(--gray-900) 20%, transparent); rotate: 1deg;
}
.chat-gif img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-gif.stk { border: 2px dashed var(--ink-faint); background: none; box-shadow: none; }

/* settings › chat › "play gifs by themselves" off: chat.js lays a first-frame still over each gif,
   shown only while the chat carries .gifs-still and the gif isn't hovered or tapped awake */
.chat-gif-still { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gifs-still .chat-gif:not(:hover):not(.awake) .chat-gif-still { display: block; }
.chat-gif.stk .chat-gif-still { object-fit: contain; }
/* settings › chat › "snug messages" */
.snug .chat-msg.with-head { margin-top: 6px; }
.snug .chat-msg { padding-top: 0; padding-bottom: 0; }
.chat-gif.stk img { object-fit: contain; }
.chat-giftag {
    position: absolute; left: 6px; top: 6px; padding: 0 6px;
    font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1.4;
    border: 1.5px solid var(--gray-900); border-radius: 4px; background: var(--cream); color: var(--gray-900);
}

/* video + link cards under a message (handover: video embeds). The card is paper: light in every
   theme, so it pins the roles it uses. Site colours are palette tokens (same in every theme). */
.ve {
    --paper: var(--cream); --ink: var(--gray-900); --ink-soft: var(--gray-600); --line: var(--gray-900);
    --ve-dot: var(--gray-500); --ve-light: var(--gray-200);
    position: relative; margin-top: 8px; max-width: 100%; padding: 10px 12px 12px;
    display: flex; flex-direction: column; gap: 6px;
    background: linear-gradient(transparent 28px, color-mix(in srgb, var(--red-500) 32%, transparent) 28px 30px, transparent 30px), var(--paper);
    border: 2px solid var(--line); border-radius: 3px 3px 12px 3px;
    box-shadow: 3px 4px 0 color-mix(in srgb, var(--gray-900) 20%, transparent); rotate: -.4deg;
    color: var(--ink); font-family: var(--font-hand);
}
.ve button { font-family: inherit; }
.ve::before {
    content: ""; position: absolute; top: -9px; left: 40px; width: 64px; height: 18px; rotate: -4deg;
    background: color-mix(in srgb, var(--blue-100) 85%, transparent);
    border-left: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
    border-right: 2px dashed color-mix(in srgb, var(--black) 12%, transparent);
}
.ve-s-youtube, .ve-s-shorts { --ve-dot: var(--red-500); --ve-light: var(--red-200); }
.ve-s-x { --ve-dot: var(--gray-900); --ve-light: var(--gray-300); }
.ve-s-twitch { --ve-dot: var(--purple-500); --ve-light: var(--purple-200); }
.ve-s-tiktok { --ve-dot: var(--pink-500); --ve-light: var(--pink-200); }
.ve-s-vimeo { --ve-dot: var(--sky-500); --ve-light: var(--sky-300); }
.ve-s-file { --ve-dot: var(--gray-500); --ve-light: var(--gray-200); }
.ve-site { font-size: .8125rem; color: var(--ink-soft); height: 20px; display: flex; align-items: center; gap: 6px; padding-right: 26px; }
.ve-dot { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--line); background: var(--ve-dot); flex-shrink: 0; }
.ve-kind { padding: 0 6px; border: 1.5px solid var(--gray-500); border-radius: 8px; font-size: .75rem; line-height: 16px; color: var(--gray-700); }
.ve-tt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 1.0625rem; line-height: 1.2; color: var(--link-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ve-by { font-size: .875rem; color: var(--gray-700); margin-top: -2px; }
.ve-post { display: flex; flex-direction: column; gap: 4px; }
.ve-ph { display: flex; align-items: center; gap: 8px; }
.ve-av { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: .9375rem; color: var(--white); background: var(--gray-600); flex-shrink: 0; }
.ve-pn { font-size: 1rem; line-height: 1.05; }
.ve-pn span { display: block; font-size: .8125rem; color: var(--ink-soft); }
.ve-ptxt { font-size: .9375rem; line-height: 1.3; }
.ve-frame {
    position: relative; align-self: flex-start; border: 2px solid var(--line); border-radius: 4px; overflow: hidden;
    display: grid; place-items: center; background: var(--gray-100);
}
.ve-still { position: absolute; inset: 0; background: color-mix(in srgb, var(--ve-light) 35%, var(--gray-100)); }
.ve-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ve-len { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px; background: var(--gray-900); color: var(--cream); font-size: .8125rem; }
.ve-live { position: absolute; left: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px; background: var(--red-500); color: var(--white); font-size: .8125rem; }
.ve-play {
    position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
    border: 2.5px solid var(--cream); border-radius: 22px 18px 22px 16px; background: var(--red-500); color: var(--white);
    font-size: 1rem; cursor: pointer; box-shadow: 2px 3px 0 color-mix(in srgb, var(--gray-900) 35%, transparent);
}
.ve-play:hover { rotate: -3deg; }
.ve-note { font-size: .78rem; line-height: 1.3; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 5px; }
.ve-note .icon { margin-top: 1px; flex-shrink: 0; }
.ve-pol { color: var(--link-ink); text-decoration: underline; text-underline-offset: 2px; font-size: .78rem; }
.ve-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ve-acts .ve-pol { margin-left: auto; }
.ve-pl { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--night-900); color: var(--mist-100); }
.ve-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 2px solid var(--line);
    border-radius: 10px 12px 10px 9px; background: var(--cream); color: var(--ink); font-size: .9375rem; cursor: pointer;
    text-decoration: none; box-shadow: 1.5px 2px 0 var(--line);
}
.ve-btn:hover { rotate: -1.5deg; }
.ve-btn.ghost { border-color: transparent; box-shadow: none; background: none; color: var(--link-ink); text-decoration: underline; text-underline-offset: 3px; }
.ve-off {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; text-align: center; font-size: .9375rem; color: var(--gray-700);
    background: repeating-linear-gradient(135deg, var(--gray-100) 0 10px, var(--bone) 10px 20px);
}
.ve-off b { font-family: var(--font-marker); font-size: 1.375rem; color: var(--ink); font-weight: 700; line-height: 1; }
.ve-gone { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px dashed var(--gray-500); border-radius: 6px; color: var(--ink-soft); font-size: .9375rem; }
.ve-x {
    position: absolute; right: 4px; top: 3px; width: 26px; height: 26px; display: none; place-items: center;
    border: none; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; padding: 0;
}
.ve-x:hover { background: color-mix(in srgb, var(--gray-900) 10%, transparent); color: var(--ink); }
.ve:hover .ve-x, .ve.pinx .ve-x, .ve-x:focus-visible { display: grid; }
/* plain link cards (canvas: ChatPad .cp-embed): the same paper, a row with the picture on the right */
.ve.lc { flex-direction: row; gap: 12px; }
.lc-bd { flex: 1; min-width: 0; }
.lc .ve-site .icon { flex-shrink: 0; }
.lc-tt { display: block; margin-top: 6px; font-size: 1.0625rem; line-height: 1.2; color: var(--link-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
.lc-dsc {
    font-size: .875rem; line-height: 1.3; color: var(--gray-700); margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-thumb { width: 78px; height: 78px; margin-top: 22px; flex-shrink: 0; object-fit: cover; border: 2px solid var(--line); border-radius: 3px; rotate: 2deg; background: var(--gray-100); }
.ve.cmp { padding: 8px 10px 10px; }
.ve.cmp .ve-tt { font-size: 1rem; }
.chat-gifvia {
    position: absolute; right: 4px; bottom: 3px; padding: 0 5px; border-radius: 4px;
    font-size: .7rem; color: var(--night-500); background: color-mix(in srgb, var(--cream) 80%, transparent);
}

/* who's here */
.chat-cols { flex: 1; min-height: 0; display: flex; }
.chat-cols > .chat-scroll { flex: 1; min-width: 0; }
.chat-side { width: 220px; flex-shrink: 0; overflow-y: auto; padding: 10px 8px; border-left: 2.5px dashed color-mix(in srgb, var(--ink) 22%, transparent); background: var(--paper); }
.chat-side-sec { padding: 8px 8px 4px; font-family: var(--font-marker); font-weight: 700; font-size: 1.1rem; color: var(--ink-soft); }
.chat-mem { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 8px; border-radius: 10px; }
.chat-mem:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.chat-mem .av { position: relative; flex-shrink: 0; }
.chat-mem.away { opacity: .6; }
/* faces, names and who's-here rows open the profile card */
button.chat-mem { width: 100%; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.chat-av-btn { display: block; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; }
button.chat-msg-author { padding: 0; border: none; background: none; cursor: pointer; }
button.chat-msg-author:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* Pento staff (canvas ChatPad › staff mark): highlighter swipe behind the name + a round Rio badge */
.chat-msg-author.staff { padding: 0 3px; margin: 0 -1px; border-radius: 3px 6px 4px 7px; background: linear-gradient(176deg, transparent 48%, color-mix(in srgb, var(--yellow-300) 90%, transparent) 48%, color-mix(in srgb, var(--yellow-300) 75%, transparent) 94%, transparent 94%); }
button.chat-msg-author.staff { padding: 0 3px; background: linear-gradient(176deg, transparent 48%, color-mix(in srgb, var(--yellow-300) 90%, transparent) 48%, color-mix(in srgb, var(--yellow-300) 75%, transparent) 94%, transparent 94%); }
.chat-staff { position: relative; display: inline-block; flex-shrink: 0; align-self: center; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--gray-900); border-radius: 50%; background: var(--yellow-300); overflow: hidden; }
.chat-staff .rio { position: absolute; left: -12px; top: -3px; }
.chat-staff .rio * { animation: none !important; }
.chat-mem-s { font-size: .76rem; line-height: 1.1; color: var(--ink-soft); }

/* typing + composer extras */
.chat-typing { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 20px; font-size: .88rem; color: var(--ink-soft); }
.chat-typing .pen { animation: chat-wig .6s ease-in-out infinite alternate; }
@keyframes chat-wig { from { rotate: -12deg; } to { rotate: 12deg; } }
@media (prefers-reduced-motion: reduce) { .chat-typing .pen { animation: none; } }
.chat-composer:not(.disabled) { flex-direction: column; align-items: stretch; gap: 6px; }
.chat-comp-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-comp-rep, .chat-comp-err { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: .9rem; color: var(--ink-soft); }
.chat-comp-err { color: var(--red-600); }
/* the upload tray (canvas: ChatPad .cp-tray) — no cap on one file, it just has to fit your space */
.chat-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 6px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.chat-tchip {
    display: flex; align-items: center; gap: 8px; max-width: 250px; padding: 4px 2px 4px 6px; box-sizing: border-box;
    border: 2px solid var(--gray-900); border-radius: 10px 12px 9px 13px; background: var(--yellow-100); color: var(--gray-900); font-size: 14px; line-height: 1.1;
}
.chat-tchip.bad { border-style: dashed; border-color: var(--red-700); background: var(--gray-100); color: var(--red-900); }
.chat-tchip .tt { min-width: 0; }
.chat-tchip .tt b { display: block; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-tchip .tt small { font-size: 12px; color: var(--gray-600); }
.chat-tchip.bad .tt small { color: var(--red-800); }
.chat-tchip .chat-fi { width: 24px; height: 28px; font-size: 8px; padding-bottom: 1px; }
.chat-tthumb {
    width: 28px; height: 28px; flex-shrink: 0; box-sizing: border-box; object-fit: cover;
    border: 2px solid var(--gray-900); border-radius: 3px; background: repeating-linear-gradient(135deg, var(--gray-100) 0 5px, var(--bone) 5px 10px);
}
.chat-tnote { width: 100%; font-size: 12px; color: var(--ink-soft); }
.chat-comp-btn { position: relative; flex-shrink: 0; width: 44px; height: 50px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); cursor: pointer; }
/* :focus-visible, not :focus-within — the paperclip's hidden file input keeps focus after
   its dialog opens and closes (and clicked buttons keep focus in Chromium), and a stuck
   highlight on a button you're not touching reads as the hover landing on the wrong one */
.chat-comp-btn:hover, .chat-comp-btn:focus-visible, .chat-comp-btn:has(:focus-visible) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chat-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.chat-comp-btn { border: none; background: none; padding: 0; font: inherit; }
.chat-comp-btn.on { background: var(--hi-yellow); color: var(--gray-900); box-shadow: inset 0 0 0 2px var(--line); }
.chat-gifw {
    display: grid; place-items: center; height: 22px; padding: 0 4px;
    border: 2px solid currentColor; border-radius: 6px 4px 6px 5px;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
}

/* the composer's gif panel (canvas: ChatPad .cp-ep) */
.chat-composer { position: relative; }
.chat-ep {
    position: absolute; right: 10px; bottom: calc(100% - 2px); z-index: 9;
    width: min(400px, calc(100% - 20px)); height: 372px;
    display: flex; flex-direction: column; box-sizing: border-box; padding: 6px 10px 8px;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: 16px 12px 18px 14px; box-shadow: var(--shadow-hard-lg);
}
.chat-eptabs { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; }
.chat-ept {
    min-height: 36px; padding: 0 12px; font-family: var(--font-marker); font-weight: 700; font-size: 1.4rem;
    color: var(--ink-soft); background: none; border: 2px solid transparent; border-radius: 12px 10px 12px 9px; cursor: pointer;
}
.chat-ept.on { color: var(--gray-900); background: var(--hi-yellow); border-color: var(--line); }
.chat-epbody { flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 480px) { .chat-ep { left: 4px; right: 4px; width: auto; height: 340px; } }

/* emotes: the picker tab and how they sit in a message (canvas: ChatPad cp-emo / cp-egrid) */
.emo { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin: 0 1px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-msg-content.jumbo .emo { width: 46px; height: 46px; vertical-align: middle; margin: 2px 3px 2px 0; }
.chat-epbody.emos { overflow: auto; }
.chat-pksec { font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; color: var(--ink-soft); padding: 6px 6px 2px; }
.chat-egrid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.chat-ebtn { height: 42px; display: grid; place-items: center; border: none; background: none; border-radius: 9px; cursor: pointer; padding: 0; }
.chat-ebtn:hover, .chat-ebtn:focus-visible { background: var(--hi-yellow); rotate: -6deg; }
.chat-ebtn .emo { margin: 0; vertical-align: 0; }
.chat-epnote { font-size: .85rem; color: var(--ink-soft); padding: 8px 6px; margin: 0; }
@media (max-width: 480px) { .chat-egrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* KLIPY picker (canvas: GifPicker). "Search KLIPY" placeholder is KLIPY's attribution rule. */
.gp { position: relative; display: flex; flex-direction: column; box-sizing: border-box; color: var(--ink); font-family: var(--font-hand); }
.gp button, .gp input { font-family: inherit; }
.gp-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gp-cats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; flex-shrink: 0; }
.gp-chip {
    display: inline-flex; align-items: center; flex-shrink: 0; min-height: 30px; padding: 0 10px; font-size: .9rem;
    border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.gp-chip:hover { rotate: -2deg; }
.gp-chip.on { background: var(--hi-yellow); color: var(--gray-900); }
.gp-body { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
.gp-sec { font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; color: var(--ink-soft); padding: 0 2px 4px; }
.gp-cols { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.gp-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-tile {
    position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: pointer;
    border: 2px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent) center / cover;
}
.gp-tile:hover, .gp-tile:focus-visible { box-shadow: 3px 3px 0 var(--line); rotate: -1deg; }
.gp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-tile.stk {
    border-style: dashed; border-color: var(--ink-faint);
    background: repeating-conic-gradient(var(--gray-100) 0 25%, var(--white) 0 50%) 0 0 / 16px 16px;
}
.gp-tile.stk img { object-fit: contain; }
.gp-tag { position: absolute; left: 5px; top: 5px; padding: 0 5px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; border: 1.5px solid var(--gray-900); border-radius: 4px; background: var(--cream); color: var(--gray-900); }
.gp-name {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: .8rem; text-align: left;
    background: color-mix(in srgb, var(--gray-900) 78%, transparent); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity .12s;
}
.gp-tile:hover .gp-name, .gp-tile:focus-visible .gp-name { opacity: 1; }
.gp-ad {
    position: relative; margin: 0 auto 8px; width: 100%; box-sizing: border-box; overflow: hidden;
    border: 2px dashed var(--ink-faint); border-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.gp-ad iframe { display: block; width: 100%; height: 100%; border: 0; }
.gp-adtag { position: absolute; right: 6px; top: 5px; z-index: 1; padding: 0 5px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; border: 1.5px solid var(--ink-faint); border-radius: 4px; background: var(--paper); color: var(--ink-soft); pointer-events: none; }
.gp-skel { border: 2px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 4px; background: linear-gradient(100deg, var(--gray-100) 30%, var(--cream) 50%, var(--gray-100) 70%) 0 0 / 300% 100%; animation: gp-shim 1.1s linear infinite; }
@keyframes gp-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .gp-skel { animation: none; } }
.gp-more { text-align: center; color: var(--ink-soft); padding: 4px 0 8px; }
.gp-end { height: 1px; }
.gp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.gp-empty .mk { font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; color: var(--ink); line-height: 1.05; }
.gp-sugg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.gp-btn { min-height: 36px; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px 9px 12px 8px; background: var(--note); color: var(--gray-900); font-size: .95rem; cursor: pointer; box-shadow: 2px 2px 0 var(--line); }
.gp-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; margin-top: 4px; border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); font-size: .75rem; color: var(--ink-soft); }
.gp-klipy { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 1px 8px; border: 1.5px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: .75rem; white-space: nowrap; }
.gp-klipy b { letter-spacing: .06em; }
.gp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notepad-btn.on { background: var(--hi-yellow); color: var(--gray-900); }
@media (max-width: 640px) { .chat-side { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: -4px 0 0 color-mix(in srgb, var(--gray-900) 15%, transparent); } .chat-cols { position: relative; } }

.chat-edit-box { width: 100%; min-height: 64px; resize: vertical; }
.chat-edit-actions { display: flex; gap: 10px; margin: 8px 0; }
.chat-edit-actions button { padding: 4px 14px; font-size: .98rem; }
.chat-edit-actions button:not(.primary) {
    font: inherit;
    background: transparent;
    border: 2px dashed currentColor;
    border-radius: var(--wobble-1);
    color: inherit;
    cursor: pointer;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px 12px;
}
/* one hand-drawn box round the lot, buttons inside it, a lined borderless textarea (canvas: ChatPad cp-comp) */
.chat-composer:not(.disabled) {
    position: relative; /* the "N typos" + counter tags hang off the box's top edge */
    gap: 0; margin: 0 14px 14px; padding: 0;
    background: var(--surface, var(--paper)); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: 14px 20px 16px 12px / 12px 16px 20px 14px; box-shadow: 3px 3px 0 var(--line);
}
.chat-composer:not(.disabled):focus-within { box-shadow: 4px 5px 0 var(--p-accent); }
.chat-composer .chat-comp-row { gap: 4px; padding: 4px 6px; flex-wrap: wrap; }
.chat-composer .chat-comp-btn { width: 40px; height: 40px; margin-bottom: 2px; border-radius: 50% 45% 52% 48%; }
.chat-composer .chat-send { width: 44px; height: 44px; }
.chat-composer .chat-comp-rep { padding: 6px 10px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); background: var(--yellow-100); color: var(--gray-600); border-radius: 12px 18px 0 0; }
.chat-composer .chat-comp-rep b { color: var(--gray-900); font-weight: 400; }
.chat-composer .chat-comp-err { padding: 0 10px 6px; }
.chat-composer .chat-tray { padding: 6px 8px; }
.chat-composer textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    field-sizing: content;
    min-height: 44px;
    max-height: calc(6 * 28px + 16px); /* grows to 6 lines, then scrolls inside (canvas: cp-crow) */
    overflow-y: auto;
    scrollbar-gutter: stable; /* the squiggle mirror above it must lose the same width */
    box-sizing: border-box;
    padding: 8px 6px 6px;
    font-size: 17px;
    line-height: 28px;
    background: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--blue-500) 14%, transparent) 27px 28px);
    color: var(--ink);
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}
.chat-composer textarea:focus { box-shadow: none; }
.chat-composer textarea::-webkit-scrollbar { width: 8px; }
.chat-composer textarea::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gray-900) 28%, transparent); border-radius: 4px; }

/* ---- spellcheck (canvas: ChatPad cp-sq / cp-bad / cp-wv / cp-spell / cp-chips) ----
   A see-through copy of the text sits over the textarea carrying the red waves; it must
   wrap EXACTLY like the textarea, so it shares font, line-height, padding, tab size and
   the scrollbar gutter, and spell.js translates it by -scrollTop on every scroll. */
.chat-ta { position: relative; flex: 1; min-width: 0; display: flex; }
.chat-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-sq { position: absolute; inset: 0; overflow: hidden; pointer-events: none; scrollbar-gutter: stable; }
.chat-sq::-webkit-scrollbar { width: 8px; }
.chat-sqin {
    padding: 8px 6px 6px; box-sizing: border-box;
    font-size: 17px; line-height: 28px; letter-spacing: normal; word-spacing: normal;
    white-space: pre-wrap; overflow-wrap: break-word;
    color: transparent;
}
.chat-bad { position: relative; }
.chat-wv { position: absolute; left: 0; bottom: -3px; width: 100%; height: 6px; overflow: visible; }
.chat-wv path { fill: none; stroke: var(--red-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* the suggestion strip, its own row above the input row (canvas: cp-spell): it lives in the
   comp-row's flow but order:-1 + a full-width basis wrap it onto the box's first line,
   edge to edge, with the dashed line separating it from the text row below */
.chat-spell {
    order: -1; flex: 0 0 100%; box-sizing: border-box;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 7px 14px;
    margin: -4px -6px 6px;
    font-size: 15px; color: var(--ink-soft);
    border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
    background: color-mix(in srgb, var(--red-100) 30%, var(--paper));
    border-radius: 12px 18px 0 0;
}
.chat-spell .chat-sw { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.chat-spell .chat-sw .icon { color: var(--red-600); flex-shrink: 0; }
.chat-spell .chat-sw b { font-weight: 400; }
.chat-spell .chat-bad { display: inline-block; padding-bottom: 3px; }
.chat-sug {
    min-height: 34px; padding: 0 12px; border: 2px solid var(--line); border-radius: 10px 14px 10px 12px;
    background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer;
    box-shadow: 2px 2px 0 var(--line); font-family: inherit;
}
.chat-sug:hover { background: color-mix(in srgb, var(--green-100) 55%, var(--paper)); rotate: -1.5deg; }
.chat-sug:active { translate: 2px 2px; box-shadow: none; }
.chat-sact {
    min-height: 34px; padding: 0 8px; border: none; background: none; color: var(--ink-soft);
    font-size: 14px; cursor: pointer; font-family: inherit;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.chat-sact:hover { color: var(--ink); }
.chat-sact[aria-disabled="true"] { cursor: default; text-decoration: none; }
.chat-sgap { flex: 1; }

/* the "N typos" + "3,857 / 4,000" tags, above the box at the top right */
.chat-spell-chips { position: absolute; right: 16px; top: -33px; display: flex; align-items: center; gap: 8px; }
.chat-schip {
    min-height: 30px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px 16px 12px 14px;
    background: color-mix(in srgb, var(--red-100) 30%, var(--paper)); color: var(--danger-text);
    font-size: 14px; cursor: pointer; box-shadow: 2px 2px 0 var(--line);
    display: flex; align-items: center; gap: 6px; font-family: inherit;
}
.chat-schip:hover { rotate: -1.5deg; }
.chat-count {
    min-height: 30px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px 16px 12px 14px;
    background: var(--paper); color: var(--ink-soft); font-size: 14px;
    display: flex; align-items: center; box-shadow: 2px 2px 0 var(--line);
}
.chat-count.full { background: color-mix(in srgb, var(--red-100) 30%, var(--paper)); color: var(--danger-text); }
.chat-spell-note { font-size: 14px; color: var(--ink-soft); }

/* settings › chat › "my words": the plain note under the chips (not a .fold — no arrow) */
.sg-words-note { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; line-height: 1.3; max-width: none; }
/* narrow pads (a voice room's side chat, phones): buttons close up so the words get the room */
.notepad.side .chat-composer:not(.disabled), .notepad:not(.wide):not(.docked) .chat-composer:not(.disabled) { margin: 0 8px 10px; }
.notepad.side .chat-comp-row, .notepad:not(.wide):not(.docked) .chat-comp-row { gap: 0; }
@media (max-width: 480px) { .chat-composer:not(.disabled) { margin: 0 8px 10px; } .chat-composer .chat-comp-row { gap: 0; } }
.chat-composer.disabled {
    display: block;
    padding: 14px 22px 16px;
    text-align: center;
    font-family: var(--font-marker);
    font-size: 1.4rem;
    opacity: .6;
}

/* the pen button + its waiting dot (canvas: ChatPad cp-pen / cp-dot) */
.chat-pen { position: relative; }
.chat-pen-dot {
    position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--m-pink); border: 1.5px solid var(--paper);
}

/* the doodle pad's two faces (canvas: ChatPad cp-dp / cp-dfull) */
.chat-dp { position: absolute; right: -2px; bottom: calc(100% + 10px); z-index: 9; }
.chat-dfull { position: absolute; inset: 0; z-index: 30; overflow: hidden; background: var(--paper); border-radius: inherit; }

/* the doodle pad itself (canvas: DoodlePad.dc.html) — a paper on a dotted desk. The pad is
   paper, not chrome: it stays light whatever theme is on (the sheet always is). */
.dp {
    position: relative; box-sizing: border-box; overflow: hidden;
    background: var(--cream); color: var(--gray-900); font-family: var(--font-hand);
    display: grid; gap: 8px 12px;
    /* the pad keeps its own look whatever the theme or board palette: the docked tools
       inside resolve these, and the sheet is always paper — never the night surface */
    --paper: var(--cream);
    --surface: var(--cream);
    --ink: var(--gray-900);
    --ink-soft: var(--gray-600);
    --ink-faint: var(--gray-500);
    --line: var(--gray-900);
    --hi-yellow: var(--yellow-500);
    --accent-strong: var(--blue-700);
    --p-canvas: var(--cream);
    --p-ink: var(--gray-900);
    --p-accent: var(--blue-500);
}
.dp button { font-family: inherit; color: inherit; }
/* desktop: paper on the left, the board's draw tools docked down the right (the pad's
   own width — the chat's, capped at 720 — is set inline, the pane's isn't known to CSS) */
.dp-desk {
    height: 540px; padding: 10px 12px;
    border: 2.5px solid var(--line); border-radius: 16px 12px 18px 14px; box-shadow: var(--shadow-hard-lg);
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head" "pad side" "foot foot";
}
/* phone (or a narrow pad): paper on top, the same docked tools under it (they scroll) */
.dp-phone {
    width: 100%; height: 100%; padding: 0 12px 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "head" "pad" "side";
}
.dp-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-height: 40px; min-width: 0; }
.dp-phone .dp-head { min-height: 52px; margin: 0 -12px; padding: 0 10px 0 4px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); }
.dp-title { margin: 0; font-family: var(--font-marker); font-weight: 700; font-size: 28px; line-height: 1; }
.dp-sub { font-size: 14px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.dp-ib {
    width: 40px; height: 40px; display: grid; place-items: center; padding: 0; flex-shrink: 0;
    border: 2px solid transparent; border-radius: 50% 45% 52% 48%; background: transparent; color: var(--ink); cursor: pointer;
}
.dp-ib:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); rotate: -8deg; }
.dp-ib:disabled { color: var(--ink-faint); cursor: default; background: none; rotate: none; }
.dp-phone .dp-ib { width: 44px; height: 44px; }
.dp-padcol { grid-area: pad; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dp-stage {
    display: grid; place-items: center; flex-shrink: 0; border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 8%, var(--paper));
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1.4px);
    background-size: 14px 14px;
}
.dp-paper {
    position: relative; overflow: hidden; border-radius: 3px;
    box-shadow: 0 0 0 2.5px var(--line), 4px 5px 0 2.5px color-mix(in srgb, var(--gray-900) 25%, transparent);
}
/* see-through paper: the checkerboard shows through the transparent PNG */
.dp-paper.clear {
    background-color: var(--white);
    background-image:
        linear-gradient(45deg, var(--bone) 25%, transparent 25%, transparent 75%, var(--bone) 75%),
        linear-gradient(45deg, var(--bone) 25%, transparent 25%, transparent 75%, var(--bone) 75%);
    background-size: 18px 18px; background-position: 0 0, 9px 9px;
}
.dp-paper .canvas-layer.live { cursor: crosshair; }
.dp-paper.erasing .canvas-layer.live { cursor: cell; }
/* the hint sits on the sheet, and the sheet is always light paper, so it stays dark ink */
.dp-empty {
    position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
    font-family: var(--font-marker); font-weight: 700; font-size: 30px; color: color-mix(in srgb, var(--gray-900) 32%, transparent);
}
/* under the paper: what it's drawn on, its shape, start over */
.dp-sheet { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.dp-papers { display: flex; align-items: center; gap: 6px; }
.dp-pp {
    width: 26px; height: 26px; padding: 0; flex-shrink: 0; box-sizing: border-box; rotate: -3deg;
    border: 2px solid var(--line); border-radius: 3px; cursor: pointer;
}
.dp-phone .dp-pp { width: 32px; height: 32px; }
.dp-pp.on { outline: 3px solid var(--line); outline-offset: 2px; rotate: 0deg; }
.dp-pp.lined { background: var(--cream) repeating-linear-gradient(180deg, transparent 0 6px, color-mix(in srgb, var(--blue-500) 45%, transparent) 6px 7px); }
.dp-pp.clear {
    background-color: var(--white);
    background-image:
        linear-gradient(45deg, var(--sand) 25%, transparent 25%, transparent 75%, var(--sand) 75%),
        linear-gradient(45deg, var(--sand) 25%, transparent 25%, transparent 75%, var(--sand) 75%);
    background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
.dp-side { grid-area: side; min-width: 0; min-height: 0; overflow: auto; padding: 2px 4px 4px 2px; scrollbar-width: thin; }
.dp-phone .dp-side { margin: 0 -12px; padding: 10px 12px 4px; border-top: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); }
.dp-foot { grid-area: foot; display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); }
.dp-phone .dp-foot { display: none; }
.dp-note { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.25; }
.dp-send {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; flex-shrink: 0;
    border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; background: var(--accent-strong); color: var(--white);
    font-size: 17px; cursor: pointer; box-shadow: 2px 2px 0 var(--line);
}
.dp-send:hover { rotate: -2deg; }
.dp-send:active { translate: 2px 2px; box-shadow: none; }
.dp-send:disabled { background: color-mix(in srgb, var(--ink) 12%, var(--paper)); color: var(--ink-soft); cursor: default; rotate: none; }
.dp-head .dp-send { min-height: 40px; margin-left: auto; padding: 0 14px 0 12px; font-size: 16px; }
.dp-desk .dp-head .dp-send { display: none; }

/* a sent doodle in chat (canvas: DoodlePad part="image"): a small tilted framed picture,
   dashed with no shadow when it was drawn on see-through paper */
.chat-photo.doodle {
    width: 220px; max-width: 100%; padding: 0; background: transparent;
    border: 2px solid var(--line); border-radius: 3px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--gray-900) 20%, transparent); rotate: -1deg;
}
.chat-att:nth-child(even) .chat-photo.doodle { rotate: -1deg; }
.chat-photo.doodle img { width: 100%; height: auto; max-height: none; }
.chat-photo.doodle.square { width: 170px; }
.chat-photo.doodle.tall { width: 150px; }
.chat-photo.doodle.clear { border: 2px dashed var(--ink-faint); box-shadow: none; }

/* ============ phone ============ */

@media (max-width: 759.98px) {
    body { font-size: 16px; }
    .canvas-frame { box-shadow: 0 0 0 4px var(--gray-300), 0 0 0 5px var(--gray-500), 0 10px 24px color-mix(in srgb, var(--night-900) 25%, transparent); }
    .pin.board { width: 104px; min-height: 92px; padding: 18px 8px 10px; }
    .pin.board .pin-name { font-size: 1.25rem; }
    .pin-name { font-size: 1.15rem; max-width: 110px; }
    .pin-sub { font-size: .78rem; }
    .draw-rail { scale: .8; transform-origin: left center; }
    .brand { font-size: 3.6rem; }
    .auth-card { padding: 18px 18px 22px; }
    /* the wall is the same pannable world as the desktop — the stickies stay readable */
    .wall-stage .pin.board { width: 150px; min-height: 132px; padding: 26px 12px 16px; }
    .wall-stage .pin.board .pin-name { font-size: 1.75rem; max-width: none; }
    .wall-stage .pin-sub { font-size: .92rem; }
    .wall-add-menu { rotate: 1deg; }
    /* the wall hides its hanging row; + and pencil go up by the search (the ＋ first) */
    .wall-under { display: none; }
    .wall-page .app-tools { display: flex; padding-top: 0; order: 2; }
    .wall-page .search-btn { order: 3; }
    .wall-hbtns { display: flex; }
    .wall-hbtns .wall-add-menu { position: absolute; top: 54px; right: -96px; left: auto; bottom: auto; z-index: 98; }
    /* zoom and the map sit on the wall's top-right edge; the mini-map drops below the button */
    .wall-wbar { position: absolute; right: 14px; top: 14px; z-index: 25; display: flex; align-items: flex-start; gap: 8px; }
    .wall-page .canvas-mini { top: 68px; right: 14px; bottom: auto; width: 170px; height: auto; }
    .peek { position: fixed; top: auto; left: 12px; right: 12px; bottom: 90px; width: auto; z-index: 95; }
    .new-board { grid-template-columns: 1fr; }
    .new-board-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ voice: rooms drawn on their board ============ */

.av.xs { width: 22px; height: 22px; font-size: .9rem; border-width: 1.5px; }
.av.talk { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 5px var(--m-green); }

/* the bubble on the board: who's inside, and a ring when it's your room */
.pin.channel.voice.live { box-shadow: 0 0 0 4px var(--hi-yellow), 0 0 0 6.5px var(--line); }
.pin.channel.voice .pin-sub { font-size: .82rem; opacity: .75; margin-top: 2px; }
.pin-faces { display: flex; margin-top: 6px; }
.pin-faces .av + .av { margin-left: -6px; }
/* a full room: five faces and a "+N" chip */
.pin-more { display: grid; place-items: center; align-self: center; min-width: 22px; height: 22px; margin-left: -6px; padding: 0 5px; box-sizing: border-box; border-radius: 12px; border: 2px solid var(--gray-900); background: var(--gray-600); color: var(--white); font-size: .72rem; }
.pin-live { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 0 7px; border-radius: 9px; font-size: .72rem; background: var(--red-600); color: var(--white); }

/* the room's own sheet: clicks fall through to the ink except on the room's things */
.voice-room { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--p-ink); }
.voice-room :is(.voice-sheet, .polaroid, .voice-pile, .voice-crowd, .voice-lights, .voice-projector, .voice-strip, .voice-problem) { pointer-events: auto; }
/* top-left: the controls strip owns the bottom edge */
.voice-roomnote { position: absolute; left: 2%; top: 2.5%; z-index: 2; display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; font-size: .85rem; color: var(--ink-soft); border-radius: 10px; background: color-mix(in srgb, var(--p-canvas) 85%, transparent); max-width: 34%; }
.voice-lasso { position: absolute; inset: 3% 4% 13% 4%; width: 92%; height: 84%; overflow: visible; pointer-events: none; }
.voice-lasso { fill: color-mix(in srgb, var(--p-accent) 7%, transparent); stroke: var(--p-accent); stroke-width: 4; stroke-linecap: round; }

.voice-livepill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: .88rem; border-radius: 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); rotate: 3deg; }
.voice-livepill i { width: 9px; height: 9px; border-radius: 50%; background: var(--m-green); animation: voice-blink 1.4s ease-in-out infinite; }
@keyframes voice-blink { 50% { opacity: .25; } }

/* the screens sit in the middle of the ring of seats */
.voice-stage { position: absolute; left: 12%; right: 12%; top: 46.85%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }

.polaroid {
    position: absolute;
    transform: translate(-50%, -50%);
    touch-action: none;
    z-index: 1;
    width: 124px;
    padding: 8px 8px 6px;
    border: none;
    background: var(--cream);
    color: var(--gray-900);
    font: inherit;
    cursor: grab;
    rotate: var(--tilt, 0deg);
    box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 14%, transparent), 4px 9px 12px -6px color-mix(in srgb, var(--black) 40%, transparent);
    transition: translate .2s ease, box-shadow .2s ease, scale .15s ease, left .6s cubic-bezier(.3, .8, .35, 1), top .6s cubic-bezier(.3, .8, .35, 1);
}
.polaroid:disabled { cursor: default; opacity: 1; }
.polaroid.dragging { cursor: grabbing; z-index: 3; transition: none; scale: 1.06; }
.polaroid:hover:not(:disabled) { scale: 1.05; }
.polaroid::before { content: ""; position: absolute; top: -10px; left: 50%; width: 56%; height: 18px; translate: -50% 0; rotate: -5deg; background: color-mix(in srgb, var(--yellow-500) 80%, transparent); border-inline: 2px dashed color-mix(in srgb, var(--black) 12%, transparent); }
.polaroid.me::before { background: color-mix(in srgb, var(--blue-100) 90%, transparent); }
.polaroid.talk { translate: 0 -6px; box-shadow: 0 0 0 3px var(--m-green), 6px 16px 16px -6px color-mix(in srgb, var(--black) 40%, transparent); }
.polaroid-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .92; overflow: hidden; color: var(--white); font-family: var(--font-marker); font-weight: 700; font-size: 3.6rem; }
.polaroid-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--white) 25%, transparent), transparent 45%); pointer-events: none; }
.polaroid-photo.cam { background: var(--night-600); }
.polaroid-cap { display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 5px; font-family: var(--font-marker); font-weight: 700; font-size: 1.3rem; line-height: 1; white-space: nowrap; overflow: hidden; }
.polaroid-cap .x-mark { color: var(--m-red); flex-shrink: 0; }
.polaroid-live { position: absolute; left: 50%; top: -26px; translate: -50% 0; z-index: 1; display: flex; align-items: center; gap: 3px; padding: 0 8px; border-radius: 9px; font-size: .72rem; background: var(--red-600); color: var(--white); white-space: nowrap; }
.polaroid.friend::before { background: color-mix(in srgb, var(--red-100) 90%, transparent); }
.polaroid.on { box-shadow: 0 0 0 3px var(--blue-700), 4px 9px 12px -6px color-mix(in srgb, var(--black) 40%, transparent); }
/* someone hops in / swaps onto the sheet: dropped on like a fresh polaroid */
.polaroid.fresh, .voice-mini.fresh { animation: voice-drop-in .55s cubic-bezier(.3, .9, .4, 1.3) both; }
@keyframes voice-drop-in { from { opacity: 0; scale: 1.35; } }
/* crowded room: polaroids shrink so everyone fits round the lasso */
.polaroid.s1 { width: 104px; padding: 7px 7px 5px; } .polaroid.s1 .polaroid-photo { font-size: 3.25rem; } .polaroid.s1 .polaroid-cap { font-size: 1.15rem; }
.polaroid.s2 { width: 88px; padding: 6px 6px 4px; } .polaroid.s2 .polaroid-photo { font-size: 2.6rem; } .polaroid.s2 .polaroid-cap { font-size: 1.05rem; padding-top: 4px; }
.polaroid.s2::before { width: 46px; height: 16px; top: -9px; }
.polaroid.s3 { width: 72px; padding: 5px 5px 3px; } .polaroid.s3 .polaroid-photo { font-size: 2.1rem; } .polaroid.s3 .polaroid-cap { font-size: .9rem; padding-top: 3px; }
.polaroid.s3::before { width: 38px; height: 13px; top: -8px; } .polaroid.s3 .polaroid-live { font-size: .62rem; top: -20px; }
.polaroid:is(.s1, .s2, .s3) .polaroid-cap { display: block; text-overflow: ellipsis; }
/* the overflow: a pile in the last seat, opens everyone */
.voice-pile { position: absolute; transform: translate(-50%, -50%); z-index: 1; width: 92px; height: 106px; padding: 0; border: none; background: none; color: var(--gray-900); font: inherit; cursor: pointer; transition: scale .15s, left .6s cubic-bezier(.3, .8, .35, 1), top .6s cubic-bezier(.3, .8, .35, 1); }
.voice-pile:hover { scale: 1.05; }
.voice-pile:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 4px; }
.voice-pile-card { position: absolute; inset: 0; background: var(--cream); box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 14%, transparent), 3px 7px 10px -5px color-mix(in srgb, var(--black) 40%, transparent); }
.voice-pile-card.a { rotate: -10deg; translate: -7px 4px; } .voice-pile-card.b { rotate: 7deg; translate: 6px 2px; }
.voice-pile-card.top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; rotate: -1.5deg; }
.voice-pile-card.top::before { content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 16px; translate: -50% 0; rotate: 4deg; background: color-mix(in srgb, var(--yellow-500) 80%, transparent); }
.voice-pile.on .voice-pile-card.top { box-shadow: 0 0 0 3px var(--blue-700), 3px 7px 10px -5px color-mix(in srgb, var(--black) 40%, transparent); }
.voice-pile-faces { display: flex; }
.voice-pile-faces .av { width: 24px; height: 24px; font-size: .95rem; margin-left: -7px; } .voice-pile-faces .av:first-child { margin-left: 0; }
.voice-pile-n { font-family: var(--font-marker); font-weight: 700; font-size: 2.1rem; line-height: .9; }
.voice-pile-l { font-size: .8rem; color: var(--gray-600); }
.voice-pile.bump-a .voice-pile-n { animation: voice-bump-a .5s ease-out; }
.voice-pile.bump-b .voice-pile-n { animation: voice-bump-b .5s ease-out; }
@keyframes voice-bump-a { 40% { scale: 1.3; } }
@keyframes voice-bump-b { 40% { scale: 1.3; } }
.voice-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--night-600); }

.voice-sheets { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.voice-sheet { position: relative; width: clamp(200px, 24vw, 330px); aspect-ratio: 16 / 10; padding: 9px; background: var(--cream); rotate: -1.2deg; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 14%, transparent), 5px 10px 14px -6px color-mix(in srgb, var(--black) 40%, transparent); }
.voice-sheet:nth-child(even) { rotate: 1.4deg; }
.voice-sheet::before, .voice-sheet::after { content: ""; position: absolute; top: -9px; width: 52px; height: 18px; background: color-mix(in srgb, var(--yellow-500) 80%, transparent); }
.voice-sheet::before { left: -12px; rotate: -30deg; }
.voice-sheet::after { right: -12px; rotate: 30deg; }
.voice-screen { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, var(--night-500), var(--night-900)); color: var(--gray-300); overflow: hidden; }
.voice-screen .voice-video { object-fit: contain; background: transparent; }
.voice-tag { position: absolute; left: 7px; top: 7px; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 9px; font-size: .78rem; background: var(--red-600); color: var(--white); }
.voice-watch { position: absolute; right: 7px; bottom: 7px; z-index: 1; }


/* everyone in the room: from the pile or the "+N" card; you & your friends first */
.voice-crowd { position: absolute; z-index: 31; width: 292px; display: flex; flex-direction: column; padding: 22px 12px 12px; box-sizing: border-box; background: var(--yellow-200); color: var(--amber-950); rotate: -1deg; border-radius: 2px 2px 22px 2px / 2px 2px 12px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 6px 14px 20px -6px color-mix(in srgb, var(--black) 45%, transparent); animation: voice-fade-in .2s ease-out both; }
.voice-crowd::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; translate: -50% 0; rotate: 3deg; background: color-mix(in srgb, var(--blue-100) 85%, transparent); }
.voice-crowd-hd { display: flex; align-items: center; gap: 8px; }
.voice-crowd-title { font-family: var(--font-marker); font-weight: 700; font-size: 1.75rem; line-height: 1; }
.voice-crowd-n { font-size: .95rem; color: var(--gray-600); }
.voice-crowd-list { flex: 1; min-height: 0; overflow: auto; margin: 8px -4px 0; padding: 0 4px; }
.voice-crowd-sec { font-family: var(--font-marker); font-weight: 700; font-size: 1.25rem; color: var(--gray-600); padding: 6px 6px 0; }
.voice-crow { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 4px 6px; box-sizing: border-box; border: none; background: none; border-radius: 8px; font: inherit; font-size: 1.06rem; color: inherit; cursor: pointer; text-align: left; }
.voice-crow:hover, .voice-crow.on { background: color-mix(in srgb, var(--gray-900) 8%, transparent); }
.voice-crow .av.talk { box-shadow: 0 0 0 2.5px var(--cream), 0 0 0 5px var(--m-green); }
.voice-crow-st { margin-left: auto; font-size: .8rem; color: var(--gray-600); text-align: right; }
.voice-crow-st.talk { color: var(--green-700); }
.voice-crowd-none { margin: 10px 6px; font-size: .95rem; color: var(--gray-600); }

/* the controls hang under the lasso like a strip of tape */
.voice-strip { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: var(--wobble-1); box-shadow: 4px 5px 0 var(--line); rotate: -.8deg; }
.voice-btn { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%; background: var(--white); color: var(--gray-900); cursor: pointer; transition: rotate .12s; }
.voice-btn-label { display: none; }
.voice-btn:hover:not(:disabled) { rotate: -8deg; }
.voice-btn.on { background: var(--hi-yellow); }
.voice-btn.off { background: var(--bone); color: var(--red-800); }
.voice-leave { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; font: inherit; font-size: 1.1rem; border: 2.5px solid var(--line); border-radius: var(--wobble-1); background: var(--red-700); color: var(--white); cursor: pointer; box-shadow: 2px 2px 0 var(--line); }
.voice-leave:hover { rotate: -2deg; }
.voice-sep { width: 2px; height: 30px; background: var(--line); opacity: .2; margin: 0 3px; rotate: 6deg; }
.voice-off { position: absolute; right: 7px; top: 7px; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 9px; font-size: .72rem; background: color-mix(in srgb, var(--black) 45%, transparent); color: var(--white); }
.voice-covered { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 18px; text-align: center; color: var(--gray-500); font-size: .82rem; }
.voice-covered b { font-family: var(--font-marker); font-size: 1.35rem; color: var(--gray-300); }
.voice-streamvol { display: flex; align-items: center; gap: 6px; font-size: .95rem; }
.voice-streamvol input[type=range] { width: 130px; accent-color: var(--m-green); box-shadow: none; }
.voice-ontop { font-size: .82rem; color: var(--gray-600); margin-right: auto; }
.voice-btn-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 10px; background: var(--red-600); color: var(--white); font-size: .75rem; border: 2px solid var(--paper); }

/* peek sticky: a room you're not in, pinned on the board */
.voice-peek { position: absolute; left: 26%; top: 14%; z-index: 6; width: min(290px, 80%); padding: 24px 18px 16px; box-sizing: border-box; pointer-events: auto; background: var(--p-note, var(--note)); color: var(--p-note-ink, var(--amber-950)); border: 2.5px solid var(--line); border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px; box-shadow: 5px 6px 0 var(--line); rotate: -.8deg; }
.voice-peek::before { content: ""; position: absolute; top: -12px; left: 50%; translate: -50% 0; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--white) 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, var(--black) 30%, var(--p-accent))); box-shadow: 0 3px 4px color-mix(in srgb, var(--black) 35%, transparent); }
.voice-peek-name { display: flex; align-items: center; gap: 6px; padding-right: 30px; font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; line-height: 1.05; }
.voice-peek-count { font-size: .9rem; opacity: .8; }
.voice-peek-stream { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: .9rem; }
.voice-peek-stream .voice-tag { position: static; }
.voice-peek-stream small { opacity: .7; }
.voice-peek-faces { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
.voice-peek-p { display: inline-flex; align-items: center; gap: 5px; font-size: .95rem; }
.voice-peek-quiet { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .85rem; opacity: .85; }
.voice-peek-btns { display: flex; gap: 8px; margin-top: 12px; }
.voice-peek-btns .primary { flex-grow: 1; }
.voice-peek-note { display: block; margin-top: 6px; font-size: .78rem; opacity: .75; }

.notepad-tab.voice > button:first-child .icon { color: var(--m-green); }

.voice-problem { position: absolute; left: 50%; top: 12%; translate: -50% 0; z-index: 7; display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: .95rem; background: var(--bone); color: var(--red-900); border: 2px solid var(--red-900); border-radius: 12px; }
.voice-problem button { display: grid; place-items: center; border: none; background: none; color: inherit; cursor: pointer; }

/* watching a stream: lights down, pull-down projector screen, the room as an audience */
.voice-lights { position: absolute; inset: 0; z-index: 8; background: color-mix(in srgb, var(--night-900) 62%, transparent); animation: voice-lights-down .45s ease-out both; }
.voice-lights.out { animation: voice-lights-up .5s ease-in both; }
@keyframes voice-lights-down { from { opacity: 0; } }
@keyframes voice-lights-up { to { opacity: 0; } }
/* left/top/width come from projector.js (dragged, resized, remembered) */
.voice-projector { position: absolute; left: 8%; top: 5%; width: 84%; z-index: 9; }
.voice-projector.moving { filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--black) 35%, transparent)); }
/* the roller is the handle */
.voice-roller { position: relative; display: block; width: calc(100% + 36px); height: 22px; margin: 0 -18px; padding: 0; border-radius: 11px; background: linear-gradient(180deg, var(--gray-100), var(--gray-500) 60%, var(--mist-500)); border: 2px solid var(--line); cursor: grab; touch-action: none; overflow: hidden; }
.voice-roller::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--gray-900) 14%, transparent) 5px 6px); background-size: 100% 12px; }
.voice-roller:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; }
.voice-projector.moving .voice-roller { cursor: grabbing; }
.voice-grip { position: absolute; top: 4px; width: 22px; height: 10px; background: radial-gradient(circle, var(--gray-900) 1.3px, transparent 1.8px) 0 0 / 6px 5px; opacity: .55; }
.voice-grip.l { left: 12px; } .voice-grip.r { right: 12px; }
.voice-cloth { position: relative; margin: 0 6px; padding: 12px 12px 10px; background: var(--snow); box-shadow: 0 12px 28px color-mix(in srgb, var(--black) 45%, transparent); }
.voice-screen.big { aspect-ratio: 16 / 9; height: auto; }
.voice-screen.big:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; background: var(--black); }
.voice-screen.big:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; background: var(--black); }
.voice-proj-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-right: 22px; color: var(--gray-900); }
/* resize: the folded corner (keeps the screen's shape) */
.voice-grow { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; padding: 0; border: none; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 0 50%, var(--sand) 50% 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.voice-grow::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 13px; height: 13px; background: linear-gradient(135deg, transparent 0 44%, var(--gray-900) 44% 52%, transparent 52% 68%, var(--gray-900) 68% 76%, transparent 76%); }
.voice-grow:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; clip-path: none; }
/* weighted hem + pull cord: a box the cloth's height, so translating it -100% parks it at the roller */
.voice-hem { position: absolute; left: 6px; right: 6px; top: 22px; bottom: 0; pointer-events: none; }
.voice-hem::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 7px; border-radius: 4px; background: var(--gray-900); }
.voice-cord { position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--gray-900); transform-origin: top; }
.voice-cord::after { content: ""; position: absolute; left: -6px; bottom: -12px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gray-900); background: var(--cream); }
/* pull-down: unrolls from the roller, hem + cord lead, cord sways as it settles */
.voice-cloth { animation: voice-unroll .7s cubic-bezier(.3, .85, .35, 1) both; }
.voice-hem { animation: voice-hem-down .7s cubic-bezier(.3, .85, .35, 1) both; }
.voice-cord { animation: voice-swing 1.1s ease-out .45s both; }
.voice-roller::after { animation: voice-spin .7s linear both; }
.voice-proj-tabs { animation: voice-fade-in .3s ease-out .55s both; }
@keyframes voice-unroll { from { clip-path: inset(0 -40px 100% -40px); } to { clip-path: inset(0 -40px -60px -40px); } }
@keyframes voice-hem-down { 0% { translate: 0 -100%; } 80% { translate: 0 5px; } 100% { translate: 0 0; } }
@keyframes voice-swing { 0% { rotate: 12deg; } 35% { rotate: -8deg; } 65% { rotate: 4deg; } 100% { rotate: 0deg; } }
@keyframes voice-spin { to { background-position: 0 48px; } }
@keyframes voice-fade-in { from { opacity: 0; translate: 0 8px; } }
/* roll it up: a tug on the cord, then it snaps back into the roller */
.voice-projector.rollup { pointer-events: none; }
.voice-projector.rollup .voice-cloth { animation: voice-rollup .5s cubic-bezier(.55, 0, .75, .3) both; }
.voice-projector.rollup .voice-hem { animation: voice-hem-up .5s cubic-bezier(.55, 0, .75, .3) both; }
.voice-projector.rollup .voice-roller::after { animation: voice-spin .5s linear reverse both; }
.voice-projector.rollup .voice-proj-tabs { animation: voice-fade-out .2s ease-in both; }
@keyframes voice-rollup { 0% { clip-path: inset(0 -40px -60px -40px); translate: 0 0; } 18% { clip-path: inset(0 -40px -60px -40px); translate: 0 7px; } 100% { clip-path: inset(0 -40px 100% -40px); translate: 0 0; } }
@keyframes voice-hem-up { 0% { translate: 0 0; } 18% { translate: 0 7px; } 100% { translate: 0 -100%; } }
@keyframes voice-fade-out { to { opacity: 0; } }
.voice-proj-tabs { position: absolute; left: 14px; top: -36px; display: flex; gap: 6px; }
.voice-proj-tabs button { min-height: 34px; padding: 2px 12px; font: inherit; font-size: .95rem; border: 2px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--bone); color: var(--gray-900); cursor: pointer; }
.voice-proj-tabs button.on { background: var(--snow); }
/* the room as an audience: mini polaroids under the screen, moving with it */
.voice-aud { position: absolute; left: 0; right: 0; top: calc(100% + 30px); display: flex; justify-content: center; align-items: flex-end; gap: 18px; animation: voice-fade-in .3s ease-out .55s both; }
.voice-projector.rollup .voice-aud { animation: voice-fade-out .2s ease-in both; }
.voice-mini { position: relative; flex-shrink: 0; width: 78px; padding: 5px 5px 3px; border: none; background: var(--cream); color: var(--gray-900); font: inherit; cursor: pointer; rotate: var(--tilt, 0deg); box-shadow: 3px 6px 8px -4px color-mix(in srgb, var(--black) 50%, transparent); transition: translate .2s ease; }
.voice-mini.talk { translate: 0 -6px; box-shadow: 0 0 0 3px var(--m-green), 3px 10px 10px -4px color-mix(in srgb, var(--black) 50%, transparent); }
.voice-mini:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; }
.voice-mini .polaroid-photo { aspect-ratio: auto; height: 62px; font-size: 2.25rem; }
.voice-mini .polaroid-cap { display: block; padding-top: 3px; font-size: 1.125rem; text-overflow: ellipsis; }
.voice-mini.friend::before, .voice-mini.me::before { content: ""; position: absolute; top: -7px; left: 50%; width: 34px; height: 12px; translate: -50% 0; rotate: -5deg; background: color-mix(in srgb, var(--red-100) 90%, transparent); }
.voice-mini.me::before { background: color-mix(in srgb, var(--blue-100) 90%, transparent); }
.voice-mini.on { box-shadow: 0 0 0 3px var(--blue-700), 3px 6px 8px -4px color-mix(in srgb, var(--black) 50%, transparent); }
.voice-mini:hover { z-index: 5; translate: 0 -8px; }
.voice-aud .voice-mini.talk { z-index: 3; }
/* too many to sit side by side: overlap like a hand of cards, then a "+N everyone" card */
.voice-aud.tight { gap: 0; }
.voice-aud.tight .voice-mini + .voice-mini { margin-left: var(--ov); }
.voice-mini.more .polaroid-photo { background: repeating-linear-gradient(135deg, var(--bone) 0 8px, var(--sand) 8px 16px); color: var(--gray-900); font-size: 1.9rem; }
.voice-mini.more { box-shadow: -4px -3px 0 -1px var(--cream), -4px -3px 0 0 color-mix(in srgb, var(--black) 12%, transparent), 3px 6px 8px -4px color-mix(in srgb, var(--black) 50%, transparent); }

/* your room, travelling with you while you look elsewhere: foot of the left column */
.walkie { margin: 2px 4px 8px; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px; background: var(--green-100); color: var(--green-900); }
.walkie.solo { margin: 0; flex-shrink: 0; box-shadow: var(--shadow-hard-lg); rotate: -.4deg; }
.walkie-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.livepill { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; padding: 1px 9px; border-radius: 10px; background: var(--red-700); color: var(--white); flex-shrink: 0; }
.livepill i { width: 7px; height: 7px; border-radius: 50%; background: var(--white); animation: voice-blink 1.4s ease-in-out infinite; }
.walkie-room { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.walkie-board { font-size: .88rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-voice .chip { width: 14px; height: 14px; border-width: 2px; }
.walkie-faces { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.walkie-btns { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.walkie-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 2.5px solid var(--gray-900); border-radius: 50% 45% 52% 48%; background: var(--white); color: var(--gray-900); cursor: pointer; }
.walkie-btn.off { background: var(--bone); color: var(--red-800); }
.walkie-btn.bye { background: var(--red-700); color: var(--white); }
.walkie-back { margin-left: auto; font-size: 1rem; padding: 6px 12px; border: 2.5px solid var(--gray-900); border-radius: var(--wobble-1); background: var(--cream); color: var(--gray-900); text-decoration: none; box-shadow: 2px 2px 0 var(--gray-900); white-space: nowrap; }
.walkie-back:hover { color: var(--gray-900); rotate: -1deg; }

.dock-voice { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; max-width: 150px; padding: 0 4px 0 10px; height: 40px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 20px 16px 20px 14px; background: var(--green-100); color: var(--green-900); font-size: .92rem; }
.dock-voice a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: inherit; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dock-voice button { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--red-700); color: var(--white); cursor: pointer; }
.dock-voice.joining { padding-right: 10px; opacity: .8; }

@media (max-width: 759.98px) {
    .voice-stage { left: 6%; right: 6%; top: 22%; bottom: 44%; gap: 14px; }
    .voice-peek { left: 6%; }
    .voice-roomnote { max-width: 60%; }
    .dock-voice a { max-width: 90px; }

    /* the controls take the tab bar's place: round keys with a label under each (PhoneVoice) */
    .voice-strip {
        position: fixed; left: 0; right: 0; bottom: 0; translate: none; rotate: 0deg; z-index: 95;
        height: var(--ctrls-h); box-sizing: border-box;
        justify-content: space-around; align-items: flex-start; gap: 0;
        padding: 10px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
        background: var(--cream); color: var(--gray-900); border: none; border-top: 2.5px solid var(--gray-900); border-radius: 0; box-shadow: none;
    }
    .voice-strip :is(.voice-btn, .voice-leave) {
        flex-direction: column; justify-content: flex-start; gap: 4px; width: 58px; height: auto; min-height: 0; padding: 0;
        border: none; border-radius: 0; background: none; box-shadow: none; color: var(--gray-600); font: inherit; font-size: 13px;
    }
    .voice-strip :is(.voice-btn, .voice-leave):hover:not(:disabled) { rotate: 0deg; }
    .voice-strip .voice-btn:disabled { opacity: .5; }
    .voice-k {
        position: relative; display: grid; place-items: center; width: 48px; height: 48px; box-sizing: border-box;
        border: 2.5px solid var(--gray-900); border-radius: 50% 45% 52% 48%; background: var(--cream); color: var(--gray-900); box-shadow: 2px 2px 0 var(--gray-900);
    }
    .voice-btn.on .voice-k { background: var(--hi-yellow); }
    .voice-btn.off .voice-k { background: var(--gray-900); color: var(--cream); }
    .voice-leave .voice-k { background: var(--red-700); color: var(--white); }
    .voice-btn-label { display: block; font-size: 13px; line-height: 1; }
    .voice-strip .voice-sep { display: none; }
    .voice-btn-count { right: -6px; top: -6px; border-color: var(--cream); }
}

/* ============ phone voice room (design canvas PhoneVoice) ============
   The room fills the screen between a slim header (shrink back to the board + the room's
   name) and the controls bar, which stands in for the tab bar. No sheet tabs, walkie or
   avatar while you're in it; "shrink" goes back to the board with the walkie + tabs. */
.voice-k { display: contents; }
.voice-lasso.tall, .voice-roomname, .room-head { display: none; }
@media (max-width: 759.98px) {
    .canvases-shell .app-page.in-room { --ctrls-h: calc(98px + env(safe-area-inset-bottom, 0px)); padding-bottom: calc(var(--ctrls-h) + 20px); }
    .canvases-shell:has(.app-page.in-room) :is(.marks, .dock) { display: none; }
    .in-room :is(.side-btn, .search-btn, .app-tools, .sheet-bar) { display: none; }
    .app-page.in-room .app-top { padding-right: 2px; }
    .room-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .room-min { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; color: var(--p-ink, var(--ink)); }
    .room-min:hover { color: var(--p-ink, var(--ink)); background: color-mix(in srgb, var(--ink) 8%, transparent); }
    .room-ttl { flex: 1; min-width: 0; }
    .in-room .room-ttl .ttl { font-size: 30px; padding: 0 2px 2px; }
    .in-room .room-ttl .tsub { font-size: 14px; }

    .in-room .sheet { align-items: stretch; }
    .in-room .canvas-frame.room-sheet { width: auto; height: 100%; aspect-ratio: auto; margin: 0 2px; }
    .voice-lasso.tall { display: block; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
    .voice-roomname { display: block; position: absolute; left: 32px; top: 22px; font-family: var(--font-marker); font-weight: 700; font-size: 22px; line-height: 1; color: var(--p-accent); rotate: -3deg; }
    /* the room note sits low, handwritten, like the prototype's caption */
    .voice-roomnote { left: 36px; right: 28px; top: auto; bottom: 4%; max-width: none; padding: 0; background: none; font-family: var(--font-marker); font-weight: 700; font-size: 18px; line-height: 1.1; rotate: -1.5deg; }
    .voice-roomnote .icon { display: none; }

    /* the room chat rises over the controls */
    .canvases-shell:has(.app-page.in-room) .notepad { bottom: 0; z-index: 96; }
}

/* ============ bookmarks: getting around, hanging from the top edge ============ */

.marks { position: fixed; top: 0; right: 28px; z-index: 95; display: flex; gap: 8px; align-items: flex-start; }
.bm {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: 48px; height: 78px; padding: 18px 0 0; box-sizing: border-box;
    border: none; background: none; color: var(--gray-900); font: inherit;
    cursor: pointer; text-decoration: none;
}
.bm .rib { position: absolute; top: -2.5px; left: 0; width: 48px; height: 78px; overflow: visible; filter: drop-shadow(3px 4px 0 var(--line)); transition: height .15s ease; }
.bm .rib { fill: var(--bm); stroke: var(--gray-900); stroke-width: 2.5; stroke-linejoin: round; }
.bm .icon { position: relative; }
.bm:hover { color: var(--gray-900); }
.bm:hover .rib { height: 84px; }
.bm.on .rib { height: 90px; }
.bm .unr { position: absolute; left: 34px; top: 8px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; font-size: .72rem; border: 2px solid var(--cream); }
.bm .tip { position: absolute; top: 84px; left: 50%; translate: -50% 0; padding: 0 8px; border-radius: 8px; background: var(--gray-900); color: var(--cream); white-space: nowrap; font-size: .82rem; opacity: 0; pointer-events: none; transition: opacity .12s; }
.bm:hover .tip, .bm:focus-visible .tip { opacity: 1; }
.bm.on:hover .tip { top: 94px; }
.bm.phone-only { display: none; }
/* the tour's bookmarks step names them all */
.canvases-shell:has(.tour[data-step="bookmarks"]) .marks { padding-bottom: 34px; }
.canvases-shell:has(.tour[data-step="bookmarks"]) .bm .tip { opacity: 1; }

/* dock: log out lives in your status menu */
.pop-out { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px 2px; border: none; border-top: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); background: none; font: inherit; font-size: 1.05rem; color: var(--danger); cursor: pointer; text-align: left; }
.pop-out:hover { text-decoration: underline; }

/* ============ board map: the left column on board pages ============ */

.board-map { display: flex; flex-direction: column; padding: 10px 8px; }
.map-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px 6px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.map-title { flex: 1; font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.map-scroll { flex: 1; min-height: 0; overflow: auto; padding-top: 2px; }
.map-sec-btn { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 0 6px; border: none; background: none; font-family: var(--font-marker); font-weight: 700; font-size: 1.3rem; color: var(--ink-soft); text-align: left; cursor: pointer; }
.map-sec-btn .icon { transition: rotate .15s; }
.map-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 36px; padding: 2px 8px 2px 14px; box-sizing: border-box;
    border: none; border-radius: 10px; background: none;
    font: inherit; font-size: 1rem; color: var(--ink); text-align: left; cursor: pointer;
}
.map-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.map-row.on { background: var(--hi-yellow); color: var(--gray-900); box-shadow: inset 0 0 0 2px var(--line); }
.map-row.voice .icon { color: var(--m-green); }
.map-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-meta { font-size: .82rem; color: var(--ink-soft); }
.map-live { font-size: .75rem; padding: 0 7px; border-radius: 9px; background: var(--red-700); color: var(--white); }
.map-badge { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--blue-500); color: var(--white); font-size: .75rem; display: grid; place-items: center; }
.map-none { color: var(--ink-soft); padding: 10px; }
.map-foot { font-size: .82rem; color: var(--ink-soft); padding: 6px 8px 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.map-show {
    align-self: flex-start;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 96px; min-height: 76px; padding: 8px 6px; box-sizing: border-box;
    font: inherit; font-size: 1rem; color: var(--ink);
    background: var(--paper); border: 2.5px solid var(--line); border-radius: 12px 14px 12px 10px;
    box-shadow: 2px 2px 0 var(--line); cursor: pointer;
}
.map-show:hover { rotate: -2deg; }

.map-show-row { display: flex; gap: 10px; }
.map-head .map-kit {
    width: auto; height: 36px; padding: 0 10px; gap: 5px; display: inline-flex; align-items: center;
    border: 2px solid var(--line); border-radius: 12px 10px 13px 9px; background: var(--hi-yellow); color: var(--gray-900);
    font: inherit; font-size: .95rem; box-shadow: 2px 2px 0 var(--line);
}
.map-head .map-kit + a.ibtn { margin-left: 0; }

/* ============ board toolkit: swaps in for the board map (docs/design: "Board toolkit") ============ */

.board-kit { display: flex; flex-direction: column; padding: 10px 8px; }
.kit-tier { font-size: .78rem; padding: 1px 9px; border-radius: 10px; background: var(--green-200); color: var(--green-900); border: 1.5px solid var(--line); rotate: -2deg; white-space: nowrap; }
.kit-tier.community { background: var(--purple-100); color: var(--blue-900); }
.kit-tabs { display: flex; gap: 2px; padding: 8px 2px 0; border-bottom: 2.5px solid var(--line); }
.kit-tab {
    flex: 1; min-height: 40px; padding: 0 4px 2px; font-family: var(--font-marker); font-weight: 700; font-size: 1.25rem;
    background: none; color: var(--ink-soft); border: 2.5px solid transparent; border-bottom: none; border-radius: 12px 14px 0 0; cursor: pointer;
}
.kit-tab.on { background: var(--paper); color: var(--ink); border-color: var(--line); margin-bottom: -2.5px; }
.kit-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 6px 6px; }
.kit-p { color: var(--ink-soft); margin: 6px 2px; }
.kit-small { font-size: .85rem; color: var(--ink-soft); margin: 6px 0; }
.kit-note { margin-top: 14px; padding: 8px 10px; border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 12px; font-size: .88rem; color: var(--ink-soft); line-height: 1.25; }
.kit-flash { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 10px; border-radius: 12px; background: var(--green-100); color: var(--green-900); font-size: .92rem; }
.kit-input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 7px 10px; margin-bottom: 8px;
    background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--wobble-3);
}
.kit-tmpl { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-chip {
    display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 2px 12px; box-sizing: border-box;
    border: 2px solid var(--line); border-radius: 18px 14px 16px 12px; background: var(--white); color: var(--gray-900);
    font: inherit; font-size: .95rem; cursor: pointer;
}
.kit-chip:hover:not(:disabled) { background: var(--yellow-100); }
.kit-chip:disabled { opacity: .5; cursor: default; }
.kit-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kit-type {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px; min-height: 86px; box-sizing: border-box;
    font: inherit; text-align: left; line-height: 1.1; color: var(--ink); cursor: pointer;
    background: var(--surface); border: 2px solid var(--line); border-radius: 12px 9px 13px 8px;
}
.kit-type:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }
.kit-type small { font-size: .8rem; color: var(--ink-soft); }
.kit-type:disabled { opacity: .5; cursor: default; }
.kit-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kit-grow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; padding: 10px 12px; border: 2.5px dashed var(--purple-500); border-radius: 14px 11px 15px 10px; }
.kit-grow span { font-size: .9rem; color: var(--ink-soft); }
.kit-roles { display: flex; flex-direction: column; gap: 4px; }
.kit-role { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 8px; font: inherit; background: none; color: var(--ink); border: 2px solid transparent; border-radius: 10px; cursor: pointer; }
.kit-role.on { border-color: var(--line); background: var(--surface); }
.kit-role-n { margin-left: auto; font-size: .85rem; color: var(--ink-soft); }
.kit-ink { display: flex; flex-direction: column; gap: 6px; }
.kit-ink-row { display: flex; align-items: center; gap: 6px; }
.kit-ink-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.kit-ink-who b, .kit-ink-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-ink-who small { font-size: .8rem; color: var(--ink-soft); }

/* the drawing tools inside the toolkit's draw tab */
.draw-tools.docked { position: static; inset: auto; pointer-events: auto; }
.draw-dtools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.draw-tools .ddt {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; padding: 4px 2px; font-size: .8rem; cursor: pointer;
    background: var(--surface); border: 2px solid var(--line); border-radius: 12px 10px 13px 9px;
}
.draw-tools .ddt:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }
.draw-tools .ddt.on { background: var(--hi-yellow); color: var(--gray-900); box-shadow: 2px 2px 0 var(--line); }
.draw-tools .ddt:disabled { opacity: .4; cursor: default; }
.draw-tools .ddt .cap { position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--c); }
.draw-dopts { margin-top: 12px; }
.draw-dopts .lbl { margin: 10px 0 4px; font-size: 1.25rem; color: var(--ink); line-height: 1; }
.draw-dopts .lbl:first-child { margin-top: 0; }

/* ============ colour rows: our set, then yours, then "pick your own" ============ */

.cpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cpick-sw {
    position: relative; width: 30px; height: 30px; flex-shrink: 0; padding: 0; box-sizing: border-box; cursor: pointer;
    background: var(--c); border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%;
}
.cpick-sw.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--line); }
.cpick-sw:disabled, .cpick-own.off { opacity: .45; cursor: default; }
.cpick-sep { width: 2px; height: 22px; flex-shrink: 0; border-radius: 2px; background: var(--line); opacity: .25; margin: 0 1px; }
.cpick-own {
    display: grid; place-items: center; overflow: hidden; color: var(--gray-900);
    background: conic-gradient(var(--red-500), var(--amber-500), var(--green-500), var(--blue-500), var(--purple-500), var(--pink-500), var(--red-500));
}
.cpick-own .icon { background: var(--paper); border-radius: 50%; padding: 1px; }
.cpick.big { gap: 10px; }
.cpick.big .cpick-sw { width: 38px; height: 38px; }
.cpick.in-tray { flex-wrap: nowrap; }
.cpick.in-tray .cpick-sw { width: 36px; height: 36px; }

/* our own colour wheel (the rainbow button): hue round the disc, paler to the middle,
   a darker/brighter strip; a card beside the button, a bottom sheet on phones */
.cwheel {
    position: fixed; inset: auto; left: 0; top: 0; margin: 0; max-width: none; max-height: none; overflow: visible;
    width: 320px; box-sizing: border-box; visibility: hidden;
    flex-direction: column; gap: 12px; padding: 8px 16px 16px;
    background: var(--paper); color: var(--ink); border: 2.5px solid var(--line);
    border-radius: 12px 18px 14px 16px/16px 12px 18px 14px; box-shadow: var(--shadow-hard-lg);
    cursor: default; text-align: left;
}
.cwheel[open] { display: flex; }
.cwheel.placed { visibility: visible; }
.cwheel::backdrop { background: transparent; }
.cwheel-head { display: flex; align-items: center; justify-content: space-between; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cwheel-head:active { cursor: grabbing; }
.cwheel-head .mk { font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.cwheel-disc {
    position: relative; align-self: center; flex-shrink: 0; width: 224px; height: 224px; box-sizing: border-box;
    border: 2.5px solid var(--line); border-radius: 50%; overflow: hidden; touch-action: none; cursor: crosshair;
    background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: var(--shadow-hard);
}
.cwheel-white, .cwheel-shade { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.cwheel-white { background: radial-gradient(closest-side, var(--white), color-mix(in srgb, var(--white) 0%, transparent)); }
.cwheel-shade { background: var(--black); }
.cwheel-knob {
    position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; box-sizing: border-box; cursor: grab;
    background: var(--c); border: 3px solid var(--cream); border-radius: 50%; box-shadow: 0 0 0 2.5px var(--gray-900), 2px 3px 0 2.5px var(--gray-900);
}
.cwheel-knob:focus-visible { outline: 3px solid var(--hi-yellow); outline-offset: 4px; }
.cwheel-ends { display: flex; justify-content: space-between; margin-bottom: -8px; font-size: .88rem; color: var(--ink-soft); }
.cwheel-strip, .draw-size input {
    -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; box-sizing: border-box; cursor: pointer;
    border: 2.5px solid var(--line); border-radius: 14px 10px 13px 11px;
}
.cwheel-strip { background: linear-gradient(to right, var(--black), var(--c)); }
.cwheel-strip::-webkit-slider-thumb, .draw-size input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%;
    background: var(--cream); border: 3px solid var(--gray-900); box-shadow: 2px 2px 0 var(--gray-900);
}
.cwheel-strip::-moz-range-thumb, .draw-size input::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; background: var(--cream); border: 3px solid var(--gray-900); box-shadow: 2px 2px 0 var(--gray-900);
}
.cwheel-strip:focus-visible, .draw-size input:focus-visible { outline: 3px solid var(--hi-yellow); outline-offset: 3px; }
.cwheel-now { display: flex; align-items: center; gap: 10px; }
.cwheel-dabs { display: flex; align-items: flex-end; flex-shrink: 0; }
.cwheel-dabs .dab { width: 46px; height: 46px; box-sizing: border-box; background: var(--c); border: 2.5px solid var(--line); border-radius: 52% 48% 55% 45%/48% 55% 45% 52%; }
.cwheel-dabs .dab.was { width: 26px; height: 26px; margin-right: -8px; }
.cwheel-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cwheel-name .mk { font-family: var(--font-marker); font-weight: 700; font-size: 1.35rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwheel-name small { font-size: .8rem; color: var(--ink-soft); }
.cwheel-hex {
    display: flex; align-items: center; gap: 2px; width: 92px; flex-shrink: 0; min-height: 40px; padding: 0 8px; box-sizing: border-box;
    background: var(--surface); border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; color: var(--ink-soft);
}
.cwheel-hex input { width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; background: none; font: inherit; font-size: 1rem; color: var(--ink); }
.cwheel-hex input:focus { outline: none; box-shadow: none; }
.cwheel-hex:focus-within { outline: 3px solid var(--hi-yellow); outline-offset: 2px; }
.cwheel-actions { display: flex; justify-content: flex-end; gap: 10px; }
.cwheel-actions .cwheel-dropper { margin-right: auto; gap: 6px; padding-left: 10px; padding-right: 12px; }

/* eye dropper: the card steps aside, a tape says what to do, a loupe rides the pointer */
.cdrop { position: fixed; inset: 0; z-index: 2147483000; cursor: crosshair; touch-action: none; }
.cdrop-tape {
    position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; rotate: -.8deg;
    display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; cursor: default;
    background: var(--amber-200); color: var(--gray-900); border: 2.5px solid var(--gray-900); border-radius: 4px 10px 5px 9px; box-shadow: 3px 3px 0 var(--gray-900);
    font-size: 1.05rem; white-space: nowrap;
}
.cdrop-tape .btn { color: var(--gray-900); border-color: var(--gray-900); }
.cdrop-loupe {
    position: fixed; left: 0; top: 0; width: 92px; height: 92px; box-sizing: border-box; display: none; place-items: center;
    border: 14px solid var(--c, var(--cream)); border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 2.5px var(--gray-900), 3px 4px 0 2.5px var(--gray-900), inset 0 0 0 2px color-mix(in srgb, var(--gray-900) 35%, transparent);
}
.cdrop-loupe.on { display: grid; }
.cdrop-loupe i { width: 12px; height: 12px; box-sizing: border-box; background: var(--c); border: 2px solid var(--cream); outline: 2px solid var(--gray-900); }
.cdrop-loupe b {
    position: absolute; top: 88px; left: 50%; translate: -50% 0; white-space: nowrap; font-weight: 400; font-size: .95rem;
    padding: 1px 8px; background: var(--cream); color: var(--gray-900); border: 2px solid var(--gray-900); border-radius: 8px 10px 7px 11px;
}
@media (max-width: 759px) {
    .cwheel { width: 100vw; border-radius: 18px 18px 0 0; border-bottom: none; box-shadow: var(--shadow-soft); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    .cwheel::backdrop { background: color-mix(in srgb, var(--gray-900) 35%, transparent); }
}

/* make your own theme (canvas: ThemeMaker): a colour per part, drafted in a 974×692 paper
   card — a bottom sheet on phones. The modal <dialog> rides the top layer: nothing paints
   over it and the backdrop dims the page. Sizes follow the canvas in px. */
.tmk {
    position: fixed; inset: 0; z-index: 300; display: none; width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: none; background: none; overflow: hidden; box-sizing: border-box;
    place-items: center;
}
.tmk[open] { display: grid; }
.tmk::backdrop { background: color-mix(in srgb, var(--gray-900) 42%, transparent); }
.tmk-card {
    display: flex; flex-direction: column; width: min(974px, calc(100vw - 32px)); height: min(692px, calc(100dvh - 32px));
    box-sizing: border-box; padding: 18px 24px 0; overflow: hidden;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px/16px 12px 18px 14px; box-shadow: 6px 7px 0 var(--line);
}
.tmk-card:focus, .tmk-sheet:focus { outline: none; }
.tmk-head { display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.tmk-head > div:first-child { flex: 1; min-width: 0; }
.tmk-title { width: max-content; max-width: 100%; margin: 0; font-family: var(--font-marker); font-weight: 700; font-size: 38px; line-height: 1.05; rotate: -1deg; }
.tmk-sub { margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink-soft); }
.tmk-card .ibtn, .tmk-sheet .ibtn { width: 44px; height: 44px; border: none; }
.tmk-grid { display: grid; grid-template-columns: 404px minmax(0, 1fr); gap: 26px; margin-top: 16px; min-height: 0; flex: 1; overflow-y: auto; align-content: start; }

/* labels: solid ink Caveat with a soft note after */
.tmk-lbl { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-family: var(--font-marker); font-weight: 700; font-size: 23px; line-height: 1.05; color: var(--ink); }
.tmk-lbl small { font-family: var(--font-hand); font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.tmk-lbl.parts { margin-top: 16px; }

.tmk-from { display: flex; flex-wrap: wrap; gap: 8px; }
.tmk-from.now { flex-wrap: nowrap; overflow-x: auto; padding: 6px 4px 8px; }
.tmk-psw { width: 36px; height: 36px; border-radius: 3px 3px 12px 3px/3px 3px 8px 3px; }
.tmk-psw::after { left: 5px; top: 5px; width: 8px; height: 8px; }

.tmk-part {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 4px 10px; box-sizing: border-box;
    border: none; border-radius: 10px; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.tmk-part:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tmk-part.on { background: var(--amber-200); color: var(--gray-900); box-shadow: inset 0 0 0 2px var(--gray-900); }
.tmk-part .t { flex: 1; min-width: 0; font-size: 17px; line-height: 1.1; }
.tmk-part .t small { display: block; font-size: 14px; color: var(--ink-soft); }
.tmk-part .hx { flex-shrink: 0; font-size: 14px; line-height: 1.1; text-align: right; color: var(--ink-soft); }
.tmk-part.on .t small, .tmk-part.on .hx { color: var(--gray-700); }
.tmk-dab { width: 34px; height: 34px; flex-shrink: 0; box-sizing: border-box; border: 2.5px solid var(--line); border-radius: 52% 48% 55% 45%/48% 55% 45% 52%; }
.tmk-part.on .tmk-dab { border-color: var(--gray-900); }

/* the opened part's colour row: round swatches, a yellow ring on the one you're using */
.tmk-open { padding: 8px 10px 12px 56px; }
.tmk-open .cpick { flex-wrap: wrap; gap: 6px; }
.tmk-open .cpick-sw { border-radius: 50%; }
.tmk-open .cpick-sw:hover { rotate: -10deg; scale: 1.08; }
.tmk-open .cpick-sw.on { box-shadow: none; outline: 3px solid var(--amber-500); outline-offset: 2px; }
.tmk-open .cpick-sep { height: 24px; margin: 0 2px; }

/* buttons, as drawn on the card */
.tmk-card .btn, .tmk-sheet .btn { min-height: 44px; padding: 6px 16px; font-size: 17px; border-width: 2.5px; box-shadow: 3px 3px 0 var(--line); }
.tmk-card .btn.sm, .tmk-sheet .btn.sm { min-height: 36px; padding: 2px 12px; font-size: 15px; box-shadow: 2px 2px 0 var(--line); }
.tmk-card .btn.ghost, .tmk-sheet .btn.ghost { box-shadow: none; }

/* the footer runs the card's full width */
.tmk-foot {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin: 0 -24px; padding: 12px 24px 16px;
    border-top: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); background: var(--paper);
}
.tmk-gap { flex: 1; }

/* the pager and the page it flips through */
.tmk-pager { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tmk-arrow {
    width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; padding: 0; cursor: pointer;
    border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%; background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line);
}
.tmk-arrow:hover { background: var(--hi-yellow); rotate: -6deg; color: var(--gray-900); }
.tmk-pname { flex: 1; min-width: 0; text-align: center; line-height: 1.05; }
.tmk-pname b { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 24px; }
.tmk-pname small { font-size: 13px; color: var(--ink-soft); }
.tmk-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.tmk-dot { width: 12px; height: 12px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; box-sizing: border-box; }
.tmk-dot.on { background: var(--ink); }
.tmk-snip {
    --snip-scale: .341;
    position: relative; overflow: hidden; box-sizing: border-box; height: 312px; pointer-events: none;
    border: 2.5px solid var(--line); border-radius: 10px; background: var(--wall);
}

/* ThemePreview: a page of the app at full size, shrunk. The transform makes it the
   containing block for the fixed bookmarks, dock and notepad, so they land where they do
   on the real page. The draft lands on every palette inside it, as MainLayout's custom
   rule does for real; the whiteboard sheet (.canvas-frame) takes the draft's --sheet. */
.tmk-scene {
    --pad-w: 520px;
    position: absolute; left: 0; top: 0; width: 1440px; height: 900px; overflow: hidden;
    transform: scale(var(--snip-scale)); transform-origin: 0 0;
    background: var(--p-wall); color: var(--ink); font-family: var(--font-hand); font-size: 17px; line-height: 1.4;
}
.tmk-scene [data-palette]:not(.canvas-frame):not(.psw) {
    --p-wall: var(--t-wall) !important; --p-canvas: var(--t-canvas) !important;
    --p-ink: var(--t-ink) !important; --p-accent: var(--t-accent) !important;
    --hi-yellow: var(--t-hi) !important;
}
.tmk-scene .canvas-frame { --hi-yellow: var(--t-hi) !important; }
.tmk-scene .s-top { position: absolute; left: 24px; top: 0; right: 404px; height: 88px; display: grid; grid-template-columns: 340px minmax(0, 420px); column-gap: 24px; align-items: start; }
.tmk-scene .ttl { font-size: 2.9rem; }
.tmk-scene .s-left { position: absolute; left: 24px; top: 104px; width: 340px; height: 694px; display: flex; flex-direction: column; gap: 18px; }
.tmk-scene .s-left > .paper:first-child { flex: 1; min-height: 0; }
.tmk-scene .s-main { position: absolute; left: 388px; top: 104px; width: 1028px; height: 694px; }
.tmk-scene .s-main.wall { height: 772px; }
.tmk-scene .s-main.wall .canvas-frame { width: 1007px; }
.tmk-scene .s-main.board .sheet-bar { width: 1028px; }
.tmk-scene .s-main.board .canvas-frame { width: 1028px; }
.tmk-scene .marks { right: 28px; }
.tmk-scene .dock { left: 24px; bottom: 24px; }
.tmk-scene .notepad { top: 104px; right: 24px; bottom: 102px; }

/* a phone: 390×844 at the phone layout (the maker only shows this on a phone, so the
   app's own phone rules are already in force) */
.tmk-snip.phone { --snip-scale: .41; width: 162px; height: 351px; margin: 0 auto; }
.tmk-scene.phone { width: 390px; height: 844px; }
.tmk-scene.phone .s-top { left: 10px; right: 10px; height: 64px; display: flex; align-items: center; padding: 8px 54px 0 2px; box-sizing: border-box; }
.tmk-scene.phone .ttl { font-size: 2rem; }
.tmk-scene.phone .s-left, .tmk-scene.phone .s-main { left: 10px; right: 10px; top: 72px; bottom: 90px; width: auto; height: auto; }
.tmk-scene.phone .s-main.wall .canvas-frame { width: 900px; }

@media (min-width: 760px) and (max-width: 1005px) {
    .tmk-grid { grid-template-columns: minmax(0, 1fr); }
    .tmk-snip { height: auto; aspect-ratio: 1440 / 900; }
}

/* phones: the same card as a bottom sheet */
@media (max-width: 759px) {
    .tmk { place-items: end center; }
    .tmk-sheet {
        display: flex; flex-direction: column; width: 100%; max-height: 92dvh;
        box-sizing: border-box; background: var(--paper); color: var(--ink);
        border: 2.5px solid var(--line); border-bottom: none; border-radius: 22px 26px 0 0/18px 22px 0 0; box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent);
    }
    .tmk-grab { width: 54px; height: 6px; margin: 8px auto 2px; border-radius: 3px; background: var(--mist-300); flex-shrink: 0; }
    .tmk-sheet-top { display: flex; align-items: center; gap: 6px; padding: 2px 8px 6px 16px; }
    .tmk-sheet .tmk-title { flex: 1; width: auto; font-size: 30px; }
    .tmk-scroll { flex: 1; overflow-y: auto; padding: 0 16px 12px; }
    .tmk-scroll .tmk-lbl.after { margin-top: 12px; }
    .tmk-scroll .tmk-lbl.parts { margin-top: 8px; }
    .tmk-scroll .tmk-psw { flex-shrink: 0; width: 40px; height: 40px; }
    .tmk-scroll .tmk-part { min-height: 56px; }
    .tmk-scroll .tmk-open { padding: 8px 4px 12px 12px; }
    .tmk-scroll .tmk-open .cpick { gap: 8px; }
    .tmk-scroll .tmk-open .cpick-sw { width: 36px; height: 36px; }
    .tmk-reset { margin-top: 12px; }
    .tmk-sheet .tmk-foot { gap: 10px; margin: 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); }
    .tmk-sheet .tmk-foot .btn { flex: 1; }
}

/* voice room: where you are, in the title slot */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding-top: 4px; font-size: 1.1rem; rotate: -1.5deg; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; border-radius: 12px; color: var(--p-ink, var(--ink)); text-decoration: none; border: 2px dashed transparent; }
.crumbs a:hover { border-color: var(--line); background: var(--paper); }
.crumbs .chip { width: 16px; height: 16px; }
.crumbs .here { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--p-ink, var(--ink)); }
.crumbs .here .icon { color: var(--p-accent); }

/* ============ chats: your list · the conversation · who it's with ============ */

.side-pad.two { display: flex; gap: 8px; }
.side-pad.two .btn { flex: 1; }
a.btn, a.btn:hover { text-decoration: none; }

.chat-list { display: flex; flex-direction: column; }
.list-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 16px; border-bottom: 2.5px solid var(--line); }
.list-title { flex: 1; font-family: var(--font-marker); font-weight: 700; font-size: 1.7rem; line-height: 1; }
/* friends & chats: the list's head — title + add + group, find, then the filter chips (canvas: Dms lhead) */
.people-head { border-bottom: 2.5px solid var(--line); padding-bottom: 10px; }
.people-head .list-head { border-bottom: none; padding-bottom: 0; }
.lfilt { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px; }
.lchip { min-height: 32px; padding: 0 10px; font: inherit; font-size: .95rem; border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; background: var(--surface, var(--white)); color: var(--ink); cursor: pointer; }
.lchip:hover { rotate: -2deg; }
.lchip.on { background: var(--hi-yellow); color: var(--gray-900); box-shadow: 2px 2px 0 var(--line); }
.dmrow.req { flex-wrap: wrap; cursor: default; }
.dmrow.req:hover { background: none; }
.dmrow.req .who { flex: 1; min-width: 0; }
.req-acts { display: flex; gap: 6px; width: 100%; padding-left: 48px; }
.starter-acts { display: flex; gap: 8px; justify-content: flex-end; }
.pk .has { font-size: .85rem; color: var(--ink-soft); }
.starter .hint.top { margin-top: 0; }
.about-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.about-acts .warn { color: var(--danger); border-color: currentColor; }

/* phones: add a friend / start a group come up as a sheet from "+" (canvas: PhoneChats .sheet) */
.people-sheet {
    display: block; max-height: 80dvh;
    padding: 16px 16px calc(22px + env(safe-area-inset-bottom)); box-sizing: border-box;
}
.people-sheet-top { display: flex; align-items: center; }
.people-sheet-title { flex: 1; font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; line-height: 1.1; }
.people-sheet .lfilt.seg { padding: 0; margin: 4px 0 12px; }
.people-sheet .lfilt.seg .lchip { flex: 1; min-height: 36px; }
.people-sheet .hint { font-size: .9rem; color: var(--ink-soft); margin: 8px 2px; }
.people-sheet .pk { min-height: 48px; }
.people-sheet .starter-list { max-height: none; }
.people-sheet .btn.wide { min-height: 48px; margin-top: 8px; }
.list-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 2px 8px; }

.starter { margin: 10px 12px 4px; padding: 10px; border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px; background: color-mix(in srgb, var(--hi-yellow) 22%, var(--paper)); box-shadow: 3px 3px 0 var(--line); }
.starter .lbl { margin: 0 0 6px; }
.starter-list { max-height: 210px; overflow: auto; }
.starter .hint { font-size: .82rem; color: var(--ink-soft); margin: 6px 2px 8px; }
.starter .error { margin: 0 2px 8px; }
.picked { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper); font: inherit; font-size: .92rem; color: var(--ink); cursor: pointer; }
.pchip .av { width: 22px; height: 22px; font-size: .9rem; border-width: 1.5px; }
.pk { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 4px 8px; box-sizing: border-box; border: none; background: none; border-radius: 8px; font: inherit; font-size: 1.05rem; color: var(--ink); cursor: pointer; text-align: left; }
.pk:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pk:disabled { opacity: .45; cursor: not-allowed; }
.pk .av { width: 30px; height: 30px; font-size: 1.15rem; }
.pk .tick { margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 6px 4px 7px 5px; background: var(--white); color: var(--white); }
.pk.on .tick { background: var(--m-green); }

.dmrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 10px; box-sizing: border-box; border: none; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.dmrow:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: inherit; }
.dmrow.on { background: var(--hi-yellow); color: var(--gray-900); }
.dmrow.on .who .a, .dmrow.on .dmrow-t { color: var(--gray-700); }
.dmrow .who { display: flex; flex-direction: column; }
.dmrow.unread .who .n { font-weight: 700; }
.dmrow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dmrow-t { font-size: .8rem; color: var(--ink-soft); }
.dmrow .unr { min-width: 0; height: 20px; font-size: .72rem; }
.gav { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.gav .av { position: absolute; width: 26px; height: 26px; font-size: 1rem; }
.gav .av:first-child { left: 0; top: 0; }
.gav .av:last-child { right: 0; bottom: 0; }

.dm-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-w); gap: 24px; height: 100%; }
.dm-pad { display: flex; flex-direction: column; min-height: 0; border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px; }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 2.5px solid var(--line); min-width: 0; }
.dm-name { font-family: var(--font-marker); font-weight: 700; font-size: 1.7rem; line-height: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-tag { font-size: .8rem; padding: 0 8px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 10%, transparent); white-space: nowrap; }
.dm-pad .notepad-pins { margin-top: 8px; }
.dm-info { display: none; width: 38px; height: 38px; flex-shrink: 0; border: 2px solid transparent; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.dm-info:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

.dm-about {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-height: 0; overflow: auto;
    padding: 26px 20px 18px; box-sizing: border-box;
    background: var(--note); color: var(--p-note-ink, var(--amber-950));
    border-radius: 2px 2px 26px 2px / 2px 2px 14px 2px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 4px 10px 14px -6px color-mix(in srgb, var(--black) 35%, transparent);
    rotate: .4deg;
}
.dm-about::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 22px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--blue-100) 80%, transparent); border-inline: 2px dashed color-mix(in srgb, var(--black) 12%, transparent); }
.dm-about .lbl { color: color-mix(in srgb, currentColor 72%, transparent); margin-top: 16px; }
.av.xl { width: 72px; height: 72px; font-size: 2.6rem; border-width: 2.5px; }
.av.xl .dot { width: 16px; height: 16px; right: -2px; bottom: 0; }
.about-name { font-family: var(--font-marker); font-weight: 700; font-size: 2rem; line-height: 1.05; margin-top: 8px; }
.about-sub { font-size: .92rem; opacity: .75; }
.about-act { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .92rem; padding: 2px 10px; border-radius: 10px; background: var(--green-100); color: var(--green-900); }
.about-board { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 1.05rem; color: inherit; text-decoration: none; }
.about-board:hover { text-decoration: underline; color: inherit; }
.about-member { display: flex; align-items: center; gap: 8px; min-height: 38px; font-size: 1.05rem; }
.about-member small { opacity: .7; }
.about-none { font-size: .88rem; opacity: .75; margin: 8px 0 0; }
.about-out { margin-top: auto; color: var(--danger); border-color: currentColor; }
.about-leave { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; font-size: .92rem; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dm-about { color: var(--ink); }
    :root:not([data-theme="light"]) .dm-about .lbl { color: var(--ink-soft); }
}

.dm-empty { height: 100%; display: grid; place-content: center; text-align: center; color: color-mix(in srgb, var(--p-ink, var(--ink)) 60%, transparent); }
.dm-empty-big { font-family: var(--font-marker); font-weight: 700; font-size: 2.4rem; rotate: -2deg; }
.dm-empty p { margin: 6px 0 0; }

/* the phone board's window onto the world (pan.js); wider, it isn't there */
.canvas-port { display: contents; }
.canvas-mini, .pan-hint { display: none; }
/* the mini-map's insides on any screen size: the ink, a shrunk copy of the pins (pan.js),
   and the box for what you're looking at now */
.canvas-mini canvas, .canvas-mini .mini-shot { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-mini .mini-shot { overflow: hidden; pointer-events: none; }
.canvas-mini .mini-shot > .canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.canvas-mini b {
    position: absolute; z-index: 1; box-sizing: border-box; pointer-events: none;
    border: 2.5px solid var(--danger); border-radius: 3px;
    box-shadow: 0 0 0 999px color-mix(in srgb, var(--gray-900) 14%, transparent);
}
@keyframes hint-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ============ any screen size: the shell folds ============
   Mirrors the design canvas's "Any screen size" row (and viewport.js):
   · 1280+ wide: the shell as drawn — left column, board, dock, bookmarks top-right.
   · 760–1279: the left column becomes a drawer floating over the board (button beside
     the title); the board scales down but keeps its shape; the pad floats at 380px.
   · under 760: search folds to an icon, bookmarks become the bottom tab bar, the dock
     folds to your avatar top-right (mute/deafen ride the voice strip), the pad is a
     bottom sheet and chats go list → thread. The board world never changes size. */

.side-btn, .search-btn {
    display: none; place-items: center;
    width: 44px; height: 44px; flex-shrink: 0; padding: 0; box-sizing: border-box;
    border: 2.5px solid var(--line); border-radius: 50% 45% 52% 48%;
    background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line);
    cursor: pointer;
}
.side-btn.on { background: var(--hi-yellow); color: var(--gray-900); }
.search-btn { border-color: transparent; background: transparent; box-shadow: none; color: var(--p-ink, var(--ink)); }
.side-scrim, .dm-back, .dm-empty-back, .pop-theme, .dock-voice .ph { display: none; }
.pop-theme { align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 10px 2px; border: none; background: none; font: inherit; font-size: 1.05rem; color: var(--ink); cursor: pointer; text-align: left; }

@media (max-width: 1279.98px) {
    .app-page { --col-w: 300px; position: relative; grid-template-columns: minmax(0, 1fr); }
    .app-page.left-pane { grid-template-columns: var(--col-w) minmax(0, 1fr); }
    .app-page:not(.left-pane) .app-top { grid-template-columns: auto minmax(0, 300px) minmax(0, 340px); column-gap: 14px; }
    .app-top { padding-right: 380px; }
    .marks { right: 16px; }
    .dock { left: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .ttl { font-size: 2.4rem; }
    .side-btn { display: grid; margin-top: 20px; }
    .app-page:not(.left-pane) .app-left {
        display: none;
        position: absolute; z-index: 92;
        left: 24px; top: calc(var(--top-h) + 4px); bottom: var(--dock-h);
        width: 340px; max-width: calc(100vw - 48px);
    }
    .app-page.side-open .app-left { display: flex; animation: slap .18s cubic-bezier(.2, 1.4, .5, 1); }
    .dm-main { grid-template-columns: minmax(0, 1fr); }
    .dm-info { display: grid; place-items: center; }
    .dm-about {
        display: none;
        position: fixed; z-index: 97; left: 24px; right: 24px; top: 10%; bottom: 10%;
        width: auto; max-width: 420px; margin: 0 auto; rotate: 0deg;
    }
    .dm-about.open { display: flex; animation: slap .18s cubic-bezier(.2, 1.4, .5, 1); }
    .dm-about-scrim { position: fixed; inset: 0; z-index: 96; background: color-mix(in srgb, var(--night-900) 35%, transparent); }
    .canvases-shell { --pad-w: 380px; }
    .canvases-shell.pad-wide { --pad-w: min(920px, calc(100vw - 48px)); }
}

@media (max-width: 759.98px) {
    .app-page {
        --top-h: 64px;
        --tabs-h: calc(78px + env(safe-area-inset-bottom, 0px));
        --content-h: calc(100dvh - var(--top-h) - 8px - var(--tabs-h) - 12px);
        height: 100dvh;
        grid-template-rows: var(--top-h) minmax(0, 1fr);
        row-gap: 8px;
        padding: 0 10px var(--tabs-h);
    }
    .app-page.left-pane { grid-template-columns: minmax(0, 1fr); }
    .app-page .app-top, .app-page:not(.left-pane) .app-top { display: flex; align-items: center; gap: 8px; padding: 8px 54px 0 2px; }
    .app-title { flex: 1; padding-top: 0; }
    .ttl { font-size: 2rem; padding-bottom: 2px; }
    .tsub { font-size: .85rem; margin-top: 0; }
    .crumbs { font-size: .95rem; }
    .crumbs .here { font-size: 1.5rem; }
    .side-btn { margin-top: 0; }
    .search-btn { display: grid; }
    .app-tbar { display: none; }
    .search-open .app-tbar { display: block; position: absolute; left: 10px; right: 10px; top: 66px; z-index: 97; padding: 0; }
    .search-open .wall-search { max-width: none; }

    /* the drawer covers the page, with a scrim to tap away */
    .app-page:not(.left-pane) .app-left {
        position: fixed; z-index: 97;
        left: 0; top: 0; bottom: var(--tabs-h);
        width: min(340px, 86vw); max-width: none;
        padding: 12px 10px; box-sizing: border-box;
        background: var(--p-wall, var(--wall));
        border-right: 2.5px solid var(--line);
    }
    .side-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 96; background: color-mix(in srgb, var(--night-900) 35%, transparent); }

    /* a list you pick from: the list, or what you picked, full screen */
    .left-pane .app-left, .left-pane .app-main { grid-row: 2; grid-column: 1; }
    .left-pane.pane-left .app-main, .left-pane:not(.pane-left) .app-left { display: none; }
    .dm-back { display: grid; place-items: center; width: 40px; height: 40px; margin: -4px 0 -4px -6px; flex-shrink: 0; border-radius: 50%; color: var(--ink); }
    .dm-back:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
    .dm-empty-back { display: inline-block; margin-top: 12px; }
    .dm-head { gap: 8px; padding: 10px 10px 8px; }
    .dm-name { font-size: 1.4rem; }

    /* the board keeps its 1024×640 world: pan.js drags and pinches it about in the port,
       under a mini-map and a toolbar that stay put */
    .canvas-port { display: block; position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; touch-action: none; }
    .canvas-port .canvas-frame { position: absolute; left: 0; top: 0; width: 1024px; transform-origin: 0 0; box-shadow: 0 0 0 7px var(--gray-300), 0 0 0 8px var(--gray-500); }
    .canvas-frame.panning .canvas-layer.live { pointer-events: none; }
    .canvas-mini {
        display: block; position: absolute; right: 10px; top: 10px; z-index: 6;
        width: 84px; height: 53px; overflow: hidden; touch-action: none; cursor: pointer;
        border: 2px solid var(--line); border-radius: 6px;
        background: var(--p-canvas, var(--paper)); box-shadow: 2px 2px 0 color-mix(in srgb, var(--line) 40%, transparent);
    }
    .pan-hint {
        display: block; position: absolute; left: 0; right: 0; bottom: 74px; z-index: 5;
        text-align: center; font-family: var(--font-marker); font-size: 1.3rem; color: var(--ink-soft);
        pointer-events: none; animation: hint-fade 6s ease forwards;
    }
    /* bookmarks → the bottom tab bar: same ribbons, same order */
    .marks {
        top: auto; bottom: 0; left: 0; right: 0;
        height: calc(78px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around; align-items: stretch; gap: 0;
        padding: 0 6px env(safe-area-inset-bottom, 0px); box-sizing: border-box;
        background: var(--paper); border-top: 2.5px solid var(--line);
    }
    /* the tab bar: wall · friends · inbox · settings — longer ribbons, no words; the
       picked one hangs lower but its arrow end stays inside the 78px bar */
    .bm, .bm:hover, .bm.on { width: 78px; max-width: 78px; height: auto; padding: 0; flex-direction: column; align-items: center; }
    .bm.wide-only { display: none; }
    .bm .rib, .bm:hover .rib { top: -2.5px; left: 50%; translate: -50% 0; width: 46px; height: 58px; filter: drop-shadow(2px 3px 0 var(--line)); }
    .bm.on .rib { height: 72px; }
    .bm .icon { margin-top: 13px; }
    .bm .tip { display: none; }
    .bm .unr { left: calc(50% + 6px); top: 6px; }

    /* the dock folds to your avatar, top-right; the voice strip sits above the tabs */
    .dock { left: auto; right: 8px; top: 10px; bottom: auto; width: auto; height: auto; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; }
    .dock-me-text, .dock-up { display: none; }
    .dock-me { flex: none; height: auto; min-height: 44px; padding: 2px; }
    .dock-me .av { width: 36px; height: 36px; font-size: 1.45rem; border-width: 2px; }
    .dock-pop, .dock-pop.theme-pop { position: fixed; top: 62px; bottom: auto; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 160px); overflow: auto; }
    .pop-theme { display: flex; }
    .dock-voice {
        position: fixed; left: 8px; right: 8px; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
        margin: 0; max-width: none; height: auto; min-height: 50px; padding: 4px 6px 4px 12px; border-radius: 20px;
        border: 2.5px solid var(--line); box-shadow: var(--shadow-hard);
    }
    .dock-voice a { flex: 1; max-width: none; }
    .dock-voice .ph { display: grid; width: 40px; height: 40px; background: none; color: inherit; }
    .dock-voice .ph.off { color: var(--danger); }
    .canvases-shell:has(.dock-voice) .app-page { padding-bottom: calc(var(--tabs-h) + 64px); }

    /* the notepad is a bottom sheet: half height keeps the board in view, "taller" fills */
    .notepad {
        top: auto; left: 0; right: 0; width: auto;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)); height: 58dvh;
        border-bottom: none; border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 24px color-mix(in srgb, var(--night-900) 25%, transparent);
    }
    .notepad.wide { top: 66px; height: auto; }
    .canvases-shell:has(.dock-voice) .notepad { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
    .notepad-size .icon { rotate: 90deg; }
    .notepad-head { padding-top: 4px; }
    .notepad-grab {
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 22px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0;
    }
    .notepad-grab span { width: 44px; height: 5px; border-radius: 3px; background: var(--ink-faint); }
}

/* ============ settings: sections down the left, the open one in the main area ============ */

a.pop-theme { text-decoration: none; }
.settings-page .search-results { position: absolute; left: 0; right: 0; z-index: 50; }
.settings-page .search-res { text-decoration: none; }

.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; overflow: auto; }
.set-link {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 2px 10px; box-sizing: border-box;
    border: none; border-radius: 10px; background: none;
    font: inherit; font-size: 1.1rem; color: var(--ink); text-align: left; text-decoration: none;
    cursor: pointer;
}
.set-link:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.set-link.on { background: var(--hi-yellow); box-shadow: inset 0 0 0 2px var(--line); color: var(--gray-900); }
.set-link.out { color: var(--danger); }
.set-grow { flex: 1; }

.set-main { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.set-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 16px 28px 10px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 20%, transparent); }
.set-head h2 { margin: 0; font-size: 2.6rem; }
.set-sub { flex: 1; font-size: 1rem; color: var(--ink-soft); }
.set-saved { display: flex; align-items: center; gap: 4px; font-size: .88rem; color: var(--m-green); }
.set-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 28px 24px; }
.set-body .lbl small { font-family: var(--font-hand); font-weight: 400; font-size: .88rem; color: var(--ink-soft); margin-left: 6px; }
.set-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.set-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.set-grid2 .span2 { grid-column: 1 / -1; }
.set-p { margin: 0 0 12px; color: var(--ink-soft); max-width: 46ch; }
.set-ok { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--m-green); }
.set-body .field select {
    width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink);
    padding: 8px 12px; border: 2px solid var(--line); border-radius: var(--wobble-3); background: var(--surface);
}
/* billing & subscription */
.set-plan { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 16px 18px; }
.set-plan .price { font-family: var(--font-marker); font-weight: 700; font-size: 1.75rem; color: var(--accent-strong); flex-shrink: 0; }
.set-plan b { font-size: 1.12rem; font-weight: 600; }
.set-plan small { font-size: .88rem; white-space: normal; }
.set-renew { font-size: .88rem; color: var(--ink-soft); margin: 10px 0 14px; }
.set-row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.set-card { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.set-card span { flex: 1; line-height: 1.15; }
.set-card small { display: block; font-size: .88rem; color: var(--ink-soft); }
.set-fine { font-size: .82rem; color: var(--ink-soft); margin-top: 8px; }
.set-receipt { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); font-size: .94rem; }
.set-receipt .when { flex: 1; }
.set-receipt .what { color: var(--ink-soft); }
.set-receipt b { font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; color: var(--accent-strong); min-width: 66px; text-align: right; }
.set-receipt .btn { min-height: 34px; padding: 0 10px; font-size: .88rem; }
.set-pw { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.set-pw .btn { align-self: flex-start; }

/* profile */
.set-stage {
    position: relative; height: 200px; display: grid; place-items: center;
    background: var(--surface); border: 2.5px solid var(--line); border-radius: 6px;
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.4px); background-size: 20px 20px;
}
.av.set-avatar { width: 140px; height: 140px; font-size: 5rem; border-width: 3px; }
.set-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.set-sw { width: 38px; height: 38px; padding: 0; border: 2.5px solid var(--line); border-radius: 50% 45% 55% 48%; cursor: pointer; }
.set-sw.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--line); }
.set-spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.set-spot { min-height: 110px; padding: 10px 12px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--surface); overflow: hidden; }
.set-spot .cap { font-family: var(--font-marker); font-weight: 700; font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 8px; }
.set-spot b { font-weight: 400; display: block; line-height: 1.1; }
.set-spot small { display: block; font-size: .8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-dockme, .set-chatme { display: flex; align-items: center; gap: 8px; min-width: 0; }
.set-dockme > span:last-child, .set-chatme > span:last-child { min-width: 0; }
.set-polaroid { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 2px; background: var(--white); color: var(--gray-900); box-shadow: 2px 4px 6px color-mix(in srgb, var(--black) 20%, transparent); rotate: -3deg; margin-left: 12px; }
.set-polaroid b { font-family: var(--font-marker); font-weight: 700; font-size: 1.1rem; }

/* look */
.set-palettes { display: flex; flex-wrap: wrap; gap: 12px; }
/* the line under the palette swatches: what "your own" means, and how to change it */
.own-hint { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 4px; font-size: .88rem; color: var(--ink-soft); }
.linkb {
    min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: .95rem; cursor: pointer;
    color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
/* "your own" swatch: the six theme parts at a glance */
.psw.custom { background: conic-gradient(from 45deg, var(--red-500), var(--orange-500), var(--yellow-500), var(--green-500), var(--blue-500), var(--purple-500), var(--pink-500), var(--red-500)); }
.psw.custom::after { background: var(--white); }
.set-patterns { display: flex; gap: 18px; }

/* voice */
.set-meter-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; }
.set-meter { flex: 1; height: 16px; border: 2px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); overflow: hidden; }
.set-meter-bar { width: 0; height: 100%; background: var(--m-green); transition: width .08s linear; }

/* Settings › voice & video: noise suppression (canvas "Noise suppression") */
.set-noise { margin-top: 22px; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, var(--line) 20%, transparent); }
.ns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ns .lbl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.ns .lbl small { margin-left: 0; }
.ns-opts { display: flex; flex-direction: column; gap: 8px; }
.ns-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px 8px 12px; box-sizing: border-box; border: 2.5px solid var(--line); border-radius: 14px 10px 16px 12px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ns-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--note) 30%, var(--paper)); }
.ns-opt.on { background: var(--note); box-shadow: var(--shadow-hard); }
.ns-opt:disabled { cursor: default; opacity: .55; border-style: dashed; }
.ns-dot { width: 22px; height: 22px; border: 2.5px solid var(--line); border-radius: 50% 45% 55% 48%; box-sizing: border-box; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); }
.ns-opt.on .ns-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.ns-t { flex: 1; min-width: 0; line-height: 1.2; }
.ns-t b { display: block; font-weight: 400; font-size: 1.12rem; }
.ns-t small { display: block; font-size: .88rem; color: var(--ink-soft); }
.ns-tape { position: absolute; right: 12px; top: -11px; padding: 0 8px; font-size: .8rem; rotate: 3deg; color: var(--gray-900); background: var(--green-200); border-left: 2px dashed color-mix(in srgb, var(--black) 20%, transparent); border-right: 2px dashed color-mix(in srgb, var(--black) 20%, transparent); }
.ns-note { font-size: .88rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.3; }
.ns-card { padding: 12px 14px 14px; background: var(--surface); border: 2.5px solid var(--line); border-radius: 6px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--line) 30%, transparent); }
.ns-wave { position: relative; display: flex; align-items: center; gap: 2px; height: 96px; padding: 0 6px; margin: 6px 0 8px; border: 2px solid var(--line); border-radius: 10px 7px 11px 8px; background: var(--paper); overflow: hidden; }
.ns-bar { flex: 1; min-width: 2px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.ns-bar i { display: block; border-radius: 2px; transition: height .25s; }
.ns-v { background: var(--ink); }
.ns-n { background: var(--m-orange); }
.ns-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 12px; text-align: center; font-size: .94rem; color: var(--ink-soft); }
.ns-key { display: flex; gap: 14px; font-size: .8rem; color: var(--ink-soft); align-items: center; flex-wrap: wrap; }
.ns-key span { display: flex; align-items: center; gap: 5px; }
.ns-key i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.ns-key .ns-removed { margin-left: auto; }
.ns-seg { max-width: none; margin: 10px 0; }
.ns-seg button { padding: 0 10px; white-space: nowrap; }
.ns-seg button:disabled { cursor: default; opacity: .55; }
.ns-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ns-row .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.ns-rec.on { background: var(--m-red); color: var(--white); }
@media (max-width: 1100px) {
    .ns { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ns-wave { height: 80px; }
}
.set-cam { width: 230px; margin: 16px auto 10px; padding: 10px 10px 8px; background: var(--white); color: var(--gray-900); box-shadow: 3px 6px 8px color-mix(in srgb, var(--black) 20%, transparent); rotate: -2deg; text-align: center; }
.set-cam b { font-family: var(--font-marker); font-weight: 700; font-size: 1.4rem; }
.set-cam-pic { position: relative; height: 160px; background: var(--night-500); display: grid; place-items: center; color: var(--gray-300); overflow: hidden; }
.set-cam-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.set-cam-pic video.off { display: none; }
.set-cam-pic span { position: relative; }

/* accessibility */
.set-a11y-demo { position: relative; height: 170px; border: 2.5px solid var(--line); border-radius: 10px; background: var(--wall); background-image: radial-gradient(color-mix(in srgb, var(--gray-900) 30%, transparent) 1px, transparent 1.4px); background-size: 12px 12px; }
.set-a11y-note {
    position: absolute; left: 28px; top: 34px; width: 130px; min-height: 90px; padding: 20px 10px 10px; box-sizing: border-box;
    text-align: center; background: var(--p-note); color: var(--p-note-ink, var(--gray-900));
    border-radius: 2px 2px 20px 2px / 2px 2px 12px 2px; box-shadow: 3px 6px 6px color-mix(in srgb, var(--black) 20%, transparent); rotate: -2deg;
    transition: rotate .2s ease;
}
.set-a11y-note:hover { rotate: 3deg; }
.set-a11y-note.tilt { left: 190px; top: 40px; rotate: 1.5deg; }
.set-a11y-note b { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.set-a11y-note small { font-size: .8rem; opacity: .75; }

/* help */
.set-tour {
    display: flex; align-items: center; gap: 20px; max-width: 720px; padding: 20px 22px; box-sizing: border-box;
    background: var(--note); color: var(--ink); border: 2.5px solid var(--line); border-radius: 6px 14px 8px 12px;
    box-shadow: 3px 4px 0 color-mix(in srgb, var(--line) 18%, transparent); rotate: -.6deg;
}
.set-tour > svg { flex: none; }
.set-tour-text { flex: 1; min-width: 0; }
.set-tour-text b { display: block; font-size: 1.15rem; }
.set-tour-text small { display: block; margin-top: 2px; font-size: .92rem; color: var(--ink-soft); }
.set-tour .btn { flex: none; }

/* help › leaving Pento */
.leave-lbl { margin-top: 28px; color: var(--danger); }
.leave-card {
    display: flex; align-items: center; gap: 18px; max-width: 720px; padding: 16px 20px; box-sizing: border-box;
    border: 2.5px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--surface);
}
.leave-card.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.leave-card > svg { flex: none; }
.leave-card.danger > svg { color: var(--danger); }
.leave-text { flex: 1; min-width: 0; }
.leave-text b { display: block; font-size: 1.12rem; }
.leave-text small { display: block; margin-top: 2px; font-size: .92rem; color: var(--ink-soft); }
.leave-card + .leave-card { margin-top: 12px; }
.leave-card .btn { flex: none; }

/* the "sure?" dialog (DeleteAccountConfirm): settings › leaving Pento + the /delete-account page */
.delcf-scrim { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--gray-900) 45%, transparent); }
.delcf-pop {
    position: fixed; z-index: 91; left: 50%; top: 50%; translate: -50% -50%;
    width: min(580px, calc(100vw - 32px));
    max-height: calc(100vh - 48px); overflow: auto;
    box-sizing: border-box; padding: 22px 26px;
    background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.3;
    border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px / 16px 12px 18px 14px;
    box-shadow: 6px 7px 0 color-mix(in srgb, var(--ink) 82%, transparent);
    rotate: -.3deg;
}
.delcf-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.delcf-hi { background: linear-gradient(104deg, transparent .9%, var(--red-100) 2.4%, var(--red-100) 97%, transparent 98.5%); }
.delcf-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.delcf-head-text { min-width: 0; }
.delcf-head .delcf-mk { display: block; font-size: 1.9rem; }
.delcf-sub { display: block; margin-top: 2px; font-size: .95rem; color: var(--ink-soft); }
.delcf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.delcf-gone { color: var(--danger); margin: 0 0 4px; }
.delcf-kept { color: var(--m-green); margin: 0 0 4px; }
.delcf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.delcf-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; line-height: 1.35; }
.delcf-list li svg { flex: none; margin-top: 2px; }
.delcf-cols .delcf-list li svg { color: var(--danger); }
.delcf-cols div:last-child .delcf-list li svg { color: var(--m-green); }
.delcf-grace { margin: 14px 0 0; padding: 10px 14px; background: var(--note); border: 2px solid var(--line); border-radius: 6px 12px 8px 10px; font-size: .95rem; }
.delcf .field { margin-top: 14px; }
.delcf .field b { color: var(--ink); }
.delcf .field input { background: var(--surface); }
.delcf-acts { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.delcf-bye { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10px 10px 4px; }
.delcf-bye .delcf-mk { font-size: 2rem; margin-top: 4px; }
.delcf-bye p { margin: 0; max-width: 46ch; }
.delcf-bye .btn { margin-top: 8px; }
/* phones: the same dialog as a bottom sheet */
@media (max-width: 759.98px) {
    .delcf-pop {
        left: 0; right: 0; bottom: 0; top: auto; translate: 0 0;
        width: 100%; max-height: 86vh; padding: 10px 18px 24px;
        border-bottom: none; border-radius: 22px 26px 0 0;
        box-shadow: 0 -4px 0 color-mix(in srgb, var(--ink) 15%, transparent);
        rotate: 0deg;
    }
    .delcf-cols { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
    .delcf-head .delcf-mk { font-size: 1.6rem; }
    .delcf-acts { flex-direction: column-reverse; align-items: stretch; }
}

/* the "clear out your stuff" dialog (ClearOutDialog): settings › leaving Pento + the /clear-out page */
.co-scrim { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--gray-900) 45%, transparent); }
.co-card {
    position: fixed; z-index: 91; left: 50%; top: 50%; translate: -50% -50%;
    width: min(700px, calc(100vw - 32px));
    max-height: min(800px, calc(100vh - 48px)); overflow: auto;
    box-sizing: border-box; padding: 22px 26px 20px;
    background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.3;
    border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px / 16px 12px 18px 14px;
    box-shadow: 6px 7px 0 color-mix(in srgb, var(--ink) 82%, transparent);
    rotate: -.25deg;
}
.co-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.co-hi-red { background: linear-gradient(104deg, transparent .9%, var(--red-100) 2.4%, var(--red-100) 97%, transparent 98.5%); }
.co-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.co-head-text { min-width: 0; }
.co-head .co-mk { display: block; font-size: 2rem; }
.co-sub { display: block; margin-top: 2px; font-size: .95rem; color: var(--ink-soft); }
.co-body { margin: 12px -8px 0; padding: 0 8px 4px; }
.co-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.co-linkb {
    font: inherit; font-size: .95rem; color: var(--accent); background: none; border: none; padding: 0 4px; min-height: 44px;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.co-lbl { font-family: var(--font-marker); font-weight: 700; font-size: 1.35rem; margin: 10px 0 4px; }
.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.co-row {
    font: inherit; color: var(--ink); text-align: left;
    display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 60px; padding: 9px 10px; box-sizing: border-box;
    background: var(--surface); border: 2px solid var(--line);
    border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px; cursor: pointer;
}
.co-row:hover { background: color-mix(in srgb, var(--hi-yellow) 22%, var(--surface)); }
.co-row[aria-checked="true"] { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border-color: var(--danger); box-shadow: 2px 2px 0 var(--danger); }
.co-box {
    flex: none; width: 24px; height: 24px; margin-top: 1px;
    display: grid; place-items: center; border: 2.5px solid var(--line); border-radius: 5px 7px 4px 6px;
    background: var(--paper); color: transparent;
}
.co-row[aria-checked="true"] .co-box { background: var(--danger); border-color: var(--danger); color: var(--white); }
.co-row-text { flex: 1; min-width: 0; }
.co-t { font-size: 1.06rem; line-height: 1.15; }
.co-n { font-size: .88rem; color: var(--ink-soft); }
.co-row[aria-checked="true"] .co-n { color: var(--danger); }
.co-w { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.25; }
.co-row-ic { color: var(--ink-soft); margin-top: 1px; flex: none; }
.co-stay {
    margin-top: 12px; padding: 10px 14px;
    background: color-mix(in srgb, var(--m-green) 9%, var(--paper));
    border: 2px solid var(--m-green); border-radius: 8px 12px 7px 11px; font-size: .95rem;
}
.co-stay-head { font-weight: 600; color: var(--m-green); margin-bottom: 4px; }
.co-list { margin: 0 0 5px; padding: 0; list-style: none; display: grid; gap: 5px; }
.co-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; }
.co-list li svg { flex: none; margin-top: 2px; }
.co-stay .small { margin: 4px 0 0; }
.co-gone { color: var(--danger); }
.co-kept { color: var(--m-green); }
.co-sum { padding: 10px 14px; border: 2.5px dashed var(--danger); border-radius: 12px 9px 13px 8px; background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.co-sum-head { font-size: 1rem; color: var(--danger); font-weight: 600; margin-bottom: 6px; }
.co-sum .co-list { margin-bottom: 0; }
.co-note {
    margin-top: 10px; padding: 10px 14px; background: var(--note);
    border: 2px solid var(--line); border-radius: 6px 12px 8px 10px; rotate: -.4deg; font-size: .95rem;
}
.co-note.tilt { rotate: .3deg; }
.co-note a { color: var(--accent); }
.co-field { margin-top: 14px; }
.co-field b { color: var(--ink); }
.co-field input { background: var(--surface); }
.co-foot {
    display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px;
    border-top: 2px dashed color-mix(in srgb, var(--line) 60%, transparent); flex-wrap: wrap;
}
.co-count { flex: 1; font-size: .95rem; color: var(--ink-soft); }
.co-bye { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 10px 4px; }
.co-bye .co-mk { font-size: 2.1rem; margin-top: 4px; }
.co-bye p { margin: 0; max-width: 46ch; }
.co-bye .btn { margin-top: 8px; }
/* phones: the same dialog as a bottom sheet */
@media (max-width: 759.98px) {
    .co-card {
        left: 0; right: 0; bottom: 0; top: auto; translate: 0 0;
        width: 100%; max-height: 88vh; padding: 10px 18px 24px;
        border-bottom: none; border-radius: 22px 26px 0 0;
        box-shadow: 0 -4px 0 color-mix(in srgb, var(--ink) 15%, transparent);
        rotate: 0deg;
    }
    .co-head .co-mk { font-size: 1.7rem; }
    .co-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .co-foot { flex-direction: column-reverse; align-items: stretch; }
    .co-count { text-align: center; }
}

/* what the accessibility + text size settings do, app-wide */
.canvases-shell.easy-read {
    --font-marker: system-ui, "Segoe UI", Roboto, sans-serif;
    --font-hand: system-ui, "Segoe UI", Roboto, sans-serif;
}
.canvases-shell.easy-read .ttl, .canvases-shell.easy-read .set-head h2 { font-size: 2.2rem; }
html:has(.canvases-shell.text-s) { font-size: 93.75%; }
html:has(.canvases-shell.text-l) { font-size: 112.5%; }
.canvases-shell.calm *, .canvases-shell.calm *::before, .canvases-shell.calm *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}
.canvases-shell.calm *:hover { rotate: none; }
.canvases-shell.calm .set-a11y-note, .canvases-shell.calm .set-tour { rotate: 0deg; }

@media (max-width: 1100px) {
    .set-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 759.98px) {
    .set-head { padding: 12px 16px 8px; }
    .set-head h2 { font-size: 2rem; }
    .set-body { padding: 12px 16px 20px; }
    .set-grid2, .set-spots { grid-template-columns: minmax(0, 1fr); }
    .set-patterns { flex-wrap: wrap; }
    .set-tour { flex-wrap: wrap; gap: 14px; rotate: 0deg; }
    .canvases-shell.easy-read .set-head h2 { font-size: 1.6rem; }
}

/* ============ board settings (shares the settings shell above) ============ */

.map-head a.ibtn { margin-left: auto; color: var(--ink); }
.map-head a.ibtn + .ibtn { margin-left: 0; }
.bs-chip {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 6px 8px; margin-bottom: 8px; box-sizing: border-box;
    border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px;
    background: var(--surface); box-shadow: var(--shadow-hard);
    font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.bs-chip:hover { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }
.bs-chip-t { flex: 1; min-width: 0; line-height: 1.1; }
.bs-chip-t b { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-chip-t small, .bs-row-t small { display: block; font-size: .82rem; color: var(--ink-soft); }
.bs-chip-sw { display: flex; flex-direction: column; align-items: center; font-size: .78rem; color: var(--ink-soft); }
.bs-pop { position: absolute; left: 12px; right: 12px; top: 84px; z-index: 100; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 10px; max-height: 70vh; }
.bs-pop-head { display: flex; align-items: baseline; justify-content: space-between; }
.bs-pop-list { overflow: auto; min-height: 0; }
.bs-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.bs-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.bs-row.on { background: var(--hi-yellow); color: var(--gray-900); }
.bs-row-t { flex: 1; min-width: 0; line-height: 1.15; }
.bs-tag { font-size: .78rem; padding: 0 7px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 10%, var(--paper)); }
.bs-tag.own { background: var(--amber-500); color: var(--navy); }
.app-left { position: relative; }

.bs-wall { position: relative; height: 200px; display: grid; place-items: center; border: 2.5px solid var(--line); border-radius: 10px; background: var(--wall); background-image: radial-gradient(color-mix(in srgb, var(--gray-900) 30%, transparent) 1px, transparent 1.4px); background-size: 12px 12px; }
.bs-sticky {
    position: relative; width: 170px; min-height: 120px; padding: 30px 12px 12px; box-sizing: border-box; text-align: center;
    background: var(--p-note); color: var(--p-note-ink, var(--gray-900));
    border-radius: 2px 2px 20px 2px / 2px 2px 12px 2px; box-shadow: 3px 6px 6px color-mix(in srgb, var(--black) 20%, transparent); rotate: -1.5deg;
}
.bs-sticky::before { content: ""; position: absolute; top: -8px; left: 50%; translate: -50% 0; width: 20px; height: 20px; border-radius: 50%; background: var(--p-accent); box-shadow: 0 2px 3px color-mix(in srgb, var(--black) 30%, transparent); }
.bs-sticky b { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 1.8rem; line-height: 1; overflow-wrap: anywhere; }
.bs-sticky small { font-size: .85rem; opacity: .75; }
.bs-sticky.small { position: absolute; left: 24px; top: 30px; width: 120px; min-height: 80px; padding: 22px 8px 8px; }
.bs-sticky.small b { font-size: 1.3rem; }
.bs-canvas { position: relative; height: 180px; border: 2.5px solid var(--line); border-radius: 8px; background-color: var(--p-canvas); overflow: hidden; }
.bs-canvas.dots { background-image: radial-gradient(color-mix(in srgb, var(--p-ink, var(--gray-900)) 45%, transparent) 1px, transparent 1.4px); background-size: 12px 12px; }
.bs-canvas.grid { background-image: linear-gradient(color-mix(in srgb, var(--blue-500) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--blue-500) 30%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.bs-canvas.lines { background-image: linear-gradient(color-mix(in srgb, var(--blue-500) 35%, transparent) 1px, transparent 1px); background-size: 100% 14px; }
.bs-bubble { position: absolute; left: 190px; top: 50px; width: 160px; height: 80px; display: grid; place-items: center; border: 3px dashed var(--p-accent); border-radius: 50% 45% 55% 48%; color: var(--p-ink, var(--gray-900)); font-family: var(--font-marker); font-weight: 700; font-size: 1.4rem; }

.bs-roles { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
.bs-role {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 2px 8px; box-sizing: border-box;
    border: none; border-radius: 10px; background: none; font: inherit; font-size: 1.02rem; color: var(--ink); text-align: left; cursor: pointer;
}
.bs-role:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.bs-role.on { background: color-mix(in srgb, var(--hi-yellow) 55%, var(--paper)); box-shadow: inset 0 0 0 2px var(--line); }
.bs-role-n { margin-left: auto; font-size: .85rem; color: var(--ink-soft); }
.bs-tape {
    display: inline-block; padding: 0 8px; font-size: .9rem; line-height: 1.5; rotate: -2deg; white-space: nowrap; color: var(--gray-900);
    border-left: 2px dashed color-mix(in srgb, var(--black) 20%, transparent); border-right: 2px dashed color-mix(in srgb, var(--black) 20%, transparent);
}
.bs-role-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.bs-role-head .field { width: 240px; }
.bs-mini { font-size: .92rem; color: var(--ink-soft); margin-bottom: 4px; }
.set-sw.sm { width: 30px; height: 30px; }
.bs-order { display: flex; gap: 2px; }
.bs-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.bs-danger, .bs-danger small { color: var(--danger) !important; }

.bs-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.bs-count { margin-left: auto; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-fchip { min-height: 34px; padding: 2px 12px; border: 2px solid var(--line); border-radius: 18px 14px 16px 12px; background: var(--surface); font: inherit; font-size: .92rem; color: var(--ink); cursor: pointer; }
.bs-fchip:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }
.bs-fchip.on { background: var(--navy); color: var(--amber-200); }
.bs-member { border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.bs-member-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 6px 8px; border: none; border-radius: 10px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.bs-member-head:hover, .bs-member.open .bs-member-head { background: color-mix(in srgb, var(--hi-yellow) 22%, transparent); }
.bs-member-n { width: 220px; flex-shrink: 0; min-width: 0; line-height: 1.15; color: var(--ink); text-decoration: none; }
.bs-member-n b { display: block; font-weight: 400; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-member-n small { display: block; font-size: .85rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-tapes { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.bs-member-body { display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 16px 58px; }
.bs-nick { max-width: 260px; }
.bs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bs-reason { width: 230px; font-size: .95rem; padding: 6px 10px; }

.bs-card { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; padding: 14px 16px; border: 2.5px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--surface); }
.bs-invite { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 4px 6px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); flex-wrap: wrap; }
.bs-code { font-family: var(--font-mono); font-size: .95rem; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.bs-inv-by { width: 140px; color: var(--ink-soft); }
.bs-inv-use { width: 100px; }
.bs-inv-exp { color: var(--ink-soft); }

.bs-ow { max-width: 620px; }
.bs-ow-row { display: flex; align-items: center; gap: 6px; min-height: 50px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.bs-ow-row.head { min-height: 36px; border-bottom-style: solid; }
.bs-ow-who { width: 150px; flex-shrink: 0; }
.bs-ow-h { flex: 1; text-align: center; font-size: .85rem; color: var(--ink-soft); line-height: 1.1; }
.bs-ow-c { flex: 1; display: flex; justify-content: center; }
.bs-tri { width: 44px; height: 38px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.bs-tri.allow { background: var(--m-green); color: var(--white); }
.bs-tri.deny { background: var(--red-600); color: var(--white); }
.bs-tri.inherit { border-style: dashed; border-color: var(--ink-faint); }
.bs-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: .88rem; color: var(--ink-soft); }
.bs-legend > span { display: flex; align-items: center; gap: 6px; }
.bs-legend .bs-tri { width: 26px; height: 24px; border-radius: 7px; cursor: default; }

.bs-audit { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.bs-audit-t { flex: 1; line-height: 1.3; }
.bs-audit-t b { font-weight: 400; }

.bs-dz { max-width: 760px; margin-bottom: 18px; padding: 14px 18px; border: 2.5px solid var(--danger); border-radius: 12px 18px 14px 16px / 16px 12px 18px 14px; background: color-mix(in srgb, var(--danger) 5%, var(--paper)); }
.bs-dz h3 { margin: 0 0 4px; font-size: 1.7rem; }
.bs-dz-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bs-dz-row .field { width: 280px; }
.bs-dz select { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); padding: 8px 12px; border: 2px solid var(--line); border-radius: var(--wobble-3); background: var(--surface); }

@media (max-width: 1100px) {
    .bs-roles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .bs-perms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759.98px) {
    .bs-member-body { padding-left: 12px; }
    .bs-member-n { width: auto; flex: 1; }
    .bs-tapes { display: none; }
    .bs-ow-who { width: 96px; }
    .bs-tri { width: 38px; }
}
.bs-dash { width: 12px; height: 2.5px; border-radius: 2px; background: currentColor; }

/* photo avatars: the photo fills whatever avatar shape it sits in */
.has-photo { position: relative; }
.face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; user-select: none; }
.has-photo > .dot { z-index: 1; }
.set-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.set-file { position: relative; cursor: pointer; }
.set-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bs-timed { font-size: .82rem; white-space: nowrap; padding: 1px 8px; border-radius: 8px; background: var(--amber-200); color: var(--yellow-800); }
.bs-wide-seg { max-width: 520px; }
.bs-word { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 2px 0 12px; border: 2px solid var(--line); border-radius: 18px 14px 16px 12px; background: var(--surface); font-size: .95rem; }
.bs-word button { width: 30px; height: 30px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.bs-word button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.bs-word-add { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
.bs-word-add input { flex: 1; min-width: 0; font-size: 1rem; padding: 6px 12px; }
.set-quiet { display: flex; gap: 12px; padding: 8px 0 4px 54px; }
.set-quiet .field { width: 140px; }
.set-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.set-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.set-dot.ok { background: var(--m-green); }
.set-dot.warn { background: var(--m-orange); }
.set-dot.bad { background: var(--danger); }
.bs-pings { font: inherit; font-size: .95rem; color: var(--ink); padding: 5px 10px; border: 2px solid var(--line); border-radius: var(--wobble-3); background: var(--surface); }
.about-block { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.about-block.ask { padding: 10px 12px; border: 2.5px dashed var(--danger); border-radius: 12px 16px 10px 14px; }
.about-block.ask .lbl { color: var(--danger); margin: 0; }
.about-block .btn { align-self: flex-start; }
.about-block-row { display: flex; gap: 8px; }

/* ============ loading screen (log in → wall) ============
   One 4s loop: the pen writes the name, the underline follows, three boards drop in and
   get pinned, the line under it cycles, then it fades and starts again. Resting styles are
   the finished picture, so calm (reduce motion) just switches the animations off. */

.loading-screen {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center;
    padding: 16px;
    background: var(--wall);
    animation: loading-in .2s ease-out;
    transition: opacity .4s ease;
}
.loading-screen.leaving { opacity: 0; pointer-events: none; }
@keyframes loading-in { from { opacity: 0; } }

.loading-frame {
    position: relative;
    width: min(760px, 100%);
    padding: clamp(40px, 8vw, 70px) 16px 48px;
    box-sizing: border-box;
    color: var(--gray-900);
    background: linear-gradient(160deg, color-mix(in srgb, var(--white) 45%, transparent) 0%, transparent 35%), var(--snow);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 7px var(--gray-300), 0 0 0 8px var(--gray-500), 0 18px 40px color-mix(in srgb, var(--night-900) 28%, transparent);
}
.loading-frame::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(var(--gray-900) 1.1px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .14;
    pointer-events: none;
}

.loading-stage { position: relative; display: flex; flex-direction: column; align-items: center; animation: loading-loop 4s ease-in-out infinite; }
.loading-name { position: relative; rotate: -3deg; }
.loading-word {
    display: block;
    font-family: var(--font-logo); font-weight: 700; line-height: 1;
    font-size: clamp(4rem, 14vw, 6.75rem);
    animation: loading-write 4s linear infinite;
}
.loading-pen {
    position: absolute; left: 100%; top: 6%;
    width: 64px; height: 64px; margin-left: -14px;
    fill: none; stroke: var(--gray-900); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
    opacity: 0;
    animation: loading-pen 4s ease-in-out infinite;
}
.loading-under { display: block; width: 100%; height: 22px; margin-top: -6px; fill: none; stroke: var(--blue-500); stroke-width: 5; stroke-linecap: round;
    stroke-dasharray: 100; animation: loading-under 4s ease-out infinite; }

.loading-notes { display: flex; justify-content: center; gap: clamp(16px, 6vw, 48px); margin-top: 48px; }
.loading-note {
    position: relative;
    width: clamp(90px, 24vw, 132px); aspect-ratio: 132 / 112;
    padding: 30px 16px 12px; box-sizing: border-box;
    background: linear-gradient(180deg, color-mix(in srgb, var(--black) 4%, transparent), transparent 22%), var(--p-note);
    border-radius: 2px 2px 26px 2px / 2px 2px 14px 2px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 4px 10px 14px -6px color-mix(in srgb, var(--black) 35%, transparent);
}
.loading-note svg { display: block; width: 100%; aspect-ratio: 100 / 56; fill: none; stroke-dasharray: 100; stroke: var(--p-note-ink); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.loading-tack {
    position: absolute; top: -9px; left: 50%; margin-left: -12px;
    width: 24px; height: 24px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--white) 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, var(--black) 30%, var(--p-accent)));
    box-shadow: 0 3px 4px color-mix(in srgb, var(--black) 35%, transparent);
}
.loading-note.n1 { rotate: -3deg; animation: loading-drop1 4s ease-out infinite; }
.loading-note.n2 { rotate: 2deg; margin-top: -14px; animation: loading-drop2 4s ease-out infinite; }
.loading-note.n3 { rotate: -1deg; margin-top: 6px; animation: loading-drop3 4s ease-out infinite; }
.n1 .loading-tack { animation: loading-tack1 4s ease-out infinite; }
.n2 .loading-tack { animation: loading-tack2 4s ease-out infinite; }
.n3 .loading-tack { animation: loading-tack3 4s ease-out infinite; }
.n1 svg { animation: loading-ink1 4s linear infinite; }
.n2 svg { animation: loading-ink2 4s linear infinite; }
.n3 svg { animation: loading-ink3 4s linear infinite; }

.loading-say {
    position: relative; height: 40px; margin-top: 36px;
    text-align: center;
    font-family: var(--font-marker); font-weight: 700; font-size: 2rem; line-height: 40px;
    color: var(--gray-600);
}
.say-moving { position: absolute; left: 0; right: 0; opacity: 0; }
.say-moving.s1 { animation: loading-say1 4s ease-in-out infinite; }
.say-moving.s2 { animation: loading-say2 4s ease-in-out infinite; }
.say-moving.s3 { animation: loading-say3 4s ease-in-out infinite; }
.say-calm { display: none; }
.loading-dots span { display: inline-block; animation: loading-breathe 1.4s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
.loading-slow { position: relative; margin: 8px 0 0; text-align: center; font-size: 1.05rem; color: var(--gray-600); }
.loading-slow a { color: var(--blue-700); }

@keyframes loading-loop { 0%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes loading-write { 0% { clip-path: inset(-20% 100% -20% 0); } 26%, 100% { clip-path: inset(-20% 0 -20% 0); } }
@keyframes loading-pen {
    0% { left: 0; transform: translateY(0); opacity: 1; }
    7% { transform: translateY(-10px); }
    13% { transform: translateY(8px); }
    19% { transform: translateY(-8px); }
    26% { left: 100%; transform: translateY(4px); opacity: 1; }
    32%, 100% { left: 100%; transform: translate(30px, -30px); opacity: 0; }
}
@keyframes loading-under { 0%, 26% { stroke-dashoffset: 100; } 38%, 100% { stroke-dashoffset: 0; } }
@keyframes loading-drop1 { 0%, 30% { opacity: 0; transform: translateY(-70px) scale(1.12); } 38% { opacity: 1; transform: none; } 41% { transform: translateY(-6px); } 44%, 100% { opacity: 1; transform: none; } }
@keyframes loading-drop2 { 0%, 37% { opacity: 0; transform: translateY(-70px) scale(1.12); } 45% { opacity: 1; transform: none; } 48% { transform: translateY(-6px); } 51%, 100% { opacity: 1; transform: none; } }
@keyframes loading-drop3 { 0%, 44% { opacity: 0; transform: translateY(-70px) scale(1.12); } 52% { opacity: 1; transform: none; } 55% { transform: translateY(-6px); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes loading-tack1 { 0%, 39% { transform: scale(0); } 43% { transform: scale(1.35); } 46%, 100% { transform: scale(1); } }
@keyframes loading-tack2 { 0%, 46% { transform: scale(0); } 50% { transform: scale(1.35); } 53%, 100% { transform: scale(1); } }
@keyframes loading-tack3 { 0%, 53% { transform: scale(0); } 57% { transform: scale(1.35); } 60%, 100% { transform: scale(1); } }
@keyframes loading-ink1 { 0%, 44% { stroke-dashoffset: 100; } 56%, 100% { stroke-dashoffset: 0; } }
@keyframes loading-ink2 { 0%, 51% { stroke-dashoffset: 100; } 63%, 100% { stroke-dashoffset: 0; } }
@keyframes loading-ink3 { 0%, 58% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes loading-say1 { 0% { opacity: 0; transform: translateY(8px); } 4%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes loading-say2 { 0%, 31% { opacity: 0; transform: translateY(8px); } 36%, 58% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes loading-say3 { 0%, 61% { opacity: 0; transform: translateY(8px); } 66%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes loading-breathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* calm: the finished picture, still; only the dots breathe */
.loading-screen.calm .loading-stage, .loading-screen.calm .loading-stage * { animation: none; }
.loading-screen.calm .loading-pen, .loading-screen.calm .say-moving { display: none; }
.loading-screen.calm .say-calm { display: inline; }
@media (prefers-reduced-motion: reduce) {
    .loading-stage, .loading-stage * { animation: none !important; }
    .loading-pen, .say-moving { display: none; }
    .say-calm { display: inline; }
}

/* ============ find a community: community servers pinned up as stickies ============
   Filters in the left column (a drawer on smaller screens), the corkboard in the main area,
   the about sticky floating over its right side — a bottom sheet on phones. */

.cx-filters { display: flex; flex-direction: column; padding: 6px 18px 18px; overflow: auto; }
.cx-filters .lbl.first { margin-top: 12px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chip {
    flex-shrink: 0; min-height: 36px; padding: 2px 12px; font: inherit; font-size: .95rem; white-space: nowrap; cursor: pointer;
    background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: 18px 14px 16px 12px;
}
.cx-chip:hover { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }
.cx-chip.on { background: var(--ink); color: var(--paper); }
.cx-own { margin: auto 0 0; padding: 12px; font-size: .9rem; color: var(--ink-soft); border: 2px dashed color-mix(in srgb, var(--line) 40%, transparent); border-radius: 12px; }

.cx-cork {
    position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
    background: var(--p-canvas, var(--surface));
    box-shadow: 0 0 0 7px var(--gray-300), 0 0 0 8px var(--gray-500), 0 14px 30px color-mix(in srgb, var(--night-900) 25%, transparent);
}
.cx-cork::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--p-ink, var(--ink)) 1.1px, transparent 1.5px); background-size: 26px 26px; opacity: .13; }
.cx-phone { display: none; }
.cx-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 22px 4px; }
.cx-count { font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; color: var(--p-ink, var(--ink)); }
.cx-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 30px; }
/* the list is each server's post-it as it hangs on a wall (.pin.board, custom notes too), laid in a grid */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); justify-items: center; align-items: center; gap: 44px 20px; padding-top: 12px; }
.pin.board.cx-note { position: relative; transform: none; touch-action: manipulation; border: none; font: inherit; box-sizing: border-box; }
.pin.board.cx-note:focus-visible { rotate: 0deg; scale: 1.04; }
.pin.board.cx-note.on { outline: 3px solid var(--line); outline-offset: 5px; }
.cx-vdot { position: absolute; left: -8px; top: -10px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; line-height: 20px; font-size: .75rem; border-radius: 10px; background: var(--green-500); color: var(--white); rotate: -5deg; box-shadow: 0 2px 0 var(--gray-900); }
.cx-note .cx-in { z-index: 3; top: -10px; right: -10px; }
.cx-about .cx-tags { margin-top: 10px; }
.cx-about .cx-fr { margin-top: 8px; font-size: .9rem; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-tag { font-size: .75rem; line-height: 20px; padding: 0 8px; white-space: nowrap; border-radius: 10px; background: color-mix(in srgb, var(--white) 60%, transparent); border: 1.5px solid color-mix(in srgb, var(--gray-900) 35%, transparent); }
.cx-fr { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.cx-faces { display: flex; }
.cx-face { width: 22px; height: 22px; margin-left: -6px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--paper); font-family: var(--font-marker); font-weight: 700; font-size: .85rem; color: var(--white); overflow: hidden; }
.cx-face:first-child { margin-left: 0; }
.cx-face img { width: 100%; height: 100%; object-fit: cover; }
.cx-st { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; font-size: .82rem; opacity: .9; }
.cx-voice { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; line-height: 20px; border-radius: 10px; background: color-mix(in srgb, var(--green-500) 22%, transparent); color: var(--green-900); }
.cx-in { position: absolute; top: 10px; right: 10px; padding: 0 8px; line-height: 20px; font-size: .75rem; border-radius: 10px; background: var(--navy); color: var(--amber-200); rotate: 4deg; }
.cx-empty { padding: 50px 10px; text-align: center; color: var(--ink-soft); }
.cx-empty .mk { font-family: var(--font-marker); font-weight: 700; font-size: 2rem; rotate: -2deg; }

.cx-scrim { display: none; }
.cx-about {
    position: absolute; right: 30px; top: 70px; z-index: 20; width: 360px; max-height: calc(100% - 90px);
    display: flex; flex-direction: column; overflow: hidden;
}
.cx-band { height: 14px; flex-shrink: 0; background: var(--p-note); border-bottom: 2.5px solid var(--line); }
.cx-about-in { padding: 14px 18px 16px; overflow: auto; }
.cx-about-head { display: flex; align-items: flex-start; gap: 8px; }
.cx-about-head > div { flex: 1; min-width: 0; }
.cx-about-nm { margin: 0; font-family: var(--font-marker); font-weight: 700; font-size: 2.4rem; line-height: .95; overflow-wrap: anywhere; }
.cx-about-st { margin-top: 4px; font-size: .88rem; color: var(--ink-soft); }
.cx-about-ab { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.25; }
.cx-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chans span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; font-size: .9rem; background: var(--surface); border: 2px solid var(--line); border-radius: 3px 9px 3px 9px; }
.cx-rules { margin: 0; padding-left: 18px; font-size: .95rem; line-height: 1.3; }
.cx-join { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.cx-join span { font-size: .88rem; color: var(--ink-soft); }
.cx-report { display: block; margin-top: 12px; min-height: 32px; padding: 0; font: inherit; font-size: .82rem; color: var(--red-900); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cx-report:disabled { cursor: default; text-decoration: none; color: var(--ink-soft); }

/* board settings: making a board a community server */
.bs-grow { margin-top: 16px; padding: 12px 14px; border: 2.5px dashed var(--purple-500); border-radius: 14px 18px 12px 16px; background: color-mix(in srgb, var(--purple-100) 35%, var(--paper)); }
.bs-grow-t { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.bs-grow p { margin: 6px 0 10px; font-size: .95rem; }
.bs-grow small { display: block; margin-top: 6px; font-size: .82rem; color: var(--ink-soft); }
.bs-hint { margin: 10px 0 4px; font-size: .9rem; color: var(--ink-soft); }
.bs-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bs-topic { min-height: 34px; padding: 2px 12px; font: inherit; font-size: .92rem; cursor: pointer; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: 18px 14px 16px 12px; }
.bs-topic.on { background: var(--ink); color: var(--paper); }
.bs-topic:disabled { opacity: .45; cursor: default; }
.field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; resize: vertical; }
.bs-comm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }

@media (max-width: 1279.98px) {
    .cx-about { right: 16px; width: min(360px, calc(100% - 32px)); }
}

@media (max-width: 759.98px) {
    .communities-page .search-btn { display: none; }
    .cx-cork { box-shadow: none; border-radius: 0; background: transparent; overflow: visible; }
    .cx-cork::before { display: none; }
    .cx-phone { display: block; }
    .cx-chips.row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 2px 6px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
    .cx-chips.row::-webkit-scrollbar { display: none; }
    .cx-head { padding: 4px 2px; flex-wrap: wrap; }
    .cx-count { font-size: 1.5rem; }
    .cx-scroll { padding: 18px 6px 24px; }
    .cx-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 36px 8px; }
    .cx-scrim { display: block; position: fixed; inset: 0; z-index: 98; padding: 0; border: none; background: color-mix(in srgb, var(--night-900) 35%, transparent); cursor: pointer; }
    .cx-about {
        position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 99; width: auto; max-height: 80dvh;
        border-bottom: none; border-radius: 18px 22px 0 0; box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent), 0 -18px 40px color-mix(in srgb, var(--night-900) 25%, transparent);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .cx-join .btn { flex: 1 0 100%; min-height: 48px; }
    .cx-join span { width: 100%; text-align: center; }
}

/* ============ first-time tour: Rio on a speech bubble, everything else dimmed ============
   The spotlight is a hole cut by a huge shadow; the panes under it swallow clicks (only
   the drawing step leaves its hole open). Rio perches on the bubble's end nearest the
   spotlit thing and faces it. Calm (reduce motion) keeps her still. */

.tour { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.tour-block { position: fixed; pointer-events: auto; }
.tour-block.dim { background: color-mix(in srgb, var(--night-800) 58%, transparent); }
.tour-spot {
    position: fixed; pointer-events: none;
    border-radius: 16px;
    box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--night-800) 58%, transparent);
    transition: left .45s cubic-bezier(.4, 1.3, .5, 1), top .45s cubic-bezier(.4, 1.3, .5, 1),
                width .45s cubic-bezier(.4, 1.3, .5, 1), height .45s cubic-bezier(.4, 1.3, .5, 1);
}
.tour-spot::after {
    content: ""; position: absolute; inset: -8px;
    border: 4px dashed var(--hi-yellow); border-radius: 22px;
    animation: tour-ring 1.6s ease-in-out infinite;
}
@keyframes tour-ring { 50% { opacity: .55; } }

.tour-say {
    position: fixed; pointer-events: auto; box-sizing: border-box;
    padding: 16px 20px;
    color: var(--ink); background: var(--paper);
    border: 2.5px solid var(--line);
    border-radius: 22px 16px 24px 14px / 16px 24px 14px 22px;
    box-shadow: 6px 7px 0 var(--line);
    font-family: var(--font-hand);
    transition: left .45s cubic-bezier(.4, 1.3, .5, 1), top .45s cubic-bezier(.4, 1.3, .5, 1), bottom .45s cubic-bezier(.4, 1.3, .5, 1);
    animation: tour-pop .35s cubic-bezier(.3, 1.6, .5, 1);
    outline: none;
}
@keyframes tour-pop { from { transform: scale(.92); opacity: 0; } }
.tour-rio { position: absolute; bottom: calc(100% - 22px); pointer-events: none; filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--black) 22%, transparent)); }
.tour-rio.at-left { left: 10px; }
.tour-rio.at-right { right: 10px; }
.tour-say.big .tour-rio { left: 50%; right: auto; translate: -50% 0; }

.tour-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-who { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; color: var(--accent-strong); }
.tour-role { font-size: .9rem; color: var(--ink-soft); }
.tour-count { margin-left: auto; font-size: .9rem; color: var(--ink-soft); }
.tour-skip { min-height: 36px; padding: 0 4px; border: none; background: none; color: var(--ink); font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tour-h { margin: 2px 0 6px; font-family: var(--font-marker); font-weight: 700; font-size: 2.2rem; line-height: 1.05; }
.tour-p { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.tour-try { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; color: var(--m-green); }
.tour-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.tour-dots { display: flex; gap: 6px; margin-right: auto; }
.tour-dots span { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line); }
.tour-dots span.done { background: var(--ink-faint); border-color: var(--ink-faint); }
.tour-dots span.on { width: 22px; border-radius: 6px; background: var(--hi-yellow); }

/* Rio herself: parts stacked from svg/rio.svg */
.rio { display: block; overflow: visible; }
.rio.flip { transform: scaleX(-1); }
.rio .rio-bird { transform-box: view-box; transform-origin: 120px 196px; animation: rio-squish 2.6s ease-in-out infinite; }
.rio .rio-eyes { transform-box: fill-box; transform-origin: center; animation: rio-blink 4.2s infinite; }
.rio .rio-wing { transform-box: view-box; transform-origin: 68px 108px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.rio .rio-wing.point { transform: rotate(28deg); }
.rio .rio-wing.wave { animation: rio-wave .9s ease-in-out infinite alternate; }
.rio .rio-jaw { transform-box: view-box; transform-origin: 140px 100px; }
.rio.talking .rio-jaw { animation: rio-jaw .36s ease-in-out 4 alternate; }
.rio.happy .rio-jaw { transform: translateY(4px); animation: none; }
@keyframes rio-squish { 50% { transform: scale(1.02, .98); } }
@keyframes rio-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes rio-wave { from { transform: rotate(8deg); } to { transform: rotate(38deg); } }
@keyframes rio-jaw { to { transform: translateY(4px); } }

/* skipped: Rio huffs (bubble shakes, anger mark), then flies off leaving feathers and a note */
.tour-say.mad { animation: tour-shake .38s ease-in-out; }
.tour-say.mad .tour-who { color: var(--m-red); }
@keyframes tour-shake { 20% { transform: translateX(-7px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.tour.huffed .tour-block, .tour.huffed .tour-spot { pointer-events: none; opacity: 0; transition: opacity .7s .3s; }
.tour-say.flying { background: transparent; border-color: transparent; box-shadow: none; animation: none; pointer-events: none; }
.tour-say.flying > :not(.tour-rio, .tour-fx) { visibility: hidden; }
.tour-say.flying .tour-rio { animation: tour-fly 2.2s ease-in-out forwards; }
@keyframes tour-fly {
    10% { transform: translate(calc(var(--fx) * -10px), 16px) scale(1.06, .88); }
    20% { transform: translate(calc(var(--fx) * 30px), -70px); }
    32% { transform: translate(calc(var(--fx) * 180px), -150px); }
    42% { transform: translate(calc(var(--fx) * 300px), -120px); }
    54% { transform: translate(calc(var(--fx) * 470px), -260px) scale(.9); }
    64% { transform: translate(calc(var(--fx) * 600px), -230px) scale(.85); }
    78% { transform: translate(calc(var(--fx) * 820px), -420px) scale(.72); }
    100% { transform: translate(calc(var(--fx) * 1250px), -760px) scale(.5); }
}
.tour-fx { position: absolute; bottom: calc(100% - 22px); pointer-events: none; }
.tour-fx.at-left { left: 10px; }
.tour-fx.at-right { right: 10px; }
.tour-say.big .tour-fx { left: 50%; right: auto; translate: -50% 0; }
.tour-poof {
    position: absolute; left: 30%; bottom: 0; width: 46px; height: 46px; border-radius: 50%;
    background: var(--paper); border: 2.5px solid var(--line); opacity: 0;
    animation: tour-poof .8s ease-out .2s forwards;
}
.tour-poof:nth-child(2) { left: 55%; bottom: 8px; width: 36px; height: 36px; animation-delay: .25s; }
.tour-poof:nth-child(3) { left: 12%; bottom: 6px; width: 32px; height: 32px; animation-delay: .3s; }
@keyframes tour-poof { 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) translateY(-10px); } }
.tour-whoosh {
    position: absolute; left: 20%; bottom: 50px; rotate: -8deg; opacity: 0;
    font-family: var(--font-marker); font-weight: 700; font-size: 2rem; color: var(--paper);
    -webkit-text-stroke: 1px var(--line); animation: tour-whoosh 1s ease-out .2s forwards;
}
@keyframes tour-whoosh { 0% { transform: translateY(8px); } 25%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.tour-feather { position: absolute; left: 40%; top: 30%; width: 26px; height: 26px; fill: var(--mist-300); opacity: 0; --dx1: -30px; --dx2: 12px; animation: tour-drop 1.9s ease-in forwards; }
.tour-feather:nth-of-type(2) { left: 58%; width: 22px; height: 22px; fill: var(--gray-500); --dx1: 34px; --dx2: -8px; animation-duration: 2.3s; animation-delay: .1s; }
.tour-feather:nth-of-type(3) { left: 46%; top: 42%; width: 18px; height: 18px; fill: var(--green-100); --dx1: -8px; --dx2: 26px; animation-duration: 2.1s; animation-delay: .2s; }
@keyframes tour-drop {
    10% { opacity: 1; }
    35% { transform: translate(var(--dx1), 40px) rotate(40deg); }
    65% { opacity: 1; transform: translate(var(--dx2), 110px) rotate(-30deg); }
    100% { opacity: 0; transform: translate(var(--dx1), 190px) rotate(20deg); }
}
.tour-gone {
    position: fixed; left: 50%; bottom: 110px; translate: -50% 0; pointer-events: auto;
    display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 10px 14px 10px 20px; color: var(--ink); background: var(--paper);
    border: 2.5px solid var(--line); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 5px 6px 0 var(--line); font-family: var(--font-hand); font-size: 1.1rem;
    animation: tour-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
.tour-gone b { font-family: var(--font-marker); font-size: 1.45rem; }

.rio .rio-wing.flap { animation: rio-flap .13s ease-in-out infinite alternate; }
.rio.mad .rio-bird { animation: rio-shake .11s linear infinite alternate; }
.rio .rio-steam { animation: rio-steam .8s ease-out infinite; }
.rio .rio-steam + .rio-steam { animation-delay: .4s; }
.rio .rio-vein { transform-box: view-box; transform-origin: 180px 22px; animation: rio-vein .5s ease-in-out infinite alternate; }
.rio.flying .rio-bird { animation: rio-glide .32s ease-in-out infinite alternate; }
.rio.flying .rio-wing { animation: rio-bigflap .16s ease-in-out infinite alternate; }
.rio .rio-wing-far { transform-box: view-box; transform-origin: 96px 70px; animation: rio-farflap .16s ease-in-out infinite alternate; }
.rio .rio-speed { animation: rio-speed .3s linear infinite; }
@keyframes rio-flap { from { transform: rotate(4deg); } to { transform: rotate(58deg); } }
@keyframes rio-shake { from { transform: translateX(-2px) rotate(-1deg); } to { transform: translateX(2px) rotate(1deg); } }
@keyframes rio-steam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes rio-vein { from { transform: scale(.85) rotate(-6deg); } to { transform: scale(1.15) rotate(6deg); } }
@keyframes rio-glide { from { transform: rotate(14deg) translateY(-3px); } to { transform: rotate(18deg) translateY(4px); } }
@keyframes rio-bigflap { from { transform: rotate(-4deg); } to { transform: rotate(84deg); } }
@keyframes rio-farflap { from { transform: rotate(40deg); } to { transform: rotate(128deg); } }
@keyframes rio-speed { to { stroke-dashoffset: -36; } }

.tour.calm .tour-spot, .tour.calm .tour-say { transition: none; animation: none; }
.tour.calm .tour-spot::after, .tour.calm .rio * { animation: none; }
.tour.calm .rio .rio-wing.wave { transform: rotate(24deg); }
@media (prefers-reduced-motion: reduce) {
    .tour-spot, .tour-say { transition: none; animation: none; }
    .tour-spot::after, .rio * { animation: none !important; }
    .rio .rio-wing.wave { transform: rotate(24deg); }
    .tour-say.flying, .tour-gone { animation: none; }
    .tour-say.flying .tour-rio, .tour-fx { visibility: hidden; }
}

@media (max-width: 759.98px) {
    .tour-say { padding: 14px 16px; }
    .tour-gone { bottom: 84px; flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; border-radius: 18px 14px 20px 12px / 14px 20px 12px 18px; }
    .tour-h { font-size: 1.9rem; }
    .tour-p { font-size: 1.05rem; }
}

/* ============ house rules: accept them to join a community server ============
   A lined notepad page taped over the board (a tall sheet on phones). Until you accept a
   community server's current rules you have no @everyone: the board is blurred and locked. */

.rules-backdrop { position: fixed; inset: 0; z-index: 150; background: color-mix(in srgb, var(--night-900) 38%, transparent); }
.rules-page {
    position: fixed; z-index: 151; left: 50%; top: 50%; translate: -50% -50%; rotate: -.5deg;
    width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
    display: flex; flex-direction: column;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: 6px 10px 8px 12px; box-shadow: 6px 8px 0 var(--line);
}
.rules-page::before { content: ""; position: absolute; left: 62px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--red-500) 35%, transparent); pointer-events: none; }
.rules-tape { position: absolute; top: -12px; width: 110px; height: 30px; background: color-mix(in srgb, var(--yellow-500) 82%, transparent); border-left: 2px dashed color-mix(in srgb, var(--black) 15%, transparent); border-right: 2px dashed color-mix(in srgb, var(--black) 15%, transparent); }
.rules-tape.left { left: 60px; rotate: -4deg; }
.rules-tape.right { right: 60px; rotate: 5deg; }
.rules-head { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 26px 20px 6px 80px; }
.rules-head > div { flex: 1; min-width: 0; }
.rules-title { margin: 0; font-family: var(--font-marker); font-weight: 700; font-size: 2.5rem; line-height: 1; overflow-wrap: anywhere; }
.rules-sub { margin: 4px 0 0; font-size: 1rem; color: var(--ink-soft); }
.rules-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; }
.rules-list {
    margin: 0; padding: 6px 24px 4px 0; list-style: none;
    background-image: repeating-linear-gradient(transparent 0 43px, color-mix(in srgb, var(--blue-500) 18%, transparent) 43px 45px);
}
.rules-list li { display: flex; align-items: baseline; gap: 14px; min-height: 45px; padding-top: 9px; font-size: 1.15rem; line-height: 1.2; }
.rules-n { width: 62px; flex-shrink: 0; text-align: center; font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; line-height: .8; color: var(--accent); }
.rules-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rules-list li.new .rules-t { background: linear-gradient(104deg, transparent .9%, var(--hi-yellow) 2.4%, var(--hi-yellow) 97%, transparent 98.5%); border-radius: .6em .2em; padding: 0 .25em; margin-left: -.25em; color: var(--gray-900); }
.rules-was { display: block; font-size: .85rem; color: var(--red-900); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.rules-badge { flex-shrink: 0; padding: 0 8px; line-height: 20px; font-size: .75rem; border-radius: 10px; background: var(--navy); color: var(--amber-200); rotate: 3deg; }
.rules-by { position: relative; margin: 0; padding: 8px 24px 4px 80px; font-size: .88rem; color: var(--ink-soft); }
.rules-foot { position: relative; background: var(--paper); margin: 10px 20px 0; padding: 12px 16px 16px; border-top: 2.5px dashed color-mix(in srgb, var(--line) 25%, transparent); }
.rules-tick {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0;
    font: inherit; font-size: 1.1rem; color: var(--ink); text-align: left; background: none; border: none; cursor: pointer;
}
.rules-tick:disabled { opacity: .5; cursor: default; }
.rules-box { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); color: var(--gray-900); border: 2.5px solid var(--line); border-radius: 5px 8px 4px 9px; }
.rules-tick.on .rules-box { background: var(--hi-yellow); }
.rules-box.on { background: var(--green-200); }
.rules-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.rules-lnk { min-height: 36px; padding: 0; font: inherit; font-size: .95rem; color: var(--ink-soft); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rules-lnk.out { margin-left: auto; color: var(--red-900); }
.rules-done { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.rules-done .btn { margin-left: auto; }

.sheet.rules-locked { filter: blur(5px) saturate(.7); pointer-events: none; user-select: none; }
.rules-strip {
    position: absolute; left: 20px; right: 20px; bottom: 24px; z-index: 30;
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    background: var(--yellow-200); color: var(--amber-950); border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; box-shadow: 4px 5px 0 var(--line); rotate: -.3deg;
}
.rules-strip > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rules-strip b { font-family: var(--font-marker); font-size: 1.5rem; line-height: 1.05; }
.rules-strip span { font-size: .92rem; }
.map-row.rules .map-rules-mark { margin-left: auto; padding: 0 7px; line-height: 20px; font-size: .78rem; border-radius: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.map-row.rules.locked .map-rules-mark { background: var(--navy); color: var(--amber-200); }
.map-locked { display: flex; align-items: center; gap: 6px; margin: 8px 12px; font-size: .9rem; color: var(--ink-soft); }
.cx-gate { margin: 14px 0 0; padding: 8px 10px; font-size: .88rem; border: 2px dashed var(--purple-500); border-radius: 12px; background: color-mix(in srgb, var(--purple-100) 35%, var(--paper)); color: var(--blue-900); }
.cx-about .rules-tick { margin-top: 6px; font-size: 1rem; }
.cx-about .rules-box { width: 26px; height: 26px; }

@media (max-width: 759.98px) {
    .rules-page {
        left: 0; right: 0; top: auto; bottom: 0; translate: none; rotate: none; width: auto;
        max-height: calc(100dvh - 90px);
        border-bottom: none; border-radius: 18px 22px 0 0;
        box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent), 0 -18px 40px color-mix(in srgb, var(--night-900) 25%, transparent);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .rules-page::before { left: 46px; }
    .rules-tape { display: none; }
    .rules-head { padding: 18px 12px 6px 58px; }
    .rules-title { font-size: 2rem; }
    .rules-sub { font-size: .9rem; }
    .rules-list { padding-right: 14px; }
    .rules-list li { gap: 8px; font-size: 1.05rem; }
    .rules-n { width: 46px; font-size: 1.6rem; }
    .rules-by { padding-left: 58px; }
    .rules-foot { margin: 0; padding: 10px 14px 14px; }
    .rules-acts .btn.primary { flex: 1 0 100%; min-height: 50px; font-size: 1.15rem; }
    .rules-lnk.out { margin-left: auto; }
    .rules-strip { left: 8px; right: 8px; bottom: 90px; flex-wrap: wrap; }
}
.draw-bar .dt.draw-done { background: var(--hi-yellow); border-color: var(--line); color: var(--gray-900); }

/* a community server's own board note: its picture is the note (see-through edges and all),
   Pento writes the name on top wherever the note says */
.pin.board.custom { padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--note-ink); filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--black) 14%, transparent)) drop-shadow(3px 8px 7px color-mix(in srgb, var(--black) 28%, transparent)); }
.pin.board.custom.square { background: var(--note-paper); border-radius: 2px 2px 22px 2px / 2px 2px 12px 2px; }
.pin.board.custom::before { z-index: 2; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--white) 55%, var(--note-pin)), var(--note-pin) 55%, color-mix(in srgb, var(--black) 30%, var(--note-pin))); }
.pin.board.custom.no-pin::before { display: none; }
.note-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.pin.board.custom.square .note-art { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.note-words { position: absolute; left: 10px; right: 10px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.note-words.at-top-l, .note-words.at-top-c, .note-words.at-top-r { top: 16px; }
.note-words.at-mid-l, .note-words.at-mid-c, .note-words.at-mid-r { top: 50%; translate: 0 -50%; }
.note-words.at-bot-l, .note-words.at-bot-c, .note-words.at-bot-r { bottom: 10px; }
.note-words[class*="-l"] { align-items: flex-start; text-align: left; }
.note-words[class*="-r"] { align-items: flex-end; text-align: right; }
.note-words .pin-sub { opacity: .8; }
.pin.board.custom .pin-mentions, .pin.board.custom .pin-unread { z-index: 3; }

/* ============ board note editor (board settings › board note) ============ */
.ne-pens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ne-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ne-gap { margin-top: 8px; }
.ne-rng { display: grid; grid-template-columns: 48px minmax(0, 260px) 52px; align-items: center; gap: 10px; margin: 4px 0; }
.ne-rng input { width: 100%; accent-color: var(--m-pink, var(--pink-500)); }
.ne-spots { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; padding: 6px; border: 2.5px solid var(--line); border-radius: 4px 4px 16px 4px / 4px 4px 10px 4px; background: var(--yellow-200); }
.ne-spots button { width: 34px; height: 28px; display: grid; place-items: center; padding: 0; border: 1.5px dashed color-mix(in srgb, var(--gray-900) 35%, transparent); border-radius: 6px; background: none; cursor: pointer; }
.ne-spots button i { width: 16px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--gray-900) 30%, transparent); }
.ne-spots button.on { border-style: solid; border-color: var(--gray-900); background: var(--cream); }
.ne-spots button.on i { background: var(--gray-900); }
.ne-namecol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ne-check { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: .92rem; }
.ne-check.ok { color: var(--m-green, var(--green-500)); }
.ne-check.bad { color: var(--danger); }
.ne-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ne-wall { padding: 28px 22px; border-radius: 16px; background: var(--gray-100); border: 2.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--gray-900); }
.ne-guides { position: relative; border: 2px dashed var(--pink-700); border-radius: 6px; }
.ne-max { position: absolute; right: 4px; top: -24px; font-size: .8rem; color: var(--pink-700); }
.ne-normal { position: absolute; left: 0; top: 0; z-index: 4; border: 2px dotted color-mix(in srgb, var(--gray-900) 45%, transparent); border-radius: 4px; pointer-events: none; }
.ne-normal small { position: absolute; left: 4px; bottom: -22px; font-size: .8rem; color: var(--gray-600); white-space: nowrap; }
.pin.ne-note, .pin.ne-note:hover { position: absolute; left: 0; top: 0; transform: none; rotate: 0deg; scale: var(--s); transform-origin: 0 0; cursor: default; }
.ne-pad { pointer-events: auto; cursor: crosshair; touch-action: none; }
.ne-note .note-words { pointer-events: none; }
.pin.board.custom::before { top: calc(var(--pin-top, 0px) - 9px); }

/* the wall's pens, tucked away until you ask for them */
.draw-take {
    position: absolute; left: 12px; top: 50%; translate: 0 -50%;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 64px; padding: 8px 4px; cursor: pointer; font-size: .9rem;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: 16px 12px 18px 14px; box-shadow: 3px 4px 0 var(--line);
}
.draw-take:hover { rotate: -3deg; }
.draw-tools.compact .draw-take { left: auto; right: 12px; top: auto; bottom: 12px; translate: none; flex-direction: row; width: auto; padding: 8px 14px; border-radius: 22px; }
.draw-tools .dt.draw-done-rail, .draw-rail .dt.draw-done-rail { background: var(--hi-yellow); border-color: var(--line); color: var(--gray-900); margin-top: 4px; }

/* the rail you can move: drag its grip anywhere on the board (rail.js); near the right
   edge the flyout opens on its left, low down it grows upwards */
.draw-tools .draw-grip, .draw-rail .draw-grip {
    width: 44px; height: 24px; display: grid; place-items: center; padding: 0; margin-bottom: -2px;
    border: none; border-radius: 10px; background: none; cursor: grab; touch-action: none; opacity: .55;
}
.draw-tools .draw-grip:hover, .draw-rail .draw-grip:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.draw-rail.lifted { rotate: -2deg; box-shadow: 7px 9px 0 color-mix(in srgb, var(--line) 45%, transparent); }
.draw-rail.lifted .draw-grip { cursor: grabbing; }
.draw-rail[data-side="left"] .draw-fly { left: auto; right: calc(100% + 12px); }
.draw-rail[data-low] .draw-fly { top: auto; bottom: -2px; }

/* ---------- Admin panel (staff only; design canvas "Admin panel") ---------- */
.stafftape {
    display: inline-block; margin-right: 10px; padding: 1px 12px; font-size: .85rem; letter-spacing: .06em; rotate: -3deg; color: var(--white);
    background: repeating-linear-gradient(-45deg, var(--gray-900) 0 8px, var(--red-700) 8px 16px);
    border-inline: 2px dashed color-mix(in srgb, var(--white) 50%, transparent);
}
.stafftape span { background: var(--gray-900); padding: 0 6px; }
.admin-page .set-link.soon { opacity: .45; cursor: default; }
.admin-page .set-link.soon small { margin-left: auto; font-size: .78rem; }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 10px; }
.adm-tile { padding: 10px 12px; border: 2.5px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--paper, var(--snow)); }
a.adm-tile { color: inherit; text-decoration: none; }
a.adm-tile:hover { rotate: -1deg; }
.adm-tile b { display: block; font-family: var(--font-marker); font-size: 2.4rem; line-height: 1; }
.adm-tile small { color: var(--ink-soft); }
.adm-tile.alert { background: color-mix(in srgb, var(--danger) 12%, var(--paper, var(--white))); }
.adm-lbl-link { display: flex; align-items: baseline; flex-wrap: wrap; }
.adm-lbl-link a { margin-left: auto; font-family: var(--font-hand); font-weight: 400; font-size: .95rem; }
.adm-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.adm-row .grow { flex: 1; min-width: 200px; }
.adm-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.adm-table th { text-align: left; font-weight: 400; color: var(--ink-soft); font-size: .9rem; }
.adm-table th, .adm-table td { padding: 6px 8px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); vertical-align: middle; }
.adm-matrix td:not(:first-child), .adm-matrix th:not(:first-child) { text-align: center; }
.adm-chip { display: inline-block; margin-left: 6px; padding: 0 8px; border: 2px solid var(--line); border-radius: 10px; font-size: .8rem; background: var(--hi-yellow); color: var(--gray-900); }
.adm-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 4px 0 12px; padding: 12px 16px; max-width: 560px; }
.adm-dl dt { color: var(--ink-soft); }
.adm-dl dd { margin: 0; }
.adm-log { list-style: none; margin: 0 0 12px; padding: 0; }
.adm-log li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); }
.adm-log .when { color: var(--ink-soft); min-width: 9ch; }
.adm-log .why { color: var(--ink-soft); font-style: italic; }
.danger-ink { color: var(--danger); }
.adm-scrim { position: fixed; inset: 0; z-index: 98; border: none; padding: 0; background: color-mix(in srgb, var(--gray-900) 45%, transparent); cursor: default; }
.adm-sudo { position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 99; width: min(440px, calc(100vw - 32px)); padding: 20px 22px; }
.adm-sudo .lbl.first { margin-top: 0; }
.adm-sudo-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.adm-nope { padding: 40px; text-align: center; color: var(--ink-soft); }
.adm-person { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; margin-top: 14px; }
.adm-who { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.adm-name { font-family: var(--font-marker); font-size: 2rem; line-height: 1.1; }
.adm-state { margin-left: auto; padding: 2px 12px; border: 2px solid var(--line); border-radius: 12px; font-size: .95rem; white-space: nowrap; }
.adm-state.ok { background: color-mix(in srgb, var(--m-green) 18%, var(--paper, var(--white))); }
.adm-state.down { background: color-mix(in srgb, var(--danger) 16%, var(--paper, var(--white))); }
.adm-person .adm-dl { padding: 0; max-width: none; }
.adm-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.adm-acts.row { flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
.adm-person .field { display: block; margin-top: 8px; }
.adm-person .field input, .adm-person textarea { width: 100%; box-sizing: border-box; }
.adm-done { margin-top: 12px; }
/* reports (design canvas "Admin panel" › reports) */
.adm-row.tight { gap: 10px; margin-bottom: 2px; align-items: center; }
.adm-rep { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; margin-top: 4px; }
.adm-cases { display: flex; flex-direction: column; gap: 4px; }
.adm-case { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px 10px; border: 2px solid transparent; border-radius: 10px 12px 9px 13px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.adm-case:hover { background: color-mix(in srgb, var(--line) 6%, transparent); }
.adm-case.on { border-color: var(--line); background: var(--hi-yellow); color: var(--gray-900); }
.adm-case .t { flex: 1; min-width: 0; }
.adm-case .t b { font-weight: 400; overflow-wrap: anywhere; }
.adm-case .t small { display: block; color: var(--ink-soft); }
.adm-case.on .t small, .adm-case.on .when { color: var(--night-500); }
.adm-case .when { flex-shrink: 0; text-align: right; font-size: .85rem; color: var(--ink-soft); line-height: 1.3; }
.adm-kind { display: inline-block; padding: 0 7px; border-radius: 8px; font-size: .8rem; white-space: nowrap; color: var(--blue-900); background: var(--blue-100); }
.adm-kind.k-user { background: var(--green-100); color: var(--green-900); }
.adm-kind.k-board { background: var(--purple-100); color: var(--navy); }
.adm-where { font-size: 1.1rem; }
.adm-case-open .why { font-style: italic; margin: 2px 0; }
.adm-pad { margin: 10px 0 4px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 6px; line-height: 28px; background-color: var(--paper, var(--white)); background-image: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--accent) 22%, transparent) 27px 28px); background-position: 0 6px; }
.adm-pad .m { display: flex; gap: 8px; }
.adm-pad .m b { font-weight: 400; color: var(--accent); flex-shrink: 0; }
.adm-pad .m span { overflow-wrap: anywhere; }
.adm-pad .m.flag { margin: 0 -12px; padding: 0 12px; background: color-mix(in srgb, var(--danger) 14%, transparent); box-shadow: inset 3px 0 0 var(--danger); }
.adm-photos { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 150px; }
.adm-blur { width: 180px; height: 150px; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(45deg, var(--sand) 0 10px, var(--sand) 10px 20px); }
.adm-blur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; background: color-mix(in srgb, var(--gray-900) 72%, transparent); color: var(--white); }
.adm-case-open .adm-who { margin-top: 10px; }
.av.sq { border-radius: 3px 3px 12px 3px; }
.adm-note { display: block; margin-top: 12px; }
.adm-note input { width: 100%; box-sizing: border-box; }
.adm-note small { color: var(--ink-soft); }
.adm-suspend { margin-top: 10px; padding: 10px 12px; border: 2.5px dashed var(--danger); border-radius: 12px 16px 10px 14px; }
.adm-suspend .lbl { margin-top: 0; }
/* community servers (design canvas "Admin panel" › community servers, "Community servers, staff side") */
.adm-row .adm-row { margin-bottom: 0; align-items: center; }
.adm-coms { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; margin-top: 4px; }
.adm-com { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px 110px; gap: 8px; align-items: center; width: 100%; padding: 8px 10px; border: 2px solid transparent; border-radius: 10px 12px 9px 13px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.adm-com:hover { background: color-mix(in srgb, var(--line) 6%, transparent); }
.adm-com.on { border-color: var(--line); background: var(--hi-yellow); color: var(--gray-900); }
.adm-com.head { cursor: default; padding-top: 0; padding-bottom: 2px; font-size: .9rem; color: var(--ink-soft); }
.adm-com.head:hover { background: none; }
.adm-com .n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-com .t { min-width: 0; }
.adm-com .t b { font-weight: 400; overflow-wrap: anywhere; }
.adm-com .t small { display: block; color: var(--ink-soft); }
.adm-com.on .t small { color: var(--night-500); }
.adm-com .s { text-align: center; }
.adm-com .st .adm-state { margin-left: 0; }
.adm-com-card { align-self: start; padding: 16px 18px; }
.adm-com-card .adm-who .small .adm-state { margin-left: 0; padding: 0 8px; }
.adm-com-card .adm-dl { padding: 0; }
.adm-com-card textarea { width: 100%; box-sizing: border-box; }
.adm-com-card .adm-cases { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.adm-acts.row.end { justify-content: flex-end; }
.adm-state.warn { background: color-mix(in srgb, var(--hi-yellow) 70%, var(--paper, var(--white))); color: var(--gray-900); }
.adm-state.off { background: color-mix(in srgb, var(--line) 10%, var(--paper, var(--white))); }
.adm-hrow { display: flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); }
.adm-hrow .n { width: 150px; flex-shrink: 0; font-size: 1.05rem; }
.adm-hrow .d { flex: 1; min-width: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.adm-hrow .d.mono { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .82rem; color: var(--ink); }
.adm-hrow .adm-state { margin-left: 0; font-size: .82rem; padding: 0 8px; }
.adm-hrow .dot { border-color: var(--line); width: 10px; height: 10px; }
.adm-hrow .dot.ok { background: var(--green-500); }
.adm-hrow .dot.warn { background: var(--amber-500); }
.adm-hrow .dot.down { background: var(--red-600); }
.adm-hrow .dot.off { background: transparent; }
.adm-kind.k-err { background: var(--gray-100); color: var(--red-900); }
@media (max-width: 640px) {
    .adm-hrow { flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; }
    .adm-hrow .n { width: auto; flex: 1; }
    .adm-hrow .d { order: 3; flex-basis: 100%; }
}
.knob.danger.on { background: color-mix(in srgb, var(--danger) 55%, var(--paper, var(--white))); }
.adm-peek { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-top: 4px; }
.adm-strip { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 10px 12px 9px 13px; }
.adm-strip.peek { background: var(--blue-100); color: var(--blue-900); }
.adm-strip .grow { flex: 1; }
.chat-frozen { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 10px 12px 9px 13px; background: var(--amber-200); color: var(--gray-900); }
.chat-frozen .ic, .chat-frozen svg { flex-shrink: 0; }
.gone-page { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 460px; margin: 12vh auto 0; padding: 28px 24px; text-align: center; }
.gone-page .gone-t { font-family: var(--font-marker); font-size: 1.8rem; line-height: 1.15; }
@media (max-width: 759.98px) {
    .adm-table { display: block; overflow-x: auto; }
    .adm-person, .adm-rep, .adm-coms { grid-template-columns: 1fr; }
    .adm-com { grid-template-columns: minmax(0, 1fr) 48px 48px 92px; }
    .adm-who { flex-wrap: wrap; }
    .adm-state { margin-left: 0; }
}

/* how it's running (design canvas "Admin panel" › how it's running + "AdminPerf"). Every colour is a
   role: --chart-* for lines and steps, --state-* for fine / look / over. */
.rn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 14px; }
.rn-live { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--success-text); }
.rn-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--state-ok); border: 2px solid var(--line); box-sizing: border-box; }
.rn-hint { margin-left: auto; font-size: .9rem; color: var(--ink-soft); }
.rn-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rn.phone .rn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rn-tile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 44px; padding: 10px 12px 12px; box-sizing: border-box; border: 2.5px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rn-tile:hover { background: color-mix(in srgb, var(--hi-yellow) 12%, var(--surface)); }
.rn-tile.on { background: color-mix(in srgb, var(--hi-yellow) 28%, var(--surface)); box-shadow: var(--shadow-hard); }
.rn-tile.wide { grid-column: span 2; }
.rn-tl { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--ink-soft); }
.rn-st { margin-left: auto; padding: 0 7px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .75rem; white-space: nowrap; color: var(--ink); }
.rn-st.ok { background: color-mix(in srgb, var(--state-ok) 20%, var(--paper)); }
.rn-st.warn { background: color-mix(in srgb, var(--state-warn) 35%, var(--paper)); }
.rn-st.down { background: color-mix(in srgb, var(--state-down) 20%, var(--paper)); }
.rn-tile b { font-family: var(--font-marker); font-weight: 700; font-size: 2.4rem; line-height: 1; }
.rn.phone .rn-tile b { font-size: 1.9rem; }
.rn-tile small { font-size: .82rem; line-height: 1.2; color: var(--ink-soft); }
.rn-meter { display: block; height: 8px; margin-top: 6px; overflow: hidden; border: 2px solid var(--line); border-radius: 6px 4px 6px 5px; background: var(--paper); }
.rn-meter i { display: block; height: 100%; background: var(--ink-faint); }
.rn-meter.ok i, .rn-drive .sp-bar.ok i { background: var(--state-ok); }
.rn-meter.warn i, .rn-drive .sp-bar.warn i { background: var(--state-warn); }
.rn-meter.down i, .rn-drive .sp-bar.down i { background: var(--state-down); }
.rn-card, .rn-box { margin-top: 14px; padding: 12px 14px 10px; box-sizing: border-box; border: 2.5px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--surface); }
.rn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rn-ttl { font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; }
.rn-sub { font-size: .88rem; color: var(--ink-soft); }
.rn-leg { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; font-size: .82rem; color: var(--ink-soft); }
.rn.phone .rn-leg { width: 100%; margin-left: 0; }
.rn-leg span, .rn-tip .r { display: inline-flex; align-items: center; gap: 5px; }
.rn-leg i, .rn-tip .r i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.rn i.typical { background: var(--chart-typical); }
.rn i.slow { background: var(--chart-slow); }
.rn-leg i.limit { height: 0; border-top: 2px dashed var(--chart-limit); background: none; }
.rn-plot { position: relative; margin-top: 6px; }
.rn-ya { position: absolute; left: 0; width: 40px; transform: translateY(-50%); text-align: right; font-size: .75rem; line-height: 1; color: var(--ink-soft); }
.rn-gl { position: absolute; left: 46px; right: 4px; height: 0; border-top: 1px solid color-mix(in srgb, var(--line) 12%, transparent); }
.rn-gl.base { border-top: 2px solid color-mix(in srgb, var(--line) 45%, transparent); }
.rn-area { position: absolute; top: 0; bottom: 0; left: 46px; right: 4px; }
.rn.phone .rn-area, .rn.phone .rn-gl { left: 40px; }
.rn.phone .rn-ya { width: 34px; }
.rn-area svg { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; }
.rn-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rn-line.typical { stroke: var(--chart-typical); }
.rn-line.slow { stroke: var(--chart-slow); }
.rn-fill { fill: color-mix(in srgb, var(--chart-typical) 12%, transparent); stroke: none; }
.rn-xa { position: absolute; font-size: .75rem; line-height: 1; white-space: nowrap; color: var(--ink-soft); }
.rn-xa.mid { transform: translateX(-50%); }
.rn-xa.end { transform: translateX(-100%); }
.rn-th { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--chart-limit); }
.rn-hit { position: absolute; top: 0; }
.rn-x { position: absolute; width: 0; border-left: 1.5px solid color-mix(in srgb, var(--line) 50%, transparent); pointer-events: none; }
.rn-dot { position: absolute; width: 10px; height: 10px; margin: -7px 0 0 -7px; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 30%, transparent); pointer-events: none; }
.rn-dot.typical { background: var(--chart-typical); }
.rn-dot.slow { background: var(--chart-slow); }
.rn-tip { position: absolute; top: 4px; z-index: 3; min-width: 150px; padding: 6px 10px; transform: translateX(14px); border: 2px solid var(--line); border-radius: 10px 8px 11px 7px; background: var(--paper); box-shadow: var(--shadow-hard); font-size: .82rem; line-height: 1.35; pointer-events: none; }
.rn-tip.flip { transform: translateX(calc(-100% - 14px)); }
.rn-tip .w { display: block; color: var(--ink-soft); }
.rn-tip .r { display: flex; }
.rn-tip .r b { margin-left: auto; padding-left: 10px; font-weight: 400; font-size: .95rem; }
.rn-tip .r.over { color: var(--danger-text); }
.rn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.rn-grid .rn-box { margin-top: 0; }
.rn-box .lbl.first { margin-top: 0; }
.rn-steps { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0 6px; font-size: .82rem; color: var(--ink-soft); }
.rn-steps span { display: inline-flex; align-items: center; gap: 5px; }
.rn-steps i { width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 3px; }
.rn-s1 { background: var(--chart-step-1); }
.rn-s2 { background: var(--chart-step-2); }
.rn-s3 { background: var(--chart-step-3); }
.rn-s4 { background: var(--chart-step-4); }
.rn-load { display: grid; grid-template-columns: 108px minmax(0, 1fr) 112px; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; box-sizing: border-box; border: none; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rn-load:hover { background: color-mix(in srgb, var(--line) 4%, transparent); }
.rn-load.on { background: color-mix(in srgb, var(--hi-yellow) 28%, var(--surface)); box-shadow: inset 0 0 0 2px var(--line); }
.rn-load .n, .rn-load .v { font-size: 1rem; line-height: 1.1; }
.rn-load .v { text-align: right; }
.rn-load .n small, .rn-load .v small { display: block; font-size: .75rem; color: var(--ink-soft); }
.rn-load .v small.over { color: var(--danger-text); }
.rn-stack { display: flex; gap: 2px; height: 16px; }
.rn-stack i { display: block; height: 100%; min-width: 3px; }
.rn-stack i:first-child { border-radius: 4px 0 0 4px; }
.rn-stack i:last-child { border-radius: 0 4px 4px 0; }
.rn-why { margin-top: 8px; padding: 8px 10px; border: 2px dashed color-mix(in srgb, var(--line) 25%, transparent); border-radius: 10px; font-size: .88rem; line-height: 1.35; color: var(--ink-soft); }
.rn-why b { font-weight: 400; color: var(--ink); }
.rn-small { margin: 8px 0 0; font-size: .85rem; color: var(--ink-soft); }
.rn-net { display: grid; grid-template-columns: 14px 128px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); font-size: .95rem; }
.rn-net .d { font-size: .88rem; color: var(--ink-soft); }
.rn-sdot { align-self: center; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 50%; }
.rn-sdot.ok { background: var(--state-ok); }
.rn-sdot.warn { background: var(--state-warn); }
.rn-sdot.down { background: var(--state-down); }
.rn-sdot.off { background: transparent; }
.rn-call { display: grid; grid-template-columns: 44px minmax(0, 1fr) 62px; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.rn-call .mono { font-family: var(--font-mono); font-size: .82rem; overflow-wrap: anywhere; }
.rn-call .ms { text-align: right; font-size: .95rem; }
.rn-drive { display: grid; grid-template-columns: 150px minmax(0, 1fr) 112px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); font-size: .95rem; }
.rn-drive small { display: block; font-size: .75rem; color: var(--ink-soft); }
.rn-drive small.mono { font-family: var(--font-mono); }
.rn-drive .num { text-align: right; font-size: .88rem; }
.adm-toast { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 12px; border: 2px solid var(--line); border-radius: 10px 12px 9px 13px; background: color-mix(in srgb, var(--state-ok) 20%, var(--paper)); color: var(--ink); }
@media (max-width: 1100px) {
    .rn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
    .rn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rn-tiles .rn-tile:last-child { grid-column: span 2; }
    .rn-grid { grid-template-columns: 1fr; }
    .rn-hint { margin-left: 0; flex-basis: 100%; }
    .rn-load { grid-template-columns: 90px minmax(0, 1fr) 96px; }
    .rn-net { grid-template-columns: 14px 100px minmax(0, 1fr); }
    .rn-drive { grid-template-columns: 1fr 96px; }
    .rn-drive .sp-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ============ chat first: a board opens on its notepad, filling the main area ============
   Head: open chats as tabs, then who's here, then the "board" button (a little peek of the
   whiteboard). The topic line carries "next unread" and the pins. On the whiteboard, a
   yellow "back to chat" sits across from the sheet tabs. Mentions are blue, unread red. */

.canvases-shell .notepad.docked,
.canvases-shell:has(.dock-voice) .notepad.docked {
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    max-width: 1280px;
    margin-inline: auto;
    height: calc(100% - 16px);
    margin-top: 16px;
    box-sizing: border-box;
    border-bottom: 2.5px solid var(--line);
    border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px;
    box-shadow: 6px 7px 0 var(--line), var(--shadow-soft);
}
/* in a voice room its chat takes the board's left column, swapping with the map — the board stays clear */
.app-left .notepad.side {
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
}
.notepad.docked .notepad-head { min-height: 64px; padding: 18px 10px 0 14px; box-sizing: border-box; }
.notepad.docked .notepad-tab > button:first-child { gap: 6px; min-height: 44px; padding: 2px 4px 4px 12px; font-size: 1.45rem; }
.notepad.docked .notepad-tab > button:first-child .icon { flex-shrink: 0; }
.notepad-tab-nm { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.notepad.docked .notepad-add { width: 40px; height: 40px; margin-bottom: 2px; border: 2px dashed var(--line); border-radius: 12px 14px 10px 12px; color: var(--gray-700); }
.notepad.docked .notepad-add:hover, .notepad.docked .notepad-add[aria-expanded="true"] { background: var(--hi-yellow); color: var(--gray-900); }
.notepad.docked .notepad-btns { padding-bottom: 6px; }
.notepad.docked .notepad-btn { width: 40px; height: 40px; }
.notepad-btns { align-items: center; }
.notepad-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: .75rem; }
.notepad-count.at, .map-badge { background: var(--blue-700); }
.map-badge.unread { background: var(--red-600); }

.notepad-boardtab {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    min-height: 46px; margin: 0 0 6px 6px; padding: 4px 12px 4px 5px; box-sizing: border-box;
    border: 2.5px solid var(--line); border-radius: 12px 16px 12px 14px;
    background: var(--paper); color: var(--ink);
    font: inherit; text-align: left;
    box-shadow: 3px 3px 0 var(--line); cursor: pointer;
}
.notepad-boardtab:hover { rotate: -1.5deg; background: var(--yellow-100); }
.notepad-boardtab-t { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.notepad-boardtab-s { display: block; font-size: .75rem; color: var(--gray-600); line-height: 1.1; white-space: nowrap; }
.notepad-peek {
    position: relative; flex-shrink: 0;
    width: 58px; height: 36px; border-radius: 5px; overflow: hidden;
    background: var(--p-canvas, var(--snow));
    box-shadow: 0 0 0 2px var(--gray-300), 0 0 0 3px var(--gray-500);
}
.notepad-peek i { position: absolute; top: 6px; left: 6px; width: 13px; height: 11px; border-radius: 1px; background: var(--p-note, var(--green-200)); }
.notepad-peek i + i { top: 8px; left: 23px; background: var(--yellow-200); }
.notepad-peek b { position: absolute; left: 8px; right: 14px; bottom: 5px; height: 6px; border: 1.6px solid var(--p-ink, var(--gray-900)); border-top: none; border-radius: 0 0 50% 50%; }
.notepad-peek b::after { content: ""; position: absolute; right: -12px; top: -20px; width: 8px; height: 8px; border-radius: 50%; border: 1.4px solid var(--p-accent, var(--green-500)); }

.notepad.docked .notepad-topic { min-height: 46px; padding: 8px 16px; box-sizing: border-box; gap: 10px; }
.notepad.docked .notepad-topic-text { flex: 1; min-width: 0; }
.notepad-next {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 30px; padding: 2px 6px 2px 10px; box-sizing: border-box;
    border: 2px solid var(--line); border-radius: 10px 14px 9px 14px;
    background: var(--white); color: var(--gray-900); font: inherit; font-size: .88rem; white-space: nowrap; cursor: pointer;
}
.notepad-next:hover { background: var(--hi-yellow); }
.notepad-next b { font-weight: 400; }

.notepad-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ink-soft); }
.notepad-empty p { margin: 0; font-family: var(--font-marker); font-size: 1.5rem; }

/* the page head's round tools, beside search */
.app-top:has(.app-tools) { grid-template-columns: var(--col-w) minmax(0, 420px) auto; }
.app-tools { display: flex; align-items: center; gap: 8px; padding-top: 23px; }
.head-tool {
    width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; padding: 0;
    border: 2px solid transparent; border-radius: 50% 45% 52% 48%;
    background: transparent; color: var(--p-ink, var(--ink)); cursor: pointer; text-decoration: none;
}
.head-tool:hover { background: color-mix(in srgb, var(--gray-900) 8%, transparent); rotate: -8deg; color: var(--p-ink, var(--ink)); }
.head-tool.on { background: var(--hi-yellow); border-color: var(--line); color: var(--gray-900); }

/* the board map: "add" beside the title, the sheet row in its own "board" section */
.map-add {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 30px; padding: 0 10px; font: inherit; font-size: .88rem;
    color: var(--ink); background: transparent; border: 2px dashed var(--line); border-radius: 14px 10px 14px 9px; cursor: pointer;
}
.map-add:hover { background: var(--hi-yellow); color: var(--gray-900); }

/* the whiteboard: sheet tabs left, "back to chat" right, across the frame's width */
.sheet-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; width: min(100%, calc((var(--content-h) - 48px) * var(--ar, 1.6))); height: 40px; margin-bottom: 8px; }
.sheet-bar .sheet-tabs { margin-bottom: 0; min-width: 0; }
.to-chat {
    flex-shrink: 0; align-self: flex-start;
    display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 12px 2px 10px; box-sizing: border-box;
    font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; line-height: 1;
    color: var(--gray-900); background: var(--hi-yellow); text-decoration: none;
    border: 2.5px solid var(--line); border-radius: 12px 14px 12px 10px; box-shadow: 3px 3px 0 var(--line);
}
.to-chat:hover { rotate: -1.5deg; color: var(--gray-900); }
.to-chat-cnt { font-family: var(--font-hand); font-weight: 400; font-size: .75rem; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center; background: var(--red-600); color: var(--white); }

@media (max-width: 1279.98px) {
    .app-page:not(.left-pane) .app-top:has(.app-tools) { grid-template-columns: auto minmax(0, 300px) minmax(0, 340px) auto; }
}
@media (max-width: 759.98px) {
    .canvases-shell .notepad.docked,
    .canvases-shell:has(.dock-voice) .notepad.docked { height: calc(100% - 12px); margin-top: 12px; box-shadow: 3px 4px 0 var(--line); }
    .notepad.docked .notepad-head { min-height: 50px; padding: 4px 6px 0 8px; }
    .notepad.docked .notepad-tab > button:first-child { font-size: 1.25rem; min-height: 40px; padding-left: 8px; }
    .notepad-tab-nm { max-width: 110px; }
    .notepad-boardtab { padding-right: 5px; }
    .notepad-boardtab > span:last-child { display: none; }
    .notepad.docked .notepad-topic { padding: 6px 10px; min-height: 40px; }
    .notepad-next .w { display: none; }
    .app-tools { padding-top: 0; }
    .head-tool { width: 40px; height: 40px; }
    .to-chat { font-size: 1.2rem; padding: 0 8px 2px; }
}

/* Admin right now: health on the left, switches + banner on the right */
.adm-now { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
.adm-now .field input { width: 100%; box-sizing: border-box; }
@media (max-width: 900px) {
    .adm-now { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* The banner Pento's team puts up for everyone (SiteBanner.razor) */
.site-banner {
    position: fixed; z-index: 950; top: 10px; left: 50%; translate: -50% 0; rotate: -.4deg;
    display: flex; align-items: center; gap: 10px; max-width: min(640px, calc(100vw - 32px)); box-sizing: border-box;
    padding: 8px 8px 8px 14px; background: var(--hi-yellow); color: var(--gray-900);
    border: 2.5px solid var(--line); border-radius: 12px 10px 13px 9px; box-shadow: var(--shadow-hard);
    font-size: 1rem; line-height: 1.25;
}
.site-banner span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .site-banner { top: 8px; left: 16px; right: 16px; translate: none; max-width: none; rotate: 0deg; }
}

/* A new build is waiting: sticky note bottom-right, shrinks to a tab when dismissed (UpdateBanner.razor) */
.upd-wrap { position: fixed; z-index: 960; right: 20px; bottom: 20px; width: 340px; font-family: var(--font-hand); }
.upd-card { position: relative; box-sizing: border-box; padding: 16px 16px 14px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 16px 18px 8px 18px / 14px 18px 10px 20px; box-shadow: 5px 6px 0 var(--line); rotate: -.8deg; }
.upd-tape { position: absolute; left: 24px; top: -11px; width: 64px; height: 22px; background: repeating-linear-gradient(-45deg, var(--blue-100) 0 10px, var(--gray-300) 10px 20px); border: 2px solid var(--line); rotate: -3deg; }
.upd-x { position: absolute; right: -10px; top: -10px; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--line); }
.upd-x:hover { background: var(--hi-yellow); }
.upd-row { display: flex; align-items: flex-start; gap: 10px; }
.upd-row .rio { flex-shrink: 0; }
.upd-text { min-width: 0; }
.upd-title { font-family: var(--font-marker); font-weight: 700; font-size: 23px; line-height: 1.05; margin: 2px 0; }
.upd-sub { font-size: 15px; color: var(--ink-soft); line-height: 1.3; }
.upd-more { display: inline-block; margin-top: 2px; font-size: 13px; }
.upd-btns { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.upd-later { background: none; border: none; font: inherit; font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 6px 2px; }
.upd-later:hover:not(:disabled) { color: var(--ink); }
.upd-reopen { position: fixed; z-index: 960; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 12px; background: var(--paper); border: 2.5px solid var(--line); border-radius: 14px 4px 4px 14px / 18px 4px 4px 18px; box-shadow: 3px 3px 0 var(--line); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; rotate: -.5deg; }
.upd-reopen:hover { background: var(--hi-yellow); }
@media (max-width: 480px) {
    .upd-wrap { right: 12px; bottom: 12px; width: min(340px, calc(100vw - 24px)); }
}

/* ---- desktop app updates (design canvas "App updates" › DesktopUpdate) ----
   Same corner paper as the web note; progress = pencil shading in a hand-drawn box.
   Done = green paper, stuck = pink. Too old = Rio over a veil, no close (like ChangeAsked). */
.du-corner { position: fixed; z-index: 960; right: 20px; bottom: 20px; width: 372px; max-width: calc(100vw - 24px); font-family: var(--font-hand); }
.du-corner .upd-card { animation: du-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.du-corner .du-tab { position: absolute; right: -20px; bottom: -20px; white-space: nowrap; }
.du-note.good { background: color-mix(in srgb, var(--green-100) 45%, var(--paper)); }
.du-note.good .upd-tape { background: repeating-linear-gradient(-45deg, var(--green-200) 0 10px, var(--green-100) 10px 20px); }
.du-note.bad { background: color-mix(in srgb, var(--red-100) 30%, var(--paper)); }
.du-note.bad .upd-tape { background: repeating-linear-gradient(-45deg, var(--red-100) 0 10px, color-mix(in srgb, var(--red-300) 45%, var(--red-100)) 10px 20px); }
.du-grow { flex: 1; }
.du-tight { margin-top: 8px; }
.du-ver { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 1px 9px; font-size: 13px; color: var(--ink-soft); border: 2px dashed var(--ink-faint); border-radius: 10px; }
.du-voice { margin-top: 10px; display: flex; align-items: flex-start; gap: 6px; padding: 6px 10px; font-size: 13px; line-height: 1.3; background: var(--yellow-200); color: var(--amber-950); border-radius: 2px 2px 12px 2px / 2px 2px 8px 2px; rotate: -.4deg; }
.du-voice .icon { margin-top: 1px; }
.du-bar { position: relative; height: 22px; margin-top: 10px; box-sizing: border-box; border: 2.5px solid var(--line); border-radius: 14px 8px 12px 9px / 9px 12px 8px 14px; background: var(--paper); overflow: hidden; }
.du-bar.tall { height: 26px; margin-top: 18px; }
.du-fill { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(-55deg, var(--blue-500) 0 3px, var(--blue-300) 3px 7px); border-right: 2.5px solid var(--line); transition: width .35s linear; }
.du-bar.paused .du-fill { background: repeating-linear-gradient(-55deg, var(--gray-500) 0 3px, var(--gray-300) 3px 7px); }
.du-bar.bad .du-fill { background: repeating-linear-gradient(-55deg, var(--red-500) 0 3px, var(--red-100) 3px 7px); }
.du-meta { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.du-meta.tall { font-size: 15px; }
.du-pm { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.du-ring { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line); background: conic-gradient(var(--blue-500) var(--pct, 0%), var(--paper) 0); }
.du-news { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.du-news li { display: flex; gap: 7px; font-size: 14px; line-height: 1.3; color: var(--ink); }
.du-news li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--green-500); }

.du { position: fixed; inset: 0; z-index: 970; font-family: var(--font-hand); }
.du-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--night-800) 55%, transparent); cursor: not-allowed; }
.du-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px; box-sizing: border-box; pointer-events: none; }
.du-stage > * { pointer-events: auto; }
.du-rio { position: relative; align-self: center; margin-top: 160px; flex-shrink: 0; filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--black) 25%, transparent)); }
.du-say { position: absolute; left: -24px; top: -64px; white-space: nowrap; padding: 6px 14px; background: var(--yellow-200); color: var(--amber-950); font-size: 19px; border-radius: 2px 2px 12px 2px / 2px 2px 8px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 2px 6px 10px -5px color-mix(in srgb, var(--black) 35%, transparent); rotate: -3deg; animation: du-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
.du-card { position: relative; box-sizing: border-box; width: min(580px, calc(100vw - 290px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 18px 24px 20px; color: var(--ink); background: var(--paper); border: 2.5px solid var(--line); border-radius: 22px 16px 24px 14px / 16px 24px 14px 22px; box-shadow: 6px 7px 0 var(--line); animation: du-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.du-card.shake-a { animation: ask-shake-a .4s ease-in-out; }
.du-card.shake-b { animation: ask-shake-b .4s ease-in-out; }
.du-tail { position: absolute; left: -13.5px; top: 62%; width: 22px; height: 22px; background: var(--paper); border: 2.5px solid var(--line); border-top: none; border-left: none; rotate: 135deg; }
.du-top { display: flex; align-items: center; gap: 8px; }
.du-who { font-family: var(--font-marker); font-weight: 700; font-size: 24px; color: var(--accent-strong); }
.du-role { font-size: 14px; color: var(--ink-soft); }
.du-h { margin: 4px 0 6px; font-family: var(--font-marker); font-weight: 700; font-size: 38px; line-height: 1.05; }
.du-p { margin: 0; font-size: 18px; line-height: 1.35; }
.du-scrap { position: relative; display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 14px 18px 12px; background: var(--yellow-200); color: var(--amber-950); border-radius: 2px 2px 18px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 3px 8px 12px -6px color-mix(in srgb, var(--black) 35%, transparent); rotate: -.5deg; }
.du-scrap::before { content: ""; position: absolute; top: -10px; left: 36px; width: 84px; height: 22px; background: color-mix(in srgb, var(--yellow-300) 75%, transparent); border: 1.5px solid color-mix(in srgb, var(--gray-900) 25%, transparent); rotate: -4deg; }
.du-lab { font-size: 14px; color: var(--yellow-800); }
.du-num { font-family: var(--font-marker); font-weight: 700; font-size: 26px; line-height: 1.05; }
.du-num s { text-decoration-thickness: 2px; color: var(--yellow-700); }
.du-scrap-arrow { color: var(--yellow-800); }
.du-newest { margin-left: auto; text-align: right; font-size: 14px; color: var(--yellow-800); }
.du-foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.du-big { font-size: 18px; min-height: 46px; }
.du-linky { font: inherit; font-size: 16px; background: none; border: none; padding: 6px 2px; cursor: pointer; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.du-linky:hover { color: var(--ink); }
.du-quit { margin-left: auto; }
.du-fine { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
@keyframes du-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.du.calm .du-card, .du.calm .du-say, .du-corner.calm .upd-card { animation: none; }
.du-corner.calm .du-fill { transition: none; }
@media (max-width: 760px) {
    .du-stage { flex-direction: column; justify-content: flex-start; overflow-y: auto; }
    .du-rio { margin-top: 40px; zoom: .6; }
    .du-card { width: 100%; max-height: none; }
    .du-tail { display: none; }
}

/* Admin uploads to check: tiles with looks fine / remove, then the disk bar */
.adm-ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.adm-utile { display: flex; flex-direction: column; border: 2.5px solid var(--line); border-radius: 10px 8px 12px 7px; background: var(--paper); overflow: hidden; }
.adm-utile .img { position: relative; display: grid; place-items: center; height: 120px; border-bottom: 2px solid var(--line); background: repeating-linear-gradient(45deg, var(--gray-100) 0 8px, var(--bone) 8px 16px); color: var(--gray-600); font-size: .85rem; }
.adm-utile .img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.adm-utile .cap { flex: 1; padding: 6px 8px; line-height: 1.2; overflow-wrap: anywhere; }
.adm-utile .cap small { display: block; color: var(--ink-soft); font-size: .85rem; }
.adm-utile .ub { display: flex; border-top: 2px dashed color-mix(in srgb, var(--line) 15%, transparent); }
.adm-utile .ub button { flex: 1; min-height: 40px; border: none; background: none; font: inherit; color: inherit; cursor: pointer; }
.adm-utile .ub button:hover:not(:disabled) { background: color-mix(in srgb, var(--line) 6%, transparent); }
.adm-utile .ub button + button { border-left: 2px dashed color-mix(in srgb, var(--line) 15%, transparent); }
.adm-utile .ub .bad { color: var(--danger, var(--red-700)); }
.adm-utile.done { opacity: .45; }
.adm-bar { display: flex; height: 22px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.adm-bar i { display: block; height: 100%; }
.adm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: .9rem; color: var(--ink-soft); }
.adm-legend span { display: flex; align-items: center; gap: 6px; }
.adm-legend i { width: 12px; height: 12px; border: 1.5px solid var(--line); border-radius: 3px; }
.adm-legend .chat, .adm-bar .chat { background: var(--blue-500); }
.adm-legend .avatars, .adm-bar .avatars { background: var(--pink-500); }
.adm-legend .notes, .adm-bar .notes { background: var(--purple-500); }
.adm-legend .ink, .adm-bar .ink { background: var(--green-500); }
.adm-legend .orphans, .adm-bar .orphans { background: var(--gray-500); }
.adm-legend .other, .adm-bar .other { background: repeating-linear-gradient(45deg, var(--mist-300) 0 4px, var(--sand) 4px 8px); }

/* admin: word filters */
.adm-filters { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
.adm-wchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adm-wchip { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 4px 0 12px; border: 2px solid var(--line); border-radius: 18px 14px 16px 12px; background: var(--paper); font-size: .95rem; }
.adm-wchip button { width: 30px; height: 30px; display: grid; place-items: center; border: none; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.adm-wchip button:hover:not(:disabled) { background: color-mix(in srgb, var(--line) 8%, transparent); }
.adm-wadd { max-width: 440px; margin: 12px 0 0; align-items: stretch; }
.adm-verdict { margin-top: 8px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 10px; color: var(--gray-900); }
.adm-verdict.ok { background: var(--green-100); }
.adm-verdict.no { background: var(--gray-100); }
@media (max-width: 900px) {
    .adm-filters { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* admin: debug tools */
.adm-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 14px; align-items: start; }
.adm-dcard { padding: 14px 16px; }
.adm-dcard .adm-row { margin-bottom: 0; }
.adm-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; }
.adm-kv dt { color: var(--ink-soft); }
.adm-kv dd { margin: 0; overflow-wrap: anywhere; }
.adm-kv small { color: var(--ink-soft); }
.adm-conn { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.adm-conn .t { flex: 1; min-width: 0; line-height: 1.35; }
.adm-conn .mono { color: var(--ink-soft); font-size: .9rem; }
.adm-dcard .mono { font-family: ui-monospace, "Cascadia Code", monospace; }
@media (max-width: 900px) {
    .adm-dgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Version / what's new (design canvas "Version.dc.html") ---------- */
/* standalone pages still wear your wall's colours, like every AppPage */
.version-page, .donate-page {
    min-height: 100vh; min-height: 100dvh;
    background: var(--p-wall, var(--wall)); color: var(--ink);
    transition: background .25s ease;
}
.version-page { padding: 28px max(24px, calc((100% - 1132px) / 2)) 64px; }
.vlog-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.vlog-back {
    display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
    border: 2.5px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink);
    box-shadow: var(--shadow-hard);
}
.vlog-back:hover { background: color-mix(in srgb, var(--line) 8%, transparent); }
.vlog-body-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.vlog-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 28px; }
.vlog-stampcard, .vlog-riocard { padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.vlog-stamp {
    display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto;
    border: 3px dashed var(--line); border-radius: 50%; rotate: -6deg; text-align: center; color: var(--accent-strong, var(--blue-700));
}
.vlog-stamp .num { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 2.4rem; line-height: 1; }
.vlog-stamp .tag { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.vlog-betatape, .vlog-inlinetape { rotate: -1.5deg; }
.vlog-plats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vlog-plat {
    display: inline-flex; align-items: center; font-size: .88rem; padding: 3px 12px;
    border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; background: var(--paper);
}
.vlog-plat.soon { color: var(--ink-soft); }
.vlog-riocard svg.rio { margin: 0 auto; }
.vlog-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vlog-addbtn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px;
    border: 2.5px dashed var(--line); border-radius: 14px; background: transparent; color: var(--ink-soft);
    font: inherit; font-size: 1rem; cursor: pointer;
}
.vlog-addbtn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.vlog-compose { padding: 20px 24px; }
.vlog-compose-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vlog-compose-fields { display: flex; flex-direction: column; gap: 12px; }
.vlog-compose-row { display: flex; align-items: center; gap: 10px; }
.vlog-card { padding: 22px 28px; }
.vlog-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vlog-date { font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; display: flex; align-items: baseline; gap: 10px; margin: 0; }
.vlog-date small { font-family: var(--font-hand); font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.vlog-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vlog-icon {
    width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--line);
    border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.vlog-icon:hover { background: var(--yellow-500); color: var(--gray-900); }
.vlog-icon.danger:hover { background: var(--red-100); color: var(--gray-900); }
.vlog-items { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.vlog-li { display: flex; gap: 10px; font-size: 1rem; line-height: 1.4; }
.vlog-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-strong, var(--blue-700)); flex-shrink: 0; margin-top: 7px; }
.vlog-confirm {
    display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px;
    background: color-mix(in srgb, var(--danger) 12%, var(--paper)); border: 2px solid var(--danger);
    border-radius: 10px; font-size: .95rem;
}
.vlog-confirm .btn { margin-left: auto; }
.vlog-confirm .btn.ghost { margin-left: 0; }
.vlog-end { text-align: center; padding: 18px; color: var(--ink-faint); font-size: .95rem; min-height: 1.4em; }
/* a big day folds by height; "read more" fetches the rest (canvas: Version.dc.html v-body/v-more) */
.vlog-body { position: relative; }
.vlog-body.folded { max-height: 236px; overflow: hidden; }
.vlog-body.fade::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none;
    background: linear-gradient(color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 85%);
}
.vlog-h { font-family: var(--font-marker); font-weight: 700; font-size: 1.3rem; line-height: 1.1; color: var(--accent-strong, var(--blue-700)); margin: 6px 0 0; display: flex; align-items: baseline; gap: 8px; }
.vlog-h small { font-family: var(--font-hand); font-weight: 400; font-size: .82rem; color: var(--ink-soft); }
.vlog-more { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.vlog-morebtn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 14px;
    font: inherit; font-size: 1rem; color: var(--gray-900); background: var(--yellow-100); cursor: pointer;
    border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; rotate: -.6deg;
}
.vlog-morebtn:hover:not(:disabled) { background: var(--yellow-500); }
.vlog-morebtn.less { background: transparent; color: var(--ink); border-style: dashed; }
.vlog-morebtn .up { rotate: 180deg; }
.vlog-morehint { font-size: .88rem; color: var(--ink-soft); }
.vlog-morehint.narrow { display: none; }
.vlog-reacts { margin-top: 12px; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--ink) 12%, transparent); }
.vlog-count { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-soft); }
.vlog-count b { font-weight: 400; color: var(--ink); }
.vlog-count.over, .vlog-count.over b { color: var(--danger); }
.vlog-sentinel { height: 1px; margin-top: -20px; }
.vlog-older {
    width: 100%; min-height: 48px; font: inherit; font-size: 1rem; color: var(--ink); cursor: pointer;
    border: 2.5px dashed var(--line); border-radius: 14px 10px 16px 12px; background: var(--paper);
}
@media (max-width: 600px) {
    .version-page { padding: 16px 12px 48px; }
    .vlog-card { padding: 16px 16px 14px; }
    .vlog-body.folded { max-height: 216px; }
    .vlog-morehint.wide { display: none; }
    .vlog-morehint.narrow { display: inline; }
    .vlog-morebtn { min-height: 44px; }
}
@media (max-width: 900px) {
    .vlog-body-grid { grid-template-columns: minmax(0, 1fr); }
    .vlog-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .vlog-stampcard, .vlog-riocard { flex: 1; min-width: 220px; }
}

/* ---------- Rio, sad (the empty seed bowl) ---------- */
.rio.sad .rio-bird { animation: rio-sigh 3.8s ease-in-out infinite; }
.rio .rio-tear { animation: rio-tear 2.6s ease-in infinite; }
@keyframes rio-sigh { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.015, 1.03) translateY(-2px); } 70% { transform: scale(1.03, .95); } }
@keyframes rio-tear { 0%, 30% { opacity: 0; transform: translateY(-3px); } 45% { opacity: 1; transform: translateY(0); } 85% { opacity: .9; transform: translateY(22px); } 100% { opacity: 0; transform: translateY(26px); } }

/* ---------- Tip page, "top up Rio's seed bowl" (design canvas "Donate.dc.html") ---------- */
.donate-page { padding: 28px max(24px, calc((100% - 1344px) / 2)) 64px; display: flex; flex-direction: column; gap: 24px; }
.donate-page .vlog-head { margin-bottom: 0; }
.dn-hero { display: flex; align-items: center; gap: 40px; padding: 18px 36px; }
.dn-say { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dn-headline { font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; line-height: 1.05; }
.dn-meter { width: 100%; max-width: 420px; height: 14px; border: 2.5px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.dn-meter i { display: block; height: 100%; background: var(--orange-300); }
.dn-h2 { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; line-height: 1.05; margin: 0; }
.dn-grid { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 24px; }
.dn-bill { padding: 20px 26px; }
.dn-bill .small { margin: 4px 0 6px; }
.dn-line { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 15%, transparent); }
.dn-line:last-of-type { border-bottom: none; }
.dn-line .grow, .dn-tier .grow { flex: 1; min-width: 0; }
.dn-aside { color: var(--ink-soft); }
.dn-total { display: flex; align-items: baseline; gap: 8px; padding: 12px 4px 2px; }
.dn-total b { font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; color: var(--accent-strong); }
.dn-chipin { padding: 20px 28px; display: flex; flex-direction: column; gap: 14px; }
.dn-chiphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dn-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dn-chip {
    font: inherit; font-size: .95rem; min-height: 38px; padding: 2px 14px; border: 2px solid var(--line);
    border-radius: 14px 10px 14px 9px; background: var(--paper); color: var(--ink); cursor: pointer;
}
.dn-chip:hover { rotate: -2deg; }
.dn-chip.on { background: var(--hi-yellow); color: var(--gray-900); }
.dn-tiers { display: flex; flex-direction: column; gap: 10px; }
.dn-tier {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 16px; font: inherit;
    border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; background: var(--paper); color: var(--ink);
    cursor: pointer; box-shadow: 3px 4px 0 color-mix(in srgb, var(--line) 15%, transparent);
}
.dn-tier:hover { rotate: -.5deg; }
.dn-tier.on { background: var(--note); color: var(--p-note-ink, var(--gray-900)); box-shadow: 3px 4px 0 var(--line); }
.dn-tier .price { font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; color: var(--accent-strong); flex-shrink: 0; }
.dn-tier .name { font-size: 1.05rem; font-weight: 700; }
.dn-tier .perk { font-size: .82rem; color: var(--ink-soft); }
.dn-tier.on .perk { color: var(--gray-600); }
.dn-own { display: flex; flex-direction: column; gap: 4px; font-size: .95rem; max-width: 220px; }
.dn-own input {
    font: inherit; font-size: 1.05rem; min-height: 42px; padding: 4px 12px; border: 2px solid var(--line);
    border-radius: 10px; background: var(--surface); color: var(--ink); box-sizing: border-box;
}
.dn-pay { margin-top: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dn-fine { font-size: .82rem; color: var(--ink-soft); max-width: 300px; line-height: 1.4; }
/* the thank-you wall (design canvas "ThanksWall.dc.html"): physical paper — pinned light in
   every theme, so dark themes can't recolour it through a role it doesn't own. Names only,
   never amounts: the four inks are rank bands among signers, packed from the middle out. */
.tw {
    /* pin the paper roles: this sheet is always cream with near-black ink, whatever the theme */
    --paper: var(--cream);
    --surface: var(--snow);
    --ink: var(--gray-900);
    --ink-soft: var(--gray-600);
    --ink-faint: var(--gray-500);
    --line: var(--gray-900);
    display: flex; flex-direction: column; gap: 12px; padding: 14px 22px;
}
.tw-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; font-size: 30px; }
.tw-head { display: flex; align-items: center; gap: 14px; }
.tw-ttl { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tw-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.tw-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.tw-found { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.tw-you {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 8px 3px 12px;
    border: 2px solid var(--line); border-radius: 4px 12px 4px 12px; background: var(--yellow-100);
    font-size: 14px; rotate: .6deg; box-sizing: border-box;
}
.tw-swatch { display: inline-block; width: 18px; height: 10px; border-radius: 5px 2px; background: var(--yellow-500); border: 1.5px solid var(--line); flex-shrink: 0; }
.tw-link {
    font: inherit; font-size: 14px; background: none; border: none; padding: 0 6px; min-height: 36px;
    color: var(--blue-500); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; cursor: pointer;
}
.tw-link:hover { color: var(--blue-700); }
.tw-chip {
    font: inherit; font-size: 14px; min-height: 34px; padding: 2px 12px; display: inline-flex; align-items: center;
    border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; background: var(--paper); color: var(--ink);
    cursor: pointer; text-decoration: none;
}
.tw-chip:hover { rotate: -2deg; }
.tw-chip.on { background: var(--yellow-500); }
.tw-chip.cta { background: var(--blue-700); color: var(--on-accent); }
.tw-pick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tw-error { margin: 0; font-size: .9rem; color: var(--danger-text); }
.tw-paper {
    position: relative; overflow-y: auto; overflow-x: hidden; border-radius: 10px; min-height: 220px; background: var(--surface);
    background-image: radial-gradient(color-mix(in srgb, var(--gray-900) 9%, transparent) 1px, transparent 1.3px);
    background-size: 18px 18px; border: 2px dashed color-mix(in srgb, var(--gray-900) 18%, transparent);
}
.tw-in { position: relative; margin: 0 auto; padding: 0; list-style: none; }
.tw-n { position: absolute; white-space: nowrap; line-height: 1; transition: opacity .2s; }
.tw-n.t1, .tw-n.t2 { font-family: var(--font-marker); font-weight: 700; }
.tw-n.t3, .tw-n.t4 { font-family: var(--font-hand); }
.tw-n.dim { opacity: .16; }
.tw-n.me { background: linear-gradient(104deg, transparent .9%, var(--yellow-500) 2.4%, var(--yellow-500) 97%, transparent 98.5%); border-radius: .5em .2em; color: var(--gray-900) !important; }
.tw-n.hit { background: linear-gradient(104deg, transparent .9%, var(--blue-100) 2.4%, var(--blue-100) 97%, transparent 98.5%); border-radius: .5em .2em; color: var(--gray-900) !important; }
.tw-n.key { position: static; }
.tw-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 16px; color: var(--ink-soft); font-size: 15px;
}
.tw-empty .tw-mk { font-size: 26px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
    .tw-n { transition: none; }
    .tw-chip:hover { rotate: 0deg; }
}
@media (max-width: 760px) {
    /* phones never nest a scroller: the paper grows and the page scrolls */
    .tw { padding: 14px 12px 12px; }
    .tw-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .tw-tools { flex-direction: column; align-items: stretch; }
    .tw-you { justify-content: center; }
    .tw-mk { font-size: 26px; }
    .tw-paper { min-height: 320px; }
}

/* the bowl scene: Rio stands on the rim and pivots from her feet (61.5, 148.5 in her 150px box).
   One 3s loop: wind up, dip, peck-peck, come up, chew. --dip is worked out per fill level so her
   beak lands in the seeds; the seeds by it jostle but never go. */
.dn-scene { position: relative; width: 420px; height: 264px; flex-shrink: 0; }
.dn-bowl { position: absolute; left: 0; top: 0; overflow: visible; }
.dn-rio { position: absolute; width: 150px; height: 158px; transform-origin: 61.5px 148.5px; transform: rotate(var(--rest)); }
.dn-peck { animation: dn-peck 3s infinite; }
@keyframes dn-peck {
    0% { transform: rotate(var(--rest)); animation-timing-function: ease-in-out; }
    12% { transform: rotate(calc(var(--rest) + 5deg)); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
    24% { transform: rotate(var(--dip)); animation-timing-function: ease-out; }
    29% { transform: rotate(calc(var(--dip) + 9deg)); animation-timing-function: ease-in; }
    34% { transform: rotate(var(--dip)); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    48% { transform: rotate(var(--rest)); animation-timing-function: ease-in-out; }
    55% { transform: rotate(calc(var(--rest) - 1.5deg)); }
    62%, 100% { transform: rotate(var(--rest)); }
}
.dn-peck .rio .rio-jaw { animation: dn-chew 3s infinite; }
@keyframes dn-chew {
    0%, 18% { transform: translateY(0); } 22% { transform: translateY(5px); } 25% { transform: translateY(0); }
    31% { transform: translateY(4px); } 34% { transform: translateY(0); }
    52% { transform: translateY(3px); } 57% { transform: translateY(0); } 62% { transform: translateY(3px); } 67% { transform: translateY(0); }
    72% { transform: translateY(3px); } 77%, 100% { transform: translateY(0); }
}
.dn-jostle { animation: dn-jostle 3s infinite; }
@keyframes dn-jostle {
    0%, 24% { transform: translate(0, 0); } 27% { transform: translate(0, -3px); } 30%, 34% { transform: translate(0, 0); }
    37% { transform: translate(0, -2.5px); } 40%, 100% { transform: translate(0, 0); }
}
.dn-crunch { transform-box: fill-box; transform-origin: center bottom; opacity: 0; animation: dn-crunch 3s infinite; }
@keyframes dn-crunch {
    0%, 23% { opacity: 0; transform: scale(.6); } 26% { opacity: 1; transform: scale(1); } 30% { opacity: 0; transform: scale(1.1); }
    34% { opacity: 0; transform: scale(.6); } 37% { opacity: 1; transform: scale(1.05); } 42%, 100% { opacity: 0; transform: scale(1.1); }
}
/* the flicked husk: x moves at a steady speed, y rises then falls faster — a cheap parabola */
.dn-flx { opacity: 0; animation: dn-flx 3s linear infinite; }
@keyframes dn-flx {
    0%, 34% { opacity: 0; transform: translateX(0); } 35% { opacity: 1; transform: translateX(0); }
    60% { opacity: 1; transform: translateX(var(--fx)); } 86% { opacity: 1; transform: translateX(var(--fx)); }
    94%, 100% { opacity: 0; transform: translateX(var(--fx)); }
}
.dn-fly { animation: dn-fly 3s infinite; }
@keyframes dn-fly {
    0%, 34% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
    46% { transform: translateY(var(--fpk)); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    60% { transform: translateY(var(--fy)); animation-timing-function: ease-out; }
    64% { transform: translateY(calc(var(--fy) - 5px)); animation-timing-function: ease-in; }
    68%, 100% { transform: translateY(var(--fy)); }
}
.dn-spin { transform-box: fill-box; transform-origin: center; animation: dn-spin 3s infinite; }
@keyframes dn-spin { 0%, 34% { transform: rotate(0); } 60%, 100% { transform: rotate(540deg); } }
.calm .dn-crunch, .calm .dn-flx { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .dn-peck, .dn-peck .rio .rio-jaw, .dn-jostle, .dn-crunch, .dn-flx, .dn-fly, .dn-spin { animation: none; }
    .dn-crunch, .dn-flx { visibility: hidden; }
}
@media (max-width: 900px) {
    .dn-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 20px; }
    .dn-scene { align-self: center; }
    .dn-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .donate-page { padding: 20px 16px 48px; }
    .dn-scene { zoom: .74; }
    .dn-headline { font-size: 1.6rem; }
}

/* ---- staff asked you to change your name / avatar (design canvas "Staff asks you to change") ----
   Rio over the frozen app; no close, no Esc. Poking the dark bit gets a "nope" and a shake.
   Phones: Rio top-left with a speech bubble, the card becomes a tall sheet that can't be swiped. */
.ask { position: fixed; inset: 0; z-index: 950; }
.ask-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--night-800) 62%, transparent); cursor: not-allowed; }
.ask.done .ask-veil { cursor: default; }
.ask-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px; box-sizing: border-box; pointer-events: none; }
.ask-stage > * { pointer-events: auto; }
.ask-rio { position: relative; align-self: center; margin-top: 180px; flex-shrink: 0; filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--black) 25%, transparent)); }
.ask-say {
    position: relative; box-sizing: border-box; width: min(700px, calc(100vw - 290px)); max-height: calc(100dvh - 48px);
    display: flex; flex-direction: column; padding: 18px 24px 20px;
    color: var(--ink); background: var(--paper);
    border: 2.5px solid var(--line); border-radius: 22px 16px 24px 14px / 16px 24px 14px 22px; box-shadow: 6px 7px 0 var(--line);
    animation: ask-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
.ask-say.ask-done { width: min(470px, calc(100vw - 290px)); }
.ask-tail { position: absolute; left: -13.5px; top: 58%; width: 22px; height: 22px; background: var(--paper); border: 2.5px solid var(--line); border-top: none; border-left: none; rotate: 135deg; }
.ask-say.shake-a { animation: ask-shake-a .4s ease-in-out; }
.ask-say.shake-b { animation: ask-shake-b .4s ease-in-out; }
@keyframes ask-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ask-shake-a { 20% { transform: translateX(-8px) rotate(-.8deg); } 40% { transform: translateX(7px) rotate(.8deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes ask-shake-b { 20% { transform: translateX(-8px) rotate(-.8deg); } 40% { transform: translateX(7px) rotate(.8deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.ask.calm .ask-say, .ask.calm .ask-nope { animation: none; }
.ask-lockbar { display: none; }
.ask-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.ask-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ask-who { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; color: var(--accent-strong); }
.ask-role { font-size: .9rem; color: var(--ink-soft); }
.ask-lock { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: .9rem; color: var(--ink-soft); border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 12px; }
.ask-h { margin: 4px 0; font-family: var(--font-marker); font-weight: 700; font-size: 2.25rem; line-height: 1.05; }
.ask-p { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.ask-seen { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); white-space: nowrap; }
.ask-q { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50% 45% 55% 48%; border: 1.5px solid var(--line); background: var(--gray-300); color: var(--gray-900); font-family: var(--font-marker); font-weight: 700; font-size: .85rem; }
/* staff's reason, on a taped scrap of paper */
.ask-why { position: relative; margin-top: 16px; padding: 14px 16px 12px; background: var(--yellow-200); color: var(--amber-950); border-radius: 2px 2px 18px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 3px 8px 12px -6px color-mix(in srgb, var(--black) 35%, transparent); rotate: -.6deg; }
.ask-why::before { content: ""; position: absolute; top: -10px; left: 36px; width: 84px; height: 22px; background: color-mix(in srgb, var(--yellow-300) 75%, transparent); border: 1.5px solid color-mix(in srgb, var(--gray-900) 25%, transparent); rotate: -4deg; }
.ask-from { font-size: .875rem; color: var(--yellow-800); }
.ask-why q { display: block; margin-top: 2px; font-size: 1.2rem; line-height: 1.3; overflow-wrap: anywhere; }
.ask-old { margin-top: 6px; font-size: .95rem; color: var(--yellow-800); }
.ask-old s { text-decoration-thickness: 2px; }
.ask-lbl { margin: 14px 0 6px; font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ask-lbl small { font-family: var(--font-hand); font-weight: 400; font-size: .875rem; color: var(--ink-soft); }
.ask-check { display: flex; align-items: center; gap: 6px; min-height: 24px; margin-top: 4px; font-size: .95rem; }
.ask-check.ok { color: var(--success-text); }
.ask-check.no { color: var(--danger-text); }
.ask-check.idle { color: var(--ink-soft); }
.ask-avrow { display: flex; align-items: center; gap: 18px; }
.ask-oldav { position: relative; flex-shrink: 0; width: 80px; height: 80px; box-sizing: border-box; overflow: hidden; border-radius: 50% 45% 55% 48%; border: 2.5px dashed var(--gray-500); background: var(--sand); }
.ask-gone { position: absolute; left: -10px; right: -10px; top: 30px; padding: 1px 0; text-align: center; background: var(--gray-900); color: var(--cream); font-size: .8rem; rotate: -12deg; }
.ask-arrow { flex-shrink: 0; color: var(--ink-soft); }
.ask-newav { flex-shrink: 0; display: grid; place-items: center; width: 80px; height: 80px; box-sizing: border-box; border-radius: 50% 45% 55% 48%; border: 2.5px solid var(--line); color: var(--white); font-family: var(--font-marker); font-weight: 700; font-size: 2.9rem; line-height: 1; }
.ask-avpick { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.ask-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 2.5px dashed var(--line); border-radius: 14px 10px 16px 12px; }
.ask-appeal { margin-top: 12px; padding: 12px 14px; border: 2px dashed var(--gray-500); border-radius: 12px 9px 13px 8px; }
.ask-appeal textarea { resize: none; }
.ask-appeal-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ask-appeal-acts .small { margin-left: auto; }
.ask-sent { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; font-size: .95rem; background: var(--green-100); color: var(--green-900); border: 2px solid var(--line); border-radius: 12px 9px 13px 8px; }
.ask-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.ask-links { display: contents; }
.ask-links .out { margin-left: auto; }
.ask-link { min-height: 40px; padding: 0; border: none; background: none; font: inherit; font-size: 1rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ask-link:hover { color: var(--ink); }
/* Rio's "nope" when you poke round the lock */
.ask-nope { position: absolute; left: -140px; bottom: calc(100% + 16px); width: 264px; box-sizing: border-box; padding: 10px 14px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 18px 14px 20px 12px / 14px 20px 12px 18px; box-shadow: 4px 5px 0 var(--line); font-size: 1.05rem; line-height: 1.25; animation: ask-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
.ask-nope::after { content: ""; position: absolute; left: 190px; bottom: -13.5px; width: 20px; height: 20px; background: var(--paper); border: 2.5px solid var(--line); border-top: none; border-left: none; rotate: 45deg; }
.ask-nope b { font-family: var(--font-marker); font-size: 1.5rem; color: var(--red-700); }
.ask-nope.psst b { color: var(--ink); }

@media (max-width: 759.98px) {
    .ask-stage { display: block; padding: 0; }
    .ask-rio { position: absolute; left: 8px; top: 44px; margin: 0; }
    .ask.done .ask-rio { top: auto; bottom: 260px; left: 20px; }
    .ask-nope { left: 112px; bottom: auto; top: -14px; width: min(258px, calc(100vw - 132px)); padding: 9px 12px; font-size: .95rem; }
    .ask-nope::after { left: -12px; top: 34px; bottom: auto; width: 18px; height: 18px; border: 2.5px solid var(--line); border-top: none; border-right: none; }
    .ask-nope b { font-size: 1.4rem; }
    .ask-say {
        position: absolute; left: 0; right: 0; bottom: 0; top: 160px; width: auto; max-height: none;
        padding: 0; border-bottom: none; border-radius: 18px 22px 0 0;
        box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent), 0 -18px 40px color-mix(in srgb, var(--night-900) 25%, transparent);
        animation: ask-up .35s cubic-bezier(.3, 1.3, .5, 1);
    }
    .ask-say.ask-done { top: auto; width: auto; padding: 18px 18px 22px; }
    .ask-say.shake-a { animation: ask-bump-a .4s ease-in-out; }
    .ask-say.shake-b { animation: ask-bump-b .4s ease-in-out; }
    .ask-tail, .ask-lock { display: none; }
    .ask-lockbar { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 36px; margin-top: 4px; padding: 0; border: none; background: none; font: inherit; font-size: .8rem; color: var(--ink-soft); cursor: not-allowed; }
    .ask-scroll { margin: 0; padding: 0 16px 12px; }
    .ask-who { font-size: 1.4rem; }
    .ask-role { font-size: .8rem; }
    .ask-h { font-size: 2rem; }
    .ask-p { font-size: 1rem; }
    .ask-why q { font-size: 1.05rem; }
    .ask-lbl small { display: block; flex-basis: 100%; font-size: .8rem; }
    .ask-avrow { flex-wrap: wrap; gap: 12px; }
    .ask-oldav, .ask-newav { width: 60px; height: 60px; font-size: 2.2rem; }
    .ask-gone { top: 21px; font-size: .75rem; }
    .ask-avpick { flex-basis: 100%; }
    .ask-foot { display: block; margin: 0; padding: 10px 14px 14px; border-top: 2.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
    .ask-say.ask-done .ask-foot { padding: 0; border: none; margin-top: 16px; }
    .ask-save { width: 100%; min-height: 50px; }
    .ask-links { display: flex; justify-content: space-between; margin-top: 4px; }
    .ask-link { font-size: .95rem; }
    @keyframes ask-up { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes ask-bump-a { 20% { transform: translateY(-10px); } 45% { transform: translateY(4px); } 70% { transform: translateY(-3px); } }
    @keyframes ask-bump-b { 20% { transform: translateY(-10px); } 45% { transform: translateY(4px); } 70% { transform: translateY(-3px); } }
}

/* admin panel after 12 hours (design canvas "AdminAway"): the ChangeAsked look (.ask-*), a sad
   Rio, and a yellow note of hers when you poke the dark bit */
.ask-say.aa-card { width: min(560px, calc(100vw - 290px)); }
.ask-say.aa-done { width: min(460px, calc(100vw - 290px)); }
.aa .ask-veil { background: color-mix(in srgb, var(--night-800) 50%, transparent); }
.aa-say { position: absolute; left: -24px; bottom: calc(100% + 8px); padding: 6px 14px; white-space: nowrap; background: var(--yellow-200); color: var(--amber-950); font-size: 1.2rem; border-radius: 2px 2px 12px 2px / 2px 2px 8px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 2px 6px 10px -5px color-mix(in srgb, var(--black) 35%, transparent); rotate: -3deg; animation: ask-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
.aa.calm .aa-say { animation: none; }
.aa-me { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px 12px; background: var(--yellow-200); color: var(--amber-950); border-radius: 2px 2px 18px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 3px 8px 12px -6px color-mix(in srgb, var(--black) 35%, transparent); rotate: -.5deg; }
.aa-me::before { content: ""; position: absolute; top: -10px; left: 36px; width: 84px; height: 22px; background: color-mix(in srgb, var(--yellow-300) 75%, transparent); border: 1.5px solid color-mix(in srgb, var(--gray-900) 25%, transparent); rotate: -4deg; }
.aa-me .av { width: 44px; height: 44px; font-size: 1.4rem; flex-shrink: 0; }
.aa-n { font-size: 1.25rem; line-height: 1.1; }
.aa-u, .aa-since { font-size: .9rem; color: var(--yellow-800); }
.aa-since { margin-left: auto; text-align: right; }
.aa-fine { margin-top: 10px; font-size: .875rem; color: var(--ink-soft); }
@media (max-width: 759.98px) {
    .aa-say { left: 112px; bottom: auto; top: 10px; white-space: normal; width: min(220px, calc(100vw - 132px)); font-size: 1rem; }
    .aa-me { margin-top: 12px; }
    .aa-fine { margin: 0; padding: 0 14px 14px; }
}

/* can't reach your mic / camera / screen (design canvas "MediaBlocked"): Rio points up at the
   browser's bar. Not a lock — the veil closes it, the room stays live behind. */
.mb { position: fixed; inset: 0; z-index: 940; }
.mb-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--night-800) 45%, transparent); }
.mb-rio { position: absolute; z-index: 2; left: 70px; top: 236px; pointer-events: none; filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--black) 25%, transparent)); }
.mb-up { position: absolute; z-index: 2; left: 24px; top: 0; pointer-events: none; }
.mb-uptag { position: absolute; z-index: 2; left: 96px; top: 14px; padding: 4px 12px; background: var(--yellow-200); color: var(--amber-950); font-size: 1.05rem; border-radius: 2px 2px 12px 2px / 2px 2px 8px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 2px 6px 10px -5px color-mix(in srgb, var(--black) 35%, transparent); rotate: -2deg; pointer-events: none; }
.mb-card {
    position: absolute; z-index: 3; left: 390px; top: 96px; box-sizing: border-box; width: min(600px, calc(100vw - 414px)); max-height: calc(100dvh - 120px);
    display: flex; flex-direction: column; padding: 18px 24px 20px;
    color: var(--ink); background: var(--paper);
    border: 2.5px solid var(--line); border-radius: 22px 16px 24px 14px / 16px 24px 14px 22px; box-shadow: 6px 7px 0 var(--line);
    animation: ask-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
.mb-card.mb-done { top: 300px; width: min(460px, calc(100vw - 414px)); padding: 18px 24px; }
.mb-tail { position: absolute; left: -13.5px; top: 230px; width: 22px; height: 22px; background: var(--paper); border: 2.5px solid var(--line); border-top: none; border-left: none; rotate: 135deg; }
.mb-done .mb-tail { top: 60px; }
.mb-card.bump-a { animation: ask-shake-a .4s ease-in-out; }
.mb-card.bump-b { animation: ask-shake-b .4s ease-in-out; }
.mb.calm .mb-card { animation: none; }
.mb-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 4px; }
.mb-top { display: flex; align-items: center; gap: 8px; }
.mb-who { font-family: var(--font-marker); font-weight: 700; font-size: 1.5rem; color: var(--accent-strong); }
.mb-role { font-size: .875rem; color: var(--ink-soft); }
.mb-what { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: .875rem; color: var(--ink-soft); border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 12px; }
.mb-h { margin: 4px 0; font-family: var(--font-marker); font-weight: 700; font-size: 2.25rem; line-height: 1.05; }
.mb-done .mb-h { margin-top: 0; }
.mb-p { margin: 0; font-size: 1.125rem; line-height: 1.35; }
/* numbered steps, on a yellow scrap */
.mb-steps { position: relative; margin: 14px 0 0; padding: 16px 18px 12px; background: var(--yellow-200); color: var(--amber-950); border-radius: 2px 2px 18px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 3px 8px 12px -6px color-mix(in srgb, var(--black) 35%, transparent); rotate: -.5deg; }
.mb-steps::before { content: ""; position: absolute; top: -10px; left: 36px; width: 84px; height: 22px; background: color-mix(in srgb, var(--yellow-300) 75%, transparent); border: 1.5px solid color-mix(in srgb, var(--gray-900) 25%, transparent); rotate: -4deg; }
.mb-from { font-size: .875rem; color: var(--yellow-800); margin: -4px 0 4px; }
.mb-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.mb-steps li { counter-increment: st; position: relative; display: block; font-size: 1.125rem; line-height: 1.3; padding: 6px 0 6px 38px; min-height: 26px; }
.mb-steps li::before { content: counter(st); position: absolute; left: 0; top: 5px; width: 26px; height: 26px; box-sizing: border-box; display: grid; place-items: center; border: 2px solid var(--amber-950); border-radius: 50% 45% 55% 48%; font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; background: var(--cream); }
/* a little drawing of the browser's address bar, with the thing to click circled */
.mb-bar { display: inline-flex; align-items: center; gap: 8px; height: 34px; margin: 6px 0 2px; padding: 0 14px 0 8px; background: var(--white); border: 2px solid var(--gray-900); border-radius: 18px; font-size: .95rem; color: var(--gray-700); vertical-align: middle; }
.mb-hit { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: var(--gray-900); }
.mb-hit::after { content: ""; position: absolute; inset: -7px -8px -6px -7px; border: 2.5px solid var(--red-600); border-radius: 52% 46% 55% 44% / 48% 55% 44% 52%; rotate: -8deg; }
.mb-menu { color: var(--gray-900); }
.mb-menu b { font-weight: 400; text-decoration: underline; text-decoration-color: var(--red-600); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.mb-sw { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 8px; background: var(--cream); border: 1.5px solid color-mix(in srgb, var(--amber-950) 35%, transparent); font-size: 1rem; vertical-align: middle; }
.mb-knob { width: 26px; height: 14px; border-radius: 8px; background: var(--green-500); position: relative; }
.mb-knob::after { content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
.mb-watch { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .95rem; color: var(--ink-soft); }
.mb-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-500) 50%, transparent); animation: mb-ping 1.6s ease-out infinite; }
@keyframes mb-ping { to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--green-500) 0%, transparent); } }
.mb.calm .mb-dot { animation: none; }
/* a sketch of the browser's own "allow?" box, the right choices circled */
.mb-ask { margin-top: 14px; padding: 12px 14px 14px; background: var(--white); border: 2px solid var(--gray-900); border-radius: 14px 10px 16px 12px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent); rotate: -.4deg; font-size: 1rem; color: var(--gray-900); }
.mb-q { font-size: 1.05rem; margin-bottom: 8px; }
.mb-dev { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1.5px solid var(--gray-500); border-radius: 8px; color: var(--night-500); margin-bottom: 8px; }
.mb-dev.plain { border: none; padding: 0; }
.mb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.mb-row.col .mb-b { justify-content: center; }
.mb-tick { display: inline-flex; align-items: center; gap: 8px; }
.mb-box { width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--gray-900); border-radius: 4px; display: grid; place-items: center; }
.mb-b { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1.5px solid var(--gray-500); border-radius: 8px; background: var(--gray-100); color: var(--night-500); }
.mb-b.go { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.mb-circ { position: relative; }
.mb-circ::after { content: ""; position: absolute; inset: -7px -9px -7px -8px; border: 2.5px solid var(--red-600); border-radius: 52% 46% 55% 44% / 48% 55% 44% 52%; rotate: -4deg; pointer-events: none; }
.mb-note { margin-top: 10px; font-size: .95rem; color: var(--gray-600); }
.mb-note b { font-weight: 400; color: var(--gray-900); background: var(--yellow-200); padding: 0 4px; border-radius: 4px; }
.mb-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.mb-link { margin-left: auto; min-height: 36px; padding: 0; border: none; background: none; font: inherit; font-size: 1rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.mb-link:hover { color: var(--ink); }
.mb-fine { margin-top: 10px; font-size: .875rem; color: var(--ink-soft); }

/* not drawn for phones yet: ChangeAsked's sheet — Rio up top, the card slides up from the bottom */
@media (max-width: 759.98px) {
    .mb-rio { left: 8px; top: 44px; }
    .mb-card, .mb-card.mb-done {
        left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: calc(100dvh - 160px);
        padding: 16px 16px 14px; border-bottom: none; border-radius: 18px 22px 0 0;
        box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent), 0 -18px 40px color-mix(in srgb, var(--night-900) 25%, transparent);
        animation: ask-up .35s cubic-bezier(.3, 1.3, .5, 1);
    }
    .mb-tail, .mb-what { display: none; }
    .mb-h { font-size: 2rem; }
    .mb-p, .mb-steps li { font-size: 1rem; }
    .mb-foot { flex-wrap: wrap; }
}

/* admin › people: asking someone to change their name / avatar */
.adm-ask { margin-top: 10px; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 14px 10px 16px 12px; background: var(--paper); box-shadow: 3px 3px 0 var(--line); }
.adm-ask textarea { resize: none; }
.adm-waiting { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.adm-acts-gap { margin-top: 8px; }

/* ---------- your uploads (canvas: Uploads.dc.html, PhoneUploads.dc.html) ---------- */
.uploads-page .mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.up-side { display: flex; flex-direction: column; padding: 16px; overflow: auto; }
.up-side .lbl { font-family: var(--font-marker); font-weight: 700; font-size: 1.4rem; color: var(--ink-soft); margin: 0 0 6px; }
.up-big { font-family: var(--font-marker); font-weight: 700; font-size: 2.75rem; line-height: 1; }
.up-big small { font-family: var(--font-hand); font-weight: 400; font-size: 1.05rem; color: var(--ink-soft); }
.up-meter { display: flex; height: 22px; margin: 10px 0 8px; border: 2.5px solid var(--line); border-radius: 10px 7px 11px 8px; background: var(--white); overflow: hidden; }
.up-meter i { display: block; height: 100%; border-right: 2px solid var(--gray-900); }
.up-meter i:last-child { border-right: none; }
.up-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; font-size: 14px; }
.up-legend span { display: flex; align-items: center; gap: 6px; }
.up-legend i { width: 12px; height: 12px; border: 1.5px solid var(--line); border-radius: 3px; flex-shrink: 0; }
.up-legend b { font-weight: 400; color: var(--ink-soft); margin-left: auto; }
.up-soon { margin-top: 12px; padding: 8px 10px; border: 2px dashed var(--orange-700); border-radius: 10px 14px 9px 12px; color: var(--red-900); font-size: 14px; line-height: 1.3; }
.up-nav {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; flex-shrink: 0;
    border: none; background: none; border-radius: 10px; padding: 2px 10px; cursor: pointer; font: inherit; font-size: 16px; color: var(--ink); text-align: left;
}
.up-nav:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.up-nav.on { background: var(--hi-yellow); color: var(--gray-900); box-shadow: inset 0 0 0 2px var(--line); }
.up-nav .n { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
.up-nav.on .n { color: var(--gray-600); }
.up-how {
    margin-top: auto; padding: 12px 14px; background: var(--yellow-200); color: var(--amber-950); font-size: 14px; line-height: 1.3; rotate: -.6deg;
    border-radius: 2px 2px 16px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 3px 6px 10px -6px color-mix(in srgb, var(--black) 35%, transparent);
}
.up-how div + div { margin-top: 4px; }

.up-main { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.up-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 18px 12px; border-bottom: 2.5px solid var(--line); }
.up-bar h2 { margin: 0; font-size: 30px; }
.up-count { font-size: 15px; color: var(--ink-soft); }
.up-bar .btn .icon { margin-right: 4px; }
.up-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 18px; background: var(--yellow-100); color: var(--gray-900); border-bottom: 2px dashed color-mix(in srgb, var(--gray-900) 20%, transparent); font-size: 15px; }
.up-bulk b { font-weight: 400; }
.up-bulk span { color: var(--gray-600); font-size: 13px; }
.up-err { padding: 8px 18px; color: var(--red-800); }
.up-scroll { flex: 1; min-height: 0; overflow: auto; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding: 16px 18px 20px; }
.up-card { position: relative; display: flex; flex-direction: column; border: 2.5px solid var(--gray-900); border-radius: 6px 10px 8px 12px; background: var(--white); color: var(--gray-900); box-shadow: 3px 4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent); overflow: hidden; }
.up-card.picked { box-shadow: 0 0 0 3px var(--blue-700), 3px 4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent); }
.up-card.gone { border-style: dashed; border-color: var(--ink-faint); box-shadow: none; background: transparent; color: var(--ink); }
.up-thumb { position: relative; height: 118px; display: grid; place-items: center; border-bottom: 2px solid var(--gray-900); font-size: 13px; color: var(--gray-600); overflow: hidden; }
.up-thumb img, .up-th img { width: 100%; height: 100%; object-fit: cover; }
.up-card.gone .up-thumb { border-bottom: 2px dashed var(--ink-faint); color: var(--ink-faint); background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--gray-500) 9%, transparent) 10px 20px); }
.t-photo { background: repeating-linear-gradient(135deg, var(--gray-100) 0 10px, var(--bone) 10px 20px); }
.t-video { background: var(--gray-900); color: var(--gray-300); }
.t-file { background: var(--yellow-100); }
.t-audio { background: var(--mist-100); color: var(--purple-500); }
.up-play { width: 44px; height: 44px; display: grid; place-items: center; border: 2.5px solid var(--cream); border-radius: 50%; color: var(--cream); }
.up-fi { width: 46px; height: 56px; box-sizing: border-box; border: 2.5px solid var(--gray-900); border-radius: 3px 14px 3px 3px; background: var(--cream); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--gray-900); }
.up-wave { display: flex; align-items: center; gap: 4px; height: 56px; }
.up-wave i { width: 6px; border-radius: 3px; background: var(--purple-500); }
.up-pick { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 2.5px solid var(--gray-900); border-radius: 7px 5px 8px 6px; background: var(--cream); color: transparent; cursor: pointer; padding: 0; }
.up-pick.on { background: var(--blue-700); color: var(--white); }
.up-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; flex: 1; min-width: 0; }
.up-body .nm { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-body .meta { font-size: 13px; color: var(--gray-600); }
.up-card.gone .meta { color: var(--ink-soft); }
.up-body .where { display: flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-body .where .chip { width: 10px; height: 10px; border-width: 1.5px; }
.up-body .st, .up-phone .st, .up-sheet .st { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gray-600); line-height: 1.2; }
.up-card.gone .st { color: var(--ink-soft); }
.st.soon { color: var(--orange-700); }
.st.kept { color: var(--green-700); }
.up-acts { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.up-acts .btn { box-shadow: 2px 2px 0 var(--gray-900); border-color: var(--gray-900); color: var(--gray-900); background: var(--cream); }
.up-acts .btn.ghost { background: transparent; box-shadow: none; }
.up-acts .up-red { color: var(--red-800); border-color: var(--red-800); }
.up-acts a { font-size: 13px; margin-left: auto; }
.up-del { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 8px; border: 2px dashed var(--red-700); border-radius: 10px 8px 11px 7px; font-size: 13px; color: var(--red-900); line-height: 1.25; }
.up-del .b { display: flex; gap: 6px; }
.up-empty { grid-column: 1 / -1; text-align: center; padding: 60px 10px; color: var(--ink-soft); }
.up-empty .mk { font-size: 30px; color: var(--ink); }

/* phone: one list, a bottom sheet per upload */
.up-back { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
.uploads-page .app-title:has(.up-back) { display: flex; align-items: center; gap: 4px; }
.up-pickbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 2.5px solid transparent; border-radius: 50% 45% 52% 48%; background: none; color: var(--ink); cursor: pointer; }
.up-pickbtn.on { background: var(--hi-yellow); color: var(--gray-900); border-color: var(--line); box-shadow: 2px 2px 0 var(--line); }
.up-phone { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.up-pspace { padding: 12px 14px 10px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.up-pspace .up-big { font-size: 34px; }
.up-pspace .up-meter { height: 16px; margin: 8px 0 6px; }
.up-back-note { font-size: 13px; color: var(--orange-700); }
.up-back-note.none { color: var(--ink-soft); }
.up-list { flex: 1; overflow: auto; padding: 4px 6px 10px; }
.up-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 72px; padding: 6px; box-sizing: border-box; border: none; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 10%, transparent); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: 10px; }
.up-row.picked { background: color-mix(in srgb, var(--blue-700) 18%, transparent); }
.up-row.gone { opacity: .75; }
.up-th { position: relative; width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; border: 2px solid var(--gray-900); border-radius: 4px; box-sizing: border-box; font-size: 10px; font-weight: 700; overflow: visible; }
.up-th > img { border-radius: 2px; }
.up-th.t-gone { border-style: dashed; border-color: var(--ink-faint); color: var(--ink-faint); background: transparent; }
.up-th .up-fi { width: 30px; height: 36px; font-size: 9px; border-width: 2px; padding-bottom: 2px; }
.up-th .up-play { width: 28px; height: 28px; border-width: 2px; }
.up-th .up-wave { height: 30px; gap: 2px; }
.up-th .up-wave i { width: 3px; }
.up-tick { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--gray-900); border-radius: 6px 4px 7px 5px; background: var(--cream); color: transparent; }
.up-tick.on { background: var(--blue-700); color: var(--white); }
.up-mid { flex: 1; min-width: 0; line-height: 1.2; }
.up-mid .n { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-mid .w { display: block; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-size { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.up-pbulk { position: fixed; left: 10px; right: 10px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 8px 10px; box-sizing: border-box; background: var(--gray-900); color: var(--cream); border-radius: 14px 18px 12px 16px; font-size: 15px; }
.up-pbulk span { flex: 1; }
.up-pbulk button { min-height: 40px; padding: 0 12px; border: 2px solid var(--cream); border-radius: 12px 9px 12px 8px; background: transparent; color: var(--cream); font: inherit; font-size: 15px; cursor: pointer; }
.up-pbulk button.red { background: var(--red-700); border-color: var(--red-700); }
.up-scrim { position: fixed; inset: 0; z-index: 160; border: none; padding: 0; background: color-mix(in srgb, var(--night-900) 35%, transparent); cursor: pointer; }
.up-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 170; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-bottom: none; border-radius: 18px 22px 0 0; box-shadow: 0 -4px 0 color-mix(in srgb, var(--gray-900) 18%, transparent); }
.up-grab { width: 48px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--gray-300); }
.up-sheethead { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.up-sheethead > div { min-width: 0; line-height: 1.2; }
.up-sheethead .mk { font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-sheethead .s { font-size: 14px; color: var(--ink-soft); }
.up-sheet > .st { font-size: 15px; margin-bottom: 4px; }
.up-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 6px; border: none; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 12%, transparent); background: none; font: inherit; font-size: 18px; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.up-opt small { display: block; font-size: 13px; color: var(--ink-soft); }
.up-opt.red { color: var(--danger-text); }
.up-warn { margin: 10px 0 4px; padding: 10px 12px; border: 2px dashed var(--red-700); border-radius: 12px 9px 12px 10px; color: var(--danger-text); font-size: 15px; line-height: 1.3; }
.up-sheetbtns { display: flex; gap: 8px; margin-top: 8px; }

/* name card: your uploads row (canvas: Dock .dk-up2) + settings "space" count */
.dock-up2 { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px 9px 12px 10px; color: var(--ink); text-decoration: none; font-size: 16px; }
.dock-up2:hover { background: color-mix(in srgb, var(--note) 60%, transparent); color: var(--ink); }
.dock-up2 .r { display: flex; align-items: center; gap: 8px; }
.dock-up2 .r small { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
.dock-bar { height: 9px; border: 2px solid var(--line); border-radius: 6px 4px 6px 5px; background: var(--surface); overflow: hidden; }
.dock-bar i { display: block; height: 100%; background: var(--green-500); }
.set-count { margin-left: auto; font-size: 14px; color: var(--ink-soft); }

/* admin: space & storage (canvas: Admin.dc.html section "storage") */
.sp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
.sp-head { align-items: center; margin: 14px 0 8px; }
.sp-row {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 92px; align-items: center; gap: 10px; width: 100%;
    padding: 7px 8px; border: none; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent);
    background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: 8px;
}
.sp-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sp-row.on { background: color-mix(in srgb, var(--note) 55%, var(--paper)); box-shadow: inset 0 0 0 2px var(--line); }
.sp-nm { min-width: 0; line-height: 1.15; font-size: 16px; }
.sp-nm small { display: block; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar { height: 12px; border: 2px solid var(--line); border-radius: 7px 5px 7px 6px; background: var(--white); overflow: hidden; }
.sp-bar i { display: block; height: 100%; }
.sp-num { font-size: 14px; text-align: right; white-space: nowrap; }
.sp-card { padding: 14px 16px; border: 2.5px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--surface); }
.sp-sub { font-family: var(--font-marker); font-weight: 700; font-size: 20px; margin: 12px 0 4px; }
.sp-file { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); font-size: 15px; }
.sp-file .t { flex: 1; min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }
.sp-file .t small { display: block; font-size: 13px; color: var(--ink-soft); }
.sp-flag { font-size: 12px; padding: 0 7px; border-radius: 8px; background: var(--gray-100); color: var(--red-900); border: 1.5px solid var(--gray-900); white-space: nowrap; }
.sp-extra { font-size: 12px; padding: 0 7px; border-radius: 8px; background: var(--green-100); color: var(--green-900); border: 1.5px solid var(--gray-900); white-space: nowrap; }
.sp-remove { color: var(--red-700); border-color: var(--red-700); }
@media (max-width: 1100px) {
    .sp-cols { grid-template-columns: minmax(0, 1fr); }
    .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .sp-row { grid-template-columns: 34px minmax(0, 1fr) 70px; }
    .sp-row .sp-num { display: none; }
}

/* ============ profile card: tap a face or name (design canvas "Profiles") ============
   A taped polaroid card beside the tap; a bottom sheet on phones. Always paper-coloured,
   like the voice room's polaroids. Staff: hazard tape, yellow chip, Rio on a twig. */
.pf-veil { position: fixed; inset: 0; z-index: 400; padding: 0; border: none; background: transparent; cursor: default; }
.pf-veil.dim { background: color-mix(in srgb, var(--night-900) 45%, transparent); }
.pf-card {
    position: fixed; z-index: 401; box-sizing: border-box;
    background: var(--cream); color: var(--gray-900); font-family: var(--font-hand); font-size: 16px; text-align: left; outline: none;
}
.pf-card.pop {
    width: 320px; padding: 12px 12px 14px; rotate: -1deg;
    border: 2.5px solid var(--gray-900); border-radius: 6px 8px 10px 6px / 8px 6px 10px 8px;
    box-shadow: 6px 7px 0 var(--gray-900), 0 18px 30px color-mix(in srgb, var(--night-900) 22%, transparent);
    animation: pf-in .18s ease-out both;
}
.pf-card.sheet {
    left: 0; right: 0; bottom: 0; padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    border: 2.5px solid var(--gray-900); border-bottom: none; border-radius: 18px 22px 0 0;
    box-shadow: 0 -18px 40px color-mix(in srgb, var(--night-900) 25%, transparent);
    animation: pf-up .22s ease-out both;
}
/* the body scrolls on short screens; tape and Rio sit outside it so they're never clipped */
.pf-body { max-height: calc(100dvh - var(--pf-top, 0px) - 40px); overflow-y: auto; overscroll-behavior: contain; }
.pf-card.sheet .pf-body { max-height: calc(88dvh - 30px); }
@keyframes pf-in { from { opacity: 0; translate: 0 6px; } }
@keyframes pf-up { from { translate: 0 40px; opacity: .4; } }
.pf-tape { position: absolute; top: -12px; left: 50%; width: 84px; height: 22px; translate: -50% 0; rotate: -4deg; background: color-mix(in srgb, var(--yellow-500) 85%, transparent); pointer-events: none; }
.pf-card.friend .pf-tape { background: color-mix(in srgb, var(--red-100) 90%, transparent); }
.pf-card.me .pf-tape { background: color-mix(in srgb, var(--blue-100) 90%, transparent); }
.pf-tape.staff { left: 30%; width: 92px; background: repeating-linear-gradient(-45deg, var(--yellow-300) 0 9px, var(--gray-900) 9px 18px); opacity: .92; }
.pf-perch { position: absolute; right: 16px; top: -88px; z-index: 3; width: 124px; height: 92px; pointer-events: none; }
.pf-card.sheet .pf-perch { right: 22px; }
.pf-twig { position: absolute; left: 0; bottom: 0; display: block; overflow: visible; }
.pf-rio { position: absolute; left: 24px; top: 0; pointer-events: auto; }
.pf-grab { display: flex; justify-content: center; padding: 8px 0 10px; }
.pf-grab span { width: 44px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--gray-900) 30%, transparent); }
.pf-top { display: flex; gap: 14px; align-items: flex-start; }
/* the face is always a little polaroid: white frame, deeper chin, slight tilt */
.pf-photo {
    position: relative; flex-shrink: 0; display: grid; place-items: center; box-sizing: border-box;
    border: 6px solid var(--white); border-bottom-width: 18px; rotate: -2.5deg;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 30%, transparent), 3px 6px 10px -6px color-mix(in srgb, var(--black) 35%, transparent);
    color: var(--white); font-family: var(--font-marker); font-weight: 700;
}
.pf-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--white) 25%, transparent), transparent 45%); pointer-events: none; }
.pf-photo .face-img { border-radius: 0; }
.pf-card.pop .pf-photo { width: 104px; height: 122px; font-size: 62px; margin-top: 6px; }
.pf-card.sheet .pf-photo { width: 112px; height: 130px; font-size: 66px; }
.pf-dot { position: absolute; right: 4px; bottom: 4px; z-index: 1; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--cream); }
.pf-who { margin-top: 6px; min-width: 0; padding-right: 36px; }
.pf-name { font-family: var(--font-marker); font-weight: 700; font-size: 36px; line-height: 1; overflow-wrap: anywhere; }
.pf-card.pop .pf-name { font-size: 32px; }
.pf-friendsee { margin-top: 3px; font-size: 12.5px; line-height: 1.2; color: var(--gray-500); }
.pf-sub { font-size: 14px; color: var(--gray-600); line-height: 1.25; overflow-wrap: anywhere; }
.pf-mood { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; color: var(--night-500); }
.pf-mood i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-chips.tight { margin-top: 4px; }
.pf-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 1px 9px; box-sizing: border-box; border: none; border-radius: 10px; background: var(--bone); color: var(--gray-900); font: inherit; font-size: 13px; text-decoration: none; }
.pf-chip.board { background: var(--p-note, var(--bone)); color: var(--p-note-ink, var(--gray-900)); }
.pf-chip.vc { background: var(--green-100); color: var(--green-900); cursor: pointer; }
.pf-chip.vc:hover { background: var(--green-200); }
.pf-chip.vc.talk { cursor: default; }
.pf-chip.vc.talk:hover { background: var(--green-100); }
/* in your voice room: how loud they are for you (only you hear the change) */
.pf-vol { margin-top: 10px; padding: 8px 10px 10px; border: 2px dashed color-mix(in srgb, var(--gray-900) 35%, transparent); border-radius: 12px 9px 12px 10px; background: var(--mist-100); }
.pf-vol-l { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--green-900); }
.pf-vol-l b { margin-left: auto; font-weight: 400; font-family: var(--font-marker); font-size: 22px; line-height: 1; }
.pf-vol-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pf-vol-row input[type=range] { flex: 1; min-width: 0; height: 40px; margin: 0; accent-color: var(--green-500); }
.pf-vol-note { font-size: 12.5px; color: var(--gray-600); margin-top: 2px; }
.pf-vol.hushed { background: var(--gray-100); }
.pf-vol.hushed .pf-vol-l { color: var(--gray-600); }
.pf-chip.bad { background: var(--red-100); color: var(--red-900); }
.pf-chip.you { background: var(--mist-100); color: var(--blue-900); }
.pf-chip.staff { padding: 0 9px 0 7px; border: 2px solid var(--gray-900); background: var(--yellow-300); color: var(--gray-900); font-weight: 700; }
.pf-staffnote { margin-top: 6px; font-size: 13px; line-height: 1.3; color: var(--gray-600); }
.pf-lbl { margin-top: 10px; font-family: var(--font-marker); font-weight: 700; font-size: 19px; line-height: 1; color: var(--gray-600); }
.pf-small { margin-top: 8px; font-size: 13px; line-height: 1.3; color: var(--gray-600); }
.pf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pf-ask .pf-acts { margin-top: 10px; }
.pf-card.sheet .pf-acts { flex-wrap: nowrap; }
.pf-card.sheet .pf-acts > .pf-btn { flex: 1; }
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 2px 14px; box-sizing: border-box;
    border: 2.5px solid var(--gray-900); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    background: var(--cream); color: var(--gray-900); box-shadow: 2px 2px 0 var(--gray-900);
    font: inherit; font-size: 16px; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pf-card.sheet .pf-btn { min-height: 44px; }
.pf-btn:hover:not(:disabled) { rotate: -1deg; color: var(--gray-900); }
.pf-btn.primary { background: var(--blue-700); color: var(--white); }
.pf-btn.primary:hover:not(:disabled) { color: var(--white); }
.pf-btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.pf-btn.red { background: var(--red-700); color: var(--white); }
.pf-btn.red:hover:not(:disabled) { color: var(--white); }
.pf-btn.sq { width: 40px; padding: 0; flex: none !important; }
.pf-card.sheet .pf-btn.sq { width: 44px; }
.pf-btn.sq.on { background: var(--yellow-500); }
.pf-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.pf-more { margin-top: 10px; padding: 6px; border: 2px solid var(--gray-900); border-radius: 12px 9px 12px 10px; background: var(--white); }
.pf-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 8px; box-sizing: border-box; border: none; border-radius: 8px; background: none; color: var(--gray-900); font: inherit; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; }
.pf-card.sheet .pf-row { min-height: 46px; }
.pf-row:hover { background: color-mix(in srgb, var(--gray-900) 6%, transparent); color: var(--gray-900); }
.pf-row.red, .pf-row.red:hover { color: var(--red-800); }
.pf-row small { margin-left: auto; font-size: 13px; color: var(--gray-600); }
.pf-sep { margin: 4px 2px; border-top: 2px dashed color-mix(in srgb, var(--gray-900) 18%, transparent); }
.pf-modlbl { display: flex; align-items: center; gap: 6px; padding: 2px 8px 0; font-size: 13px; color: var(--gray-600); }
.pf-ask { margin-top: 10px; padding: 10px 12px; border: 2px solid var(--red-700); border-radius: 12px 9px 12px 10px; background: var(--cream); font-size: 15px; line-height: 1.3; }
.pf-ask.calm { border-color: var(--gray-900); background: var(--yellow-100); }
.pf-ask b { display: block; margin-bottom: 4px; font-family: var(--font-marker); font-weight: 400; font-size: 22px; line-height: 1; }
.pf-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-time { min-height: 36px; padding: 0 12px; border: 2px solid var(--gray-900); border-radius: 14px 10px 14px 12px; background: var(--cream); color: var(--gray-900); font: inherit; font-size: 15px; cursor: pointer; }
.pf-time:hover:not(:disabled) { background: var(--yellow-500); }
.pf-report { margin-top: 10px; }
.pf-err { margin: 8px 0 0; font-size: 14px; color: var(--red-800); }
@media (prefers-reduced-motion: reduce) { .pf-card { animation: none; } }

/* ---------- desktop launcher (design canvas "Launcher.dc.html"): Pento.Client.Launcher's
   window, and the download page's still of it (LauncherShot.razor) ---------- */
.ln-mk { font-family: "Caveat", "Comic Sans MS", cursive; font-weight: 700; line-height: 1.05; }

.ln-win { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--white) 50%, transparent) 0%, transparent 35%), var(--snow); border: 2.5px solid var(--gray-900); border-radius: 18px; cursor: default; }
.ln-win::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--gray-900) 1.1px, transparent 1.5px); background-size: 26px 26px; opacity: .12; pointer-events: none; }
.ln-bar { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 0 6px; z-index: 5; }
.ln-wb { width: 40px; height: 36px; display: grid; place-items: center; border: none; background: none; color: var(--gray-600); border-radius: 10px; cursor: pointer; padding: 0; }
.ln-wb:hover { background: var(--bone); color: var(--gray-900); }
.ln-wb.ln-close:hover { background: var(--red-100); }

.ln-head { position: absolute; left: 0; right: 0; top: 28px; text-align: center; }
.ln-logo { display: inline-block; font-size: 62px; rotate: -3deg; }
.ln-under { display: block; margin: -8px auto 0; color: var(--blue-500); }
.ln-rio { position: absolute; left: 50%; top: 148px; margin-left: -55px; }

.ln-body { position: absolute; left: 32px; right: 32px; top: 276px; bottom: 40px; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.ln-body > * { flex-shrink: 0; }
.ln-say { font-family: Caveat, cursive; font-weight: 700; font-size: 30px; line-height: 1.05; min-height: 32px; }
.ln-sub { margin-top: 4px; font-size: 15px; color: var(--gray-700); line-height: 1.3; min-height: 20px; }

.ln-bar2 { position: relative; height: 20px; margin-top: 16px; border: 2.5px solid var(--gray-900); border-radius: 14px 8px 12px 9px / 9px 12px 8px 14px; background: var(--cream); overflow: hidden; }
.ln-fill { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(-55deg, var(--blue-500) 0 3px, var(--blue-300) 3px 7px); border-right: 2.5px solid var(--gray-900); transition: width .3s linear; }
.ln-bar2.bad .ln-fill { background: repeating-linear-gradient(-55deg, var(--red-500) 0 3px, var(--pink-300) 3px 7px); }
/* not knowing how long: a scribble sliding along */
.ln-bar2.busy .ln-fill { width: 34% !important; border-left: 2.5px solid var(--gray-900); border-radius: 8px; animation: ln-slide 1.3s ease-in-out infinite alternate; }
@keyframes ln-slide { from { left: -4%; } to { left: 70%; } }
.ln-meta { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; color: var(--gray-600); min-height: 18px; }

.ln-steps { display: flex; justify-content: center; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--gray-500); }
.ln-steps span { display: inline-flex; align-items: center; gap: 4px; }
.ln-steps .on { color: var(--gray-900); }
.ln-steps .did { color: var(--green-700); }
.ln-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.ln-steps .did .ln-dot { background: currentColor; }
.ln-steps .on .ln-dot { border-style: dashed; animation: ln-spin 2.4s linear infinite; }
@keyframes ln-spin { to { transform: rotate(360deg); } }

.ln-btns { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.ln-pbtn { font: inherit; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 4px 18px; box-sizing: border-box; border: 2.5px solid var(--gray-900); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: var(--cream); color: var(--gray-900); cursor: pointer; box-shadow: 3px 3px 0 var(--gray-900); text-decoration: none; white-space: nowrap; }
.ln-pbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gray-900); }
.ln-pbtn.primary { background: var(--blue-700); color: var(--white); }
.ln-pbtn.danger { background: var(--red-700); color: var(--white); }
.ln-pbtn.wide { width: 100%; min-height: 48px; font-size: 19px; }
.ln-linky { font: inherit; font-size: 14px; background: none; border: none; padding: 6px 2px; cursor: pointer; color: var(--gray-700); text-decoration: underline; text-underline-offset: 2px; }
.ln-linky:hover { color: var(--gray-900); }

/* first run: the one-page setup */
.ln-opts { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; text-align: left; }
.ln-chk { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 16px; cursor: pointer; }
.ln-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ln-box { width: 20px; height: 20px; border: 2.5px solid var(--gray-900); border-radius: 4px 6px 4px 7px; display: grid; place-items: center; flex-shrink: 0; background: var(--cream); box-sizing: border-box; }
.ln-chk input:focus-visible + .ln-box { box-shadow: 0 0 0 3px var(--blue-100); }
.ln-where { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; font-size: 13px; color: var(--gray-700); border: 2px dashed var(--gray-500); border-radius: 12px 9px 13px 8px; text-align: left; }
.ln-where code { flex: 1; min-width: 0; font-family: inherit; font-size: 13px; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }

.ln-note { margin-top: 12px; display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; font-size: 13px; line-height: 1.3; text-align: left; background: var(--yellow-200); color: var(--amber-950); border-radius: 2px 2px 12px 2px / 2px 2px 8px 2px; rotate: -.4deg; }
.ln-left { margin-top: 8px; padding: 6px 10px; font-size: 13px; text-align: left; color: var(--gray-700); background: var(--cream); border: 2px solid var(--red-500); border-radius: 12px 9px 13px 8px; }
.ln-left code { display: block; font-family: inherit; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-back { margin-top: 14px; font-size: 14px; color: var(--gray-700); }
.ln-stuck { margin-top: 10px; font-size: 13px; color: var(--gray-600); }
.ln-foot { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; font-size: 12px; color: var(--mist-500); }
.ln-foot a { color: var(--gray-600); }

@media (prefers-reduced-motion: reduce) {
    .ln-bar2.busy .ln-fill, .ln-steps .on .ln-dot { animation: none; }
    .ln-fill { transition: none; }
}

/* ---------- get the desktop app (design canvas "App updates" › Download, PhoneDownload) ----------
   The whiteboard is drawn at 1344×804 and zoomed to fit, like the log in showcase (.auth-page
   gives the daylight colours); under 1100px wide it's the phone's one column instead. */
.dl-page { --dz: min(var(--zw), var(--zh)); }
.dl-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.dl-page a { color: var(--blue-700); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.dl-page a:hover { color: var(--blue-700); }
.dl-board {
    position: relative; width: 1344px; height: 804px; zoom: var(--dz);
    color: var(--gray-900); font-family: var(--font-hand);
    background: linear-gradient(160deg, color-mix(in srgb, var(--white) 45%, transparent) 0%, transparent 35%), var(--snow);
    border-radius: 14px; box-shadow: 0 0 0 7px var(--gray-300), 0 0 0 8px var(--gray-500), 0 18px 40px color-mix(in srgb, var(--night-900) 28%, transparent);
}
.dl-board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(var(--gray-900) 1.1px, transparent 1.5px); background-size: 26px 26px; opacity: .14; pointer-events: none; }
.dl-board .dl-back { position: absolute; left: 40px; top: 24px; }
.dl-page a.dl-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; color: var(--gray-700); text-decoration: none; }
.dl-page a.dl-back:hover { color: var(--gray-900); }
.dl-hero { position: absolute; left: 52px; top: 80px; rotate: -3deg; }
.dl-under { display: block; margin-top: -8px; fill: none; stroke: var(--blue-700); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dl-tag { font-size: 30px; font-weight: 500; color: var(--gray-600); margin-top: 6px; rotate: 1deg; }
.dl-ann { position: absolute; font-family: var(--font-marker); font-size: 26px; color: var(--gray-600); line-height: 1; }
.dl-perks { position: absolute; left: 56px; top: 214px; width: 470px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 19px; line-height: 1.25; }
.dl-perks li { display: flex; align-items: flex-start; gap: 10px; }
.dl-perks .icon { color: var(--green-500); margin-top: 1px; flex-shrink: 0; }

/* the launcher, taped up as a snapshot */
.dl-shot { position: absolute; left: 70px; top: 382px; width: 420px; height: 580px; transform-origin: 0 0; scale: .6; rotate: -2.5deg; filter: drop-shadow(4px 10px 12px color-mix(in srgb, var(--black) 25%, transparent)); }
.dl-shot::before { content: ""; position: absolute; top: -16px; left: 50%; z-index: 6; width: 120px; height: 30px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--yellow-500) 80%, transparent); border-left: 2px dashed color-mix(in srgb, var(--black) 12%, transparent); border-right: 2px dashed color-mix(in srgb, var(--black) 12%, transparent); }

.dl-h1 { position: absolute; left: 628px; top: 44px; margin: 0; font-size: 60px; rotate: -1deg; }
.dl-seen { position: absolute; left: 632px; top: 118px; width: 640px; display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--night-500); min-height: 26px; }
.dl-seen b { font-weight: 400; background: linear-gradient(104deg, transparent .9%, var(--yellow-500) 2.4%, var(--yellow-500) 97%, transparent 98.5%); padding: 0 .25em; border-radius: .6em .2em; }

.dl-cards { position: absolute; left: 632px; top: 174px; width: 648px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.dl-os { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; box-sizing: border-box; min-height: 246px; background: var(--cream); border: 2.5px solid var(--gray-900); border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px; box-shadow: 4px 5px 0 var(--gray-900); }
.dl-os.mine { box-shadow: 5px 6px 0 var(--blue-700), 0 10px 30px color-mix(in srgb, var(--gray-900) 14%, transparent); border-color: var(--blue-700); rotate: -.6deg; }
.dl-os.mine::before { content: "yours"; position: absolute; top: -14px; right: 30px; padding: 2px 14px; rotate: 4deg; font-family: var(--font-marker); font-weight: 700; font-size: 20px; background: color-mix(in srgb, var(--yellow-500) 90%, transparent); color: var(--yellow-950); border-left: 2px dashed color-mix(in srgb, var(--black) 12%, transparent); border-right: 2px dashed color-mix(in srgb, var(--black) 12%, transparent); }
.dl-osh { display: flex; align-items: center; gap: 10px; }
.dl-osn { margin: 0; font-size: 36px; }
.dl-need { font-size: 16px; color: var(--gray-700); line-height: 1.25; min-height: 40px; }
.dl-file { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gray-600); }
.dl-file .icon { flex-shrink: 0; }
.dl-file code { font-family: inherit; font-size: inherit; background: none; padding: 0; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Linux card: the launcher or the Flatpak */
.dl-page .dl-btn { font: inherit; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: auto; padding: 8px 18px; box-sizing: border-box; border: 2.5px solid var(--gray-900); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: var(--cream); color: var(--gray-900); cursor: pointer; box-shadow: 3px 3px 0 var(--gray-900); text-decoration: none; transition: transform .08s, box-shadow .08s; }
.dl-page a.dl-btn:hover { color: var(--gray-900); transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 4px 5px 0 var(--gray-900); }
.dl-page a.dl-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gray-900); }
.dl-page .dl-btn.primary, .dl-page a.dl-btn.primary:hover { background: var(--blue-700); color: var(--white); font-size: 21px; }
.dl-page .dl-btn.done, .dl-page a.dl-btn.done:hover { background: var(--green-100); color: var(--green-900); }
.dl-page .dl-btn.off { cursor: default; border-style: dashed; box-shadow: none; color: var(--gray-600); font-size: 17px; }

/* after it downloads: a lined sticky */
.dl-how { position: absolute; left: 632px; top: 500px; width: 648px; box-sizing: border-box; padding: 14px 24px 16px; background: linear-gradient(transparent 50px, color-mix(in srgb, var(--blue-500) 35%, transparent) 50px 52px, transparent 52px), var(--amber-200); color: var(--amber-950); border-radius: 3px 3px 26px 3px / 3px 3px 14px 3px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 4px 10px 14px -6px color-mix(in srgb, var(--black) 35%, transparent); rotate: .4deg; }
.dl-howh { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.dl-howh h2 { margin: 0; font-size: 30px; }
.dl-seg { display: flex; gap: 4px; }
.dl-chip { font: inherit; font-size: 16px; min-height: 36px; padding: 2px 14px; border: 2px solid transparent; border-radius: 18px 12px 16px 12px; background: none; color: var(--gray-700); cursor: pointer; }
.dl-chip.on { border-color: var(--amber-950); background: var(--cream); color: var(--gray-900); }
.dl-steps { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dl-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.3; }
.dl-n { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; box-sizing: border-box; border: 2px solid var(--amber-950); border-radius: 50% 45% 55% 48%; font-family: var(--font-marker); font-weight: 700; font-size: 19px; background: var(--cream); }
.dl-steps li.now .dl-n { background: var(--yellow-500); }
.dl-cmd { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 36px; padding: 4px 6px 4px 12px; border: 2px dashed var(--mist-500); border-radius: 12px 9px 13px 8px; background: color-mix(in srgb, var(--white) 55%, transparent); }
.dl-cmd code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; background: none; padding: 0; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }

.dl-foot { position: absolute; left: 632px; top: 764px; width: 648px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--gray-600); }
.dl-dot { color: var(--gray-500); }

.dl-pop { animation: dlpop .35s ease-out both; }
@keyframes dlpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* phone (canvas PhoneDownload), and any window too narrow for the whiteboard */
.dl-narrow { display: none; }
.dl-narrow {
    position: relative; flex-direction: column; gap: 12px; width: min(100%, 440px); box-sizing: border-box;
    padding: 12px 20px 24px; color: var(--gray-900); font-family: var(--font-hand);
}
.dl-narrow .dl-back { align-self: flex-start; }
.dl-ptitle { rotate: -2deg; }
.dl-ptitle .dl-tag { margin-top: 0; rotate: 0deg; }
.dl-pnote { position: relative; padding: 12px 14px 14px; background: var(--amber-200); color: var(--amber-950); border-radius: 3px 3px 22px 3px / 3px 3px 12px 3px; box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 3px 8px 12px -6px color-mix(in srgb, var(--black) 35%, transparent); rotate: -.5deg; font-size: 16px; line-height: 1.3; }
.dl-pnote::before { content: ""; position: absolute; top: -10px; left: 50%; width: 84px; height: 22px; translate: -50% 0; rotate: 3deg; background: color-mix(in srgb, var(--yellow-500) 80%, transparent); }
.dl-prow { display: flex; gap: 10px; margin-top: 10px; }
.dl-page .dl-pbtn { font: inherit; font-size: 17px; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 4px 12px; box-sizing: border-box; border: 2.5px solid var(--gray-900); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: var(--cream); color: var(--gray-900); cursor: pointer; box-shadow: 3px 3px 0 var(--gray-900); text-decoration: none; }
.dl-page .dl-pbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gray-900); }
.dl-page .dl-pbtn.primary, .dl-page a.dl-pbtn.primary:hover { background: var(--blue-700); color: var(--white); }
.dl-prow-os { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--cream); border: 2.5px solid var(--gray-900); border-radius: 15px 225px 15px 185px / 185px 15px 225px 15px; box-shadow: 3px 4px 0 var(--gray-900); }
.dl-prow-os + .dl-prow-os { rotate: .4deg; }
.dl-prow-os.pak { rotate: -.3deg; }
.dl-prow-os.mine { border-color: var(--blue-700); box-shadow: 3px 4px 0 var(--blue-700); }
.dl-prow-os > .icon { flex-shrink: 0; }
.dl-posb { flex: 1; min-width: 0; }
.dl-posn { margin: 0; font-size: 28px; }
.dl-pneed { font-size: 14px; color: var(--gray-700); line-height: 1.25; }
.dl-page .dl-pget { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; box-sizing: border-box; border: 2.5px solid var(--gray-900); border-radius: 50% 45% 55% 48%; background: var(--cream); color: var(--gray-900); padding: 0; }
.dl-page a.dl-pget:hover { color: var(--gray-900); }
.dl-page a.dl-pget:active { transform: translate(1px, 1px); }
.dl-page .dl-pget.done { background: var(--green-100); color: var(--green-900); }
.dl-page .dl-pget.off { border-style: dashed; color: var(--gray-500); }
.dl-pmeta { font-size: 14px; color: var(--gray-600); margin-top: -4px; }
.dl-ph2 { margin: 6px 0 0; font-size: 30px; }
.dl-soon { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-pchip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 2px 12px; font-size: 15px; color: var(--gray-600); border: 2px dashed var(--gray-500); border-radius: 18px 12px 16px 12px; }
.dl-pchip b { font-weight: 400; font-size: 12px; padding: 0 7px; border-radius: 8px; background: var(--yellow-500); color: var(--yellow-950); rotate: -3deg; }
.dl-pfoot { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.dl-psay { width: 170px; margin-bottom: 52px; padding: 7px 12px; background: var(--white); border: 2px solid var(--gray-900); border-radius: 20px 20px 4px 20px; font-size: 15px; line-height: 1.25; box-shadow: 2px 3px 0 var(--gray-900); }

@media (max-width: 1099.98px) {
    .dl-page { place-items: start center; padding: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--white) 45%, transparent) 0%, transparent 35%), var(--snow); }
    .dl-page::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(var(--gray-900) 1.1px, transparent 1.5px); background-size: 26px 26px; opacity: .12; pointer-events: none; }
    .dl-board { display: none; }
    .dl-narrow { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .dl-pop { animation: none; }
    .dl-page .dl-btn { transition: none; }
}

/* the log in page's nudge towards the app: a slip slides up from the bottom edge once, a
   moment after the page opens (canvas Main .mn-pop). Phone browsers get a narrow bottom
   sheet instead of the wide bar, and it's never inside the native apps. */
.auth-slip {
    position: fixed; left: 50%; bottom: 0; translate: -50% 0; z-index: 30;
    display: flex; align-items: center; gap: 14px; padding: 12px 12px 22px 20px;
    background: var(--cream); color: var(--gray-900); border: 2.5px solid var(--gray-900); border-bottom: none;
    border-radius: 18px 22px 0 0 / 14px 18px 0 0; box-shadow: 0 -6px 22px color-mix(in srgb, var(--gray-900) 16%, transparent);
    font-size: 17px; white-space: nowrap;
    animation: auth-slip .5s 1.2s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes auth-slip { from { transform: translateY(110%); } to { transform: none; } }
.auth-slip-t { display: flex; flex-direction: column; line-height: 1.2; }
.auth-slip-t b { font-family: var(--font-marker); font-weight: 700; font-size: 25px; }
.auth-slip-t span { font-size: 15px; color: var(--gray-600); }
.auth-slip .btn { min-height: 44px; font-size: 18px; padding: 4px 16px; }
.auth-slip-later { font: inherit; font-size: 15px; background: none; border: none; color: var(--gray-700); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: 0 4px; }

/* while the slip is snoozed, a little tab in the corner brings it back */
.auth-slip-reopen { position: fixed; right: 0; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 12px; background: var(--cream); border: 2.5px solid var(--gray-900); border-right: none; border-radius: 14px 4px 4px 14px / 18px 4px 4px 18px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--gray-900) 30%, transparent); color: var(--gray-900); cursor: pointer; font: inherit; font-size: 14px; rotate: -.5deg; }
.auth-slip-reopen:hover { background: var(--hi-yellow); }

/* phone browsers get it too — as a bottom sheet instead of the wide bar */
@media (max-width: 759.98px) {
    .auth-slip { left: 12px; right: 12px; translate: none; flex-wrap: wrap; white-space: normal; gap: 10px; padding: 10px 10px 14px 14px; border-right: 2.5px solid var(--gray-900); border-radius: 18px 18px 0 0 / 14px 14px 0 0; font-size: 15px; }
    .auth-slip-t b { font-size: 20px; }
    .auth-slip-t span { font-size: 13px; }
    .auth-slip .btn { min-height: 40px; font-size: 15px; }
    .auth-slip-reopen { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .auth-slip { animation: none; } }

/* ============ the feedback tab (FeedbackTab.razor; canvas: Feedback.dc.html) ============
   A paper tab poking in from the right edge of every page, signed in or out. It follows the
   theme: every colour it needs hangs off its own --fb-* names, mapped to the themed roles,
   so dark mode (and custom themes) recolour the whole card without touching the rules. */

/* The pieces stand alone (fixed elements, no shared wrapper), so the pins sit on
   every one of them — a colour declared where it's used, all through the roles. */
.fb-tab, .fb-card, .fb-sh, .fb-hidden, .fb-scrim {
    --fb-ink: var(--ink);
    --fb-paper: var(--paper);
    --fb-tab: color-mix(in srgb, var(--accent) 14%, var(--paper));
    --fb-tab-on: var(--hi-yellow);
    --fb-soft: var(--ink-soft);
    --fb-faint: var(--ink-faint);
    --fb-note: var(--note);
    --fb-note-ink: var(--ink);
    --fb-idea: color-mix(in srgb, var(--hi-yellow) 25%, var(--paper));
    --fb-blue: var(--accent-strong);
    --fb-err-bg: color-mix(in srgb, var(--danger) 12%, var(--paper));
    --fb-err-line: var(--danger-text);
    --fb-err-ink: var(--danger-text);
    --fb-thumb: color-mix(in srgb, var(--ink) 6%, var(--paper));
}
.fb-tab {
    position: fixed; right: 0; z-index: 74; top: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 0; box-sizing: border-box;
    border: 2.5px solid var(--fb-ink); border-right: none;
    border-radius: 14px 0 0 16px / 16px 0 0 14px;
    background: var(--fb-tab); color: var(--fb-ink); cursor: pointer;
    box-shadow: -3px 3px 0 var(--fb-ink);
    /* the nudge rides on transform, not translate: translate is the vertical centring
       (top: 50%; translate: 0 -50%), and overwriting it made the tab bounce half a
       height whenever the pointer came and went */
    transition: transform .12s; touch-action: none;
    font-family: var(--font-hand);
}
.fb-tab:hover { transform: translateX(-4px); }
.fb-tab.on { background: var(--fb-tab-on); }
.fb-tab span { writing-mode: vertical-rl; rotate: 180deg; font-size: 16px; letter-spacing: .04em; }
.fb-tab { width: 38px; height: 132px; }
.fb-tab.drag { cursor: grabbing; transform: translateX(-6px); box-shadow: -5px 6px 0 var(--fb-ink); }
.fb-grip { display: grid; grid-template-columns: repeat(2, 4px); gap: 3px; }
.fb-grip i { width: 4px; height: 4px; border-radius: 50%; background: var(--fb-ink); opacity: .45; }
.fb-tab.fb-left-edge { right: auto; left: 0; border-right: 2.5px solid var(--fb-ink); border-left: none; border-radius: 0 14px 16px 0 / 0 16px 14px 0; box-shadow: 3px 3px 0 var(--fb-ink); }
.fb-tab.fb-left-edge:hover { transform: translateX(4px); }
.fb-tab.fb-left-edge span { rotate: 0deg; }
.fb-card.fb-left-edge { right: auto; left: 52px; }
.fb-hidden {
    position: fixed; right: 8px; bottom: 12px; z-index: 74;
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 14px;
    background: var(--fb-ink); color: var(--fb-paper); border-radius: 12px 14px 10px 16px;
    font-family: var(--font-hand);
}
.fb-hidden button { font: inherit; font-size: 14px; background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 4px; }
.fb-hidden.fb-left-edge { right: auto; left: 8px; }
.fb-blocked { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--fb-soft); line-height: 1.3; padding: 6px 8px; border: 1.5px dashed var(--fb-faint); border-radius: 10px; }
.fb-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--fb-soft); border-top: 2px dashed color-mix(in srgb, var(--fb-ink) 12%, transparent); padding-top: 8px; }
.fb-link { font: inherit; font-size: 13px; background: none; border: none; color: var(--fb-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 4px 2px; min-height: 32px; }
.fb-card {
    position: fixed; right: 52px; top: 50%; translate: 0 -50%; z-index: 74; width: 380px;
    box-sizing: border-box; padding: 16px 18px;
    background: var(--fb-paper); border: 2.5px solid var(--fb-ink);
    border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px;
    box-shadow: 6px 7px 0 var(--fb-ink);
    display: flex; flex-direction: column; gap: 12px; rotate: -.4deg;
    font-family: var(--font-hand); color: var(--fb-ink);
}
.fb-scrim { position: fixed; inset: 0; z-index: 73; border: none; padding: 0; background: color-mix(in srgb, var(--black) 35%, transparent); cursor: pointer; }
.fb-sh {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 74; box-sizing: border-box;
    padding: 8px 16px 22px;
    background: var(--fb-paper); border: 2.5px solid var(--fb-ink); border-bottom: none;
    border-radius: 18px 22px 0 0;
    box-shadow: 0 -4px 0 color-mix(in srgb, var(--fb-ink) 18%, transparent), 0 -18px 40px color-mix(in srgb, var(--black) 20%, transparent);
    display: flex; flex-direction: column; gap: 12px; max-height: 92%; overflow: auto;
    font-family: var(--font-hand); color: var(--fb-ink);
}
.fb-grab { display: grid; place-items: center; width: 100%; height: 22px; border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0; }
.fb-grab span { width: 56px; height: 6px; border-radius: 4px; background: var(--fb-ink); opacity: .35; }
.fb-head { display: flex; align-items: flex-start; gap: 10px; }
.fb-head h2 { margin: 0; font-size: 28px; }
.fb-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.fb-sub { font-size: 14px; color: var(--fb-soft); line-height: 1.3; }
.fb-l { font-size: 15px; margin-bottom: 6px; }
.fb-ta { width: 100%; min-height: 110px; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--fb-ink); background: var(--fb-paper); border: 2px solid var(--fb-ink); border-radius: 12px 16px 10px 14px; resize: none; line-height: 1.3; }
.fb-ta:focus { outline: 3px solid var(--amber-500); outline-offset: 1px; }
.fb-count { font-size: 13px; color: var(--fb-soft); text-align: right; margin-top: 2px; }
.fb-shot { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; line-height: 1.25; }
/* same checkbox as everywhere else (.ln-chk): the real input is hidden and the box is
   drawn, so no engine's native checkbox rendering (or the global input padding) stretches it */
.fb-shot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-box { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; box-sizing: border-box; display: grid; place-items: center; border: 2.5px solid var(--fb-ink); border-radius: 4px 6px 4px 7px; background: var(--fb-paper); color: transparent; }
.fb-shot input:checked + .fb-box { background: var(--fb-blue); color: var(--on-accent); }
.fb-shot input:focus-visible + .fb-box { outline: 3px solid var(--amber-500); outline-offset: 1px; }
.fb-thumb { display: flex; align-items: center; gap: 10px; padding: 6px; border: 2px dashed var(--fb-ink); border-radius: 10px 8px 11px 9px; background: var(--fb-thumb); }
.fb-thumb img, .fb-thumb i { display: block; width: 84px; height: 52px; border: 2px solid var(--fb-ink); border-radius: 4px; box-sizing: border-box; object-fit: cover; background: var(--fb-paper); }
.fb-thumb i { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--fb-ink) 8%, transparent) 0 8px, transparent 8px 12px); }
.fb-with { padding: 8px 10px; border-radius: 2px 2px 14px 2px / 2px 2px 8px 2px; background: var(--fb-note); color: var(--fb-note-ink); font-size: 13px; line-height: 1.35; box-shadow: 1px 3px 4px color-mix(in srgb, var(--black) 14%, transparent); }
.fb-with b { font-weight: 400; font-family: var(--font-mono); font-size: 12px; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--fb-note-ink) 10%, transparent); }
.fb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 2px 16px; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--fb-ink); background: var(--fb-paper); border: 2.5px solid var(--fb-ink); border-radius: var(--wobble-1); box-shadow: 2px 2px 0 var(--fb-ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.fb-btn:hover { transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 3px 3px 0 var(--fb-ink); color: var(--fb-ink); }
.fb-btn.primary { background: var(--fb-blue); color: var(--white); }
.fb-btn.primary:hover { color: var(--white); }
.fb-btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.fb-btn:disabled { opacity: .5; cursor: default; transform: none; }
.fb-idea { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2.5px solid var(--fb-ink); border-radius: 12px 16px 10px 14px; background: var(--fb-idea); box-shadow: 3px 3px 0 var(--fb-ink); font-size: 15px; line-height: 1.3; }
.fb-done { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 4px 4px; }
.fb-err { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--fb-err-ink); background: var(--fb-err-bg); border: 2px solid var(--fb-err-line); border-radius: 12px 14px 10px 16px; padding: 8px 12px; }
.fb-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; }
@media (max-width: 759.98px) { .fb-tab { width: 30px; height: 56px; border-radius: 12px 0 0 14px / 14px 0 0 12px; } .fb-tab span { display: none; } .fb-card { width: min(380px, calc(100vw - 52px)); } }
@media (prefers-reduced-motion: reduce) { .fb-tab, .fb-btn:hover { transition: none; rotate: 0deg; transform: none; } }

/* ============ settings vocabulary: grouped cards of rows (board settings first, then your own settings) ============
   Card = grey dashed line (never a solid ink box); row = name left, ONE control right; ⓘ folds a note under its row.
   Tokens only: roles for surfaces/ink, color-mix() for shades. */
.sg-grp { font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; color: var(--ink-soft); padding: 10px 10px 0; }
.sg-rule { border: none; border-top: 2px dashed color-mix(in srgb, var(--line) 18%, transparent); margin: 10px 6px 6px; }
/* the little "new" tag after a setting's name (settings › chat) — a fixed paper tag in every theme */
.set-new {
    display: inline-block; margin-left: 6px; padding: 0 7px; font-size: .75rem; white-space: nowrap; rotate: -3deg;
    border: 1.5px solid var(--gray-900); border-radius: 9px 7px 10px 6px; background: var(--green-100); color: var(--gray-900);
}
.sg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sg-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sg { border: 2.5px dashed var(--ink-faint); border-radius: 12px 9px 13px 8px; background: var(--paper); padding: 2px 18px 6px; min-width: 0; }
.sg.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--paper)); }
.sg-h { font-family: var(--font-marker); font-weight: 700; font-size: 1.45rem; margin: 10px 0 2px; display: flex; align-items: center; gap: 4px; }
.sg.danger .sg-h { color: var(--danger-text); }
.sg-tag { font-family: var(--font-hand); font-weight: 400; font-size: .78rem; padding: 0 7px; margin-left: 6px; border: 1.5px solid var(--line); border-radius: 9px 7px 10px 6px; background: color-mix(in srgb, var(--hi-yellow) 40%, var(--paper)); rotate: -3deg; white-space: nowrap; }
.sg-tag.new { background: color-mix(in srgb, var(--m-green) 30%, var(--paper)); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 52px; padding: 4px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.sg-row:last-child { border-bottom: none; }
.sg-row.col { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
.sg-rows2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.sg-rows2 .sg-row:last-child { border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.sg-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; font-size: 1.06rem; line-height: 1.15; }
.sg-nm.danger { color: var(--danger-text); }
.sg-val { font-size: .95rem; color: var(--ink-soft); }
.sg-inp { width: 230px; max-width: 100%; }
/* ⓘ: grey, ink on hover/focus, yellow while its note is open */
.sg-tip { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.sg-tip:hover, .sg-tip:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }
.sg-tip:focus-visible { box-shadow: 0 0 0 2px var(--line); }
.sg-tip.on { color: var(--gray-900); background: var(--hi-yellow); }
/* the note: a plain line with a small blue hook, no box, so it never covers anything */
.sg-fold { flex-basis: 100%; order: 9; margin: -6px 0 8px; padding: 0 0 0 22px; position: relative; font-size: .95rem; line-height: 1.3; color: var(--ink-soft); animation: sg-fold-in .16s ease-out; }
.sg-fold::before { content: ""; position: absolute; left: 5px; top: 1px; width: 9px; height: 9px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); border-radius: 0 0 0 5px; }
.sg-h + .sg-fold, .sg-row.col > .sg-fold { order: 0; margin: 0 0 8px; }
@keyframes sg-fold-in { from { opacity: 0; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .sg-fold { animation: none; } }
.sg-xp { display: flex; align-items: center; gap: 8px; font: inherit; font-size: .95rem; color: var(--ink); cursor: pointer; border: none; background: none; padding: 0; }
/* the same four button shapes everywhere: outline, blue primary (one per page), red outline — no dashed ghosts */
.btn.danger-out { background: var(--paper); color: var(--danger-text); border-color: var(--danger); box-shadow: 2px 2px 0 var(--danger); }
.btn.danger-out:hover:not(:disabled) { color: var(--danger-text); box-shadow: 3px 3px 0 var(--danger); }
.btn.danger-out:disabled { opacity: .45; cursor: not-allowed; }
/* tape: lettering colour is set per tape (TapeInk); your own colour is the rainbow swatch + a picker row */
.set-sw.own { background: conic-gradient(from 45deg, var(--red-500), var(--orange-500), var(--yellow-500), var(--green-500), var(--blue-500), var(--purple-500), var(--pink-500), var(--red-500)); }
.sg-own { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 0 4px; }
.sg-own .bs-tape { font-size: 1rem; padding: 2px 12px; }
.sg-who { flex-direction: column; align-items: flex-start; gap: 0; }
.sg-who small { font-size: .88rem; }
.sg-end { justify-content: flex-end; }
.sg-flash { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.sg-fill { flex: 1; width: auto; }
.sg-gap { margin-top: 18px; }
.sg-confirm .sg-nm { flex: none; white-space: nowrap; }
.sg-tag.plain { rotate: 0deg; border: none; background: none; font-size: .95rem; color: var(--ink-soft); }
.bs-roles-cols { grid-template-columns: 300px minmax(0, 1fr); }
.bs-dz-stack { max-width: 760px; }
@media (max-width: 1100px) { .bs-roles-cols { grid-template-columns: minmax(0, 1fr); } }
/* PeopleDialog ("see all"): a card dialog over a dim scrim, or a bottom sheet on a phone */
.pl-scrim { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; background: color-mix(in srgb, var(--wall) 60%, transparent); backdrop-filter: blur(2px); animation: fade-in .15s ease; outline: none; }
.pl-scrim.sheet { place-items: end center; }
.pl { position: relative; display: flex; flex-direction: column; box-sizing: border-box; background: var(--paper); color: var(--ink); }
.pl-pop { width: min(520px, 94vw); height: min(620px, 92vh); border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px / 16px 12px 18px 14px; box-shadow: var(--shadow-hard-lg); padding: 16px 20px 14px; }
.pl-sheet { width: min(100vw, 520px); height: min(700px, 92vh); border: 2.5px solid var(--line); border-bottom: none; border-radius: 18px 22px 0 0; box-shadow: 0 -18px 40px color-mix(in srgb, var(--gray-900) 25%, transparent); padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
.pl-grab { display: grid; place-items: center; width: 100%; height: 30px; margin-top: 4px; border: none; background: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.pl-grab span { width: 56px; height: 6px; border-radius: 4px; background: var(--ink); opacity: .35; }
.pl-head { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.pl-head h2 { margin: 0; font-family: var(--font-marker); font-weight: 700; font-size: 2rem; line-height: 1.05; }
.pl-head .n { font-size: .95rem; color: var(--ink-soft); flex: 1; }
.pl-search { display: flex; align-items: center; gap: 8px; height: 44px; margin: 10px 0 4px; padding: 0 12px; box-sizing: border-box; background: var(--surface); border: 2px solid var(--line); border-radius: 185px 25px 145px 20px / 20px 155px 25px 175px; flex-shrink: 0; }
.pl-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: 1rem; color: var(--ink); }
.pl-list { flex: 1; min-height: 0; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.pl-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 4px 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
.pl-av { width: 36px; height: 36px; flex-shrink: 0; }
.pl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; font-size: 1.06rem; }
.pl-t small { font-size: .88rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sheet .btn.sm { min-height: 44px; }
.pl-more { display: flex; justify-content: center; padding: 10px 0 4px; }
.pl-empty { padding: 22px 4px; text-align: center; font-size: .95rem; color: var(--ink-soft); }
.pl-flash { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: .95rem; color: var(--success-text); flex-shrink: 0; }
.pl-flash .undo { font: inherit; border: none; background: none; padding: 4px; color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.pl-foot { font-size: .82rem; color: var(--ink-soft); padding-top: 8px; flex-shrink: 0; }
/* moderation cards: capped at three, with "see all" */
.sg-cap { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 1100px) { .sg-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759.98px) {
    .sg-row { min-height: 56px; }
    .sg-tip { width: 44px; height: 44px; }
    .sg-rows2 { grid-template-columns: minmax(0, 1fr); }
    .sg-row .btn.sm, .sg .btn.sm { min-height: 44px; }
    .sg-inp { width: 100%; }
}
/* phone: board settings list (grouped cards of plain rows), back link, member sheet */
.ps-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 20px; }
.ps-list .bs-chip { width: 100%; }
.ps-nav { padding: 0 14px; }
.ps-nav + .sg-grp, .ps-nav + .ps-nav { margin-top: 14px; }
.ps-nrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; box-sizing: border-box; border-bottom: 2px dashed color-mix(in srgb, var(--line) 14%, transparent); font-size: 1.12rem; color: var(--ink); text-decoration: none; }
.ps-nrow:last-child { border-bottom: none; }
.ps-nrow .t { flex: 1; }
.ps-nrow.out { color: var(--danger-text); }
.ps-back { margin: 4px 0 10px; }
.pl-sheet .bs-member-body { padding: 6px 0 16px; }
.pl-sheet .sg-row { border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); }
@media (max-width: 759.98px) {
    /* phone: the title on its own line, then "saved as you go" left and the switch right */
    .set-head { align-items: center; }
    .set-head h2 { flex-basis: 100%; }
    .set-head .set-saved { order: 1; }
    .set-head .set-saved-more { display: none; }
    .set-head .sg-xp { order: 2; margin-left: auto; min-height: 44px; }
    .set-head .set-sub { display: none; }
}

/* ---- Pento Plus (design canvas "Plus.dc.html") — the one subscription. Prefixes: pp- = the
   /plus page and its gift card, gr- = the gift-received unwrap card (design "GiftReceived.dc.html").
   Plus blue is --accent-strong; the highlighter is --yellow-500; gift wrap is --pink-150.
   The page is a paper poster in every theme (the design exists in light only), so it pins
   the roles it uses to light palette tokens on its root. ---- */
.pp {
    padding: 20px 24px 64px; box-sizing: border-box;
    font-size: 17px; color: var(--ink);
    color-scheme: light;
    /* the sheet itself: the design's warm paper, same as the light theme's wall */
    background: var(--bone);
    --paper: var(--cream); --surface: var(--white);
    --ink: var(--gray-900); --ink-soft: var(--gray-600); --ink-faint: var(--gray-500);
    --line: var(--gray-900);
    --accent-strong: var(--blue-700);
    --success-text: var(--green-700);
}
.pp a { color: var(--accent-strong); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.pp-col { display: flex; flex-direction: column; gap: 44px; max-width: 1392px; margin: 0 auto; }
.pp.phone { padding: 12px 14px 96px 12px; }
.pp.phone .pp-col { gap: 26px; }
.pp-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.pp-h2 { font-family: var(--font-marker); font-weight: 700; font-size: 40px; margin: 0; line-height: 1; }
.pp.phone .pp-h2 { font-size: 32px; }
.pp-kick { font-size: 16px; color: var(--ink-soft); margin: 4px 0 16px; }
.pp-small { font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.pp-sr { position: absolute; left: -9999px; }
.pp-blob { rotate: -8deg; flex-shrink: 0; }
.pp-hi { background: linear-gradient(104deg, transparent .9%, var(--yellow-500) 2.4%, var(--yellow-500) 97%, transparent 98.5%); padding: 0 .15em; border-radius: .6em .2em; }
.pp-card { position: relative; box-sizing: border-box; background: var(--paper); border: 2.5px solid var(--line); border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px; box-shadow: 6px 7px 0 color-mix(in srgb, var(--line) 88%, transparent); }
.pp.phone .pp-card { box-shadow: 4px 5px 0 color-mix(in srgb, var(--line) 88%, transparent); }
.pp-btn { font: inherit; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 18px; box-sizing: border-box; border: 2.5px solid var(--line); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 color-mix(in srgb, var(--line) 88%, transparent); text-decoration: none; white-space: nowrap; }
.pp-btn:hover { transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 3px 4px 0 color-mix(in srgb, var(--line) 88%, transparent); }
.pp-btn.primary { background: var(--accent-strong); font-size: 20px; padding: 10px 28px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--line) 88%, transparent); color: var(--on-accent); }
.pp-btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.pp-chip { font: inherit; font-size: 16px; min-height: 44px; padding: 2px 16px; border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pp-chip:hover { rotate: -1.5deg; }
.pp-chip.on { background: var(--yellow-500); }
.pp-chip small { font-size: 13px; color: var(--ink-soft); }

/* hero */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 30px; padding: 34px 40px 36px; overflow: hidden; }
.pp.phone .pp-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 16px 20px; }
.pp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--gray-900) 7%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; }
.pp-hero-main { position: relative; }
.pp-tag { display: inline-block; padding: 3px 12px; background: var(--yellow-100); border: 2px solid var(--line); border-radius: 4px 12px 4px 12px; font-size: 15px; rotate: -1.5deg; }
.pp-title { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pp-title .pp-mk { font-size: 84px; margin: 0; }
.pp.phone .pp-title .pp-mk { font-size: 54px; }
.pp-lede { font-size: 23px; line-height: 1.35; max-width: 600px; margin: 10px 0 18px; }
.pp.phone .pp-lede { font-size: 18px; }
.pp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 0; }
.pp-price b { font-family: var(--font-marker); font-weight: 700; font-size: 64px; color: var(--accent-strong); line-height: 1; }
.pp.phone .pp-price b { font-size: 50px; }
.pp-price > span { font-size: 18px; color: var(--ink-soft); }
.pp-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.pp.phone .pp-acts .pp-btn { flex: 1; }
.pp-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.pp-trust span { display: inline-flex; align-items: center; gap: 6px; }
.pp-state { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--line); border-radius: 12px 9px 13px 8px; background: var(--blue-50); font-size: 17px; line-height: 1.3; max-width: 600px; }
.pp-state.ending { border-style: dashed; background: var(--bone); }
.pp-state.lapsed { background: var(--yellow-100); }
.pp-scene { position: relative; min-height: 480px; }
.pp.phone .pp-scene { min-height: 0; display: flex; justify-content: center; padding: 26px 0 6px; }
.pp-scene-card { position: absolute; right: 0; top: 30px; rotate: 2deg; }
.pp.phone .pp-scene-card { position: relative; right: auto; top: auto; rotate: 1.5deg; }
.pp-ann { position: absolute; left: 0; width: 178px; text-align: right; font-family: var(--font-marker); font-weight: 700; font-size: 23px; color: var(--accent-strong); line-height: 1; white-space: nowrap; }
.pp-arr { position: absolute; left: 184px; overflow: visible; }

/* the honest bill */
.pp-bill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 26px 32px 28px; }
.pp.phone .pp-bill { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 16px 20px; }
.pp-line { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 2px dashed color-mix(in srgb, var(--gray-900) 15%, transparent); font-size: 17px; }
.pp-line b { font-weight: 400; margin-left: auto; }
.pp-line small { color: var(--ink-soft); }
.pp-total { display: flex; align-items: baseline; gap: 8px; padding-top: 10px; font-size: 17px; }
.pp-total b { font-family: var(--font-marker); font-weight: 700; font-size: 34px; color: var(--accent-strong); margin-left: auto; }
.pp-bowl { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.pp-bowl .bowl-say { font-size: 30px; margin-top: 6px; }
.pp-meter { align-self: stretch; height: 22px; border: 2.5px solid var(--line); border-radius: 10px 7px 11px 8px; background: var(--surface); overflow: hidden; margin: 12px 0 8px; }
.pp-meter i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--accent-strong) 0 10px, var(--blue-500) 10px 20px); }
.sb-inner { width: 420px; height: 264px; transform-origin: 0 0; }

/* free vs Plus */
.pp-tblcard { padding: 10px 18px 14px; }
.pp-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; }
.pp-tbl th { font-family: var(--font-marker); font-weight: 700; font-size: 26px; text-align: left; padding: 10px 14px; }
.pp-tbl td { padding: 12px 14px; border-top: 2px dashed color-mix(in srgb, var(--gray-900) 15%, transparent); vertical-align: top; line-height: 1.25; }
.pp-tbl td:first-child { color: var(--ink-soft); width: 28%; }
.pp-tbl .plus { background: var(--yellow-100); }
.pp-tbl th.plus { border-radius: 12px 14px 0 0; border: 2.5px solid var(--line); border-bottom: none; }
.pp-tbl td.plus { border-left: 2.5px solid var(--line); border-right: 2.5px solid var(--line); }
.pp-tbl tr:last-child td.plus { border-bottom: 2.5px solid var(--line); border-radius: 0 0 14px 12px; }
.pp-tbl td.plus b { font-weight: 400; }
.pp-tbl .same { color: var(--success-text); }
.pp.phone .pp-tbl { font-size: 15px; }
.pp.phone .pp-tbl th { font-size: 22px; padding: 8px; }
.pp.phone .pp-tbl td { padding: 9px 8px; }
.pp.phone .pp-tblcard { padding: 6px 4px; }

/* see the difference */
.pp-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pp.phone .pp-demos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pp-demo { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.pp-demo .t { font-size: 20px; font-weight: 700; }
.pp-lane { display: grid; grid-template-columns: 62px minmax(0, 1fr) 54px; align-items: center; gap: 8px; font-size: 14px; }
.pp-lane .tr { height: 16px; border: 2px solid var(--line); border-radius: 8px 5px 8px 6px; background: var(--surface); overflow: hidden; }
.pp-lane .tr i { display: block; height: 100%; width: 0; }
.pp-lane .tr i.slow { background: var(--gray-500); animation: pp-fill 12s linear infinite; }
.pp-lane .tr i.fast { background: var(--accent-strong); animation: pp-fast 12s linear infinite; }
@keyframes pp-fill { 0% { width: 0; } 92% { width: 100%; } 100% { width: 100%; } }
@keyframes pp-fast { 0% { width: 0; } 8% { width: 100%; } 100% { width: 100%; } }
.pp-lane .tm { text-align: right; color: var(--ink-soft); }
.pp-sharp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-shot { position: relative; height: 118px; border: 2px solid var(--line); border-radius: 6px; background: var(--night-700); overflow: hidden; color: var(--paper); }
.pp-shot .in { position: absolute; inset: 0; padding: 10px 12px; font-size: 14px; line-height: 1.3; }
.pp-shot.soft .in { filter: blur(1.1px); }
.pp-shot .lb { position: absolute; right: 6px; bottom: 6px; font-size: 12px; padding: 1px 7px; border-radius: 8px; background: var(--paper); color: var(--ink); filter: none; }
.pp-space { display: flex; flex-direction: column; gap: 8px; }
.pp-space .row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 70px; align-items: center; gap: 8px; font-size: 14px; }
.pp-space .bar { display: flex; height: 18px; border: 2px solid var(--line); border-radius: 8px 5px 8px 6px; background: var(--surface); overflow: hidden; }
.pp-space .bar i { display: block; height: 100%; border-right: 1.5px solid var(--line); }
.pp-space .bar i:last-child { border-right: none; }
.pp-space .row b { font-weight: 400; text-align: right; color: var(--ink-soft); }

/* gift band */
.pp-giftband { display: flex; align-items: center; gap: 22px; padding: 22px 30px; background: var(--pink-150); border: 2.5px solid var(--line); border-radius: 4px 18px 4px 18px; rotate: -.4deg; box-shadow: 4px 5px 0 color-mix(in srgb, var(--line) 88%, transparent); }
.pp.phone .pp-giftband { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.pp-giftband .pp-h2 { font-size: 34px; }
.pp-giftband .grow { flex: 1; min-width: 0; }
.pp-giftline { font-size: 16px; }
.pp-giftic { stroke-width: 1.6; }

/* always free + if you stop */
.pp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.pp.phone .pp-two { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pp-sticky { padding: 20px 24px 22px; background: var(--yellow-200); color: var(--olive-950); border-radius: 2px 2px 22px 2px / 2px 2px 12px 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--gray-900) 12%, transparent), 3px 8px 12px -6px color-mix(in srgb, var(--gray-900) 35%, transparent); rotate: -.6deg; }
.pp-sticky-sub { font-size: 15px; margin-top: 4px; }
.pp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin-top: 10px; font-size: 16px; }
.pp.phone .pp-list { grid-template-columns: minmax(0, 1fr); }
.pp-list span { display: flex; align-items: center; gap: 8px; }
.pp-stop { padding: 20px 24px 22px; }
.pp-stop li { margin: 6px 0; font-size: 16px; line-height: 1.3; }
.pp-stop ul { margin: 8px 0 0; padding-left: 20px; }

/* questions */
.pp-faq { padding: 22px 30px 18px; }
.pp.phone .pp-faq { padding: 16px; }
.pp-q { border-top: 2px dashed color-mix(in srgb, var(--gray-900) 18%, transparent); }
.pp-q:first-of-type { border-top: none; }
.pp-q summary { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-size: 19px; list-style: none; }
.pp-q summary::-webkit-details-marker { display: none; }
.pp-q summary .icon { transition: rotate .15s; }
.pp-q[open] summary .icon { rotate: 90deg; }
.pp-q p { margin: 0 0 14px 30px; font-size: 16px; line-height: 1.4; color: var(--ink-soft); max-width: 860px; }

/* gift card */
/* Plus overlays (gift, profile extras) pop over a dim veil, like the canvas's pop layer:
   centred card on desktop, bottom sheet on the phone */
.veil { position: fixed; inset: 0; z-index: 400; background: color-mix(in srgb, var(--night-900) 45%, transparent); }
.pp-gift { position: fixed; z-index: 401; left: 50%; top: 50%; translate: -50% -50%; width: 640px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 40px); overflow: auto; padding: 22px 26px 24px; }
.pp.phone .pp-gift { left: 0; top: auto; bottom: 0; translate: none; width: 100%; max-height: 86dvh; border-bottom: none; border-radius: 18px 22px 0 0; box-shadow: 0 -14px 30px color-mix(in srgb, var(--night-900) 25%, transparent); padding: 10px 16px 22px; }
.pp-grab { width: 48px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--gray-300); }
.pp-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.pp-x:hover { background: color-mix(in srgb, var(--gray-900) 8%, transparent); }
.pp-lbl { font-family: var(--font-marker); font-weight: 700; font-size: 23px; margin: 14px 0 6px; }
.pp-optional { font-family: var(--font-hand); font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.pp-who { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 45% 55% 48%; color: var(--white); font-family: var(--font-marker); font-weight: 700; font-size: 18px; border: 2px solid var(--line); flex-shrink: 0; }
.pp-note { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; min-height: 72px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 10px 14px 9px 12px; background: var(--surface); resize: none; }
.pp-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; border: none; background: none; font: inherit; font-size: 16px; color: inherit; cursor: pointer; padding: 4px 0; text-align: left; line-height: 1.2; }
.pp-toggle small { display: block; font-size: 13px; color: var(--ink-soft); }
.pp-knob { width: 44px; height: 24px; border-radius: 12px; border: 2.5px solid var(--line); background: var(--sand); position: relative; flex-shrink: 0; box-sizing: border-box; }
.pp-knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--gray-900); transition: left .15s; }
.pp-knob.on { background: var(--yellow-500); }
.pp-knob.on::after { left: 21px; }
.pp-inbox { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px dashed color-mix(in srgb, var(--gray-900) 35%, transparent); border-radius: 12px 9px 12px 10px; background: var(--surface); font-size: 15px; line-height: 1.3; }
.pp-inbox .grow { flex: 1; }
.pp-inbox b { font-weight: 400; }
.pp-sentline { font-size: 18px; margin: 4px 0 14px; }

/* phone: the dark get-Plus bar pinned above the tabs */
.pp-bar { position: fixed; left: 10px; right: 10px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--gray-900); color: var(--cream); border-radius: 14px 18px 12px 16px; box-shadow: 0 6px 16px color-mix(in srgb, var(--night-900) 30%, transparent); }
.pp-bar b { display: block; font-family: var(--font-marker); font-weight: 700; font-size: 24px; line-height: 1; }
.pp-bar span { display: block; font-size: 12.5px; color: var(--mist-300); }
.pp-bar .btn { margin-left: auto; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .pp-lane .tr i.slow, .pp-lane .tr i.fast { animation: none; width: 100%; }
}
@media (max-width: 900px) {
    .pp-hero { grid-template-columns: minmax(0, 1fr); }
    .pp-bill, .pp-two { grid-template-columns: minmax(0, 1fr); }
    .pp-demos { grid-template-columns: minmax(0, 1fr); }
}

/* ---- gift received (design canvas "GiftReceived.dc.html") ---- */
.gr { position: relative; box-sizing: border-box; color: var(--ink); background: var(--paper); overflow: hidden; }
.gr.desktop { width: 720px; padding: 26px 30px 26px; border: 2.5px solid var(--line); border-radius: 12px 18px 14px 16px / 16px 12px 18px 14px; box-shadow: 6px 7px 0 color-mix(in srgb, var(--line) 88%, transparent); }
.gr.phone { width: 100%; padding: 10px 18px 24px; border: 2.5px solid var(--line); border-bottom: none; border-radius: 18px 22px 0 0; box-shadow: 0 -14px 30px color-mix(in srgb, var(--night-900) 25%, transparent); }
.gr::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--gray-900) 6%, transparent) 1px, transparent 1.4px); background-size: 20px 20px; }
.gr-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.gr-stage { position: relative; height: 250px; display: flex; justify-content: center; }
.gr.phone .gr-stage { height: 220px; }
.gr-box { position: absolute; bottom: 6px; left: 50%; width: 200px; translate: -50% 0; border: none; background: none; padding: 0; cursor: pointer; }
.gr.phone .gr-box { width: 170px; }
.gr-box svg { display: block; width: 100%; height: auto; overflow: visible; }
.gr-box.wait { animation: gr-wiggle 2.4s ease-in-out infinite; }
@keyframes gr-wiggle { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -4deg; } 82% { rotate: 4deg; } 88% { rotate: -2deg; } 94% { rotate: 1deg; } }
.gr-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.gr-box.open .gr-lid { transform: translate(70px, -110px) rotate(28deg); }
.gr-bow { transition: opacity .25s; }
.gr-box.open .gr-bow { opacity: 0; }
.gr-blob { position: absolute; left: 50%; bottom: 90px; width: 96px; height: 96px; translate: -50% 60px; opacity: 0; transition: translate .8s .25s cubic-bezier(.3, 1.5, .5, 1), opacity .2s .25s; }
.gr-blob.up { translate: -50% -36px; opacity: 1; }
.gr-blob svg { display: block; width: 100%; height: 100%; animation: gr-float 2.6s ease-in-out infinite; }
@keyframes gr-float { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6px); } }
/* paper scraps that drift out when it opens — kept few and calm */
.gr-scrap { position: absolute; bottom: 120px; left: 50%; width: 10px; height: 16px; border: 1.5px solid var(--line); border-radius: 2px; opacity: 0; }
.gr-scrap.go { animation: gr-scrap 1.6s .2s ease-out forwards; }
@keyframes gr-scrap { 0% { opacity: 0; transform: translate(0, 30px) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
.gr-tag { position: absolute; left: calc(50% + 96px); top: 46px; width: 180px; padding: 10px 12px 12px; background: var(--yellow-100); border: 2px solid var(--line); border-radius: 3px 14px 3px 14px; rotate: 6deg; box-shadow: 2px 3px 0 color-mix(in srgb, var(--gray-900) 20%, transparent); transition: rotate .4s, translate .4s; }
.gr.phone .gr-tag { left: auto; right: -4px; top: 8px; width: 150px; padding: 8px 10px; }
.gr-tag::before { content: ""; position: absolute; left: -30px; top: 20px; width: 32px; height: 2px; background: var(--line); rotate: 24deg; transform-origin: right center; }
.gr-tag .to { font-size: 13px; color: var(--ink-soft); }
.gr-tag .nt { font-family: var(--font-marker); font-weight: 700; font-size: 22px; line-height: 1.05; margin-top: 4px; color: var(--pink-700); }
.gr.phone .gr-tag .nt { font-size: 19px; }
.gr-head { position: relative; text-align: center; }
.gr-title { font-size: 40px; margin: 4px 0 2px; }
.gr.phone .gr-title { font-size: 32px; }
.gr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 16px 0 4px; font-size: 16px; text-align: left; }
.gr.phone .gr-list { grid-template-columns: minmax(0, 1fr); }
.gr-list span { display: flex; align-items: center; gap: 8px; }
.gr-acts { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.gr.phone .gr-acts .pp-btn { flex: 1 1 140px; }
.gr-toggle { display: flex; align-items: center; gap: 12px; margin: 14px auto 0; min-height: 48px; border: none; background: none; font: inherit; font-size: 16px; color: inherit; cursor: pointer; padding: 4px 0; text-align: left; line-height: 1.2; }
.gr-toggle small { display: block; font-size: 13px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
    .gr-box.wait, .gr-blob svg, .gr-scrap.go { animation: none; }
    .gr-lid, .gr-blob { transition: none; }
}

/* ---- Share picker (Voice/SharePicker.razor, design canvas: StreamPicker.dc.html) ---- */
.pp-scrim { position: fixed; inset: 0; z-index: 110; margin: 0; padding: 0; border: none; background: color-mix(in srgb, var(--night-900) 35%, transparent); cursor: pointer; }
.sp { position: fixed; z-index: 111; box-sizing: border-box; background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px; box-shadow: 6px 7px 0 color-mix(in srgb, var(--line) 88%, transparent); padding: 26px 28px; }
.sp.desktop { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; }
.sp.phone { left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; border-bottom: none; border-radius: 18px 22px 0 0; }
.sp-lbl { margin-top: 18px; }
.sp-srcs { display: flex; gap: 10px; margin-top: 10px; }
.sp-src { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 2px dashed transparent; border-radius: 10px; cursor: pointer; }
.sp-src .th { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; border: 2.5px solid var(--line); background: color-mix(in srgb, var(--sand) 60%, var(--paper)); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px; box-sizing: border-box; color: var(--ink-soft); }
.sp-src .th.game { background: var(--night-900); color: var(--cream); }
.sp-src.on { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 8%, var(--paper)); }
.sp-src.on .th { border-color: var(--accent-strong); }
.sp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sp-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; cursor: pointer; }
.sp-chip.on { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 10%, var(--paper)); font-weight: 700; }
.sp-chip.plus { border-style: dashed; color: var(--ink-soft); }
.sp-chip.plus .pb { position: absolute; right: -7px; top: -9px; }
.sp-look { display: flex; gap: 10px; margin-top: 10px; }
.sp-lk { flex: 1; text-align: left; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.sp-lk small { display: block; font-size: 13px; color: var(--ink-soft); }
.sp-lk.on { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 10%, var(--paper)); }
.sp-note { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent-strong) 9%, var(--paper)); color: var(--ink); font-size: 15px; }
.sp-note a { color: var(--accent-strong); font-weight: 700; }
.sp-acts { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.sp .pp-toggle { margin-top: 14px; }

/* ---- Plus badge in the chat header (Chat/ChannelChat.razor) ---- */
.chat-plus { display: inline-flex; align-items: center; vertical-align: -3px; margin-left: 6px; color: var(--accent-strong); }

/* ---- Profile extras on the profile card (Layout/ProfileCard.razor) ---- */
/* the polaroid tucks 40px up over the banner (design: .pf-top margin-top -40px). The pull-up
   sits on the body, not the photo — the body scrolls, so it would clip anything poking out
   of it. The banner is positioned and the photo too, so the photo paints over the banner. */
.pf-body.has-banner { margin-top: -40px; }
.pf-body.has-banner .pf-who { margin-top: 44px; }
.pf-banner { position: relative; height: 70px; margin: -12px -12px 0; border-radius: 4px 6px 0 0; border-bottom: 2.5px solid var(--line); background: var(--sand); overflow: hidden; }
.pf-card.sheet .pf-banner { margin: 0 -16px; border-radius: 0; }
.pf-card.sheet:has(.pf-banner) .pf-grab { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
.pf-card .ibtn.corner { z-index: 2; }
.pf-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-banner.dark-canvas { background: var(--night-900); }
.pf-banner.stars { background: color-mix(in srgb, var(--yellow-500) 26%, var(--paper)); }
.pf-banner.hearts { background: var(--pink-150); }
.pf-banner-washi { position: absolute; top: -8px; left: 18px; width: 74px; height: 22px; background: color-mix(in srgb, var(--tape) 88%, transparent); transform: rotate(-4deg); border-radius: 2px; box-shadow: 0 1px 0 color-mix(in srgb, var(--gray-900) 22%, transparent); }
.pf-photo-wrap { position: relative; width: fit-content; }
.pf-moves { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.pf-moves i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--accent-strong); transform: rotate(45deg); }
.pf-moves i:nth-child(2) { background: var(--yellow-500); }
.pf-moves i:nth-child(3) { background: var(--pink-150); }
.pf-chip.plus { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 1px 10px 1px 4px; min-height: 24px; box-sizing: border-box; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; color: var(--blue-900); font-size: 13px; font-weight: 700; background: var(--blue-50); }
.pf-chip.plus svg { rotate: -6deg; }
.pf-chip.fr { background: var(--pink-150); color: color-mix(in srgb, var(--pink-700) 60%, var(--gray-900)); }

/* the /plus demo card: canned Rio — sits in the hero scene like the design's, not
   fixed to the viewport like a live pop; banner squiggle in Plus blue */
.pf-card.demo { position: static; }
.pf-card.demo .pf-body { max-height: none; overflow: visible; }
/* the demo's doodle banner: pale yellow with the self-painting banner-doodle symbol. */
.pf-card.demo .pf-banner { background: var(--yellow-100); }
.pf-banner-demo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* "MOVES" under a moving face — the design's tiny note, half-tucked under the photo */
.pf-gif { position: absolute; left: 4px; bottom: -15px; z-index: 1; font-size: 10px; line-height: 1; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }

/* ---- Uploads: ended-Plus notices (Pages/Uploads.razor) ---- */
.up-ended { margin: 0 0 14px; padding: 12px 16px; border: 2.5px dashed var(--yellow-500); border-radius: 12px; background: color-mix(in srgb, var(--yellow-500) 10%, var(--paper)); font-size: 15px; }
.up-back-note.plus { border-left: 4px solid var(--accent-strong); }
.up-back-note.none { color: var(--ink-soft); }

/* ---- Thanks wall strip (Thanks/ThanksWall.razor strip layout) ---- */
.tw-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 16px; border-top: 2.5px solid var(--line); background: color-mix(in srgb, var(--sand) 45%, var(--paper)); }
.tw-strip-say { font-size: 15px; color: var(--ink-soft); }
.tw-strip-line { display: flex; align-items: baseline; gap: 4px; }
.tw-strip-line b { font-family: var(--font-marker); font-size: 20px; color: var(--ink); }
.tw-strip-names { display: flex; flex-wrap: wrap; gap: 4px 10px; flex: 1; min-width: 160px; font-size: 15px; }
.tw-strip-run { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.tw-strip-row { display: inline-flex; align-items: center; gap: 4px; }
.tw-strip-acts { margin-left: auto; }
.tw-strip-btn { min-height: 38px; font-size: 15px; padding: 4px 16px; }
.tw-count { display: inline-flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--ink-soft); }
.tw-count b { font-family: var(--font-marker); font-size: 22px; color: var(--accent-strong); }

/* ---- /thanks page (Pages/Thanks.razor) ---- */
/* the thank-you page (design: ThanksDesktop.dc.html): intro card full column width —
   birds on the left, words in the middle, the two buttons stacked on the right */
.thanks-page { max-width: 1392px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.th-card { display: flex; align-items: center; gap: 30px; padding: 18px 36px; }
.th-birds { display: flex; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.th-say { flex: 1; min-width: 0; font-size: 18px; line-height: 1.35; color: var(--ink); max-width: 680px; }
.th-say p { margin: 6px 0 0; }
.th-title { font-size: 44px; margin: 0; }
.th-acts { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
@media (max-width: 900px) {
    .th-card { flex-direction: column; align-items: center; gap: 14px; padding: 26px 18px 22px; text-align: center; }
    .th-say { max-width: 46ch; }
    .th-title { font-size: 34px; }
    .th-acts { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
.th-title { font-size: 40px; }

/* ---- Profile extras editor (Plus/ProfileExtras.razor) ---- */
.px { position: fixed; z-index: 401; left: 50%; top: 50%; translate: -50% -50%; width: 980px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 40px); overflow: auto; box-sizing: border-box; background: var(--paper); border: 2.5px solid var(--line); border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px; box-shadow: 6px 7px 0 color-mix(in srgb, var(--line) 88%, transparent); padding: 22px 26px 26px; }
.px.phone { left: 0; top: auto; bottom: 0; translate: none; width: 100%; max-height: 90dvh; border-bottom: none; border-radius: 18px 22px 0 0; padding: 10px 16px 26px; }
.px-title { font-size: 26px; }
.px-cols { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.px-lblsub { font-weight: 400; font-size: 13px; color: var(--ink-soft); margin-left: 6px; }
.px-prev { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.px-cap { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.px-card { position: relative; width: 252px; box-sizing: border-box; background: var(--paper); border: 2.5px solid var(--line); border-radius: 6px 6px 14px 18px / 6px 6px 18px 14px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--line) 88%, transparent); }
.px-prev-card { position: relative; padding: 12px; }
.px-prev-card .px-banner-slot { position: relative; height: 70px; margin: -12px -12px 10px; border-radius: 4px 4px 0 0; border-bottom: 2.5px solid var(--line); background: var(--sand); overflow: hidden; }
.px-prev-card .px-banner-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-prev-card .px-banner-slot.dark-canvas { background: var(--night-900); }
.px-prev-card .px-banner-slot.stars { background: color-mix(in srgb, var(--yellow-500) 26%, var(--paper)); }
.px-prev-card .px-banner-slot.hearts { background: var(--pink-150); }
.px-face { width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--line); background: var(--sand); overflow: hidden; margin-top: -30px; position: relative; }
.px-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-name { font-weight: 700; font-size: 17px; margin-top: 8px; }
.px-sub { font-size: 13px; color: var(--ink-soft); }
.px-acts { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* ---- Board history panel + moment overlay (Canvas/BoardHistory.razor, Pages/BoardView.razor) ---- */
.bh { display: flex; flex-direction: column; box-sizing: border-box; width: 300px; max-height: 100%; }
.bh-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; border-bottom: 2.5px solid var(--line); }
.bh-head .t { flex: 1; min-width: 0; }
.bh-head .mk { font-family: var(--font-marker); font-size: 19px; }
.bh-head small { display: block; font-size: 12px; color: var(--ink-soft); }
.bh-scroll { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bh-day { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-top: 6px; }
.bh-shot { display: flex; align-items: center; gap: 10px; padding: 6px; font: inherit; text-align: left; color: var(--ink); background: none; border: 2px dashed transparent; border-radius: 12px; cursor: pointer; }
.bh-shot:hover { border-color: var(--line); }
.bh-shot.on { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 8%, var(--paper)); }
.bh-pol { width: 84px; height: 58px; flex-shrink: 0; border: 2.5px solid var(--line); border-radius: 4px; background: var(--sand); overflow: hidden; transform: rotate(-1.5deg); }
.bh-shot:nth-child(even) .bh-pol { transform: rotate(1.2deg); }
.bh-pol img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-txt { min-width: 0; }
.bh-txt b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.bh-txt small { display: block; font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-now { font-size: 11px; font-weight: 700; color: var(--accent-strong); border: 1.5px solid var(--accent-strong); border-radius: 8px; padding: 0 6px; }
.bh-empty { font-size: 14px; color: var(--ink-soft); padding: 12px 4px; }
.bh-end { font-size: 12px; color: var(--ink-soft); padding: 10px 4px 2px; border-top: 2px dashed color-mix(in srgb, var(--line) 80%, transparent); }
.bh-foot { padding: 10px 12px 12px; border-top: 2.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.bh-small { font-size: 13px; color: var(--ink-soft); }
.bh-done { font-size: 14px; color: var(--ink); background: color-mix(in srgb, var(--accent-strong) 9%, var(--paper)); border-radius: 10px; padding: 8px 12px; }
.bh-done.bh-err { background: color-mix(in srgb, var(--red-100) 12%, var(--paper)); color: var(--danger-text); }
.bh-ask { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.bh-ask .mk { font-size: 18px; }
.bh-askbtns { display: flex; gap: 10px; }
.bh-moment { position: absolute; inset: 4%; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bh-moment img { max-width: 100%; max-height: 100%; border: 2.5px dashed var(--accent-strong); border-radius: 8px; background: var(--paper); box-shadow: 0 6px 0 color-mix(in srgb, var(--gray-900) 22%, transparent); }
.bh-mtag { position: absolute; top: -14px; left: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--accent-strong); color: var(--on-accent); font-size: 13px; font-weight: 700; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.bh-mback { position: absolute; right: 12px; bottom: 12px; pointer-events: auto; font: inherit; font-size: 14px; padding: 7px 14px; border: 2.5px solid var(--line); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 color-mix(in srgb, var(--line) 88%, transparent); }
@media (max-width: 720px) {
    .bh { width: 100%; }
    .bh-moment { inset: 2%; }
}
@media (prefers-reduced-motion: reduce) {
    .bh-pol { transition: none; }
    .tw-strip-run { animation: none; }
}