/* Digisteri Whiteboard: project list and the responsive editor shells. Phone <600, tablet 600-1023, desktop 1024+.
   Same tokens as whiteboard.css. Editor shells are chosen in JS by available width (data-shell), never by device type. */

/* ---------- Project list ---------- */
.wb-dash-head { display: flex; align-items: center; gap: var(--wb-s3); min-height: 56px; padding: var(--wb-s2) var(--wb-s4); position: sticky; top: 0; z-index: 5; }
.wb-dash-head .wb-brand { flex: none; }
.wb-search { font: inherit; font-size: var(--wb-fs-m); width: min(420px, 40vw); padding: 8px 12px; border: 1px solid var(--wb-line); border-radius: 999px; background: var(--wb-surface-2); color: var(--wb-ink); }
.wb-search-toggle { display: none; }
.wb-new-btn { flex: none; white-space: nowrap; }
.wb-new-plus { font-size: 18px; line-height: 1; }
.wb-profile { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--wb-accent); color: var(--wb-accent-ink); font: inherit; font-weight: 700; cursor: pointer; }
.wb-dash-main { max-width: 1240px; padding: var(--wb-s4) var(--wb-s4) 96px; }
.wb-dash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-s2) var(--wb-s3); margin: 0 0 var(--wb-s4); }
.wb-dash-bar h1 { margin: 0; font-size: var(--wb-fs-xl); line-height: 1.2; }
.wb-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--wb-surface-2); border: 1px solid var(--wb-line); border-radius: var(--wb-radius-s); }
.wb-seg-btn { font: inherit; font-size: var(--wb-fs-s); border: 0; background: transparent; color: var(--wb-muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.wb-seg-btn[aria-pressed="true"] { background: var(--wb-surface); color: var(--wb-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
.wb-seg-count { color: var(--wb-muted); font-weight: 400; }
.wb-sort { font: inherit; font-size: var(--wb-fs-s); padding: 6px 8px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius-s); background: var(--wb-surface); color: var(--wb-ink); }
.wb-view-toggle[aria-pressed="true"] { background: var(--wb-surface-2); border-color: var(--wb-line); }
.wb-board-cards.wb-view-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--wb-s3); margin: 0; }
.wb-board-cards.wb-view-list { grid-template-columns: minmax(0, 1fr); gap: var(--wb-s1); margin: 0; }
.wb-board-card { position: relative; padding: 0; display: grid; overflow: hidden; transition: border-color var(--wb-motion); }
.wb-board-card:hover { border-color: var(--wb-teal); }
.wb-board-card:focus-within { border-color: var(--wb-teal); }
.wb-view-grid .wb-board-card { grid-template-rows: 124px auto; }
.wb-view-list .wb-board-card { grid-template-columns: 72px minmax(0, 1fr); min-height: 60px; }
.wb-thumb { background: var(--wb-page); display: grid; place-items: center; overflow: hidden; min-width: 0; }
.wb-thumb svg { width: 100%; height: 100%; display: block; }
.wb-thumb-empty span { font-size: 34px; font-weight: 700; color: color-mix(in srgb, var(--wb-accent) 45%, transparent); }
.wb-view-list .wb-thumb-empty span { font-size: 22px; }
.wb-card-text { padding: 10px 44px 10px 12px; min-width: 0; }
.wb-board-card h3 { font-size: var(--wb-fs-m); margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-card-link { color: var(--wb-ink) !important; text-decoration: none; }
.wb-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wb-card-link:focus-visible { outline: none; }
.wb-card-link:focus-visible::after { outline: 3px solid var(--wb-focus); outline-offset: -3px; border-radius: var(--wb-radius); }
.wb-card-meta { font-size: 12px; gap: 2px 8px; margin: 0; }
.wb-card-owner { overflow-wrap: anywhere; }
.wb-card-more { position: absolute; right: 4px; bottom: 6px; z-index: 2; }
.wb-view-list .wb-card-more { top: 50%; bottom: auto; transform: translateY(-50%); }
.wb-trash-card .wb-card-text { padding-right: 12px; }
.wb-trash-card .wb-card-actions { position: relative; z-index: 2; margin-top: var(--wb-s2); }
.wb-show-more { text-align: center; margin: var(--wb-s4) 0; }
.wb-new-import { margin: var(--wb-s4) 0 0; }
.wb-template:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Menus ---------- */
.wb-popmenu-wrap { position: fixed; inset: 0; z-index: var(--wb-z-menu); pointer-events: none; }
.wb-popmenu-backdrop { display: none; }
.wb-popmenu { pointer-events: auto; position: fixed; left: var(--x, 8px); top: var(--y, 8px); background: var(--wb-surface); color: var(--wb-ink); border: 1px solid var(--wb-line); border-radius: var(--wb-radius); box-shadow: var(--wb-shadow); padding: 6px; display: grid; min-width: 220px; max-height: 80dvh; overflow-y: auto; }
.wb-popmenu-head { margin: 0; padding: 6px 10px 8px; font-size: 12px; color: var(--wb-muted); overflow-wrap: anywhere; border-bottom: 1px solid var(--wb-line); margin-bottom: 4px; }
.wb-menu-danger { color: var(--wb-danger); }
.wb-popover-anchor { position: fixed; width: 1px; height: 1px; }

/* ---------- Editor: desktop, the default ---------- */
.wb-app { height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; }
body:has(.wb-app) { overflow: hidden; overscroll-behavior: none; }
.wb-top { flex-wrap: nowrap; min-height: 52px; }
.wb-top > * { flex-shrink: 0; }
.wb-title-wrap { display: flex; align-items: center; gap: var(--wb-s2); min-width: 0; flex: 0 1 460px; }
.wb-title-wrap .wb-title-input { flex: 1 1 160px; min-width: 80px; width: 0; }
.wb-save-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wb-role-note { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wb-top-sep { flex-shrink: 1; }
.wb-publish.wb-has-changes { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-coral) 55%, transparent); }
.wb-top-more, .wb-mbar, .wb-panel-head, .wb-zoom-short, .wb-touch-hint { display: none; }
.wb-panel-off .wb-body { grid-template-columns: 56px minmax(0, 1fr); }
.wb-panel-off .wb-panel { display: none; }
.wb-panel { outline: none; }
.wb-panel-toggle[aria-expanded="true"] { background: var(--wb-surface-2); }
.wb-tb-done { font-weight: 600; }

/* ---------- Touch: real targets wherever a finger is the pointer ---------- */
.wb-coarse .wb-touch-hint { display: block; }
.wb-coarse .wb-mouse-hint { display: none; }
.wb-coarse .wb-handle { width: var(--wb-touch); height: var(--wb-touch); background: transparent; border: 0; border-radius: 50%; }
.wb-coarse .wb-handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--wb-sel); border-radius: 50%; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); }
.wb-coarse .wb-h-n, .wb-coarse .wb-h-e, .wb-coarse .wb-h-s, .wb-coarse .wb-h-w { display: none; }
.wb-coarse .wb-h-rot { top: -40px; width: var(--wb-touch); height: var(--wb-touch); }
.wb-coarse .wb-h-rot::after { top: calc(50% + 8px); height: 24px; }
.wb-coarse .wb-handle-end { width: var(--wb-touch); height: var(--wb-touch); background: transparent !important; border: 0; }
.wb-coarse .wb-handle-end::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 2px solid var(--wb-sel); }
.wb-coarse .wb-handle-end.wb-attached::before { background: var(--wb-sel); }
.wb-coarse .wb-sel { border-width: 2px; }
.wb-coarse .wb-edit-stage { -webkit-touch-callout: none; }
.wb-coarse .wb-stage:focus-visible, .wb-stage.wb-pointer-focus:focus-visible { box-shadow: none; }
[data-shell="mobile"] .wb-editing .wb-text { outline: none; }
.wb-app, .wb-popmenu, .wb-page { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse), (max-width: 599px) {
  .wb-btn, .wb-btn-small, .wb-sort, .wb-seg-btn, .wb-menu-item, .wb-linkbtn, .wb-tb-btn, .wb-tb-select, .wb-layer-name, .wb-tabs button, .wb-nav-btn, .wb-zoom-label { min-height: var(--wb-touch); }
  .wb-icon-btn, .wb-tool, .wb-tb-btn { min-width: var(--wb-touch); min-height: var(--wb-touch); }
  .wb-swatch { width: var(--wb-touch); height: var(--wb-touch); }
  .wb-profile { width: var(--wb-touch); height: var(--wb-touch); }
  .wb-check { min-height: var(--wb-touch); }
  .wb-check input { width: 22px; height: 22px; }
  .wb-field input[type=color] { height: var(--wb-touch); }
  /* 16 px keeps browsers from zooming the page when a field gets focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select, textarea, .wb-search { font-size: 16px !important; min-height: var(--wb-touch); }
  .wb-cpin { width: var(--wb-touch); height: var(--wb-touch); }
  .wb-popup-close { min-width: var(--wb-touch); }
}

/* ---------- Tablet ---------- */
[data-shell="tablet"] .wb-body { grid-template-columns: 56px minmax(0, 1fr); }
[data-shell="tablet"] .wb-top-wide { display: none; }
[data-shell="tablet"] .wb-tools { padding: 4px 0; }
[data-shell="tablet"] .wb-panel, [data-shell="mobile"] .wb-panel { position: fixed; z-index: var(--wb-z-panel); box-shadow: var(--wb-shadow); grid-template-rows: auto auto minmax(0, 1fr); }
[data-shell="tablet"] .wb-body { position: relative; }
[data-shell="tablet"] .wb-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 60vw); border-left: 1px solid var(--wb-line); }
[data-shell="tablet"] .wb-panel:not([data-open="1"]), [data-shell="mobile"] .wb-panel:not([data-open="1"]) { display: none; }
[data-shell="tablet"] .wb-panel-head, [data-shell="mobile"] .wb-panel-head { display: flex; align-items: center; gap: var(--wb-s2); padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--wb-line); }
.wb-panel-head { justify-content: flex-end; }
[data-shell="tablet"] .wb-panel-head .wb-sheet-grip { display: none; }
[data-shell="tablet"] .wb-zoombar { max-width: calc(100% - 24px); }
[data-shell="tablet"] .wb-minimap { display: none; }

