:root {
    --paper: #faf7f0;
    --paper-2: #f4efe2;
    --paper-3: #ebe5d4;
    --ink: #1a1814;
    --ink-2: #4a463e;
    --ink-3: #75716a;
    --ink-4: #a39f95;
    --rule: #e5e1d6;
    --accent: #1f4068;
    --accent-hover: #2a5689;
    --accent-soft: #e8eef5;
    --warn: #76270a;
    --warn-bg: #fbeee8;
    --good: #2c6e3f;
    --good-bg: #e7f3ec;
    --shadow: 0 1px 0 rgba(20, 18, 14, 0.04);
    --shadow-card: 0 1px 2px rgba(20, 18, 14, 0.04), 0 0 0 1px rgba(20, 18, 14, 0.04);
    --serif: "Charter", "Iowan Old Style", "Iowan", "Apple Garamond", "Georgia", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    transition: color 0.1s, border-color 0.1s;
}
a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
a.bare { border-bottom: 0; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 0.5em;
    color: var(--ink);
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 56ch; }

/* --- Top nav --- */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.brand {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
    border: 0;
    letter-spacing: -0.01em;
}
.brand .dot { color: var(--accent); }
.nav .links { display: flex; align-items: center; gap: 18px; font-size: 0.92rem; }
.nav .links a { color: var(--ink-2); border: 0; }
.nav .links a:hover { color: var(--accent); }

