/* css/whiteboard.css
 * 44 Shots — Whiteboard module — LOCKED 2026-05-11
 *
 * Layout mirrors Rink (panel-rink) screen for app continuity.
 * - SVG-based surface (same rink graphic as Rink screen)
 * - Right rail (100px): marker tray, pen, 3 colors, slider, eraser, clear
 * - Left rail (56px): reserved for animation (empty)
 *
 * Rink-pattern duplicate from inline rules at index.html lines 451-657.
 * Tuesday 2026-05-12 audit will consolidate this + Rink inline rules.
 *
 * Strip notice: all prior canvas-based toolbar styles (wb-topbar,
 * wb-marker-bar, wb-tool-bar, wb-action-bar, wb-anim-bar, wb-modal,
 * wb-pen-only, wb-stage, wb-btn) are intentionally removed. Recon dead.
 */

/* === Base (portrait default) === */

#wbLeftRail,
#wbRightRail { display: none; }

.wb-rink-wrap {
  aspect-ratio: 200 / 85;
  width: 100%;
  max-width: min(100%, calc(78vh * 200 / 85));
  margin: 0 auto;
  max-height: 100%;
  position: relative;
  background: transparent;
  overflow: visible;
  touch-action: none;
}

svg.wb-rink {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Marker (red/blue dots dragged onto rink) */
.wb-marker {
  cursor: grab;
  touch-action: none;
}
.wb-marker.dragging { cursor: grabbing; }

/* Strokes — drawn polylines */
.wb-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
}

/* Coach gate (carried over, unchanged behavior) */
#whiteboard-root .wb-coach-gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
}
#whiteboard-root .wb-coach-gate h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--stat);
  margin: 0 0 10px;
}
#whiteboard-root .wb-coach-gate p {
  margin: 0;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.6;
  max-width: 320px;
}

/* === Landscape (iPad / iPhone) === */
@media (orientation: landscape) and (max-height: 1024px) {

  /* LEFT RAIL — body.on-whiteboard scoped, fixed position.
     Empty tonight; reserved for animation tools post-audit. */
  body.on-whiteboard #wbLeftRail {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    position: fixed !important;
    left: 0 !important;
    top: 88px !important;
    bottom: calc(40px + env(safe-area-inset-bottom));
    width: 56px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 60;
    box-sizing: border-box;
  }

  /* PANEL — flex bottom-anchor, mirrors #panel-rink.active */
  #panel-whiteboard.active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 0 8px 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  /* CENTER SURFACE — aspect-ratio 200/85 (regulation NHL, diverges
     from Rink's 100/60 — locked 2026-05-11). */
  #panel-whiteboard.active .wb-rink-wrap {
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 200 / 85 !important;
    margin: 0 !important;
    flex: 0 1 auto !important;
  }

  /* RIGHT RAIL — 100px, position fixed, mirrors lastShotBar geometry */
  #panel-whiteboard.active #wbRightRail {
    display: flex !important;
    position: fixed !important;
    top: 88px !important;
    right: 0 !important;
    width: 100px !important;
    bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 6px !important;
    background: var(--surface) !important;
    border: 0 !important;
    border-left: 1px solid var(--border) !important;
    box-sizing: border-box;
    z-index: 60;
  }

  /* Marker tray — red + blue drag sources */
  #wbRightRail .wb-tray {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
  }
  #wbRightRail .wb-tray-dot {
    width: 32px;
    height: 32px;
    /* Override body.input-mode-pen button { min-width:60px; min-height:60px }
       in index.html — pen-mode tap-target inflation would push tray dots
       past the 100 px rail width. Keep dots at declared compact size. */
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: 2px solid var(--text);
    cursor: grab;
    touch-action: none;
    box-sizing: border-box;
    transition: transform .12s ease;
  }
  #wbRightRail .wb-tray-dot:active { cursor: grabbing; transform: scale(.92); }
  #wbRightRail .wb-tray-dot.red  { background: #c8262b; }
  #wbRightRail .wb-tray-dot.blue { background: #1f5fc4; }

  /* Section dividers */
  #wbRightRail .wb-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 6px;
    flex: 0 0 1px;
  }

  /* Tool buttons — pen, eraser, clear */
  #wbRightRail .wb-tool {
    height: 44px;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg-2, var(--surface));
    color: var(--text);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-transform: uppercase;
  }
  #wbRightRail .wb-tool.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }
  #wbRightRail .wb-tool.danger {
    border-color: var(--destructive, #c8262b);
    color: var(--destructive, #c8262b);
  }

  /* Color swatches — black / blue / red */
  #wbRightRail .wb-colors {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    width: 100%;
    box-sizing: border-box;
  }
  #wbRightRail .wb-swatch {
    width: 22px;
    height: 22px;
    /* Override body.input-mode-pen button { min-width:60px; min-height:60px }
       in index.html — pen-mode tap-target inflation would push 3 swatches
       past the 100 px rail width (proven cause of d817e9b regression). */
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  #wbRightRail .wb-swatch.active {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  }
  #wbRightRail .wb-swatch[data-color="black"] { background: #000000; }
  #wbRightRail .wb-swatch[data-color="blue"]  { background: #1f5fc4; }
  #wbRightRail .wb-swatch[data-color="red"]   { background: #c8262b; }

  /* Line size slider */
  #wbRightRail .wb-slider-wrap {
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }
  #wbRightRail .wb-slider-label {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  #wbRightRail .wb-slider {
    width: 100%;
    margin: 0;
    accent-color: var(--accent);
  }

  /* === iPhone-LS sub-rule (mirror Rink) === */
  @media (max-height: 500px) {
    body.on-whiteboard #wbLeftRail {
      top: 56px !important;
      gap: 10px;
      padding: 8px 0;
    }
    #panel-whiteboard.active #wbRightRail {
      top: 56px !important;
      gap: 4px !important;
      padding: 6px 4px !important;
    }
    #wbRightRail .wb-tray-dot { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }
    #wbRightRail .wb-tool { height: 32px; font-size: 9px; }
    #wbRightRail .wb-swatch { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
    #wbRightRail .wb-slider-label { font-size: 8px; }
  }
}