/* ---------- Phone: the canvas gets everything that is left ---------- */
[data-shell="mobile"].wb-app { grid-template-rows: auto minmax(0, 1fr) auto; }
[data-shell="mobile"] .wb-body { display: block; position: relative; min-height: 0; height: 100%; }
[data-shell="mobile"] .wb-main { position: absolute; inset: 0; }
[data-shell="mobile"] .wb-tools, [data-shell="mobile"] .wb-minimap, [data-shell="mobile"] .wb-top-wide, [data-shell="mobile"] .wb-top-project, [data-shell="mobile"] .wb-top-publish, [data-shell="mobile"] .wb-top-redo, [data-shell="mobile"] .wb-panel-toggle, [data-shell="mobile"] .wb-back-text, [data-shell="mobile"] .wb-top-sep, [data-shell="mobile"] .wb-role-note, [data-shell="mobile"] .wb-zoom-extra, [data-shell="mobile"] .wb-zoom-long { display: none; }
[data-shell="mobile"] .wb-top { min-height: 52px; gap: 2px; padding: 2px 4px; padding-top: max(2px, env(safe-area-inset-top)); }
[data-shell="mobile"] .wb-top-more { display: inline-grid; }
[data-shell="mobile"] .wb-back { padding: 0; min-width: var(--wb-touch); justify-content: center; font-size: 20px; }
[data-shell="mobile"] .wb-title-wrap { flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 0; }
[data-shell="mobile"] .wb-title-input { flex: none; width: 100%; min-height: 26px !important; height: 26px; padding: 0 4px; font-weight: 650; text-overflow: ellipsis; }
[data-shell="mobile"] .wb-save-status { font-size: 11px; padding: 0 4px; line-height: 1.2; white-space: nowrap; }
[data-shell="mobile"] .wb-zoombar { left: 8px; bottom: 8px; padding: 2px; gap: 0; max-width: none; flex-wrap: nowrap; box-shadow: 0 2px 8px rgba(15, 23, 42, .16); }
[data-shell="mobile"] .wb-zoom-short { display: inline; font-size: 18px; }
[data-shell="mobile"] .wb-zoom-fit { min-width: var(--wb-touch); justify-content: center; padding: 0; border: 0; background: transparent; }
[data-shell="mobile"] .wb-zoom-label { min-width: 48px; padding: 0; font-size: 12px; }
[data-shell="mobile"] .wb-banner { left: 8px; right: 8px; transform: none; top: 8px; font-size: 14px; justify-content: space-between; }
[data-shell="mobile"] .wb-mbar { display: flex; align-items: stretch; gap: 2px; min-height: 56px; padding: 2px 4px; padding-bottom: max(2px, env(safe-area-inset-bottom)); background: var(--wb-surface); border-top: 1px solid var(--wb-line); z-index: 10; }
.wb-kb-open .wb-mbar { display: none !important; }
.wb-readonly .wb-mbar { opacity: .55; pointer-events: none; }
.wb-mbtn { flex: 1 1 0; min-width: 0; min-height: var(--wb-touch); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; border: 0; background: transparent; color: var(--wb-ink); border-radius: var(--wb-radius-s); cursor: pointer; padding: 2px; }
.wb-mbtn:active { background: var(--wb-surface-2); }
.wb-mbtn-icon { font-size: 19px; line-height: 1.1; }
.wb-mbtn-text { font-size: 12px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-mbtn-primary { background: var(--wb-accent); color: var(--wb-accent-ink); }
.wb-mbtn-primary:active { background: var(--wb-accent); filter: brightness(1.15); }
.wb-mbar-note { flex: 2 1 0; margin: 0; align-self: center; padding: 0 8px; font-size: var(--wb-fs-s); color: var(--wb-muted); }
.wb-mbar-field { display: flex; align-items: center; padding: 0 6px; }
.wb-mbar-field input[type=color] { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius-s); background: none; }
.wb-mbar-grow { flex: 2 1 0; min-width: 0; }
.wb-mbar-grow input { width: 100%; min-height: var(--wb-touch); }