/* --- Layout --- */
.shell { max-width: 720px; margin: 0 auto; padding: 48px 24px 96px; }
.shell-wide { max-width: 1080px; margin: 0 auto; padding: 32px 24px 96px; }
.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 28px; }
.row-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* --- Forms --- */
.field { display: block; margin-bottom: 18px; }
.field > label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.92rem; color: var(--ink-2); }
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=number],
.field textarea,
.field select {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 4px;
    color: var(--ink);
    transition: border-color 0.1s, box-shadow 0.1s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .hint { color: var(--ink-3); font-size: 0.86rem; margin-top: 6px; }
.radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.radio-row label { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* --- Buttons --- */
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 500;
    padding: 9px 18px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: white; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
.btn-danger { background: transparent; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.btn-danger:hover { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.btn-sm { padding: 5px 12px; font-size: 0.9rem; }

/* --- Cards --- */
.card { background: white; border: 1px solid var(--rule); border-radius: 6px; padding: 28px; box-shadow: var(--shadow-card); }
.card-tight { padding: 18px; }

.list-rule > * { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.list-rule > *:first-child { padding-top: 0; }
.list-rule > *:last-child { border-bottom: 0; padding-bottom: 0; }

.badge {
    display: inline-block;
    font-size: 0.78rem;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    color: var(--ink-2);
    letter-spacing: 0.01em;
}
.badge-good { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good); }
.badge-accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }

/* --- Flash messages --- */
.flash {
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    margin-bottom: 18px;
    background: white;
    font-size: 0.95rem;
}
.flash-error { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

/* --- Code / PIN block --- */
.code-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
}
.code-block .url-text { word-break: break-all; }

/* --- Inline copy-to-clipboard button --- */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
    transition: color 80ms, border-color 80ms, background 80ms;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.copy-btn.is-copied { color: #2a7d4f; border-color: #2a7d4f; background: color-mix(in srgb, #2a7d4f 10%, transparent); }
.copy-btn svg { flex-shrink: 0; }
.copy-btn .copy-label { font-family: var(--sans, inherit); }

/* --- Hero / landing --- */
.hero { padding: 56px 0 32px; }
.hero h1 { font-size: 3rem; max-width: 14ch; }
.hero .lede { margin-top: 12px; }
.hero .cta-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 32px;
}
.feature-grid .feature {
    border-top: 2px solid var(--ink);
    padding-top: 14px;
}
.feature-grid .feature h3 { font-family: var(--sans); font-weight: 600; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 8px; }
.feature-grid .feature p { font-size: 0.95rem; color: var(--ink-2); margin: 0; }

/* --- Featured public boards --- */
.featured-section { margin-top: 40px; }
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.featured-card {
    display: block;
    padding: 16px 18px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    transition: border-color 100ms, box-shadow 100ms, transform 100ms;
}
.featured-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(20, 18, 14, 0.08);
    transform: translateY(-1px);
}
.featured-card .t { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.featured-card .m { font-size: 0.84rem; color: var(--ink-3); }

/* --- Board view --- */
.board-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    height: 52px;
    flex-shrink: 0;
}
.board-title-block { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.board-title-block .title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.board-page {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
body.board-page .nav,
body.board-page .board-bar { flex-shrink: 0; }
body.board-page .board-canvas { flex: 1 1 auto; height: auto; }

.board-canvas {
    position: relative;
    height: calc(100vh - 53px);
    overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, rgba(20, 18, 14, 0.08) 1px, transparent 0) 0 0 / 28px 28px,
        var(--paper-2);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.board-canvas.is-panning { cursor: grabbing; }
.board-canvas.read-only { cursor: default; }

.canvas-content {
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
    width: 1px; height: 1px;
}
/* Promote to a compositor layer only during active panning. Without this scope,
   `will-change: transform` causes the browser to rasterize the layer once at the
   source size; the parent's scale() then resamples that bitmap, which shows as
   text blur on standard-DPR (HD) monitors. Idle = no will-change = browser
   re-rasterizes at the current zoom = crisp text. */
.board-canvas.is-panning .canvas-content { will-change: transform; }

/* --- Notes --- */
.note {
    position: absolute;
    width: 200px;
    /* height set inline via JS — `auto` while editing for live grow */
    padding: 14px 16px 22px;
    background: var(--note-color, #fff5b8);
    border: 1px solid color-mix(in srgb, var(--note-color, #fff5b8) 65%, var(--ink) 10%);
    box-shadow:
        0 1px 0 rgba(20, 18, 14, 0.04),
        0 6px 14px rgba(20, 18, 14, 0.08);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: grab;
    overflow: hidden;
}
/* Layer-promote only the dragged note (see .canvas-content note above). */
.note.is-dragging { cursor: grabbing; will-change: transform; box-shadow: 0 1px 0 rgba(20,18,14,0.04), 0 14px 28px rgba(20,18,14,0.16); }
.note.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.note.is-lasso-hover { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Lasso marquee — shift+drag on empty canvas to wrap notes in a new group. */
.lasso-rect {
    position: absolute;
    border: 1.5px dashed var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 4px;
    pointer-events: none;
    z-index: 4;
}
.note.is-mine::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.note[data-color=yellow] { --note-color: #fff5b8; }
.note[data-color=pink]   { --note-color: #ffd1c4; }
.note[data-color=mint]   { --note-color: #d6efd9; }
.note[data-color=sky]    { --note-color: #cfe5ff; }
.note[data-color=lilac]  { --note-color: #e3dbfa; }
.note[data-color=gray]   { --note-color: #ebe7df; }

.note-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-height: 1em;
    cursor: inherit;
}
/* Markdown render output */
.note-body .md-line { min-height: 1em; }
.note-body .md-h1 { font-size: 1.35em; font-weight: 600; line-height: 1.2; margin-bottom: 2px; }
.note-body .md-h2 { font-size: 1.15em; font-weight: 600; line-height: 1.25; margin-bottom: 2px; }
.note-body .md-h3 { font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.note-body strong { font-weight: 700; }
.note-body em { font-style: italic; }
.note-body a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); text-decoration: none; word-break: break-all; }
.note-body a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
/* When editing, content is plain text — restore monospace-ish flow so the
   markdown source is comfortable to read. */
.note-body[contenteditable="true"] .md-line,
.note-body[contenteditable="true"] .md-h1,
.note-body[contenteditable="true"] .md-h2,
.note-body[contenteditable="true"] .md-h3 { font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: 0; color: inherit; }

/* Floating format bar shown above the note being edited. */
.note-format-bar {
    position: absolute;
    z-index: 25;
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(20, 18, 14, 0.12);
    pointer-events: auto;
}
.note-format-bar button {
    background: transparent;
    border: none;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1;
    color: var(--ink-2, var(--ink));
    cursor: pointer;
    border-radius: 3px;
    min-width: 24px;
}
.note-format-bar button:hover { background: var(--paper-2); color: var(--accent); }
.note-format-bar .divider { width: 1px; background: var(--rule); margin: 2px 4px; }

/* Resize handle (bottom-right corner). Subtle until selected/hovered. */
.note .resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
}
.note .resize-handle::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid rgba(20, 18, 14, 0.18);
    opacity: 0;
    transition: opacity 0.12s;
}
.note:hover .resize-handle::after,
.note.is-selected .resize-handle::after { opacity: 1; }
.note.is-selected .resize-handle::after { border-bottom-color: var(--accent); }
.note-body[contenteditable="true"] {
    outline: none;
    cursor: text;
    user-select: text;
}
.note-body:empty::before {
    content: attr(data-placeholder);
    color: rgba(20, 18, 14, 0.35);
    font-style: italic;
}

.note-meta {
    position: absolute;
    bottom: 8px;
    left: 14px;
    right: 70px;
    font-size: 0.7rem;
    color: rgba(20, 18, 14, 0.5);
    font-family: var(--mono);
    pointer-events: none;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- Plus / star button --- */
.note-plus {
    position: absolute;
    bottom: 5px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    color: rgba(20, 18, 14, 0.4);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.note-plus:hover {
    background: white;
    color: var(--ink);
    border-color: var(--ink-3);
}
.note-plus:active { transform: scale(0.95); }
.note-plus.is-mine {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.note-plus.is-mine:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: white; }
.note-plus .star { font-size: 0.95em; }
.note-plus .count { font-variant-numeric: tabular-nums; }
.note-plus .count:empty { display: none; }

/* --- Action chip (floats next to selected note, group, or connection
   midpoint as a sibling, not a child, so the parent's overflow:hidden doesn't
   clip it) --- */
.note-actions.floating,
.group-actions.floating,
.connection-actions.floating {
    position: absolute;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: var(--shadow-card);
    white-space: nowrap;
    cursor: default;
    z-index: 1000;
    pointer-events: auto;
}
.note-actions.floating       { transform: translateX(-50%); }
.connection-actions.floating { transform: translate(-50%, -50%); }
.note-actions .swatch,
.group-actions .swatch {
    width: 22px; height: 22px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--swatch-color);
    cursor: pointer;
    padding: 0;
}
.note-actions .swatch.is-active,
.group-actions .swatch.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-actions .divider,
.group-actions .divider { width: 1px; background: var(--rule); margin: 0 2px; }
.note-actions .icon-btn,
.group-actions .icon-btn,
.connection-actions .icon-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    padding: 0 8px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}
.note-actions .icon-btn:hover,
.group-actions .icon-btn:hover,
.connection-actions .icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.note-actions .icon-btn.danger:hover,
.group-actions .icon-btn.danger:hover,
.connection-actions .icon-btn.danger:hover { background: var(--warn-bg); color: var(--warn); }

/* --- Toolbar (top-left) --- */
.toolbar {
    position: absolute;
    top: 14px; left: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    z-index: 5;
}
.toolbar .add-btn {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 6px 12px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
.toolbar .add-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.toolbar .divider { width: 1px; height: 22px; background: var(--rule); margin: 0 4px; }
.toolbar .swatch {
    width: 24px; height: 24px;
    border: 1px solid color-mix(in srgb, var(--swatch-color) 65%, var(--ink) 10%);
    border-radius: 3px;
    background: var(--swatch-color);
    cursor: pointer;
    padding: 0;
}
.toolbar .swatch.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- Zoom control (bottom-right) --- */
.zoom-control {
    position: absolute;
    bottom: 14px; right: 14px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    z-index: 5;
}
.zoom-control button {
    width: 28px; height: 28px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
}
.zoom-control button:hover { background: var(--paper-2); color: var(--ink); }
.zoom-control .pct {
    min-width: 56px;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink-2);
    padding: 0 6px;
}

/* --- Toolbar text buttons (Fit, Bring everyone) --- */
.toolbar .text-btn {
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 6px 10px;
    border: 1px solid var(--rule);
    background: white;
    color: var(--ink-2);
    border-radius: 4px;
    cursor: pointer;
}
.toolbar .text-btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
.toolbar .text-btn.is-active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent);
}

/* --- Join info display (workshop / projection mode) --- */
.join-display {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.join-display[hidden] { display: none; }
.join-display .panel {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 40px 56px 32px;
    max-width: 720px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.join-display .eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.join-display .board-title-display {
    font-size: 1.6rem;
    margin: 0 0 28px;
}
.join-display .qr-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 280px;
    margin: 0 auto 28px;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.join-display .qr-slot svg { display: block; }
.join-display .qr-fallback { font-style: italic; }
.join-display .join-url-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.join-display .join-url-row .lbl {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
}
.join-display .url {
    font-family: var(--mono);
    font-size: 1.05rem;
    color: var(--ink);
    overflow-wrap: anywhere;
    word-break: normal;
}
.join-display .copy-btn { font-size: 0.78rem; padding: 3px 7px; }
.join-display .pin-block { margin-top: 28px; }
.join-display .pin-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
}
.join-display .pin {
    font-family: var(--mono);
    font-size: 4.2rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink);
    line-height: 1.1;
    margin-top: 4px;
}
.join-display .close-btn { margin-top: 36px; }

@media (max-width: 600px) {
    .join-display .panel { padding: 28px 24px; }
    .join-display .pin { font-size: 3rem; }
    .join-display .qr-slot { width: 220px; height: 220px; }
    .join-display .board-title-display { font-size: 1.3rem; }
}

/* --- PIN-entry overlay (viewer -> editor) --- */
.pin-entry-display {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.pin-entry-display[hidden] { display: none; }
.pin-entry-display .panel {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.pin-entry-display .panel h2 { margin: 0 0 8px; font-size: 1.3rem; }

/* --- Help overlay --- */
.help-display {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.help-display[hidden] { display: none; }
.help-display .panel {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 32px 40px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.help-display .panel h2 { margin: 0 0 16px; font-size: 1.5rem; }
.help-display .panel h3 { margin: 22px 0 8px; font-size: 1.05rem; color: var(--accent); }
.help-display .panel ul { margin: 0; padding-left: 20px; line-height: 1.55; }
.help-display .panel li { margin-bottom: 6px; color: var(--ink); }
.help-display .panel kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    border-radius: 3px;
    line-height: 1.3;
}
.help-display .help-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: var(--ink-3);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
}
.help-display .help-close:hover { color: var(--ink); background: var(--paper-2); }

.toolbar .help-btn {
    margin-left: auto;
    width: 28px;
    padding: 4px 0;
    font-weight: 600;
    color: var(--ink-3);
}
.toolbar .help-btn:hover { color: var(--accent); }

.presence-counts {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    transition: opacity 200ms;
}
.presence-counts:empty { display: none; }

/* --- Groups (visual frames) --- */
.group {
    position: absolute;
    border: 1.5px solid var(--group-color, #75716a);
    background: color-mix(in srgb, var(--group-color, #75716a) 8%, transparent);
    border-radius: 8px;
    /* Clickable so users can select / drag from anywhere on the rectangle.
       Notes inside have higher z-index and absorb clicks at their pixels. */
    pointer-events: auto;
    cursor: move;
}
.group[data-color=gray]   { --group-color: #75716a; }
.group[data-color=sky]    { --group-color: #4477aa; }
.group[data-color=mint]   { --group-color: #5b9b6e; }
.group[data-color=pink]   { --group-color: #c97c6c; }
.group[data-color=lilac]  { --group-color: #7b6db5; }
.group[data-color=yellow] { --group-color: #b09445; }

.group.is-selected {
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
}

.group-header {
    position: absolute;
    top: -14px;
    left: 14px;
    padding: 3px 12px;
    background: var(--group-color, #75716a);
    color: white;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: move;
    pointer-events: auto;
    max-width: calc(100% - 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 1px 0 rgba(20, 18, 14, 0.06);
}
.group-label {
    cursor: inherit;
    outline: none;
    display: inline-block;
    min-width: 1ch;
}
.group-label[contenteditable="true"] {
    cursor: text;
    user-select: text;
    background: rgba(255, 255, 255, 0.18);
    padding: 0 2px;
    border-radius: 2px;
}
.group-label:empty::before {
    content: attr(data-placeholder);
    opacity: 0.7;
    font-style: italic;
}

.group-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
}
.group-resize-handle::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid var(--group-color, #75716a);
    opacity: 0;
    transition: opacity 0.12s;
}
.group:hover .group-resize-handle::after,
.group.is-selected .group-resize-handle::after { opacity: 0.8; }

/* --- Connection arrows between notes --- */
.connection-layer {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    overflow: visible;
    pointer-events: none;
}
.connection-layer path.connection {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
    marker-end: url(#jb-arrow);
    transition: stroke-width 0.1s, stroke 0.1s;
}
.connection-layer path.connection:hover { stroke-width: 3; }
.connection-layer path.connection.is-selected {
    stroke: var(--warn);
    stroke-width: 3;
}
.connection-layer path.connection.is-pending {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    pointer-events: none;
    opacity: 0.7;
}

/* --- Snap-to-alignment guide lines --- */
.snap-guide {
    position: absolute;
    pointer-events: none;
    z-index: 6;
    background: var(--accent);
    opacity: 0.6;
}
.snap-guide-v { width: 1px; }
.snap-guide-h { height: 1px; }

/* --- Empty hint --- */
.canvas-hint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    text-align: center;
    padding: 0 24px;
}
.canvas-hint.hidden { display: none; }

/* --- Tables (admin) --- */
/* Scroll wrapper: contain horizontal overflow on narrow viewports so action
   buttons can't extend past the card's right edge. Negative margins let the
   scroll region span edge-to-edge inside .card-tight (which has 18px padding). */
.tbl-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
table.tbl th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
table.tbl tbody tr:hover { background: var(--paper-2); }
table.tbl td.tbl-actions { text-align: right; }
table.tbl td.tbl-actions > .tbl-actions-inner { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.sort-link { color: inherit; text-decoration: none; border-bottom: none; }
.sort-link:hover { color: var(--accent); }

/* --- Admin filter bar --- */
.admin-filter-bar {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 14px 18px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.admin-filter-bar select {
    padding: 8px 10px;
    font: inherit;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 4px;
}

/* --- Mini charts (admin) --- */
.mini-chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.mini-chart { color: var(--accent); }
.mini-chart-label { font-size: 0.82rem; color: var(--ink-2, var(--ink)); margin-bottom: 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.mini-chart svg { display: block; }

/* --- Featured-toggle star button --- */
.star-btn {
    background: none;
    border: none;
    padding: 2px 6px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    border-radius: 3px;
}
.star-btn:hover { color: var(--accent); background: var(--paper-2); }
.star-btn.is-on { color: #c89a35; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.stat { background: white; padding: 16px 20px; }
.stat .num { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; color: var(--ink); }
.stat .lbl { font-size: 0.82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* --- Inline form helpers --- */
.inline-form { display: inline; }

@media (max-width: 600px) {
    .shell { padding: 32px 18px 64px; }
    h1 { font-size: 2rem; }
    .hero h1 { font-size: 2.2rem; }
    .nav { padding: 12px 16px; }
    .nav .links { gap: 12px; }
}

/* --- Page tabs (multi-page boards) --- */
.page-tabs {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 60vw;
    padding: 4px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    z-index: 5;
}
.page-tabs.is-empty { display: none; }
.page-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.88rem;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.page-tab:hover { background: var(--paper-2); color: var(--ink); }
.page-tab.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.page-tab-label {
    outline: none;
    cursor: pointer;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-tab-label[contenteditable="true"] {
    cursor: text;
    background: white;
    padding: 0 4px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--accent) inset;
    overflow: visible;
}
.page-tab-close {
    border: none;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0 4px;
    font-size: 1rem;
    line-height: 1;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.12s;
}
.page-tab:hover .page-tab-close,
.page-tab.is-active .page-tab-close { opacity: 1; }
.page-tab-close:hover { background: var(--warn-bg); color: var(--warn); }
.page-tab-add {
    border: 1px dashed var(--rule);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.95rem;
    line-height: 1;
    margin-left: 4px;
}
.page-tab-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 600px) {
    .page-tabs { max-width: calc(100vw - 28px); }
}

/* --- Editors-online panel (owner-only, toggled from toolbar) --- */
.editors-panel {
    position: fixed;
    top: 70px;
    right: 14px;
    width: 280px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    z-index: 90;
    overflow: hidden;
}
.editors-panel[hidden] { display: none; }
.editors-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
}
.editors-panel header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}
.editors-close {
    border: none;
    background: transparent;
    color: var(--ink-3);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}
.editors-close:hover { background: var(--paper-2); color: var(--ink); }
.editors-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 0;
}
.editor-row {
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
}
.editor-row:last-child { border-bottom: none; }
.editor-row .name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.editor-row .name { font-weight: 500; color: var(--ink); }
.editor-row .self-tag {
    font-size: 0.7rem;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.editor-row .role-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--paper-2);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.editor-row .role-badge.role-primary       { background: var(--accent); color: white; }
.editor-row .role-badge.role-co-facilitator { background: var(--accent-soft); color: var(--accent); }
.editor-row .role-badge.role-admin         { background: #5b9b6e; color: white; }
.editor-row .age {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.editors-empty {
    padding: 18px 16px;
    color: var(--ink-3);
    font-size: 0.9rem;
    font-style: italic;
}
.editors-panel footer.hint {
    padding: 10px 16px;
    border-top: 1px solid var(--rule);
    font-size: 0.78rem;
    color: var(--ink-3);
    background: var(--paper-2);
}
.editors-panel footer.hint a { color: var(--accent); }
@media (max-width: 600px) {
    .editors-panel { right: 8px; left: 8px; width: auto; top: 60px; }
}

/* --- Touch / coarse pointer overrides ---
   Belt-and-braces touch-action: none on the inner interactive surfaces so the
   browser never preempts a pinch with native panning, and bigger hit targets
   on coarse pointers (touch / stylus) per platform HIGs (~44px). */
.note, .group, .group-header { touch-action: none; }

@media (pointer: coarse) {
    /* Chip buttons: bump from 22px → 36px so they're tappable on touch. */
    .note-actions .icon-btn,
    .group-actions .icon-btn,
    .connection-actions .icon-btn {
        height: 36px;
        padding: 0 12px;
        font-size: 0.95rem;
    }
    .note-actions .swatch,
    .group-actions .swatch {
        width: 32px;
        height: 32px;
        border-radius: 5px;
    }
    .note-actions.floating,
    .group-actions.floating,
    .connection-actions.floating {
        gap: 6px;
        padding: 6px;
    }
    /* Resize affordance — easier to grab on a touchscreen. */
    .note .resize-handle,
    .group-resize-handle { width: 28px; height: 28px; }
    .note .resize-handle::after,
    .group-resize-handle::after {
        border-left-width: 12px;
        border-bottom-width: 12px;
    }
    /* Note plus-vote button. */
    .note-plus { min-height: 32px; padding: 4px 10px; }
    /* Toolbar / zoom-control buttons fall back to their existing rules but
       gain breathing room. */
    .toolbar button, .zoom-control button { min-height: 36px; }
    /* Format bar above the note being edited. */
    .note-format-bar button { min-width: 36px; min-height: 36px; }
}