/* Pikto — 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: "Nunito";
    src: url("fonts/nunito-black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "Patrick Hand";
    src: url("fonts/patrick-hand.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

/* ============ tokens ============ */

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

    /* app surfaces (auth, dialogs, dock, friends) */
    --wall: #e8e4dc;
    --surface: #fdfdfb;
    --paper: #fffef8;
    --ink: #1f2430;
    --ink-soft: #5b6272;
    --ink-faint: #9aa0ad;
    --line: #1f2430;

    /* marker set */
    --m-black: #1f2430;
    --m-red: #e0453a;
    --m-blue: #2f6fdb;
    --m-green: #1f9d68;
    --m-orange: #f08a24;
    --m-purple: #7a4cd9;
    --m-pink: #e0457b;
    --hi-yellow: #ffe45c;

    --accent: var(--m-blue);
    --accent-strong: #2657b8; /* primary buttons: AA-contrast blue under white text */
    --danger: var(--m-red);
    --note: #fff1a1;

    --shadow-hard: 3px 3px 0 var(--line);
    --shadow-hard-lg: 5px 6px 0 var(--line);
    --shadow-soft: 0 10px 30px rgba(31, 36, 48, .14);

    /* 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 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --wall: #11141b;
        --surface: #1b202b;
        --paper: #232a37;
        --ink: #eef1f6;
        --ink-soft: #b3bac8;
        --ink-faint: #737c8e;
        --line: #eef1f6;
        --m-black: #eef1f6;
        --m-blue: #6ab0ff;
        --m-green: #4fd49a;
        --m-red: #ff6b5e;
        --m-orange: #ffae57;
        --m-purple: #b595ff;
        --m-pink: #ff7fae;
        --hi-yellow: #9a7c12;
        --note: #4a4527;
        --shadow-hard: 3px 3px 0 #000;
        --shadow-hard-lg: 5px 6px 0 #000;
        --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
        --accent-strong: #2f6fdb;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --wall: #11141b; --surface: #1b202b; --paper: #232a37;
    --ink: #eef1f6; --ink-soft: #b3bac8; --ink-faint: #737c8e; --line: #eef1f6;
    --m-black: #eef1f6; --m-blue: #6ab0ff; --m-green: #4fd49a; --m-red: #ff6b5e;
    --m-orange: #ffae57; --m-purple: #b595ff; --m-pink: #ff7fae; --hi-yellow: #9a7c12;
    --note: #4a4527;
    --shadow-hard: 3px 3px 0 #000; --shadow-hard-lg: 5px 6px 0 #000;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
    --accent-strong: #2f6fdb;
}

/* ============ 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: #e39b12; }
[data-palette="mint"], .canvases-shell:has(> [data-palette="mint"]) { --p-accent: #1f9d68; }
[data-palette="bubblegum"], .canvases-shell:has(> [data-palette="bubblegum"]) { --p-accent: #e0457b; }
[data-palette="sky"], .canvases-shell:has(> [data-palette="sky"]) { --p-accent: #2f6fdb; }
[data-palette="grape"], .canvases-shell:has(> [data-palette="grape"]) { --p-accent: #7a4cd9; }
[data-palette="tangerine"], .canvases-shell:has(> [data-palette="tangerine"]) { --p-accent: #f08a24; }
[data-palette="night"], .canvases-shell:has(> [data-palette="night"]) { --p-accent: #6ab0ff; }
[data-palette="custom"], .canvases-shell:has(> [data-palette="custom"]) { --p-accent: #2f6fdb; }

/* 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: #ffe45c; /* bright swash under dark ink; night darkens it below */
}
[data-palette="night"] {
    color-scheme: dark;
    --hi-yellow: #9a7c12; /* dark swash under the light ink: 3.5:1 on a 2.9rem title (AA large) */
    --shadow-hard: 3px 3px 0 #000;
    --shadow-hard-lg: 5px 6px 0 #000;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
}

/* 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: #1d2330; --p-note: #4a4527; --p-note-ink: #fbf3c4; --p-accent: #6ab0ff; }
}

/* ============ 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;
}

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 "Pikto chat" wordmark: Nunito Black, "chat" small and grey after it */
.wm { font-family: var(--font-logo); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.wm small { font-size: .5em; color: var(--ink-soft); margin-left: .12em; letter-spacing: 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: #fff; 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: #fff; }
.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-pikto {
    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: #fff;
    border: 2px solid var(--line);
    border-radius: var(--wobble-1);
    box-shadow: var(--shadow-hard);
}
#blazor-error-ui .reload { color: #fff; 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 { 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 #f0b429; }
.sheet-add {
    display: grid; place-items: center; width: 40px; min-height: 38px; padding: 0; box-sizing: border-box;
    background: transparent; color: #4a5060; 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: #1f2430; }
.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))); }

/* the whiteboard: rounded aluminium frame. The sheet itself is ALWAYS white paper —
   palettes and your accent dress everything around it, never the sheet. 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: #ffffff;
    --p-ink: #26241c;
    background:
        radial-gradient(ellipse 30% 18% at 22% 30%, rgba(38, 36, 28, .04), transparent 70%),
        radial-gradient(ellipse 26% 14% at 76% 68%, rgba(38, 36, 28, .03), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, #fff 45%, transparent) 0%, transparent 35%),
        #ffffff;
    color: var(--p-ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 0 0 7px #c9ced6,
        0 0 0 8px #9aa1ad,
        0 18px 40px rgba(20, 24, 32, .28);
}

/* 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;
}

.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: #2a2a1f;
    font-size: .95rem;
    padding: 4px 12px;
    border: 2px solid #2a2a1f;
    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 rgba(0, 0, 0, .22)); }

.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, #000 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 rgba(0, 0, 0, .12),
        4px 10px 14px -6px rgba(0, 0, 0, .35);
}
.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, #fff 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, #000 30%, var(--p-accent)));
    box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.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 rgba(0, 0, 0, .12), 3px 8px 12px -6px rgba(0, 0, 0, .35);
}
.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: #fff1a1;
    color: #2a2a1f;
    border-radius: 2px 2px 22px 2px / 2px 2px 12px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 4px 10px 14px -6px rgba(0, 0, 0, .35);
}
.pin.sticky::before { /* the tape */
    content: "";
    position: absolute;
    top: -11px; left: 50%;
    width: 70px; height: 20px;
    translate: -50% 0;
    rotate: -4deg;
    background: rgba(200, 226, 255, .85);
    border-left: 2px dashed rgba(0, 0, 0, .12);
    border-right: 2px dashed rgba(0, 0, 0, .12);
}
.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: rgba(0, 0, 0, .1); }

/* 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: #fff;
    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: #1f2430; }
.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-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.draw-seg button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 0 auto;
    min-height: 34px; padding: 0 8px; font-size: .95rem; cursor: pointer; white-space: nowrap;
    background: var(--surface); border: 2px solid var(--line); border-radius: 10px 8px 11px 9px;
}
.draw-seg button:hover { background: color-mix(in srgb, var(--hi-yellow) 30%, var(--surface)); }
.draw-seg button.on, .draw-sq.on, .draw-grid5 button.on, .draw-lgrid button.on, .draw-cats button.on { background: var(--ink); color: var(--paper); }
.draw-seg .font-marker { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.2rem; }
.draw-seg .font-neat { font-family: "Patrick Hand", sans-serif; }
.draw-seg .font-chunky { font-family: "Permanent Marker", cursive; font-size: .85rem; }

/* icon segments: fill, line */
.draw-iseg { display: flex; flex-shrink: 0; padding: 2px; border: 2px solid var(--line); border-radius: 12px 14px 10px 13px; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
.draw-iseg button { min-width: 36px; height: 32px; display: grid; place-items: center; padding: 0 4px; border: none; border-radius: 9px; background: none; color: var(--ink-soft); cursor: pointer; }
.draw-iseg button.on { background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line); }

.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-x { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; }
.draw-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.draw-find {
    display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; color: var(--ink-soft);
    background: var(--surface); border: 2px solid var(--line); border-radius: var(--wobble-3);
}
.draw-find input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: .95rem; color: var(--ink); outline: none; }
.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-seg { flex-wrap: nowrap; flex-shrink: 0; }
.draw-tray .draw-seg button { flex: 0 0 auto; min-height: 40px; min-width: 40px; }
.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-iseg button { min-width: 40px; height: 38px; }
.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: rgba(20, 24, 32, .22); 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 rgba(31, 36, 48, .18), 0 -18px 40px rgba(20, 24, 32, .25);
}
.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-lhead .draw-x { margin-left: auto; }
.draw-lsheet .draw-find { margin: 0 12px; height: 44px; }
.draw-lsheet .draw-find input { font-size: 1.05rem; }
.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: #1f2430; }
.opt .dot { border-color: transparent; }
.opt .d { font-size: .8rem; color: var(--ink-soft); margin-left: auto; }
.opt.on .d { color: #5b6272; }
.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(rgba(47, 111, 219, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 111, 219, .35) 1px, transparent 1px); background-size: 9px 9px; }
.pv.lines { background-image: linear-gradient(rgba(47, 111, 219, .4) 1px, transparent 1px); background-size: 100% 9px; }
.toggles { display: flex; flex-direction: column; margin-top: 12px; }
.toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px;
    padding: 0; border: none; background: none;
    font: inherit; font-size: 1.05rem; color: inherit; text-align: left;
    cursor: pointer;
}
.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: #fffef8; --ink: #1f2430; --ink-soft: #5b6272; --line: #1f2430;
    --hi-yellow: #ffe45c; --accent-strong: #2657b8;
    --shadow-hard-lg: 5px 6px 0 var(--line);
    --shadow-soft: 0 10px 30px rgba(31, 36, 48, .14);
    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 rgba(0, 0, 0, .12);
    border-right: 2px dashed rgba(0, 0, 0, .12);
}
.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: #fff;
    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: #d63a2f; color: #fff; }
.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: #1f2430; }
.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: #fdfdfb; --note: #fff1a1; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .psw[data-palette="classic"],
    :root:not([data-theme="light"]) .psw[data-palette="auto"] { --surface: #1b202b; --note: #4a4527; }
}
:root[data-theme="dark"] .psw[data-palette="classic"],
:root[data-theme="dark"] .psw[data-palette="auto"] { --surface: #1b202b; --note: #4a4527; }
.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: #e8e4dc; --surface: #fdfdfb; --paper: #fffef8;
    --ink: #1f2430; --ink-soft: #5b6272; --ink-faint: #9aa0ad; --line: #1f2430;
    --m-black: #1f2430; --m-red: #e0453a; --m-blue: #2f6fdb; --m-green: #1f9d68;
    --m-orange: #f08a24; --m-purple: #7a4cd9; --m-pink: #e0457b; --hi-yellow: #ffe45c;
    --note: #fff1a1; --accent: var(--m-blue); --accent-strong: #2657b8; --danger: var(--m-red);
    --shadow-hard: 3px 3px 0 var(--line); --shadow-hard-lg: 5px 6px 0 var(--line);
    --shadow-soft: 0 10px 30px rgba(31, 36, 48, .14);
}