/* Properties as a bottom sheet: 45 % or, swiped up, 85 % of the height; never permanently over the whole editor. */
[data-shell="mobile"] .wb-panel { left: 0; right: 0; bottom: var(--wb-kb); top: auto; width: 100%; height: min(45dvh, var(--wb-vvh)); max-height: calc(var(--wb-vvh) - 48px); border-radius: var(--wb-radius-l) var(--wb-radius-l) 0 0; border-left: 0; border-top: 1px solid var(--wb-line); transition: height var(--wb-motion); padding-bottom: env(safe-area-inset-bottom); }
[data-shell="mobile"] .wb-panel[data-size="full"], .wb-kb-open[data-shell="mobile"] .wb-panel { height: min(85dvh, calc(var(--wb-vvh) - 48px)); }
[data-shell="mobile"] .wb-panel-head { position: relative; padding: 0 4px; min-height: 44px; }
[data-shell="mobile"] .wb-panel-head .wb-sheet-grip { position: absolute; left: 44px; right: 44px; top: 0; bottom: 0; height: auto; }
[data-shell="mobile"] .wb-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
[data-shell="mobile"] .wb-tabs button { flex: none; padding: 0 10px; font-size: var(--wb-fs-s); }
[data-shell="mobile"] .wb-grid2 { gap: 0 8px; }
.wb-sheet-grip { flex: 0 0 auto; height: 22px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.wb-sheet-grip span { width: 40px; height: 4px; border-radius: 4px; background: var(--wb-line); }
[data-shell="mobile"] .wb-cpanel { z-index: var(--wb-z-panel); }

/* Menu and add sheets */
.wb-sheet-wrap { position: fixed; inset: 0; z-index: calc(var(--wb-z-panel) + 5); display: flex; align-items: flex-end; }
.wb-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .42); }
.wb-sheet { position: relative; width: 100%; max-height: min(85dvh, calc(var(--wb-vvh) - 24px)); margin-bottom: var(--wb-kb); background: var(--wb-surface); color: var(--wb-ink); border-radius: var(--wb-radius-l) var(--wb-radius-l) 0 0; box-shadow: var(--wb-shadow); display: flex; flex-direction: column; outline: none; padding-bottom: env(safe-area-inset-bottom); transition: transform var(--wb-motion); }
[data-shell="tablet"] .wb-sheet { width: min(460px, 100%); margin-left: auto; margin-right: auto; }
.wb-sheet-head { display: flex; align-items: center; gap: var(--wb-s2); padding: 0 8px 4px 16px; }
.wb-sheet-head h2 { flex: 1; margin: 0; font-size: var(--wb-fs-l); }
.wb-sheet-body { overflow-y: auto; padding: 0 var(--wb-s2) var(--wb-s3); overscroll-behavior: contain; }
.wb-sheet-list { display: grid; }
.wb-sheet-row { font: inherit; font-size: var(--wb-fs-l); text-align: left; min-height: 48px; padding: 0 var(--wb-s2); border: 0; background: transparent; color: var(--wb-ink); border-radius: var(--wb-radius-s); cursor: pointer; }
.wb-sheet-row:active { background: var(--wb-surface-2); }
.wb-sheet-primary { font-weight: 650; color: var(--wb-teal); }
.wb-sheet-danger { color: var(--wb-danger); }
.wb-row-off { opacity: .45; }
.wb-sheet-group { margin: var(--wb-s3) var(--wb-s2) var(--wb-s1); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--wb-muted); }
.wb-add-group h3 { margin: var(--wb-s3) var(--wb-s2) var(--wb-s1); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--wb-muted); }
.wb-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--wb-s1); }
.wb-add-item { font: inherit; font-size: 12px; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center; border: 0; background: transparent; color: var(--wb-ink); border-radius: var(--wb-radius-s); cursor: pointer; }
.wb-add-item:active { background: var(--wb-surface-2); }
.wb-add-icon { font-size: 24px; line-height: 1.2; }

