/* ============================================================================
   KIBO — WHITEBOARD (KBW-0122)
   A surface of pinned cards placed by hand, that pans and zooms. The layout rule that shapes
   everything here: card positions are BOARD UNITS, applied by ONE transform on .bcanvas-world.
   A card's own `left`/`top` are therefore in that unscaled space and never have to know the zoom —
   which is what makes the arrangement a rigid body, identical in shape on every screen.
   ============================================================================ */

.bcanvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;                 /* the world is moved by transform, never scrolled */
    background: var(--paper);
    /* A faint grid gives the pan something to move against — without it, dragging empty space looks
       like nothing is happening. It does not scale with the zoom on purpose: it is a texture, not a
       measure, and a grid that grew would read as content. */
    background-image:
        radial-gradient(circle, var(--line) 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: grab;
    touch-action: none;               /* we own the gesture; let the browser not pan the page */
    /* The -webkit- prefix is not legacy noise here: Safari (desktop and iOS) still needs it, and
       without it a drag across the board selects the cards' text instead of moving them. */
    -webkit-user-select: none;
    user-select: none;
}
.bcanvas.panning { cursor: grabbing; }
/* While a card is being dragged the surface must not also show a grab cursor. */
.bcanvas.dragging { cursor: default; }

.bcanvas-world {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;              /* a pure origin: the cards are absolutely placed around it */
    transform-origin: 0 0;
}

/* ── Card ────────────────────────────────────────────────────────────────────
   Fixed height is deliberate: cards on a board are scanned by shape and position, and a column of
   ragged heights makes an arrangement harder to read than the extra title line is worth. Overflow
   is clipped with a fade rather than an ellipsis so it stays obvious there is more to open. */
.bcard {
    position: absolute;
    box-sizing: border-box;
    height: 132px;
    padding: .6rem .7rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    cursor: grab;
    overflow: hidden;
}
.bcard:hover { border-color: var(--ink-soft); }
.bcard.moving {
    cursor: grabbing;
    /* Lifted, not merely highlighted: the shadow is the only cue that survives being over a card of
       any of the ten colours. */
    box-shadow: 0 10px 26px rgba(42, 47, 66, .22);
    z-index: 5;
}
.bcard.locked { opacity: .72; }

/* The selected card. It was invisible before: single click changes the dock, and nothing on the board
   said which card the dock was showing.
   It keeps its size and its stacking on purpose. An earlier version grew it (to fit a colour strip
   inside) and lifted it with z-index — which meant a selected card covered the ones around it, and
   two cards at the same spot collapsed into one clickable card. The outline says everything that
   needs saying without moving anything. */
.bcard.selected {
    outline: 2px solid var(--human);
    outline-offset: 1px;
}

