@layer views {
  /* ── whiteboard dock (views/parts/board.js): a board beside the question in a study session.
     Narrow screens: a bottom sheet with a grab handle, the page still scrolling above it. Wide
     screens (and short landscape phones): a panel down the right side, under the session's top bar.
     While it's open the session makes room with these two: --board-w is the width the board takes
     from the right, --board-h the height it takes from the bottom. Each is 0 when the board docks
     the other way, so one rule covers both layouts, e.g.
       .ss.with-board .ss-stage { padding-bottom: calc(80px + var(--board-h)); }
     --board-sheet-h is set on :root by dragging the handle. ── */
  :root {
    --board-w: 0px;
    --board-h: min(var(--board-sheet-h, 55svh), 88svh);
  }
  @media (min-width: 1000px), (orientation: landscape) and (max-height: 520px) {
    :root { --board-w: min(46vw, 640px); --board-h: 0px; }
  }

  .board-dock {
    --board-t: 240ms;
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--board-h);
    display: flex; flex-direction: column; overflow: hidden;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--bg-raise); border-top: 1px solid var(--line-2); border-radius: var(--r-card) var(--r-card) 0 0;
    translate: 0 100%; visibility: hidden;
    transition: translate var(--board-t) var(--ease-liquid), visibility 0s linear var(--board-t);
  }
  .board-dock.open {
    translate: 0 0; visibility: visible;
    transition: translate var(--board-t) var(--ease-liquid), visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .board-dock { --board-t: 0ms; }
  }

  .board-handle {
    flex: none; display: flex; justify-content: center; align-items: center;
    height: 20px; margin-bottom: -8px; cursor: ns-resize; touch-action: none;
    &::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background var(--t-fast); }
    &:hover::before { background: var(--muted); }
    &:focus-visible { outline-offset: -3px; }
  }

  .board-head {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 10px 10px 10px 16px;
  }
  .board-title { margin-right: auto; font-weight: 800; font-size: 15px; letter-spacing: -0.03em; color: var(--fg); white-space: nowrap; }
  .board-actions { display: flex; align-items: center; gap: 6px; }
  .board-clear { color: var(--muted); }
  .board-clear:hover:not(:disabled) { color: var(--fg); background: var(--surface-2); }

  .board-dock .sketch-bar { padding: 0 12px 10px; }
  .board-dock .sketch-surface { border-top: 1px solid var(--line); }

  @media (max-width: 560px) {
    .board-long { display: none; }
    .board-head { padding-left: 14px; }
  }

  /* wide: a panel down the right side, below the session's top bar (--board-top, measured by board.js) */
  @media (min-width: 1000px), (orientation: landscape) and (max-height: 520px) {
    .board-dock {
      left: auto; top: var(--board-top, calc(57px + env(safe-area-inset-top, 0px))); width: var(--board-w); height: auto;
      padding-left: 0;
      border-top: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow-float);
      translate: 100% 0;
    }
    .board-handle { display: none; }
  }

  /* the tutor's button and a quick note step aside for an open board */
  body:has(.board-dock.open) .tutor-fab { bottom: calc(var(--board-h) + 18px + env(safe-area-inset-bottom, 0px)); }
  @media (min-width: 1000px), (orientation: landscape) and (max-height: 520px) {
    body:has(.board-dock.open) :is(.tutor-fab, .quicknote) { right: calc(var(--board-w) + 18px); }
  }
}