/* Text editing on a phone: its own mode, docked to the top of the keyboard, real type size */
.wb-text-sheet { position: fixed; left: 0; right: 0; bottom: var(--wb-kb); z-index: var(--wb-z-text); max-height: min(70dvh, calc(var(--wb-vvh) - 40px)); display: flex; flex-direction: column; gap: var(--wb-s1); padding: var(--wb-s2) 0 max(4px, env(safe-area-inset-bottom)); background: var(--wb-surface); color: var(--wb-ink); border-radius: var(--wb-radius-l) var(--wb-radius-l) 0 0; box-shadow: 0 -6px 24px rgba(15, 23, 42, .22); }
.wb-text-sheet-body { width: auto; flex: 1 1 auto; min-height: 96px; overflow-y: auto; margin: 0 var(--wb-s3); padding: var(--wb-s3); border: 2px solid var(--wb-sel); border-radius: var(--wb-radius-s); font-size: 18px; line-height: 1.4; user-select: text; -webkit-user-select: text; cursor: text; }
.wb-text-sheet .wb-text-toolbar { position: static; order: 2; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 2px var(--wb-s2); }
.wb-text-sheet .wb-text-toolbar > * { flex: none; }
.wb-text-sheet .wb-tb-done { display: none; }
.wb-text-done { min-height: var(--wb-touch); }