.bcard-title {
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.3;
    color: var(--ink);
    /* Three lines, then stop. Not one line with an ellipsis: on a board the title IS the card, and a
       truncated first line often cuts exactly the words that tell two cards apart. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Optional on the whiteboard (TaskCard.ShowDescription): two lines, because a post-it that says only
   a title is often not enough to remember why it is there. The card grows to fit rather than clipping
   it — the fixed height is about scanning a grid, not about hiding content. */
.bcard-desc {
    font-size: .78rem;
    line-height: 1.35;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bcard[class*="bcard-c"] .bcard-desc { color: var(--pin-ink); opacity: .78; }
.bcard:has(.bcard-desc) { height: auto; min-height: 132px; }

.bcard-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}

.bcard-kebab { position: absolute; top: .3rem; right: .3rem; }

/* ── The ten colours ─────────────────────────────────────────────────────────
   Class per number, value from the token. Both halves of the theme are handled by the token itself
   (_tokens.css), so there is exactly one place to retune the palette and nothing here changes. */
.bcard[class*="bcard-c"] {
    color: var(--pin-ink);
    border-color: var(--pin-line);
}
.bcard[class*="bcard-c"] .bcard-title { color: var(--pin-ink); }
.bcard[class*="bcard-c"] .k-id-chip {
    background: rgba(255, 255, 255, .34);
    color: inherit;
    border-color: transparent;
}

.bcard-c1  { background: var(--pin-color-1); }
.bcard-c2  { background: var(--pin-color-2); }
.bcard-c3  { background: var(--pin-color-3); }
.bcard-c4  { background: var(--pin-color-4); }
.bcard-c5  { background: var(--pin-color-5); }
.bcard-c6  { background: var(--pin-color-6); }
.bcard-c7  { background: var(--pin-color-7); }
.bcard-c8  { background: var(--pin-color-8); }
.bcard-c9  { background: var(--pin-color-9); }
.bcard-c10 { background: var(--pin-color-10); }

/* ── Viewport controls ───────────────────────────────────────────────────────
   Over the surface, not in the page header: they act on what is under them, and on a phone the
   header has no room left. Bottom-right so they never sit under the right dock's edge tab. */
.bcanvas-tools {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 6;
}
.bcanvas-tools .k-btn { padding: .3rem .5rem; }
.bcanvas-tools svg { width: 16px; height: 16px; }
.bcanvas-fit { font-size: .78rem; white-space: nowrap; }

/* ── Left panel: the board list ──────────────────────────────────────────────
   Reuses .tasks-panel-row (same look as a project row); only what is board-specific lives here. */

/* ── The pin mark, in every other view ───────────────────────────────────────
   Read-only in rows and cards; the same look carries the button in the inspector so the two read as
   one thing. Sized to sit on a meta line without pushing it taller. */
.pin-badge {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    color: var(--ink-soft);
    flex: 0 0 auto;
}
.pin-badge svg { width: 13px; height: 13px; }
.pin-badge-n { font-size: .7rem; font-weight: 700; line-height: 1; }

/* ── The pin button (inspector head) ─────────────────────────────────────────
   Borrows .task-id-copy for its size and hover, so the id line stays one row of equal buttons. */
.pin-btn-wrap { position: relative; display: inline-flex; }
.pin-btn { display: inline-flex; align-items: center; gap: .12rem; }
.pin-btn.on { color: var(--human); }

/* Board picker — only ever shown when there is more than one board to choose between. */
.pin-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
}
.pin-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 91;
    min-width: 190px;
    max-height: 280px;
    overflow-y: auto;
    padding: .25rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.pin-menu-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .4rem .5rem;
    border: none;
    background: none;
    border-radius: 7px;
    color: var(--ink);
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
}
.pin-menu-item:hover { background: var(--we); }
/* The tick keeps its column whether or not it is filled, so the names stay on one axis and the list
   does not shift as boards are ticked and unticked. */
.pin-menu-tick {
    flex: 0 0 14px;
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--human);
}
.pin-menu-tick svg { width: 14px; height: 14px; }
.pin-menu-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Palette for the selected card ───────────────────────────────────────────
   Over the surface, next to the zoom controls, NOT inside the card: a strip inside changed the card's
   height and stacking, and a selected card then hid its neighbours. Out here it is always in the same
   place — found once instead of rediscovered per card — and it moves nothing. */
.bcanvas-palette {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    display: flex;
    flex-wrap: wrap;
    max-width: calc(100% - 12rem);
    gap: 4px;
    padding: .35rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 6;
}
.bcard-swatch {
    width: 18px; height: 18px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 4px;
    cursor: pointer;
    /* The card under it is being dragged by pointer events; the swatch must not start one. */
    touch-action: manipulation;
}
.bcard-swatch:hover { transform: scale(1.15); }
.bcard-swatch.on { outline: 2px solid var(--ink); outline-offset: 1px; }
/* "No colour": a plain card, drawn as the surface itself with a slash so it is not read as white. */
.bcard-swatch.none {
    background:
        linear-gradient(to top left,
            transparent calc(50% - 1px), var(--ink-soft) calc(50% - 1px),
            var(--ink-soft) calc(50% + 1px), transparent calc(50% + 1px)),
        var(--card);
}

/* ── Board row kebab + its menu ──────────────────────────────────────────────
   Same shape as the project rows' chevron (.tasks-panel-open), so the panel reads as one list with
   one grammar. The menu is fixed, not anchored in the row: the panel scrolls and clips, so an
   absolute menu on the last board would be cut off — the trash page positions its own for the same
   reason. */
.board-kebab svg { width: 15px; height: 15px; }

.board-menu-backdrop { position: fixed; inset: 0; z-index: 120; }
.board-menu { position: fixed; z-index: 121; min-width: 170px; }

/* Copy-the-code, on a card. Smaller than the inspector's — it sits on a meta line among badges, not
   on a header row — and it only appears on hover/focus so a board of forty cards is not forty
   buttons. Always visible on touch, where there is no hover to reveal it. */
.card-id-copy { padding: .1rem; opacity: 0; transition: opacity .12s; }
.kcard:hover .card-id-copy,
.bcard:hover .card-id-copy,
.card-id-copy:focus-visible { opacity: 1; }
@media (pointer: coarse) { .card-id-copy { opacity: 1; } }