/* 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: #1f2430;
    background: linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, transparent 35%), #fdfdfb;
    border-radius: 14px;
    box-shadow: 0 0 0 7px #c9ced6, 0 0 0 8px #9aa1ad, 0 18px 40px rgba(20, 24, 32, .28);
}
.auth-board::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background-image: radial-gradient(#1f2430 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: #5b6272;
    --line: #1f2430;
}
.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: #5b6272; margin-top: 10px; rotate: 1deg; }
.auth-tagline .hi { color: #1f2430; background: linear-gradient(104deg, transparent .9%, #ffe45c 2.4%, #ffe45c 97%, transparent 98.5%); }
.auth-ann { position: absolute; font-family: var(--font-marker); font-size: 1.6rem; color: #5b6272; 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: #b3325f; 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, rgba(243, 210, 122, .07) 0 6px, transparent 6px 12px), #2b2140;
    color: #f6e7c1;
    border: 2.5px solid #f3d27a;
    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: #2b2140;
    border: 2.5px solid #f3d27a;
    color: #f3d27a;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .35);
}
.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: #7a4cd9; color: #fff; 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: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 2px 5px 8px -3px rgba(0, 0, 0, .35); }
.auth-pol::before { content: ""; position: absolute; top: -7px; left: 50%; translate: -50% 0; width: 26px; height: 11px; background: rgba(255, 228, 92, .8); rotate: -4deg; }
.auth-pol span { display: grid; place-items: center; width: 40px; height: 38px; color: #fff; 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: #3b4150; }
.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 rgba(0, 0, 0, .12);
    border-right: 2px dashed rgba(0, 0, 0, .12);
}
.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: #167a50; }
.auth-hint.bad { color: #b3261e; }
.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: #e39b12; }
.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: #167a50; }
.auth-oops {
    position: relative;
    margin: 0;
    padding: 10px 14px 10px 40px;
    background: #ffe1dc; color: #7a1d15;
    line-height: 1.25;
    border-radius: 3px 3px 16px 3px / 3px 3px 10px 3px;
    rotate: -.6deg;
    box-shadow: 2px 4px 8px -4px rgba(0, 0, 0, .35);
}
.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 { height: 100%; min-width: 0; }
.wall-page .canvas-frame { width: min(100%, calc(var(--content-h) * var(--ar, 1.3))); }
@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)); }
}

.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; }
.search-strip {
    display: flex; align-items: center; gap: 8px;
    height: 46px; padding: 0 12px;
    background: var(--paper);
    color: var(--ink);
    border: 2.5px solid var(--line);
    border-radius: var(--wobble-3);
    box-shadow: var(--shadow-hard);
}
.search-strip input,
.search-strip input:focus {
    flex: 1; min-width: 0;
    padding: 0; border: none; border-radius: 0;
    background: none; box-shadow: none; transform: none;
    font-size: 1.05rem;
}
.search-strip input::-webkit-search-cancel-button { display: none; }
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: #1f2430; }
.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 #1f2430, 6px 14px 18px -6px rgba(0, 0, 0, .4); }
.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 new board / join / explore row, clear of the marker tray */
/* the wall's + pin: new board / join / find a community / lock, folded into one paper menu */
.wall-add { position: absolute; left: 24px; bottom: 24px; z-index: 8; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: auto; }
.wall-add-btn {
    width: 56px; height: 56px; display: grid; place-items: center; padding: 0; cursor: pointer; rotate: -3deg; transition: rotate .18s;
    border: 2.5px dashed color-mix(in srgb, var(--p-ink) 55%, transparent); border-radius: 50% 45% 52% 48%;
    background: color-mix(in srgb, var(--p-canvas) 80%, transparent); color: color-mix(in srgb, var(--p-ink) 85%, transparent);
}
.wall-add-btn:hover { border-style: solid; border-color: var(--p-accent); color: var(--p-accent); }
.wall-add.open .wall-add-btn { border-style: solid; border-color: var(--line); color: #1f2430; background: var(--hi-yellow); rotate: 42deg; }
.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: #1f2430; }
.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;
    background: #fff1a1; /* always yellow paper and dark ink, whatever the wall (Home.dc.html) */
    color: #2a2a1f;
    border-radius: 2px 2px 26px 2px / 2px 2px 14px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 4px 10px 14px -6px rgba(0, 0, 0, .35);
    user-select: text;
    -webkit-user-select: text;
}
.pin.mine:hover { scale: 1; }
.pin.mine::before { /* tape */
    content: "";
    position: absolute; top: -12px; left: 50%;
    width: 80px; height: 22px;
    translate: -50% 0; rotate: -4deg;
    background: rgba(200, 226, 255, .8);
    border-left: 2px dashed rgba(0, 0, 0, .12);
    border-right: 2px dashed rgba(0, 0, 0, .12);
}
.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: rgba(0, 0, 0, .08); }
.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 #1f2430;
    border-radius: var(--wobble-2);
    box-shadow: 5px 6px 0 #1f2430;
    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, #fff 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, #000 30%, var(--p-accent)));
    box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.peek-x { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.peek-x:hover { background: rgba(0, 0, 0, .08); }
.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: #d63a2f; color: #fff; 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: #1f2430; color: #1f2430; background: #fffef8; padding: 6px 10px; font-size: 1.05rem; white-space: nowrap; }
.peek-actions .btn.primary { color: #fff; background: #2657b8; }

/* 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: #2657b8; }
.av.team.warn { background: var(--danger); }

/* report to Pikto (design canvas "Report to Pikto"): 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, #fff)); 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-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.report-chips button { min-height: 36px; padding: 2px 12px; border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
.report-chips button:hover { rotate: -2deg; }
.report-chips button.on { background: var(--hi-yellow); color: #1f2430; }
.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, #fff)); 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 #c9ced6, 0 0 0 6px #9aa1ad, 0 8px 18px rgba(20, 24, 32, .2);
}
.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 rgba(0, 0, 0, .35); }

.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, #c9ced6, #fff 50%, #9aa1ad); }
.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-tab-x { display: grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border: none; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; opacity: .5; }
.notepad-tab:hover .notepad-tab-x, .notepad-tab.on .notepad-tab-x, .notepad-tab-x:focus-visible { opacity: 1; }
.notepad-tab-x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.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: #d63a2f; color: #fff; 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-search { display: flex; align-items: center; gap: 6px; padding: 2px 10px; margin-bottom: 4px; border: 2px solid var(--line); border-radius: var(--wobble-3); background: #fff; color: var(--ink); }
.notepad-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; color: inherit; padding: 7px 0; box-shadow: none; }
.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: #1f2430; }
.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 #1f2430;
    border-radius: 14px 10px 14px 9px;
    background: #fff1a1;
    color: #2a2a1f;
    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: #fff9d6;
    color: #1f2430;
    border: 2.5px solid #1f2430;
    border-top: none;
    border-radius: 0 0 14px 18px;
    box-shadow: 3px 3px 0 #1f2430;
}
.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: rgba(31, 36, 48, .06); }
.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 #1f2430;
    border-radius: 10px 8px 11px 7px;
    background: #fff;
    color: #1f2430;
    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: #5b6272; }
.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: #5b6272; }
.chat-frow .st.soon { color: #a34a00; }
.chat-frow .st.kept { color: #12734a; }
.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 #1f2430; border-radius: 3px; background: repeating-linear-gradient(135deg, #eef3ee 0 5px, #e2ebe4 5px 10px);
}
.chat-fthumb.gone, .chat-frow .chat-fi.gone { border-style: dashed; border-color: #9aa0ad; background: transparent; color: #8a909c; }
.chat-shelf { display: flex; align-items: center; gap: 8px; padding: 6px 6px 2px; font-size: 13px; color: #5b6272; }
.chat-meter { flex: 1; height: 12px; border: 2px solid #1f2430; border-radius: 8px 5px 8px 6px; background: #fff; overflow: hidden; }
.chat-meter i { display: block; height: 100%; background: #1f9d68; }

/* 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 {
    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: #fff; 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: #fff;
    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: #1f2430; }

.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: #fff1a1; color: #1f2430; }
.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: #1f2430; }
.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: #1f2430; }
.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: #fff1a1; 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 #1f2430; border-radius: 10px 14px 10px 12px;
    background: #fff; color: #1f2430; box-shadow: 3px 3px 0 rgba(31, 36, 48, .2);
}
.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 #1f2430; border-radius: 3px 11px 3px 3px; background: #fff9d6; color: #1f2430;
    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: #5b6272; }
.chat-dl {
    width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box;
    border: 2px solid #1f2430; border-radius: 50% 45% 52% 48%; background: #fffef8; color: #1f2430;
}
.chat-dl:hover { background: var(--hi-yellow); rotate: -8deg; color: #1f2430; }
.chat-video {
    display: block; width: 320px; max-width: 100%; max-height: 260px; background: #1f2430;
    border: 2px solid var(--line); border-radius: 4px; box-shadow: 3px 4px 0 rgba(31, 36, 48, .2);
}
.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: #a34a00; }
.chat-fade.kept { color: #12734a; }
.chat-keep {
    min-height: 26px; padding: 0 10px; font: inherit; font-size: 13px; border: 2px solid #1f2430; border-radius: 10px 8px 11px 7px;
    background: #fff1a1; color: #1f2430; 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: #b0261c; }
:root[data-theme="dark"] .chat-fade.soon { color: #ffb070; }
:root[data-theme="dark"] .chat-fade.kept { color: #7fe0b0; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .chat-fade.soon { color: #ffb070; }
    :root:not([data-theme="light"]) .chat-fade.kept { color: #7fe0b0; }
}
.chat-photo {
    display: block; max-width: min(320px, 100%);
    padding: 6px 6px 14px; background: #fff;
    border: 2px solid var(--line); border-radius: 4px;
    box-shadow: 3px 4px 0 rgba(31, 36, 48, .25); 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 rgba(31, 36, 48, .2); 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; }
.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 #1f2430; border-radius: 4px; background: #fffef8; color: #1f2430;
}
.chat-gifvia {
    position: absolute; right: 4px; bottom: 3px; padding: 0 5px; border-radius: 4px;
    font-size: .7rem; color: #3f4654; background: rgba(255, 254, 248, .8);
}

/* 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; }
/* Pikto 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%, rgba(255, 210, 63, .9) 48%, rgba(255, 210, 63, .75) 94%, transparent 94%); }
button.chat-msg-author.staff { padding: 0 3px; background: linear-gradient(176deg, transparent 48%, rgba(255, 210, 63, .9) 48%, rgba(255, 210, 63, .75) 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 #1f2430; border-radius: 50%; background: #ffd23f; 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: #d63a2f; }
.chat-comp-x { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.chat-comp-x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
/* 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 #1f2430; border-radius: 10px 12px 9px 13px; background: #fff9d6; color: #1f2430; font-size: 14px; line-height: 1.1;
}
.chat-tchip.bad { border-style: dashed; border-color: #c22f25; background: #fdeceb; color: #8e1f17; }
.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: #5b6272; }
.chat-tchip.bad .tt small { color: #a3281f; }
.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 #1f2430; border-radius: 3px; background: repeating-linear-gradient(135deg, #eef3ee 0 5px, #e2ebe4 5px 10px);
}
.chat-tnote { width: 100%; font-size: 12px; color: var(--ink-soft); }
.chat-tx { width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: #5b6272; cursor: pointer; padding: 0; flex-shrink: 0; }
.chat-tx:hover { background: rgba(31, 36, 48, .1); color: #1f2430; }
.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; }
.chat-comp-btn:hover, .chat-comp-btn:focus-within { 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: #1f2430; 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: #1f2430; 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-eps { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; margin-bottom: 6px; border: 2px solid var(--line); border-radius: 185px 25px 145px 20px / 20px 155px 25px 175px; background: var(--surface, #fff); }
.chat-eps:focus-within { outline: 3px solid #f0b429; outline-offset: 1px; }
.chat-eps input { flex: 1; min-width: 0; border: none; outline: none; background: none; box-shadow: none; padding: 0; font-size: 1rem; }
.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-search {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px 0 10px;
    border: 2px solid var(--line); border-radius: 185px 25px 145px 20px / 20px 155px 25px 175px; background: var(--surface);
}
.gp-search:focus-within { outline: 3px solid #f0b429; outline-offset: 1px; }
.gp-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-size: 1rem; color: var(--ink); padding: 0; box-shadow: none; min-height: 0; }
.gp-search input::-webkit-search-cancel-button { display: none; }
.gp-x { width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; padding: 0; }
.gp-x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.gp-kind { display: flex; padding: 2px; border: 2px solid var(--line); border-radius: 12px 9px 12px 10px; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); flex-shrink: 0; }
.gp-kind button { min-height: 32px; padding: 0 10px; border: none; border-radius: 9px; background: none; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }
.gp-kind button.on { background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line); }
.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: #1f2430; }
.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(#f1efe8 0 25%, #fff 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 #1f2430; border-radius: 4px; background: #fffef8; color: #1f2430; }
.gp-name {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: .8rem; text-align: left;
    background: rgba(31, 36, 48, .78); color: #fffef8; 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, #f1efe8 30%, #faf9f4 50%, #f1efe8 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: #1f2430; 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: #1f2430; }
@media (max-width: 640px) { .chat-side { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: -4px 0 0 rgba(31, 36, 48, .15); } .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) {
    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; }
.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: #fff9d6; color: #5b6272; border-radius: 12px 18px 0 0; }
.chat-composer .chat-comp-rep b { color: #1f2430; 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: 40vh;
    box-sizing: border-box;
    padding: 8px 6px 6px;
    font-size: 17px;
    line-height: 28px;
    background: repeating-linear-gradient(transparent 0 27px, rgba(47, 111, 219, .14) 27px 28px);
    color: var(--ink);
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}
.chat-composer textarea:focus { box-shadow: 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;
}

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

@media (max-width: 759.98px) {
    body { font-size: 16px; }
    .canvas-frame { box-shadow: 0 0 0 4px #c9ced6, 0 0 0 5px #9aa1ad, 0 10px 24px rgba(20, 24, 32, .25); }
    .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 keeps its full size and pans sideways — stickies stay readable */
    .wall-stage { display: flex; overflow-x: auto; padding: 10px 4px 16px; scroll-snap-type: x proximity; }
    .wall-page .wall-stage .canvas-frame { width: 900px; flex-shrink: 0; scroll-snap-align: start; }
    .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; }
    /* the wall pans sideways on a phone, so the + stays put in the screen's corner */
    .wall-add:not(.still) { position: fixed; left: auto; right: 16px; bottom: 16px; z-index: 90; align-items: flex-end; }
    .wall-add-menu { rotate: 1deg; }
    .search-strip { height: 38px; }
    .search-strip kbd { display: none; }
    .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 #1f2430; background: #5b6272; color: #fff; 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: #d63a2f; color: #fff; }

/* 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: #fffef8;
    color: #1f2430;
    font: inherit;
    cursor: grab;
    rotate: var(--tilt, 0deg);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 4px 9px 12px -6px rgba(0, 0, 0, .4);
    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: rgba(255, 228, 92, .8); border-inline: 2px dashed rgba(0, 0, 0, .12); }
.polaroid.me::before { background: rgba(200, 226, 255, .9); }
.polaroid.talk { translate: 0 -6px; box-shadow: 0 0 0 3px var(--m-green), 6px 16px 16px -6px rgba(0, 0, 0, .4); }
.polaroid-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .92; overflow: hidden; color: #fff; font-family: var(--font-marker); font-weight: 700; font-size: 3.6rem; }
.polaroid-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .25), transparent 45%); pointer-events: none; }
.polaroid-photo.cam { background: #1d2330; }
.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: #d63a2f; color: #fff; white-space: nowrap; }
.polaroid.friend::before { background: rgba(255, 176, 204, .9); }
.polaroid.on { box-shadow: 0 0 0 3px #2657b8, 4px 9px 12px -6px rgba(0, 0, 0, .4); }
/* 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: #1f2430; 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: #fffef8; box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 3px 7px 10px -5px rgba(0, 0, 0, .4); }
.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: rgba(255, 228, 92, .8); }
.voice-pile.on .voice-pile-card.top { box-shadow: 0 0 0 3px #2657b8, 3px 7px 10px -5px rgba(0, 0, 0, .4); }
.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: #5b6272; }
.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: #1d2330; }

.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: #fffef8; rotate: -1.2deg; box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 5px 10px 14px -6px rgba(0, 0, 0, .4); }
.voice-sheet:nth-child(even) { rotate: 1.4deg; }
.voice-sheet::before, .voice-sheet::after { content: ""; position: absolute; top: -9px; width: 52px; height: 18px; background: rgba(255, 228, 92, .8); }
.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, #2b3550, #141821); color: #c9d2e3; 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: #d63a2f; color: #fff; }
.voice-watch { position: absolute; right: 7px; bottom: 7px; z-index: 1; }


.voice-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 254, 248, .85); color: #1f2430; cursor: pointer; flex-shrink: 0; }
.voice-x:hover { background: rgba(31, 36, 48, .08); }
/* 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: #fff1a1; color: #2a2a1f; rotate: -1deg; border-radius: 2px 2px 22px 2px / 2px 2px 12px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 6px 14px 20px -6px rgba(0, 0, 0, .45); 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: rgba(200, 226, 255, .85); }
.voice-crowd-hd { display: flex; align-items: center; gap: 8px; }
.voice-crowd-hd .voice-x { margin-left: auto; background: none; }
.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: #5b6272; }
.voice-crowd-find { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 10px; min-height: 40px; border: 2px solid #1f2430; border-radius: 12px 16px 14px 12px; background: #fffef8; color: #1f2430; }
.voice-crowd-find input { flex: 1; min-width: 0; border: none; outline: none; background: none; box-shadow: none; padding: 0; font: inherit; font-size: 1rem; color: #1f2430; }
.voice-crowd-find:focus-within { outline: 3px solid var(--p-accent); outline-offset: 1px; }
.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: #5b6272; 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: rgba(31, 36, 48, .08); }
.voice-crow .av.talk { box-shadow: 0 0 0 2.5px #fffef8, 0 0 0 5px var(--m-green); }
.voice-crow-st { margin-left: auto; font-size: .8rem; color: #5b6272; text-align: right; }
.voice-crow-st.talk { color: #1a7a50; }
.voice-crowd-none { margin: 10px 6px; font-size: .95rem; color: #5b6272; }

/* 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: #fff; color: #1f2430; 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: #fbe1de; color: #b0261c; }
.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: #c22f25; color: #fff; 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: rgba(0, 0, 0, .45); color: #fff; }
.voice-covered { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 18px; text-align: center; color: #9aa4b8; font-size: .82rem; }
.voice-covered b { font-family: var(--font-marker); font-size: 1.35rem; color: #c9d2e3; }
.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: #5b6272; 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: #d63a2f; color: #fff; 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, #2a2a1f); 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, #fff 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, #000 30%, var(--p-accent))); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.voice-peek-x { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: none; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.voice-peek-x:hover { background: rgba(0, 0, 0, .08); }
.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: #fbe1de; color: #7d1a12; border: 2px solid #7d1a12; 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: rgba(17, 20, 27, .62); 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 rgba(0, 0, 0, .35)); }
/* 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, #e6e8ec, #9aa1ad 60%, #6b7280); 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, rgba(31, 36, 48, .14) 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, #1f2430 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: #fdfdfb; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.voice-screen.big { aspect-ratio: 16 / 9; height: auto; }
.voice-screen.big:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; background: #000; }
.voice-screen.big:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; background: #000; }
.voice-proj-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-right: 22px; color: #1f2430; }
/* 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%, #d9d4c6 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%, #1f2430 44% 52%, transparent 52% 68%, #1f2430 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: #1f2430; }
.voice-cord { position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: #1f2430; transform-origin: top; }
.voice-cord::after { content: ""; position: absolute; left: -6px; bottom: -12px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1f2430; background: #fffef8; }
/* 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: #ebe7dc; color: #1f2430; cursor: pointer; }
.voice-proj-tabs button.on { background: #fdfdfb; }
/* 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: #fffef8; color: #1f2430; font: inherit; cursor: pointer; rotate: var(--tilt, 0deg); box-shadow: 3px 6px 8px -4px rgba(0, 0, 0, .5); transition: translate .2s ease; }
.voice-mini.talk { translate: 0 -6px; box-shadow: 0 0 0 3px var(--m-green), 3px 10px 10px -4px rgba(0, 0, 0, .5); }
.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: rgba(255, 176, 204, .9); }
.voice-mini.me::before { background: rgba(200, 226, 255, .9); }
.voice-mini.on { box-shadow: 0 0 0 3px #2657b8, 3px 6px 8px -4px rgba(0, 0, 0, .5); }
.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, #ebe7dc 0 8px, #e2ddd0 8px 16px); color: #1f2430; font-size: 1.9rem; }
.voice-mini.more { box-shadow: -4px -3px 0 -1px #fffef8, -4px -3px 0 0 rgba(0, 0, 0, .12), 3px 6px 8px -4px rgba(0, 0, 0, .5); }

/* 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: #d9f3e6; color: #12382a; }
.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: #c22f25; color: #fff; flex-shrink: 0; }
.livepill i { width: 7px; height: 7px; border-radius: 50%; background: #fff; 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 #1f2430; border-radius: 50% 45% 52% 48%; background: #fff; color: #1f2430; cursor: pointer; }
.walkie-btn.off { background: #fbe1de; color: #b0261c; }
.walkie-btn.bye { background: #c22f25; color: #fff; }
.walkie-back { margin-left: auto; font-size: 1rem; padding: 6px 12px; border: 2.5px solid #1f2430; border-radius: var(--wobble-1); background: #fffef8; color: #1f2430; text-decoration: none; box-shadow: 2px 2px 0 #1f2430; white-space: nowrap; }
.walkie-back:hover { color: #1f2430; 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: #d9f3e6; color: #12382a; 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: #c22f25; color: #fff; 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: #fffef8; color: #1f2430; border: none; border-top: 2.5px solid #1f2430; 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: #5b6272; 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 #1f2430; border-radius: 50% 45% 52% 48%; background: #fffef8; color: #1f2430; box-shadow: 2px 2px 0 #1f2430;
    }
    .voice-btn.on .voice-k { background: var(--hi-yellow); }
    .voice-btn.off .voice-k { background: #1f2430; color: #fffef8; }
    .voice-leave .voice-k { background: #c22f25; color: #fff; }
    .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: #fffef8; }
}

/* ============ 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, .hopper) { 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; }
.marks-scrim { position: fixed; inset: 0; z-index: 94; }
.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: #1f2430; 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: #1f2430; stroke-width: 2.5; stroke-linejoin: round; }
.bm .icon { position: relative; }
.bm:hover { color: #1f2430; }
.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 #fffef8; }
.bm .tip { position: absolute; top: 84px; left: 50%; translate: -50% 0; padding: 0 8px; border-radius: 8px; background: #1f2430; color: #fffef8; 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; }

.hopper {
    position: absolute; top: 100px; right: 0;
    width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 220px); overflow: auto;
    padding: 18px 18px 16px; box-sizing: border-box;
    background: var(--paper); color: var(--ink);
    border: 2.5px solid var(--line); border-radius: var(--wobble-2); box-shadow: var(--shadow-hard-lg);
    rotate: -.5deg;
    animation: slap .18s cubic-bezier(.2, 1.4, .5, 1);
}
.hopper-head { display: flex; align-items: baseline; gap: 10px; }
.hopper-title { font-family: var(--font-marker); font-weight: 700; font-size: 1.9rem; line-height: 1; }
.hopper-sub { font-size: .88rem; color: var(--ink-soft); }
.hopper-none { color: var(--ink-soft); margin: 10px 0 0; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; margin-top: 12px; }
.hn {
    position: relative;
    min-height: 84px; padding: 14px 6px 8px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; line-height: 1; text-align: center;
    background: var(--p-note); color: var(--p-note-ink); text-decoration: none;
    border-radius: 2px 2px 14px 2px / 2px 2px 8px 2px;
    box-shadow: 2px 5px 6px -3px rgba(0, 0, 0, .35);
    transition: scale .12s, rotate .12s;
}
.hn:hover { scale: 1.06; rotate: -2deg; color: var(--p-note-ink); }
.hn.cur { box-shadow: 0 0 0 3px var(--hi-yellow), 0 0 0 5.5px var(--line); }
.hn-name { overflow-wrap: anywhere; }
.hn .v { font-family: var(--font-hand); font-weight: 400; font-size: .7rem; display: flex; align-items: center; gap: 3px; }
.hn .dot { position: absolute; top: -4px; right: -4px; background: #e0453a; border-color: #fffef8; }

/* 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: #1f2430; 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: #c22f25; color: #fff; }
.map-badge { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: #2f6fd6; color: #fff; 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: #1f2430;
    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: #bff0d4; color: #12382a; border: 1.5px solid var(--line); rotate: -2deg; white-space: nowrap; }
.kit-tier.community { background: #dccbff; color: #2c1760; }
.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: #d9f3e6; color: #12382a; 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: #fff; color: #1f2430;
    font: inherit; font-size: .95rem; cursor: pointer;
}
.kit-chip:hover:not(:disabled) { background: #fff9d6; }
.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 #7a4cd9; 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); }
.board-kit .set-toggles .toggle { min-height: 50px; }

/* 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: #1f2430; 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: #1f2430;
    background: conic-gradient(#e0453a, #f0b429, #1f9d68, #2f6fdb, #7a4cd9, #e0457b, #e0453a);
}
.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; }
.cwheel-head .mk { font-family: var(--font-marker); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.cwheel-x { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: none; border-radius: 50% 45% 52% 48%; background: none; color: var(--ink); cursor: pointer; }
.cwheel-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.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, #fff, rgba(255, 255, 255, 0)); }
.cwheel-shade { background: #000; }
.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 #fffef8; border-radius: 50%; box-shadow: 0 0 0 2.5px #1f2430, 2px 3px 0 2.5px #1f2430;
}
.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, #000, 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: #fffef8; border: 3px solid #1f2430; box-shadow: 2px 2px 0 #1f2430;
}
.cwheel-strip::-moz-range-thumb, .draw-size input::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; background: #fffef8; border: 3px solid #1f2430; box-shadow: 2px 2px 0 #1f2430;
}
.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: #f6e7b8; color: #1f2430; border: 2.5px solid #1f2430; border-radius: 4px 10px 5px 9px; box-shadow: 3px 3px 0 #1f2430;
    font-size: 1.05rem; white-space: nowrap;
}
.cdrop-tape .btn { color: #1f2430; border-color: #1f2430; }
.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, #fffef8); border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 2.5px #1f2430, 3px 4px 0 2.5px #1f2430, inset 0 0 0 2px rgba(31, 36, 48, .35);
}
.cdrop-loupe.on { display: grid; }
.cdrop-loupe i { width: 12px; height: 12px; box-sizing: border-box; background: var(--c); border: 2px solid #fffef8; outline: 2px solid #1f2430; }
.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: #fffef8; color: #1f2430; border: 2px solid #1f2430; 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: rgba(31, 36, 48, .35); }
}

/* 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: rgba(31, 36, 48, .42); }
.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: #fff6c2; color: #1f2430; box-shadow: inset 0 0 0 2px #1f2430; }
.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: #4a5060; }
.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: #1f2430; }

/* 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 #f0b429; 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: #1f2430; }
.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) keeps its own white. */
.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;
}
.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 rgba(31, 36, 48, .18);
    }
    .tmk-grab { width: 54px; height: 6px; margin: 8px auto 2px; border-radius: 3px; background: #c9c3b6; 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; }
.list-find { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 0 10px; height: 40px; border: 2px solid var(--line); border-radius: var(--wobble-3); background: var(--surface, #fff); }
.list-find input { flex: 1; min-width: 0; border: none; background: none; box-shadow: none; padding: 0; font-size: 1rem; }
.list-find input:focus { outline: none; box-shadow: none; }
/* 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; }
.people-head .list-find { margin-bottom: 8px; }
.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, #fff); color: var(--ink); cursor: pointer; }
.lchip:hover { rotate: -2deg; }
.lchip.on { background: var(--hi-yellow); color: #1f2430; 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) */
.sheet-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(20, 24, 32, .35); }
.people-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 80dvh; overflow: auto;
    padding: 16px 16px calc(22px + 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 rgba(31, 36, 48, .2);
}
.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 .starter-find { font-size: 1rem; padding: 10px 12px; }
.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; }
.header-find { margin: 0; width: 100%; max-width: 340px; background: var(--surface, #fff); }
.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-find { width: 100%; box-sizing: border-box; font-size: 1rem; padding: 6px 10px; margin-bottom: 4px; }
.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: #fff; color: #fff; }
.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: #1f2430; }
.dmrow.on .who .a, .dmrow.on .dmrow-t { color: #4a5060; }
.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, #2a2a1f);
    border-radius: 2px 2px 26px 2px / 2px 2px 14px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 4px 10px 14px -6px rgba(0, 0, 0, .35);
    rotate: .4deg;
}
.dm-about::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 22px; translate: -50% 0; rotate: -3deg; background: rgba(200, 226, 255, .8); border-inline: 2px dashed rgba(0, 0, 0, .12); }
.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: #d9f3e6; color: #12382a; }
.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; }
@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: #1f2430; }
.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: rgba(20, 24, 32, .35); }
    .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: rgba(20, 24, 32, .35); }

    /* 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 #c9ced6, 0 0 0 8px #9aa1ad; }
    .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);
    }
    .canvas-mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
    .canvas-mini b { position: absolute; box-sizing: border-box; border: 2px solid var(--danger); border-radius: 3px; pointer-events: none; }
    .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;
    }
    .wall-page .wall-stage .canvas-frame { width: calc((var(--content-h) - 26px) * var(--ar, 1.3)); }

    /* 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);
    }
    .bm, .bm:hover, .bm.on { width: 62px; height: auto; padding: 0; flex-direction: column; align-items: center; }
    .bm.phone-only { display: flex; }
    .bm.wide-only { display: none; }
    .bm .rib, .bm:hover .rib { top: -2.5px; left: 50%; translate: -50% 0; width: 40px; height: 40px; filter: drop-shadow(2px 3px 0 var(--line)); }
    .bm.on .rib { height: 50px; }
    .bm .icon { margin-top: 7px; }
    .bm .tip, .bm.on:hover .tip { position: static; translate: none; opacity: 1; margin-top: auto; padding: 0 0 8px; border-radius: 0; background: none; font-size: .82rem; color: var(--ink-soft); }
    .bm.on .tip { color: var(--ink); font-weight: 700; }
    .bm .unr { left: 36px; top: 16px; }
    .hopper { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100dvh - 180px); }

    /* 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 rgba(20, 24, 32, .25);
    }
    .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: #1f2430; }
.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: #fff; color: #1f2430; box-shadow: 2px 4px 6px rgba(0, 0, 0, .2); 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, #e0453a, #f08a24, #ffe45c, #1f9d68, #2f6fdb, #7a4cd9, #e0457b, #e0453a); }
.psw.custom::after { background: #fff; }
.set-patterns { display: flex; gap: 18px; }
.set-seg { display: flex; max-width: 340px; padding: 3px; border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.set-seg button { flex: 1; min-height: 40px; border: none; border-radius: 10px; background: none; font: inherit; font-size: 1rem; color: var(--ink-soft); cursor: pointer; }
.set-seg button.on { background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line); }
.set-toggles { display: flex; flex-direction: column; }
.set-toggles .toggle { min-height: 56px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); line-height: 1.15; }
.set-toggles .toggle small { display: block; font-size: .85rem; color: var(--ink-soft); }

/* 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: #1f2430; background: #bff0d4; border-left: 2px dashed rgba(0,0,0,.2); border-right: 2px dashed rgba(0,0,0,.2); }
.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: #fff; }
@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: #fff; color: #1f2430; box-shadow: 3px 6px 8px rgba(0, 0, 0, .2); 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: #3b4459; display: grid; place-items: center; color: #c8cede; 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, #1f2430 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, #1f2430);
    border-radius: 2px 2px 20px 2px / 2px 2px 12px 2px; box-shadow: 3px 6px 6px rgba(0, 0, 0, .2); 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 Pikto */