/* Modals and menus as sheets on a phone */
@media (max-width: 599px) {
  .wb-modal-wrap { place-items: end stretch; padding: 0; padding-bottom: var(--wb-kb); }
  .wb-modal, .wb-modal-wide, .wb-reauth .wb-login { width: 100%; max-height: min(92dvh, calc(var(--wb-vvh) - 16px)); border-radius: var(--wb-radius-l) var(--wb-radius-l) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .wb-popmenu-backdrop { display: block; position: absolute; inset: 0; background: rgba(15, 23, 42, .42); pointer-events: auto; }
  .wb-popmenu { left: 0; right: 0; top: auto; bottom: 0; width: 100%; border-radius: var(--wb-radius-l) var(--wb-radius-l) 0 0; border: 0; padding: var(--wb-s2) var(--wb-s2) max(8px, env(safe-area-inset-bottom)); }
  .wb-popmenu .wb-menu-item { font-size: var(--wb-fs-l); min-height: 48px; }
  .wb-dash-head { gap: var(--wb-s1); min-height: 52px; padding: 4px var(--wb-s2) 4px var(--wb-s3); flex-wrap: wrap; }
  .wb-search { display: none; }
  .wb-search-toggle { display: inline-grid; font-size: 22px; }
  .wb-search-open .wb-search { display: block; order: 10; flex: 0 0 100%; width: 100%; margin: 4px 0; }
  .wb-new-btn { position: fixed; right: var(--wb-s4); bottom: calc(var(--wb-s4) + env(safe-area-inset-bottom)); z-index: 6; width: 56px; height: 56px; padding: 0; border-radius: 50%; justify-content: center; box-shadow: var(--wb-shadow); }
  .wb-new-text { display: none; }
  .wb-new-plus { font-size: 28px; }
  .wb-dash-main { padding: var(--wb-s3) var(--wb-s3) 96px; }
  .wb-dash-bar h1 { flex: 0 0 100%; font-size: 18px; }
  .wb-dash-bar .wb-top-sep { display: none; }
  .wb-seg { flex: 1 1 100%; }
  .wb-seg-btn { flex: 1 1 0; }
  .wb-sort { flex: 1 1 auto; }
  .wb-view-grid .wb-board-card { grid-template-rows: none; grid-template-columns: 88px minmax(0, 1fr); min-height: 76px; }
  .wb-view-grid .wb-card-more { top: 50%; bottom: auto; transform: translateY(-50%); }
  .wb-card-text { padding-right: 50px; }
  .wb-toast { bottom: calc(68px + var(--wb-kb)); }
}