/* Compact board chrome (phones, small tablets, landscape phones): slim topbar with an overflow menu, a bottom dock plus an
   "Add card" drawer, the inspector as a bottom sheet, left panels as full screen sheets. Loaded after mobile.css. */
@media (max-width: 820px), (max-height: 520px) and (pointer: coarse) {
  .app { --topbar-h: calc(52px + env(safe-area-inset-top, 0px)); --dock-bar-h: 62px; --dock-w: 0px; --panel-left: 0px; --panel-left-dice: 0px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr) auto; }

  /* Topbar: back, name, sync dot, undo, redo, more. Everything else lives in the overflow menu. */
  .topbar { grid-column: 1; grid-row: 1; gap: 4px; padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)); }
  .topbar:has(.topbar-menu:not([hidden])) { z-index: 95; }
  .topbar .brand-mark, .topbar .spacer, .topbar > [data-do="fit"], .topbar .zoom-pill, .topbar > [data-do="tidy"], .topbar .theme-btn, .topbar > [data-do="export"], .save-state span { display: none; }
  .back-pill { width: 44px; padding: 0; justify-content: center; flex: none; }
  .back-pill span { display: none; }
  .board-title { flex: 1 1 auto; min-width: 0; max-width: none; height: 40px; }
  .save-state { flex: none; padding: 0 6px; }
  .save-state i { width: 9px; height: 9px; }
  .topbar .btn-icon { flex: none; }
  .topbar-more { display: inline-flex; }
  .topbar-menu { display: flex; flex-direction: column; position: fixed; right: max(8px, env(safe-area-inset-right)); top: calc(var(--topbar-h) + 4px); z-index: 95; min-width: 240px; padding: 6px; border-radius: var(--radius-l); }
  .topbar-menu[hidden], .add-sheet[hidden] { display: none; }
  .menu-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-m); text-align: left; font-size: 15px; font-weight: 600; color: var(--ink-0); }
  .menu-item svg { width: 18px; height: 18px; flex: none; color: var(--brand-2); }
  .menu-item:active { background: var(--glass-strong); }

  .canvas { grid-column: 1; grid-row: 2; }

  /* Bottom dock: Add, Word bank, Codex, Random tables, Dice tray, with small labels */
  .dock { grid-column: 1; grid-row: 3; position: relative; z-index: 30; flex-direction: row; justify-content: space-around; align-items: stretch; gap: 0; overflow: visible;
    height: calc(var(--dock-bar-h) + env(safe-area-inset-bottom, 0px)); padding: 4px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left));
    border-right: 0; border-top: 1px solid var(--glass-border-hi); }
  .dock .dock-btn[data-kind="card"], .dock .dock-sep, .dock .dock-label { display: none; }
  .dock .dock-btn { flex: 1 1 0; width: auto; height: auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--radius-m); }
  .dock .dock-btn svg { width: 22px; height: 22px; }
  .dock .dock-btn[data-tip]::after { content: attr(data-tip); display: block; position: static; transform: none; opacity: 1; padding: 0; border: 0; background: none; font-size: 10px; font-weight: 600; line-height: 1;
    color: inherit; white-space: nowrap; pointer-events: none; transition: none; }
  .dock .dock-btn:hover { transform: none; }
  .dock-add { display: flex; }

  .add-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: absolute; z-index: 58; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
    bottom: calc(var(--dock-bar-h) + env(safe-area-inset-bottom, 0px) + 8px); padding: 10px; border-radius: var(--radius-l); }
  .add-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px; border-radius: var(--radius-m);
    background: var(--glass); border: 1px solid var(--glass-border); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--ink-0); }
  .add-item svg { width: 22px; height: 22px; color: var(--brand-2); }
  .add-item:active { background: var(--glass-strong); border-color: var(--brand); }

  /* Inspector: peek bar while a card or wire is selected, full bottom sheet when expanded or for board settings */
  .inspector, .inspector.editing { left: 0; right: 0; top: auto; bottom: var(--kb, 0px); width: auto; z-index: 80; max-height: min(85dvh, calc(var(--vvh, 100dvh) - 12px));
    padding: 0 max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left)); border-radius: var(--radius-l) var(--radius-l) 0 0; border-bottom-width: 0; transform: translateY(112%); }
  .inspector.open { transform: none; }
  .inspector > h3 { position: sticky; top: 0; z-index: 2; margin: 0 -16px 8px; padding: 18px 8px 4px 16px; min-height: 60px; background: var(--surface); cursor: pointer; touch-action: none; }
  .inspector > h3::before { content: ""; position: absolute; top: 7px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--glass-border-hi); }
  .inspector[data-mode="card"]:not(.expanded), .inspector[data-mode="link"]:not(.expanded) { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); z-index: 56;
    bottom: calc(var(--dock-bar-h) + env(safe-area-inset-bottom, 0px) + 6px); max-height: 62px; overflow: hidden; padding: 0 0 0 16px; border-radius: var(--radius-l); border-bottom-width: 1px; }
  .inspector[data-mode="card"]:not(.expanded) > :not(h3), .inspector[data-mode="link"]:not(.expanded) > :not(h3) { display: none; }
  .inspector[data-mode="card"]:not(.expanded) > h3, .inspector[data-mode="link"]:not(.expanded) > h3 { margin: 0; }
  .sheet-connect { margin-left: auto; flex: none; }
  .inspector > h3 { gap: 2px; }
  .inspector .insp-row .btn { flex: 1 1 auto; }
  .inspector .scene-grid { grid-template-columns: repeat(3, 1fr); }

  .kb-open .dock, .kb-open .inspector[data-mode="card"]:not(.expanded), .kb-open .inspector[data-mode="link"]:not(.expanded) { display: none; }

  /* Left panels become full screen sheets */
  .word-bank, .codex-panel, .tables-panel { position: fixed; left: 0; right: 0; top: 0; bottom: var(--kb, 0px); width: auto; z-index: 70; border-radius: 0; border-width: 0; transform: translateY(108%); transition: transform var(--dur-mid) var(--ease-out);
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left)); }
  .word-bank.open, .codex-panel.open, .tables-panel.open { transform: none; }
  .wb-head, .tp-head { min-height: 44px; }
  .app:has(.word-bank.open, .codex-panel.open, .tables-panel.open) .inspector.open { transform: translateY(112%); }

  /* Dice tray: a sheet above the dock */
  .dice-tray { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; z-index: 60; max-height: calc(var(--vvh, 100dvh) - var(--topbar-h) - var(--dock-bar-h) - 24px); overflow-y: auto;
    bottom: calc(var(--dock-bar-h) + env(safe-area-inset-bottom, 0px) + 8px); transform: translateY(calc(100% + var(--dock-bar-h) + 60px)); }
  .dice-tray.open { transform: none; }
  .dice-log { height: 64px; }
  .app:has(.dice-tray.open) .inspector[data-mode="card"]:not(.expanded), .app:has(.dice-tray.open) .inspector[data-mode="link"]:not(.expanded) { visibility: hidden; }

  /* Legend sits in the bottom left corner of the canvas, above the selection peek when there is one */
  .rel-legend, .rel-legend.glass { left: 8px !important; bottom: 8px; }
  .app:has(.inspector.open:not(.expanded)) .rel-legend { bottom: 76px; }
  .app:has(.word-bank.open, .tables-panel.open, .codex-panel.open, .dice-tray.open) .rel-legend { display: none; }
  .empty-hint { width: 80%; }

  .toasts { top: calc(56px + env(safe-area-inset-top, 0px)); bottom: auto; left: 12px; right: 12px; align-items: center; pointer-events: none; }
  .toast { max-width: 100%; text-align: center; }
}

/* Landscape phones: a thinner dock with icons only */
@media (max-height: 520px) and (pointer: coarse) {
  .app { --dock-bar-h: 48px; --topbar-h: calc(46px + env(safe-area-inset-top, 0px)); }
  .dock .dock-btn[data-tip]::after { display: none; }
  .topbar .btn-icon, .back-pill { height: 40px; }
}