.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 Pikto + the /delete-account page */
.delcf-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(31, 36, 48, .45); }
.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-x {
    position: absolute; right: 12px; top: 12px; width: 44px; height: 44px;
    display: grid; place-items: center; padding: 0;
    border: none; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
}
.delcf-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.delcf-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.delcf-hi { background: linear-gradient(104deg, transparent .9%, #ffd6cc 2.4%, #ffd6cc 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 Pikto + the /clear-out page */
.co-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(31, 36, 48, .45); }
.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-x {
    position: absolute; right: 12px; top: 12px; width: 44px; height: 44px;
    display: grid; place-items: center; padding: 0;
    border: none; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
}
.co-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.co-mk { font-family: var(--font-marker); font-weight: 700; line-height: 1.05; }
.co-hi-red { background: linear-gradient(104deg, transparent .9%, #ffd6cc 2.4%, #ffd6cc 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: #fff; }
.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: #1f2430; }
.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: #f0b429; color: #1b2940; }
.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, #1f2430 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, #1f2430);
    border-radius: 2px 2px 20px 2px / 2px 2px 12px 2px; box-shadow: 3px 6px 6px rgba(0, 0, 0, .2); 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 rgba(0, 0, 0, .3); }
.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, #1f2430) 45%, transparent) 1px, transparent 1.4px); background-size: 12px 12px; }
.bs-canvas.grid { background-image: linear-gradient(rgba(47, 111, 219, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 111, 219, .3) 1px, transparent 1px); background-size: 14px 14px; }
.bs-canvas.lines { background-image: linear-gradient(rgba(47, 111, 219, .35) 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, #1f2430); 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: #1f2430;
    border-left: 2px dashed rgba(0, 0, 0, .2); border-right: 2px dashed rgba(0, 0, 0, .2);
}
.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-perms .toggle, .set-toggles .toggle { min-height: 56px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); line-height: 1.15; }
.bs-perms .toggle small { display: block; font-size: .85rem; color: var(--ink-soft); }
.toggle:disabled { opacity: .55; cursor: not-allowed; }
.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-bar .list-find { width: 260px; }
.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: #1b2940; color: #f6e7b8; }
.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-card .set-seg { width: 320px; }
.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: #fff; }
.bs-tri.deny { background: #d63a2f; color: #fff; }
.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-bar .list-find, .bs-pop .list-find { margin: 0; }
.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: #ffe2c2; color: #7a3a00; }
.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: #1f2430;
    background: linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, transparent 35%), #fdfdfb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 7px #c9ced6, 0 0 0 8px #9aa1ad, 0 18px 40px rgba(20, 24, 32, .28);
}
.loading-frame::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(#1f2430 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: 900; letter-spacing: -.02em; 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: #1f2430; 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: #2f6fdb; 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, rgba(0, 0, 0, .04), transparent 22%), var(--p-note);
    border-radius: 2px 2px 26px 2px / 2px 2px 14px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 4px 10px 14px -6px rgba(0, 0, 0, .35);
}
.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, #fff 55%, var(--p-accent)), var(--p-accent) 55%, color-mix(in srgb, #000 30%, var(--p-accent)));
    box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.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: #5b6272;
}
.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: #5b6272; }
.loading-slow a { color: #2657b8; }

@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-seg { display: flex; padding: 3px; border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
.cx-seg button { flex: 1; min-height: 34px; padding: 0 10px; font: inherit; font-size: .95rem; white-space: nowrap; cursor: pointer; border: none; border-radius: 10px; background: none; color: var(--ink-soft); }
.cx-seg button.on { background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line); }
.cx-filters .toggle small { display: block; font-size: .85rem; color: var(--ink-soft); }
.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 #c9ced6, 0 0 0 8px #9aa1ad, 0 14px 30px rgba(20, 24, 32, .25);
}
.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-head .cx-seg { margin-left: auto; }
.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: #1f9d68; color: #fff; rotate: -5deg; box-shadow: 0 2px 0 #1f2430; }
.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: rgba(255, 255, 255, .6); border: 1.5px solid rgba(31, 36, 48, .35); }
.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: #fff; 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: rgba(31, 157, 104, .22); color: #12382a; }
.cx-in { position: absolute; top: 10px; right: 10px; padding: 0 8px; line-height: 20px; font-size: .75rem; border-radius: 10px; background: #1b2940; color: #f6e7b8; 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: #8a3a33; 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 #7a4cd9; border-radius: 14px 18px 12px 16px; background: color-mix(in srgb, #dccbff 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-find {
        display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; box-sizing: border-box; color: var(--ink-soft);
        background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--wobble-3); box-shadow: 3px 3px 0 var(--line);
    }
    .cx-find input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 1.05rem; color: var(--ink); outline: none; }
    .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-head .cx-seg { margin-left: 0; width: 100%; }
    .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: rgba(20, 24, 32, .35); 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 rgba(31, 36, 48, .18), 0 -18px 40px rgba(20, 24, 32, .25);
        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: rgba(22, 26, 36, .58); }
.tour-spot {
    position: fixed; pointer-events: none;
    border-radius: 16px;
    box-shadow: 0 0 0 200vmax rgba(22, 26, 36, .58);
    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 rgba(0, 0, 0, .22)); }
.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: #a9c5d5; 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: #88a9bd; --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: #e3e8eb; --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: rgba(20, 24, 32, .38); }
.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: rgba(224, 69, 58, .35); pointer-events: none; }
.rules-tape { position: absolute; top: -12px; width: 110px; height: 30px; background: rgba(255, 228, 92, .82); border-left: 2px dashed rgba(0, 0, 0, .15); border-right: 2px dashed rgba(0, 0, 0, .15); }
.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, rgba(47, 111, 219, .18) 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: #1f2430; }
.rules-was { display: block; font-size: .85rem; color: #8a3a33; 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: #1b2940; color: #f6e7b8; 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: #1f2430; 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: #bff0d4; }
.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: #8a3a33; }
.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: #fff1a1; color: #2a2a1f; 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: #1b2940; color: #f6e7b8; }
.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 #7a4cd9; border-radius: 12px; background: color-mix(in srgb, #dccbff 35%, var(--paper)); color: #2c1760; }
.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 rgba(31, 36, 48, .18), 0 -18px 40px rgba(20, 24, 32, .25);
        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: #1f2430; }

/* a community server's own board note: its picture is the note (see-through edges and all),
   Pikto 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 rgba(0, 0, 0, .14)) drop-shadow(3px 8px 7px rgba(0, 0, 0, .28)); }
.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, #fff 55%, var(--note-pin)), var(--note-pin) 55%, color-mix(in srgb, #000 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 .set-seg { max-width: 360px; }
.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-file { position: relative; overflow: hidden; cursor: pointer; }
.ne-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.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, #e0457b); }
.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: #fff1a1; }
.ne-spots button { width: 34px; height: 28px; display: grid; place-items: center; padding: 0; border: 1.5px dashed rgba(31, 36, 48, .35); border-radius: 6px; background: none; cursor: pointer; }
.ne-spots button i { width: 16px; height: 4px; border-radius: 2px; background: rgba(31, 36, 48, .3); }
.ne-spots button.on { border-style: solid; border-color: #1f2430; background: #fffef8; }
.ne-spots button.on i { background: #1f2430; }
.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, #1f9d68); }
.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: #f4efe4; border: 2.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; color: #1f2430; }
.ne-guides { position: relative; border: 2px dashed #b0265c; border-radius: 6px; }
.ne-max { position: absolute; right: 4px; top: -24px; font-size: .8rem; color: #b0265c; }
.ne-normal { position: absolute; left: 0; top: 0; z-index: 4; border: 2px dotted rgba(31, 36, 48, .45); border-radius: 4px; pointer-events: none; }
.ne-normal small { position: absolute; left: 4px; bottom: -22px; font-size: .8rem; color: #5b6272; 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; }
.board-kit .draw-seg button { font: inherit; color: var(--ink); }
.board-kit .draw-seg button.on { color: var(--paper); }
.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: #1f2430; 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: #fff;
    background: repeating-linear-gradient(-45deg, #1f2430 0 8px, #c22f25 8px 16px);
    border-inline: 2px dashed rgba(255, 255, 255, .5);
}
.stafftape span { background: #1f2430; 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, #fdfdfb); }
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, #fff)); }
.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: #1f2430; }
.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: rgba(31, 36, 48, .45); 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, #fff)); }
.adm-state.down { background: color-mix(in srgb, var(--danger) 16%, var(--paper, #fff)); }
.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 .cx-seg { margin-bottom: 8px; }
.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: #1f2430; }
.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: #3a3f4b; }
.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: #10294d; background: #c8e2ff; }
.adm-kind.k-user { background: #d9f3e6; color: #12382a; }
.adm-kind.k-board { background: #dccbff; color: #2b1a52; }
.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, #fff); 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, #d8d2c4 0 10px, #cfc8b8 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: rgba(31, 36, 48, .72); color: #fff; }
.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; }
.adm-suspend .cx-seg { margin-bottom: 4px; }
/* 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: #1f2430; }
.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: #3a3f4b; }
.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 .toggle { width: 100%; }
.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, #fff)); color: #1f2430; }
.adm-state.off { background: color-mix(in srgb, var(--line) 10%, var(--paper, #fff)); }
.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: #1f9d68; }
.adm-hrow .dot.warn { background: #f0b429; }
.adm-hrow .dot.down { background: #d63a2f; }
.adm-hrow .dot.off { background: transparent; }
.adm-kind.k-err { background: #fde2de; color: #5a1410; }
@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, #fff)); }
.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: #c8e2ff; color: #10294d; }
.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: #fff1c2; color: #1f2430; }
.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; }
}

/* ============ 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: #4a5060; }
.notepad.docked .notepad-add:hover, .notepad.docked .notepad-add[aria-expanded="true"] { background: var(--hi-yellow); color: #1f2430; }
.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: #2657b8; }
.map-badge.unread { background: #d63a2f; }

.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: #fff9d6; }
.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: #5b6272; 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, #fbfefc);
    box-shadow: 0 0 0 2px #c9ced6, 0 0 0 3px #9aa1ad;
}
.notepad-peek i { position: absolute; top: 6px; left: 6px; width: 13px; height: 11px; border-radius: 1px; background: var(--p-note, #bff0d4); }
.notepad-peek i + i { top: 8px; left: 23px; background: #ffe98a; }
.notepad-peek b { position: absolute; left: 8px; right: 14px; bottom: 5px; height: 6px; border: 1.6px solid var(--p-ink, #1d2f28); 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, #1f9d68); }

.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: #fff; color: #1f2430; 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: rgba(31, 36, 48, .08); rotate: -8deg; color: var(--p-ink, var(--ink)); }
.head-tool.on { background: var(--hi-yellow); border-color: var(--line); color: #1f2430; }

/* 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: #1f2430; }

/* 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: #1f2430; 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: #1f2430; }
.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: #d63a2f; color: #fff; }

@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 .toggle { width: 100%; min-height: 52px; border-bottom: 2px dashed color-mix(in srgb, var(--line) 12%, transparent); line-height: 1.15; }
.adm-now .toggle small { display: block; font-size: .85rem; color: var(--ink-soft); }
.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 Pikto'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: #1f2430;
    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; }
.site-banner-x { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.site-banner-x:hover { background: rgba(31, 36, 48, .1); }
@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, #c8e2ff 0 10px, #a9c9ea 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)); }
}

/* 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, #f3efe6 0 8px, #ebe6da 8px 16px); color: #5b6272; 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, #c22f25); }
.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: #2f6fdb; }
.adm-legend .avatars, .adm-bar .avatars { background: #e0457b; }
.adm-legend .notes, .adm-bar .notes { background: #7a4cd9; }
.adm-legend .ink, .adm-bar .ink { background: #1f9e6e; }
.adm-legend .orphans, .adm-bar .orphans { background: #9aa0ad; }
.adm-legend .other, .adm-bar .other { background: repeating-linear-gradient(45deg, #c9c4b8 0 4px, #dcd7cb 4px 8px); }

/* admin: word filters */
.adm-filters { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
.adm-filters .cx-seg { margin-bottom: 6px; }
.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: #1f2430; }
.adm-verdict.ok { background: #d9f3e6; }
.adm-verdict.no { background: #ffe7e3; }
@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, #2657b8);
}
.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: #ffe45c; color: #1f2430; }
.vlog-icon.danger:hover { background: #f6b8b0; color: #1f2430; }
.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, #2657b8); 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, #2657b8); 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: #1f2430; background: #fff9d6; cursor: pointer;
    border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; rotate: -.6deg;
}
.vlog-morebtn:hover:not(:disabled) { background: #ffe45c; }
.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: #cf9a4c; }
.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: #1f2430; }
.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, #1f2430); 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: #5b6272; }
.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; }
.dn-thanks { display: flex; align-items: center; gap: 18px; padding: 12px 22px; min-height: 90px; box-sizing: border-box; }
.dn-thanks .dn-h2 { font-size: 1.25rem; flex-shrink: 0; }
.dn-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dn-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--note); color: var(--ink);
    border: 2px solid var(--line); border-radius: 4px 12px 4px 12px; font-size: .88rem; rotate: 1deg;
}
.dn-tag-you { background: transparent; border-style: dashed; color: var(--ink-faint); }

/* 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); }
    .dn-thanks { flex-wrap: wrap; }
}
@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: rgba(22, 26, 36, .62); 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 rgba(0, 0, 0, .25)); }
.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: #c9ced6; color: #1f2430; 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: #fff1a1; color: #2a2a1f; border-radius: 2px 2px 18px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 3px 8px 12px -6px rgba(0, 0, 0, .35); rotate: -.6deg; }
.ask-why::before { content: ""; position: absolute; top: -10px; left: 36px; width: 84px; height: 22px; background: rgba(255, 210, 63, .75); border: 1.5px solid rgba(31, 36, 48, .25); rotate: -4deg; }
.ask-from { font-size: .875rem; color: #6b5a00; }
.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: #6b5a00; }
.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: #1b7a52; }
.ask-check.no { color: #b3261e; }
.ask-check.idle { color: var(--ink-soft); }
:root[data-theme="dark"] .ask-check.ok { color: var(--m-green); }
:root[data-theme="dark"] .ask-check.no { color: var(--m-red); }
.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 #9aa1ad; background: #d8d2c4; }
.ask-gone { position: absolute; left: -10px; right: -10px; top: 30px; padding: 1px 0; text-align: center; background: #1f2430; color: #fffef8; 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: #fff; 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-avpick .cx-seg { max-width: 240px; }
.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 #9aa1ad; 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: #d9f3e6; color: #12382a; 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: #c0392b; }
.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 rgba(31, 36, 48, .18), 0 -18px 40px rgba(20, 24, 32, .25);
        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-avpick .cx-seg { max-width: none; }
    .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: rgba(22, 26, 36, .5); }
.aa-say { position: absolute; left: -24px; bottom: calc(100% + 8px); padding: 6px 14px; white-space: nowrap; background: #fff1a1; color: #2a2a1f; font-size: 1.2rem; border-radius: 2px 2px 12px 2px / 2px 2px 8px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 2px 6px 10px -5px rgba(0, 0, 0, .35); 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: #fff1a1; color: #2a2a1f; border-radius: 2px 2px 18px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 3px 8px 12px -6px rgba(0, 0, 0, .35); rotate: -.5deg; }
.aa-me::before { content: ""; position: absolute; top: -10px; left: 36px; width: 84px; height: 22px; background: rgba(255, 210, 63, .75); border: 1.5px solid rgba(31, 36, 48, .25); 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: #6b5a00; }
.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: rgba(22, 26, 36, .45); }
.mb-rio { position: absolute; z-index: 2; left: 70px; top: 236px; pointer-events: none; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25)); }
.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: #fff1a1; color: #2a2a1f; font-size: 1.05rem; border-radius: 2px 2px 12px 2px / 2px 2px 8px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 2px 6px 10px -5px rgba(0, 0, 0, .35); 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: #fff1a1; color: #2a2a1f; border-radius: 2px 2px 18px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 3px 8px 12px -6px rgba(0, 0, 0, .35); rotate: -.5deg; }
.mb-steps::before { content: ""; position: absolute; top: -10px; left: 36px; width: 84px; height: 22px; background: rgba(255, 210, 63, .75); border: 1.5px solid rgba(31, 36, 48, .25); rotate: -4deg; }
.mb-from { font-size: .875rem; color: #6b5a00; 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 #2a2a1f; border-radius: 50% 45% 55% 48%; font-family: var(--font-marker); font-weight: 700; font-size: 1.2rem; background: #fffef8; }
/* 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: #fff; border: 2px solid #1f2430; border-radius: 18px; font-size: .95rem; color: #4a5060; vertical-align: middle; }
.mb-hit { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: #1f2430; }
.mb-hit::after { content: ""; position: absolute; inset: -7px -8px -6px -7px; border: 2.5px solid #d63a2f; border-radius: 52% 46% 55% 44% / 48% 55% 44% 52%; rotate: -8deg; }
.mb-menu { color: #1f2430; }
.mb-menu b { font-weight: 400; text-decoration: underline; text-decoration-color: #d63a2f; 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: #fffef8; border: 1.5px solid rgba(42, 42, 31, .35); font-size: 1rem; vertical-align: middle; }
.mb-knob { width: 26px; height: 14px; border-radius: 8px; background: #1f9d68; position: relative; }
.mb-knob::after { content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.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: #1f9d68; box-shadow: 0 0 0 0 rgba(31, 157, 104, .5); animation: mb-ping 1.6s ease-out infinite; }
@keyframes mb-ping { to { box-shadow: 0 0 0 10px rgba(31, 157, 104, 0); } }
.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: #fff; border: 2px solid #1f2430; border-radius: 14px 10px 16px 12px; box-shadow: 3px 4px 0 rgba(31, 36, 48, .18); rotate: -.4deg; font-size: 1rem; color: #1f2430; }
.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 #9aa1ad; border-radius: 8px; color: #3f4654; 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 #1f2430; 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 #9aa1ad; border-radius: 8px; background: #f3f1ec; color: #3f4654; }
.mb-b.go { background: #2f6fdb; border-color: #2f6fdb; color: #fff; }
.mb-circ { position: relative; }
.mb-circ::after { content: ""; position: absolute; inset: -7px -9px -7px -8px; border: 2.5px solid #d63a2f; border-radius: 52% 46% 55% 44% / 48% 55% 44% 52%; rotate: -4deg; pointer-events: none; }
.mb-note { margin-top: 10px; font-size: .95rem; color: #5b6272; }
.mb-note b { font-weight: 400; color: #1f2430; background: #fff1a1; 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 rgba(31, 36, 48, .18), 0 -18px 40px rgba(20, 24, 32, .25);
        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: #fff; overflow: hidden; }
.up-meter i { display: block; height: 100%; border-right: 2px solid #1f2430; }
.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 #a34a00; border-radius: 10px 14px 9px 12px; color: #7a3600; 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: #1f2430; 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: #5b6272; }
.up-how {
    margin-top: auto; padding: 12px 14px; background: #fff1a1; color: #2a2a1f; font-size: 14px; line-height: 1.3; rotate: -.6deg;
    border-radius: 2px 2px 16px 2px / 2px 2px 10px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 3px 6px 10px -6px rgba(0, 0, 0, .35);
}
.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-seg { display: flex; margin-left: auto; padding: 3px; border: 2.5px solid var(--line); border-radius: 14px 18px 12px 16px; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.up-seg button { min-height: 32px; border: none; background: none; border-radius: 10px; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; padding: 0 10px; white-space: nowrap; }
.up-seg button.on { background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--line); }
.up-bar .btn .icon { margin-right: 4px; }
.up-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 18px; background: #fff9d6; color: #1f2430; border-bottom: 2px dashed rgba(31, 36, 48, .2); font-size: 15px; }
.up-bulk b { font-weight: 400; }
.up-bulk span { color: #5b6272; font-size: 13px; }
.up-err { padding: 8px 18px; color: #b0261c; }
.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 #1f2430; border-radius: 6px 10px 8px 12px; background: #fff; color: #1f2430; box-shadow: 3px 4px 0 rgba(31, 36, 48, .18); overflow: hidden; }
.up-card.picked { box-shadow: 0 0 0 3px #2657b8, 3px 4px 0 rgba(31, 36, 48, .18); }
.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 #1f2430; font-size: 13px; color: #5b6272; 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, rgba(154, 160, 173, .09) 10px 20px); }
.t-photo { background: repeating-linear-gradient(135deg, #eef3ee 0 10px, #e2ebe4 10px 20px); }
.t-video { background: #1f2430; color: #c9ced6; }
.t-file { background: #fff9d6; }
.t-audio { background: #f1ecff; color: #7a4cd9; }
.up-play { width: 44px; height: 44px; display: grid; place-items: center; border: 2.5px solid #fffef8; border-radius: 50%; color: #fffef8; }
.up-fi { width: 46px; height: 56px; box-sizing: border-box; border: 2.5px solid #1f2430; border-radius: 3px 14px 3px 3px; background: #fffef8; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; font-size: 12px; font-weight: 700; color: #1f2430; }
.up-wave { display: flex; align-items: center; gap: 4px; height: 56px; }
.up-wave i { width: 6px; border-radius: 3px; background: #7a4cd9; }
.up-pick { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 2.5px solid #1f2430; border-radius: 7px 5px 8px 6px; background: #fffef8; color: transparent; cursor: pointer; padding: 0; }
.up-pick.on { background: #2657b8; color: #fff; }
.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: #5b6272; }
.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: #5b6272; line-height: 1.2; }
.up-card.gone .st { color: var(--ink-soft); }
.st.soon { color: #a34a00; }
.st.kept { color: #12734a; }
.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 #1f2430; border-color: #1f2430; color: #1f2430; background: #fffef8; }
.up-acts .btn.ghost { background: transparent; box-shadow: none; }
.up-acts .up-red { color: #b0261c; border-color: #b0261c; }
.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 #c22f25; border-radius: 10px 8px 11px 7px; font-size: 13px; color: #8e1f17; 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: #1f2430; 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: #a34a00; }
.up-back-note.none { color: var(--ink-soft); }
.up-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); scrollbar-width: none; }
.up-chip { flex-shrink: 0; min-height: 36px; padding: 0 12px; font: inherit; font-size: 15px; border: 2px solid var(--line); border-radius: 14px 10px 14px 9px; background: var(--paper); color: var(--ink); cursor: pointer; white-space: nowrap; }
.up-chip.on { background: var(--hi-yellow); color: #1f2430; }
.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, #2657b8 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 #1f2430; 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 #1f2430; border-radius: 6px 4px 7px 5px; background: #fffef8; color: transparent; }
.up-tick.on { background: #2657b8; color: #fff; }
.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: #1f2430; color: #fffef8; 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 #fffef8; border-radius: 12px 9px 12px 8px; background: transparent; color: #fffef8; font: inherit; font-size: 15px; cursor: pointer; }
.up-pbulk button.red { background: #c22f25; border-color: #c22f25; }
.up-scrim { position: fixed; inset: 0; z-index: 160; border: none; padding: 0; background: rgba(20, 24, 32, .35); 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 rgba(31, 36, 48, .18); }
.up-grab { width: 48px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #c9ced6; }
.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: #b0261c; }
.up-warn { margin: 10px 0 4px; padding: 10px 12px; border: 2px dashed #c22f25; border-radius: 12px 9px 12px 10px; color: #8e1f17; font-size: 15px; line-height: 1.3; }
.up-sheetbtns { display: flex; gap: 8px; margin-top: 8px; }
:root[data-theme="dark"] .up-warn, :root[data-theme="dark"] .up-opt.red { color: #ff8f86; }

/* 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: #fff; overflow: hidden; }
.dock-bar i { display: block; height: 100%; background: #1f9d68; }
.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-head .cx-seg { margin-left: auto; }
.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: #fff; 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-card .cx-seg { flex-wrap: wrap; }
.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: #fde2de; color: #5a1410; border: 1.5px solid #1f2430; white-space: nowrap; }
.sp-extra { font-size: 12px; padding: 0 7px; border-radius: 8px; background: #d9f3e6; color: #12382a; border: 1.5px solid #1f2430; white-space: nowrap; }
.sp-remove { color: #c22f25; border-color: #c22f25; }
@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: rgba(20, 24, 32, .45); }
.pf-card {
    position: fixed; z-index: 401; box-sizing: border-box;
    background: #fffef8; color: #1f2430; 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 #1f2430; border-radius: 6px 8px 10px 6px / 8px 6px 10px 8px;
    box-shadow: 6px 7px 0 #1f2430, 0 18px 30px rgba(20, 24, 32, .22);
    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 #1f2430; border-bottom: none; border-radius: 18px 22px 0 0;
    box-shadow: 0 -18px 40px rgba(20, 24, 32, .25);
    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: rgba(255, 228, 92, .85); pointer-events: none; }
.pf-card.friend .pf-tape { background: rgba(255, 176, 204, .9); }
.pf-card.me .pf-tape { background: rgba(200, 226, 255, .9); }
.pf-tape.staff { left: 30%; width: 92px; background: repeating-linear-gradient(-45deg, #ffd23f 0 9px, #1f2430 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: rgba(31, 36, 48, .3); }
.pf-x { position: absolute; right: 8px; top: 8px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: none; border-radius: 50%; background: rgba(255, 254, 248, .85); color: #1f2430; cursor: pointer; }
.pf-x:hover { background: #fff; }
.pf-card.sheet .pf-x { top: 10px; right: 10px; }
.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 #fff; border-bottom-width: 18px; rotate: -2.5deg;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 3px 6px 10px -6px rgba(0, 0, 0, .35);
    color: #fff; font-family: var(--font-marker); font-weight: 700;
}
.pf-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .25), 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 #fffef8; }
.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: #8a90a0; }
.pf-sub { font-size: 14px; color: #5b6272; line-height: 1.25; overflow-wrap: anywhere; }
.pf-mood { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; color: #3d4454; }
.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: #ebe7dc; color: #1f2430; font: inherit; font-size: 13px; text-decoration: none; }
.pf-chip.board { background: var(--p-note, #ebe7dc); color: var(--p-note-ink, #1f2430); }
.pf-chip.fr { background: #ffd9e6; color: #7a1f45; }
.pf-chip.vc { background: #d9f3e6; color: #12382a; cursor: pointer; }
.pf-chip.vc:hover { background: #bff0d4; }
.pf-chip.vc.talk { cursor: default; }
.pf-chip.vc.talk:hover { background: #d9f3e6; }
/* 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 rgba(31, 36, 48, .35); border-radius: 12px 9px 12px 10px; background: #eefaf3; }
.pf-vol-l { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #12382a; }
.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: #1f9d68; }
.pf-vol-note { font-size: 12.5px; color: #5b6272; margin-top: 2px; }
.pf-vol.hushed { background: #f3f1ea; }
.pf-vol.hushed .pf-vol-l { color: #5b6272; }
.pf-chip.bad { background: #ffe0dc; color: #8c1d15; }
.pf-chip.you { background: #dcebff; color: #10294d; }
.pf-chip.staff { padding: 0 9px 0 7px; border: 2px solid #1f2430; background: #ffd23f; color: #1f2430; font-weight: 700; }
.pf-staffnote { margin-top: 6px; font-size: 13px; line-height: 1.3; color: #5b6272; }
.pf-lbl { margin-top: 10px; font-family: var(--font-marker); font-weight: 700; font-size: 19px; line-height: 1; color: #5b6272; }
.pf-small { margin-top: 8px; font-size: 13px; line-height: 1.3; color: #5b6272; }
.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 #1f2430; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    background: #fffef8; color: #1f2430; box-shadow: 2px 2px 0 #1f2430;
    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: #1f2430; }
.pf-btn.primary { background: #2657b8; color: #fff; }
.pf-btn.primary:hover:not(:disabled) { color: #fff; }
.pf-btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.pf-btn.red { background: #c22f25; color: #fff; }
.pf-btn.red:hover:not(:disabled) { color: #fff; }
.pf-btn.sq { width: 40px; padding: 0; flex: none !important; }
.pf-card.sheet .pf-btn.sq { width: 44px; }
.pf-btn.sq.on { background: #ffe45c; }
.pf-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.pf-more { margin-top: 10px; padding: 6px; border: 2px solid #1f2430; border-radius: 12px 9px 12px 10px; background: #fff; }
.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: #1f2430; 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: rgba(31, 36, 48, .06); color: #1f2430; }
.pf-row.red, .pf-row.red:hover { color: #b0281f; }
.pf-row small { margin-left: auto; font-size: 13px; color: #5b6272; }
.pf-sep { margin: 4px 2px; border-top: 2px dashed rgba(31, 36, 48, .18); }
.pf-modlbl { display: flex; align-items: center; gap: 6px; padding: 2px 8px 0; font-size: 13px; color: #5b6272; }
.pf-ask { margin-top: 10px; padding: 10px 12px; border: 2px solid #c22f25; border-radius: 12px 9px 12px 10px; background: #fff6f4; font-size: 15px; line-height: 1.3; }
.pf-ask.calm { border-color: #1f2430; background: #fff9d6; }
.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 #1f2430; border-radius: 14px 10px 14px 12px; background: #fffef8; color: #1f2430; font: inherit; font-size: 15px; cursor: pointer; }
.pf-time:hover:not(:disabled) { background: #ffe45c; }
.pf-report { margin-top: 10px; }
.pf-err { margin: 8px 0 0; font-size: 14px; color: #b0281f; }
@media (prefers-reduced-motion: reduce) { .pf-card { animation: none; } }

/* ---------- desktop launcher (design canvas "Launcher.dc.html"): Pikto.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, rgba(255,255,255,.5) 0%, transparent 35%), #fdfdfb; border: 2.5px solid #1f2430; border-radius: 18px; cursor: default; }
.ln-win::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#1f2430 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: #5b6272; border-radius: 10px; cursor: pointer; padding: 0; }
.ln-wb:hover { background: #ebe7dc; color: #1f2430; }
.ln-wb.ln-close:hover { background: #ffd2c8; }

.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: #2f6fdb; }
.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: #4a5060; line-height: 1.3; min-height: 20px; }

.ln-bar2 { position: relative; height: 20px; margin-top: 16px; border: 2.5px solid #1f2430; border-radius: 14px 8px 12px 9px / 9px 12px 8px 14px; background: #fffef8; overflow: hidden; }
.ln-fill { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(-55deg, #2f6fdb 0 3px, #7fa6ea 3px 7px); border-right: 2.5px solid #1f2430; transition: width .3s linear; }
.ln-bar2.bad .ln-fill { background: repeating-linear-gradient(-55deg, #d0543f 0 3px, #f0a497 3px 7px); }
/* not knowing how long: a scribble sliding along */
.ln-bar2.busy .ln-fill { width: 34% !important; border-left: 2.5px solid #1f2430; 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: #5b6272; min-height: 18px; }

.ln-steps { display: flex; justify-content: center; gap: 14px; margin-top: 14px; font-size: 13px; color: #9aa1ad; }
.ln-steps span { display: inline-flex; align-items: center; gap: 4px; }
.ln-steps .on { color: #1f2430; }
.ln-steps .did { color: #1b7a52; }
.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 #1f2430; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: #fffef8; color: #1f2430; cursor: pointer; box-shadow: 3px 3px 0 #1f2430; text-decoration: none; white-space: nowrap; }
.ln-pbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1f2430; }
.ln-pbtn.primary { background: #2657b8; color: #fff; }
.ln-pbtn.danger { background: #b3391f; color: #fff; }
.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: #4a5060; text-decoration: underline; text-underline-offset: 2px; }
.ln-linky:hover { color: #1f2430; }

/* 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 #1f2430; border-radius: 4px 6px 4px 7px; display: grid; place-items: center; flex-shrink: 0; background: #fffef8; box-sizing: border-box; }
.ln-chk input:focus-visible + .ln-box { box-shadow: 0 0 0 3px #c8e2ff; }
.ln-where { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; font-size: 13px; color: #4a5060; border: 2px dashed #9aa1ad; border-radius: 12px 9px 13px 8px; text-align: left; }
.ln-where code { flex: 1; min-width: 0; font-family: inherit; font-size: 13px; color: #1f2430; 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: #fff1a1; color: #2a2a1f; 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: #4a5060; background: #fffef8; border: 2px solid #d0543f; border-radius: 12px 9px 13px 8px; }
.ln-left code { display: block; font-family: inherit; color: #1f2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-back { margin-top: 14px; font-size: 14px; color: #4a5060; }
.ln-stuck { margin-top: 10px; font-size: 13px; color: #5b6272; }
.ln-foot { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; font-size: 12px; color: #7a8190; }
.ln-foot a { color: #5b6272; }

@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: #2657b8; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.dl-page a:hover { color: #1d4fa8; }
.dl-board {
    position: relative; width: 1344px; height: 804px; zoom: var(--dz);
    color: #1f2430; font-family: var(--font-hand);
    background: linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, transparent 35%), #fdfdfb;
    border-radius: 14px; box-shadow: 0 0 0 7px #c9ced6, 0 0 0 8px #9aa1ad, 0 18px 40px rgba(20, 24, 32, .28);
}
.dl-board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(#1f2430 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: #4a5060; text-decoration: none; }
.dl-page a.dl-back:hover { color: #1f2430; }
.dl-hero { position: absolute; left: 52px; top: 80px; rotate: -3deg; }
.dl-under { display: block; margin-top: -8px; fill: none; stroke: #2657b8; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dl-tag { font-size: 30px; font-weight: 500; color: #5b6272; margin-top: 6px; rotate: 1deg; }
.dl-ann { position: absolute; font-family: var(--font-marker); font-size: 26px; color: #5b6272; 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: #1f9d68; 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 rgba(0, 0, 0, .25)); }
.dl-shot::before { content: ""; position: absolute; top: -16px; left: 50%; z-index: 6; width: 120px; height: 30px; translate: -50% 0; rotate: -3deg; background: rgba(255, 228, 92, .8); border-left: 2px dashed rgba(0, 0, 0, .12); border-right: 2px dashed rgba(0, 0, 0, .12); }

.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: #3b4150; min-height: 26px; }
.dl-seen b { font-weight: 400; background: linear-gradient(104deg, transparent .9%, #ffe45c 2.4%, #ffe45c 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: #fffef8; border: 2.5px solid #1f2430; border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px; box-shadow: 4px 5px 0 #1f2430; }
.dl-os.mine { box-shadow: 5px 6px 0 #2657b8, 0 10px 30px rgba(31, 36, 48, .14); border-color: #2657b8; 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: rgba(255, 228, 92, .9); color: #3a3310; border-left: 2px dashed rgba(0, 0, 0, .12); border-right: 2px dashed rgba(0, 0, 0, .12); }
.dl-osh { display: flex; align-items: center; gap: 10px; }
.dl-osn { margin: 0; font-size: 36px; }
.dl-need { font-size: 16px; color: #4a5060; line-height: 1.25; min-height: 40px; }
.dl-file { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #5b6272; }
.dl-file .icon { flex-shrink: 0; }
.dl-file code { font-family: inherit; font-size: inherit; background: none; padding: 0; color: #1f2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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 #1f2430; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: #fffef8; color: #1f2430; cursor: pointer; box-shadow: 3px 3px 0 #1f2430; text-decoration: none; transition: transform .08s, box-shadow .08s; }
.dl-page a.dl-btn:hover { color: #1f2430; transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 4px 5px 0 #1f2430; }
.dl-page a.dl-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1f2430; }
.dl-page .dl-btn.primary, .dl-page a.dl-btn.primary:hover { background: #2657b8; color: #fff; font-size: 21px; }
.dl-page .dl-btn.done, .dl-page a.dl-btn.done:hover { background: #d8f3e4; color: #12382a; }
.dl-page .dl-btn.off { cursor: default; border-style: dashed; box-shadow: none; color: #5b6272; font-size: 17px; }

/* after it downloads: a lined sticky */
.dl-how { position: absolute; left: 632px; top: 464px; width: 648px; box-sizing: border-box; padding: 14px 24px 16px; background: linear-gradient(transparent 50px, rgba(47, 111, 219, .35) 50px 52px, transparent 52px), #fff6c2; color: #2a2a1f; border-radius: 3px 3px 26px 3px / 3px 3px 14px 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 4px 10px 14px -6px rgba(0, 0, 0, .35); 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: #5b5a44; cursor: pointer; }
.dl-chip.on { border-color: #2a2a1f; background: #fffef8; color: #1f2430; }
.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 #2a2a1f; border-radius: 50% 45% 55% 48%; font-family: var(--font-marker); font-weight: 700; font-size: 19px; background: #fffef8; }
.dl-steps li.now .dl-n { background: #ffe45c; }
.dl-cmd { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 36px; padding: 4px 6px 4px 12px; border: 2px dashed #8a8766; border-radius: 12px 9px 13px 8px; background: rgba(255, 255, 255, .55); }
.dl-cmd code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; background: none; padding: 0; color: #1f2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.dl-copy { font: inherit; font-size: 15px; min-height: 36px; padding: 2px 12px; border: 2px solid #2a2a1f; border-radius: 14px 10px 12px 9px; background: #fffef8; color: #1f2430; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

.dl-foot { position: absolute; left: 632px; top: 752px; width: 648px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: #5b6272; }
.dl-dot { color: #9aa1ad; }

.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: 14px; width: min(100%, 440px); box-sizing: border-box;
    padding: 12px 20px 24px; color: #1f2430; 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: #fff6c2; color: #2a2a1f; border-radius: 3px 3px 22px 3px / 3px 3px 12px 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 3px 8px 12px -6px rgba(0, 0, 0, .35); 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: rgba(255, 228, 92, .8); }
.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 #1f2430; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: #fffef8; color: #1f2430; cursor: pointer; box-shadow: 3px 3px 0 #1f2430; text-decoration: none; }
.dl-page .dl-pbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1f2430; }
.dl-page .dl-pbtn.primary, .dl-page a.dl-pbtn.primary:hover { background: #2657b8; color: #fff; }
.dl-prow-os { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fffef8; border: 2.5px solid #1f2430; border-radius: 15px 225px 15px 185px / 185px 15px 225px 15px; box-shadow: 3px 4px 0 #1f2430; }
.dl-prow-os + .dl-prow-os { rotate: .4deg; }
.dl-prow-os.mine { border-color: #2657b8; box-shadow: 3px 4px 0 #2657b8; }
.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: #4a5060; 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 #1f2430; border-radius: 50% 45% 55% 48%; background: #fffef8; color: #1f2430; padding: 0; }
.dl-page a.dl-pget:hover { color: #1f2430; }
.dl-page a.dl-pget:active { transform: translate(1px, 1px); }
.dl-page .dl-pget.done { background: #d8f3e4; color: #12382a; }
.dl-page .dl-pget.off { border-style: dashed; color: #9aa1ad; }
.dl-pmeta { font-size: 14px; color: #5b6272; 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: #5b6272; border: 2px dashed #9aa1ad; border-radius: 18px 12px 16px 12px; }
.dl-pchip b { font-weight: 400; font-size: 12px; padding: 0 7px; border-radius: 8px; background: #ffe45c; color: #3a3310; 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: #fff; border: 2px solid #1f2430; border-radius: 20px 20px 4px 20px; font-size: 15px; line-height: 1.25; box-shadow: 2px 3px 0 #1f2430; }

@media (max-width: 1099.98px) {
    .dl-page { place-items: start center; padding: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, transparent 35%), #fdfdfb; }
    .dl-page::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(#1f2430 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). Not on phone-sized screens, and never
   inside the desktop app. */
.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: #fffef8; color: #1f2430; border: 2.5px solid #1f2430; border-bottom: none;
    border-radius: 18px 22px 0 0 / 14px 18px 0 0; box-shadow: 0 -6px 22px rgba(31, 36, 48, .16);
    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: #5b6272; }
.auth-slip .btn { min-height: 44px; font-size: 18px; padding: 4px 16px; }
.auth-slip-x { width: 44px; height: 44px; display: grid; place-items: center; border: none; background: none; color: #5b6272; border-radius: 50%; cursor: pointer; padding: 0; }
.auth-slip-x:hover { background: rgba(31, 36, 48, .08); color: #1f2430; }
.auth-slip-later { font: inherit; font-size: 15px; background: none; border: none; color: #4a5060; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: 0 4px; }
@media (max-width: 759.98px) { .auth-slip { display: none; } }
@media (prefers-reduced-motion: reduce) { .auth-slip { animation: none; } }