/* Import from Miro (docs/spec/miro-import.md §2): dialog, drop zone, per-file progress, report. */
.mi-intro { color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-3); padding-left: 1.1em; }
.mi-intro li + li { margin-top: 2px; }
.mi-drop {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1.5px dashed var(--c-line-strong);
  border-radius: var(--radius-island);
  color: var(--c-ink-2);
  text-align: center;
}
.mi-drop.over { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-ink); }
.mi-target { display: flex; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-sm); }
.mi-files { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.mi-file { border: 1px solid var(--c-line); border-radius: var(--radius-control); padding: var(--space-3); display: grid; gap: var(--space-2); }
.mi-file-head { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; }
.mi-file-name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-bar { height: 4px; border-radius: 2px; background: var(--c-surface-pressed); overflow: hidden; }
.mi-bar > span { display: block; height: 100%; background: var(--c-accent); transition: width 120ms; }
.mi-bar.indeterminate > span { width: 30%; animation: mi-slide 1.2s infinite ease-in-out; }
@keyframes mi-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.mi-msg { font-size: var(--text-sm); color: var(--c-ink-2); }
.mi-msg.error { color: var(--c-danger); }
.mi-counts { display: flex; gap: var(--space-4); font-size: var(--text-sm); }
.mi-counts b { font-size: var(--text-lg); display: block; color: var(--c-ink); }
.mi-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--text-sm); }
.mi-finding { display: flex; gap: var(--space-2); align-items: baseline; }
.mi-finding .mi-n { min-width: 2.5em; text-align: right; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.mi-sev-placeholder .mi-n, .mi-sev-error .mi-n { color: var(--c-danger); }
.mi-pending { background: var(--c-warn-soft); color: var(--c-warn); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.mi-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mi-notice-actions { display: inline-flex; gap: 4px; margin-left: var(--space-2); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--c-line-strong); font: inherit; }
.toasts-miro { bottom: calc(var(--space-5) + 56px); }
/* Object tools chrome (ObjectsChrome.tsx): tool options popover and frames panel.
   Tokens from tokens.css; layout rules of docs/design/design-system.md. */

/* Anchored beside the rail with its top at the tool button (positioned in ObjectsChrome.tsx). */
.tool-options {
  position: absolute;
  left: calc(var(--chrome-gap) + 52px);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  border-radius: var(--radius-island);
  z-index: 4;
  animation: pop-in var(--dur-fast) var(--ease-out);
}
.opt-grid { display: grid; gap: 2px; }
.opt-shapes { grid-template-columns: repeat(3, 36px); }
.opt-swatches { grid-template-columns: repeat(4, 28px); gap: 0; justify-content: space-between; }
.opt-pens { grid-template-columns: repeat(3, 36px); }
.opt-sep { height: 1px; background: var(--c-line); margin: 6px 2px; }

/* A 24 px swatch in a 28–32 px hit target. */
.opt-swatch {
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.opt-swatch:hover { background: var(--c-surface-hover); }
.opt-swatch .swatch-dot { width: 24px; height: 24px; }
.opt-swatch.active .swatch-dot { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent); }
.opt-swatch:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.width-dot { display: block; border-radius: 50%; background: currentColor; }

.frames-panel {
  position: absolute;
  right: var(--chrome-gap);
  bottom: calc(var(--chrome-gap) + 52px);
  width: 240px;
  max-height: min(420px, calc(100% - 160px));
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
}
.frames-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--space-1) var(--space-1); }
.frames-head h2 { font-size: var(--text-md); font-weight: var(--weight-strong); }
.frames-head .icon-btn { width: 28px; height: 28px; }
.frames-empty { font-size: var(--text-sm); color: var(--c-ink-2); padding: var(--space-2) var(--space-1); }
.frames-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 2px; }
.frame-item { display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-control); padding: 0 var(--space-1); }
.frame-item.active { background: var(--c-accent-soft); }
.frame-n { width: 18px; font-size: var(--text-xs); color: var(--c-ink-3); text-align: right; flex: none; }
.frame-go {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--text-md);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-radius: var(--radius-control);
  padding: 0 var(--space-1);
}
.frame-go:hover { background: var(--c-surface-hover); }
.frame-go:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.frame-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--text-md);
  padding: 0 var(--space-1);
  background: var(--c-surface);
  color: var(--c-ink);
}
/* Miro-style board controls: context toolbar, menus, zoom menu, minimap, undo island.
   Tokens from app/tokens.css; look from docs/design/design-system.md. */

/* ------------------------------------------------------------------ undo / redo (bottom-left, Miro) */
.undo-island {
  position: absolute;
  left: var(--chrome-gap);
  bottom: var(--chrome-gap);
  display: flex;
  padding: 2px;
  gap: 0;
}
.undo-island .icon-btn { width: 36px; height: 36px; }

/* ------------------------------------------------------------------ context toolbar */
/* 36 px controls, 4 px padding, 2 px gaps, island radius. Positioned by transform, so it only fades. */
.ctx-toolbar {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-island);
  z-index: 5;
  will-change: transform;
  animation: fade-in 100ms var(--ease-out);
}
.ctx-toolbar[hidden] { display: none; }
.ctx-toolbar .icon-btn { width: 36px; height: 36px; }
.ctx-slot { position: relative; display: flex; }
.ctx-sep { width: 1px; align-self: stretch; margin: 6px 3px; background: var(--c-line); }

/* Round color dot inside a button (toolbar, tool options). */
.swatch-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: var(--swatch-ring);
}
.swatch-mixed { background: conic-gradient(#fbe48d 0 25%, #cbe6ff 0 50%, #ffd0de 0 75%, #c4f2cc 0); }
.swatch-none { background: linear-gradient(135deg, var(--c-surface) 45%, var(--c-danger) 45% 55%, var(--c-surface) 55%); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.ctx-text-btn {
  position: relative;
  height: 36px;
  min-width: 44px;
  padding: 0 6px 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.ctx-text-btn:hover:not(:disabled) { background: var(--c-surface-hover); }
.ctx-text-btn[aria-expanded='true'] { background: var(--c-surface-pressed); }
.ctx-text-btn:disabled { color: var(--c-ink-3); cursor: default; }
.ctx-text-btn:focus-visible, .menu-item:focus-visible, .swatch-cell:focus-visible, .pop-choice:focus-visible, .minimap:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.width-line { display: block; width: 20px; min-height: 1px; border-radius: 1px; background: currentColor; }
/* Font family (named in its own typeface, Miro) and the size stepper beside it: − value +. At phone
   width the family name gives way to "Aa" so the toolbar fits. */
.ctx-font-name { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-font-short { display: none; }
.ctx-stepper { display: flex; align-items: center; }
.ctx-toolbar .ctx-stepper .icon-btn { width: 28px; }
.ctx-size-value {
  min-width: 26px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
/* The sticky stepper's value opens the size menu (Auto and presets). */
button.ctx-size-value {
  height: 36px;
  min-width: 40px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
button.ctx-size-value:hover:not(:disabled) { background: var(--c-surface-hover); }
button.ctx-size-value[aria-expanded='true'] { background: var(--c-surface-pressed); }
button.ctx-size-value:disabled { color: var(--c-ink-3); cursor: default; }
button.ctx-size-value:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Sticky size S / M / L: one letter, as wide as the other text buttons. */
.ctx-note-size { min-width: 14px; text-align: center; }
.menu-letter { display: inline-block; width: 16px; text-align: center; font-weight: var(--weight-medium); color: var(--c-ink-2); }
/* Alignment popover: two rows of three, horizontal over vertical. */
.pop-align { gap: var(--space-1); padding: var(--space-1); }
@media (max-width: 640px) {
  .ctx-font-name { display: none; }
  .ctx-font-short { display: inline; }
}

/* ------------------------------------------------------------------ popovers and menus */
.popover {
  position: absolute;
  z-index: 20;
  background: var(--c-surface);
  border-radius: var(--radius-island);
  box-shadow: var(--shadow-menu);
  padding: var(--space-1);
}
/* Swatch popovers: optional section labels over a 6-column grid of swatches. */
.pop-panel { display: grid; gap: var(--space-3); padding: 10px; }
.pop-section { display: grid; gap: 6px; }
.pop-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--c-ink-2); }
.palette {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 6px;
}
/* Sticky colors: Miro's 16 in a 4 × 4 grid (CNV-180). */
.palette-4 { grid-template-columns: repeat(4, 28px); }
/* "All colors" (CNV-181): 10 columns of 24 px swatches. The grid scrolls: its cap shows three rows
   and half of the fourth under a 16 px fade, so the cut row says "more" (the menus' rule). 4 px of
   padding keeps the checked ring (4 px outside a swatch) unclipped. */
.color-grid { position: relative; display: grid; gap: 6px; }
.palette-all { grid-template-columns: repeat(10, 24px); gap: 4px; }
.palette-all .swatch-cell { width: 24px; height: 24px; font-size: var(--text-sm); }
.color-scroll { max-height: 100px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; scrollbar-width: thin; }
.color-scroll[data-more]::after {
  content: '';
  display: block;
  position: sticky;
  bottom: -4px;
  height: 16px;
  margin-top: -16px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--c-surface));
}
.color-chips { gap: 4px; }
.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.color-chip:hover { background: var(--c-surface-hover); }
.color-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.color-chip[aria-checked='true'] { color: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.color-chip-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; box-shadow: var(--swatch-ring); }
.swatch-cell.swatch-add { background: transparent; color: var(--c-ink-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); font-size: 15px; line-height: 1; }
.swatch-cell.swatch-add:hover { background: var(--c-surface-hover); color: var(--c-ink); }
/* CNV-183: a swatch below the contrast its pairing needs carries a small warning badge. */
.swatch-cell.swatch-low { position: relative; }
.swatch-cell.swatch-low::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-warn);
  box-shadow: 0 0 0 1.5px var(--c-surface);
}
.color-input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; bottom: 0; left: 0; }
/* One tooltip for every swatch (ColorPicker.tsx places it above the hovered or focused one). */
.swatch-tip {
  position: absolute;
  z-index: 2;
  padding: 4px 8px;
  border-radius: var(--radius-control);
  background: var(--c-inverse);
  color: var(--c-on-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  pointer-events: none;
}
.swatch-tip[hidden] { display: none; }
.swatch-cell {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--swatch-ring);
  display: grid;
  place-items: center;
  color: #1a1d23;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.swatch-cell.swatch-none { box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.swatch-cell[aria-checked='true'] { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent); }
.pop-row { display: flex; gap: 2px; }
.pop-choice {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.pop-choice:hover { background: var(--c-surface-hover); }
.pop-choice[aria-checked='true'] { background: var(--c-accent-soft); color: var(--c-accent); }
.style-line { display: block; width: 24px; border-top: 2px solid currentColor; }
.style-dashed { border-top-style: dashed; }
.style-dotted { border-top-style: dotted; }

/* Menus: 32 px rows, label inset 12 px, shortcut right-aligned at least 24 px after the label. The
   icon/check column exists only when an item uses it (Menu.tsx). */
.popover.menu {
  /* Beats the dashboard's `.menu { position: relative }` whatever the stylesheet order. */
  position: absolute;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  outline: none;
}
.popover.menu .menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Rows never shrink: a menu taller than its cap scrolls instead (CNV-151). */
  flex: 0 0 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.popover.menu-has-col .menu-item { padding-left: 8px; }
.popover.menu .menu-item:hover:not(:disabled), .popover.menu .menu-item:focus-visible { background: var(--c-surface-hover); }
.popover.menu .menu-item:disabled { color: var(--c-ink-3); cursor: default; }
.popover.menu .menu-item .menu-check { width: 16px; flex: none; display: inline-grid; place-items: center; color: var(--c-accent); }
.popover.menu .menu-item.is-checked { color: var(--c-accent); }
.popover.menu .menu-item .menu-label { flex: 1; }
.popover.menu .menu-item kbd { margin-left: 24px; color: var(--c-ink-2); background: transparent; padding: 0; font-size: var(--text-sm); }
.popover.menu .menu-item .menu-trail { display: inline-grid; place-items: center; margin-left: 24px; color: var(--c-accent); }
.popover.menu .menu-item.danger { color: var(--c-danger); }
.popover.menu .menu-sep { height: 1px; background: var(--c-line); margin: 4px 6px; flex: none; }
.popover.menu .menu-heading { flex: none; font-size: var(--text-sm); color: var(--c-ink-2); padding: 6px 12px 2px; }
/* Long menus (the text menu's fonts and sizes) scroll. The cap shows half of the next row under the
   16 px fade, so the cut row says "more": 4 px padding + Font heading 24.8 + 4 rows × 32 + 9 px
   separator + Size heading 24.8 = 190.6 px to the first size row; its 6th row starts at 350.6 px,
   half of it ends at 366.6 px. */
.popover.menu.menu-scroll { max-height: 367px; overflow-y: auto; overscroll-behavior: contain; }
/* While more items lie below, a 16 px fade at the bottom edge says the menu scrolls (Menu.tsx sets data-more). */
.popover.menu[data-more]::after {
  content: '';
  position: sticky;
  bottom: 0;
  flex: none;
  height: 16px;
  margin-top: -16px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--c-surface));
}
.popover.menu-has-col .menu-heading { padding-left: 32px; }

/* ------------------------------------------------------------------ zoom control + minimap */
.zoomval { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; }
.zoombar-zoom { display: flex; align-items: center; }
.zoombar-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--c-line); }
.zoom-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.minimap-island { padding: 4px; }
.minimap {
  display: block;
  width: 216px;
  height: 140px;
  border-radius: var(--radius-control);
  background: var(--c-canvas);
  cursor: pointer;
  touch-action: none;
}
.zoom-menu { right: 0; bottom: calc(100% + 8px); }

@media (max-width: 640px) {
  .minimap { width: 160px; height: 104px; }
}
.tip-hint { color: color-mix(in srgb, var(--c-on-inverse) 70%, transparent); font-weight: var(--weight-body, 440); }
[aria-expanded='true'] > .tip { display: none; }

/* ------------------------------------------------------------------ rich text (CNV-203…CNV-206) */
.ctx-group { display: flex; align-items: center; gap: 2px; }
.ctx-toolbar .ctx-group .icon-btn { width: 32px; }
/* Link editor: URL field and Apply on one row, the error under it, then Open / Remove. */
.pop-link { width: 300px; gap: var(--space-2); }
.link-form { display: flex; gap: var(--space-2); }
.link-form .input { flex: 1; min-width: 0; height: var(--control-sm); font-size: var(--text-sm); }
.link-form .input[aria-invalid='true'] { border-color: var(--c-danger); }
.link-error { font-size: var(--text-sm); color: var(--c-danger); }
.link-actions { display: flex; gap: var(--space-2); }
/* The chip under a link at the caret while editing. */
.link-chip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 320px;
  padding: 4px 4px 4px 10px;
  border-radius: var(--radius-island);
  font-size: var(--text-sm);
}
.link-chip-href { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-accent); }
.pop-swatches { gap: 6px; }
/* Dashboard layout (docs/design/design-system.md; Miro-like structure): sidebar + main. */
.dash { display: grid; grid-template-columns: 248px 1fr; height: 100%; background: var(--c-canvas); }
.dash-loading { background: var(--c-canvas); }
.dash-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
  border-right: 1px solid var(--c-line);
  background: var(--c-surface);
  overflow-y: auto;
}
.ws-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); }
.ws-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c-accent); color: var(--c-on-accent); font-weight: var(--weight-strong); flex: none; }
.ws-name-wrap { display: grid; min-width: 0; flex: 1; }
.ws-name { font-weight: var(--weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-role { color: var(--c-ink-2); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group { display: grid; gap: 1px; }
.nav-bottom { margin-top: auto; }
.nav-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2); height: 26px; color: var(--c-ink-2); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.nav-empty { padding: 0 var(--space-2); color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.4; }
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  color: var(--c-ink);
  text-decoration: none;
  min-width: 0;
  flex: 1;
}
.nav-link:hover { background: var(--c-surface-hover); }
.nav-link.active { background: var(--c-accent-soft); color: var(--c-accent); font-weight: var(--weight-medium); }
.nav-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.nav-link svg { flex: none; color: var(--c-ink-2); }
.nav-link.active svg { color: var(--c-accent); }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-team { display: grid; gap: 1px; }
.nav-team > .nav-link { margin-left: 26px; }
.nav-team-row { display: flex; align-items: center; gap: 0; }
.nav-team-row .nav-link { padding-left: 4px; }
.nav-add { opacity: 0; }
.nav-team-row:hover .nav-add, .nav-add:focus-visible { opacity: 1; }

.dash-main { overflow-y: auto; padding: var(--space-6) var(--space-6) 64px; }
/* minmax(0, 1fr): the page column may shrink below its content's min-content width (narrow screens). */
.boards, .settings { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* Settings share the boards column's left edge; their content is at most 960 px wide. */
.settings > * { max-width: 960px; }
.settings > .boards-head { max-width: none; }
/* One head height on every page (Home, Members, Teams), so their titles share a baseline. */
.boards-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; }
.boards-title-row { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.boards-head h1 { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -0.015em; }
.crumb { color: var(--c-ink-2); text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.count { color: var(--c-ink-2); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.boards-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Compact filters: one 32 px height with search and the layout switch (dialog and form controls stay 36 px). */
.boards-tools > .select { height: var(--control-sm); }
.search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; max-width: 420px; height: 32px; padding: 0 10px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-control); background: var(--c-surface); color: var(--c-ink-2); }
.search:focus-within { border-color: var(--c-accent); outline: 2px solid var(--c-accent); outline-offset: 1px; }
.search input { flex: 1; border: 0; background: transparent; color: var(--c-ink); font: inherit; outline: none; min-width: 0; height: 100%; }
.search-inline { max-width: 320px; }
.seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-control); background: var(--c-surface); margin-left: auto; }
.seg .icon-btn { width: 28px; height: 26px; }
.boards-note { color: var(--c-ink-2); font-size: var(--text-sm); }
.boards-loading { display: flex; justify-content: center; align-items: center; gap: var(--space-2); padding: 64px var(--space-4); color: var(--c-ink-2); }
/* Empty states: no box; a centred block (title, one sentence, the next action). */
.empty { display: grid; justify-items: center; gap: var(--space-2); max-width: 360px; margin: 0 auto; padding: 72px 0 var(--space-6); text-align: center; }
.empty-title { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--c-ink); }
.empty-text { font-size: var(--text-md); line-height: 20px; color: var(--c-ink-2); }
.empty .btn { margin-top: var(--space-2); }

.board-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-4); }
.card { display: grid; border-radius: var(--radius-island); background: var(--c-surface); box-shadow: var(--shadow-card); overflow: visible; transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.card:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
/* The hover transform makes a card a stacking context, so its open "…" menu can't rise past later
   cards (their thumbnails would cover it and take the pointer). The card holding an open menu sits
   above its neighbours. */
.card:has(.menu-trigger[aria-expanded='true']) { position: relative; z-index: 1; }
.card-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-island) var(--radius-island) 0 0; overflow: hidden; }
.card-trash .thumb { filter: grayscale(0.7); opacity: 0.7; }
.card-body { display: grid; gap: 2px; padding: 10px var(--space-2) var(--space-3) var(--space-3); min-width: 0; }
.card-title-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.card-title { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-title a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 2px; }
.card-meta { display: flex; align-items: center; gap: 4px; color: var(--c-ink-2); font-size: var(--text-sm); line-height: 18px; min-width: 0; white-space: nowrap; }
.card-meta-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-meta .lock svg { width: 14px; height: 14px; }
.star { opacity: 0; }
.card:hover .star, .star:focus-visible, .star.on { opacity: 1; }
.star.on { color: #e0a100; }
.lock { display: inline-grid; color: var(--c-ink-2); }

/* Board tile until real previews exist (no fake content): the empty dot grid in the canvas color
   and the board's initial in a 32 px square tinted by a hue picked from the board id. */
.thumb {
  position: relative;
  display: grid;
  place-items: center;
  /* 12:5, flatter than a 16:9 preview: a placeholder shouldn't take a preview's room. */
  aspect-ratio: 12 / 5;
  background-color: var(--c-canvas);
  background-image: radial-gradient(var(--c-grid) 1px, transparent 1.2px);
  background-size: 16px 16px;
  background-position: 8px 8px;
  border-bottom: 1px solid var(--c-line);
}
.thumb-initial {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: hsl(var(--hue) 70% 92%);
  color: hsl(var(--hue) 45% 34%);
  box-shadow: 0 0 0 1px hsl(var(--hue) 40% 82%);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.thumb-sm { width: 28px; height: 28px; border-radius: 6px; font-size: var(--text-sm); flex: none; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  .thumb-initial { background: hsl(var(--hue) 28% 26%); color: hsl(var(--hue) 70% 86%); box-shadow: 0 0 0 1px hsl(var(--hue) 22% 34%); }
  .thumb-sm { box-shadow: none; }
}

.board-table { width: 100%; border-collapse: collapse; background: var(--c-surface); border-radius: var(--radius-island); box-shadow: var(--shadow-card); }
.board-table th { text-align: left; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--c-ink-2); padding: 10px var(--space-3); border-bottom: 1px solid var(--c-line); }
.board-table td { padding: 8px var(--space-3); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.board-table tr:last-child td { border-bottom: 0; }
.board-table tbody tr:hover { background: var(--c-surface-hover); }
.board-table a { color: inherit; text-decoration: none; font-weight: var(--weight-medium); }
.board-table a:hover { text-decoration: underline; }
.row-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.row-actions { width: 44px; text-align: right; }
.row-owner { display: inline-flex; align-items: center; gap: var(--space-2); }
.cell-sub { color: var(--c-ink-2); font-size: var(--text-sm); }
tr.muted td { opacity: 0.65; }

/* The invite form and the members table share one content edge: both at most 960 px. */
.invite-form { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; width: 100%; max-width: 960px; }
.invite-form .btn, .invite-form .input, .invite-form .select { height: 36px; }
/* Members table: 56 px rows; fixed Teams, Role and Actions columns. */
.members-table { table-layout: fixed; }
.members-table td { height: 56px; padding-top: 0; padding-bottom: 0; }
.members-table td:first-child .row-title { overflow: hidden; }
.members-table .person-text { min-width: 0; }
.members-table .person-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members-table .col-teams { width: 160px; }
.members-table .col-role { width: 128px; }
.members-table .col-actions { width: 40px; }
.members-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members-table td.row-actions { padding: 0 4px 0 0; width: auto; }
.members-table .select { width: 100%; }
/* Teams under the person's identity: shown only at phone width, where the Teams column goes. */
.members-table .person-teams { display: none; color: var(--c-ink-2); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .members-table col.col-teams, .members-table :is(th, td):nth-child(2) { display: none; }
  .members-table .col-role { width: 88px; }
  .members-table .col-actions { width: 40px; }
  .members-table td { padding-top: 8px; padding-bottom: 8px; }
  .members-table td:first-child { padding-right: var(--space-2); }
  .members-table :is(th, td):nth-child(3) { padding-left: 4px; padding-right: 4px; }
  .members-table .person-teams { display: block; }
}
.role-static { color: var(--c-ink-2); padding-left: 9px; }
.island-flat { padding: var(--space-4); border-radius: var(--radius-island); background: var(--c-surface); box-shadow: var(--shadow-card); }
.sub-title { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--c-ink-2); margin-top: var(--space-2); }
.team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); }
.team-card { display: grid; gap: var(--space-2); align-content: start; }
.team-head { display: flex; align-items: center; justify-content: space-between; }
.team-head h2 { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.team-head a { color: inherit; text-decoration: none; }
.team-head a:hover { text-decoration: underline; }
.chip-list, .project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.project-list { display: grid; gap: 2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 4px; border-radius: var(--radius-pill); background: var(--c-surface-hover); font-size: var(--text-sm); }
.chip-x { border: 0; background: transparent; color: var(--c-ink-2); cursor: pointer; width: 20px; height: 20px; border-radius: var(--radius-pill); }
.chip-x:hover { background: var(--c-surface-pressed); color: var(--c-ink); }
.project-row { display: flex; align-items: center; gap: var(--space-2); height: 32px; color: var(--c-ink-2); }
.project-row a { flex: 1; color: var(--c-ink); text-decoration: none; }
.project-row a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .dash { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dash-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--c-line); gap: var(--space-2); }
  /* Links keep their intrinsic width (no "Mem…") and wrap with 8 px gaps. */
  .nav-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .nav-link { flex: none; }
  .nav-label { overflow: visible; }
  .nav-heading, .nav-empty, .nav-team { display: none; }
  .dash-main { padding: var(--space-4); }
  .boards-head .btn-lg span { display: none; }
}
@media (max-width: 480px) {
  /* Icons only; the name is the link's aria-label and tooltip. */
  .nav-label { display: none; }
  .nav-link { width: 32px; padding: 0; justify-content: center; }
}
.boards-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: center; }

/* Signed-in person at the sidebar's foot (AccountRow): same height and padding as a nav link. */
.account-row { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-1) 0 0 var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--c-line); }
.account-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.account-name, .account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name { font-size: var(--text-md); font-weight: var(--weight-medium); }
.account-email { font-size: var(--text-sm); color: var(--c-ink-2); }
/* Narrow: the row joins the wrapped nav row as avatar + menu; the name stays in the menu's label. */
@media (max-width: 760px) {
  .account-text { display: none; }
  .account-row { flex: none; min-height: 32px; border-top: 0; margin-top: 0; padding: 0 0 0 var(--space-1); }
}
/* Chrome styles. Tokens: tokens.css. Design: docs/design/design-system.md. *//*
 * Design tokens (docs/design/design-system.md). The canvas reads the same colors from
 * packages/canvas-engine/src/core/palette.ts (CANVAS_TOKENS); tokens.test.ts keeps them in step.
 * Inter (SIL OFL 1.1, ADR-0008), self-hosted, latin subset, variable weight 400–700.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Color: neutrals are a cool graphite; the one accent is Iris. */
  --c-canvas: #f3f4f6;
  --c-grid: #c3c9d2;
  --c-surface: #ffffff;
  --c-surface-hover: #f0f1f4;
  --c-surface-pressed: #e6e8ec;
  --c-ink: #1a1d23;
  --c-ink-2: #596070;
  --c-ink-3: #9aa1ad;
  --c-line: #e2e5ea;
  --c-line-strong: #cdd2da;
  --c-accent: #4a3fd8;
  --c-accent-hover: #3f35c2;
  --c-accent-soft: #ecebfd;
  --c-on-accent: #ffffff;
  --c-danger: #b4322a;
  --c-danger-soft: #fdeceb;
  --c-warn: #8a5300;
  --c-warn-soft: #fff4e0;
  --c-ok: #1d7a4f;
  --c-inverse: #1a1d23;
  --c-on-inverse: #f3f4f6;
  --c-scrim: rgba(26, 29, 35, 0.32);

  /* Type: Inter for all chrome. Scale steps of ~1.15 from 13 px. */
  --font-ui: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 20px;
  --weight-regular: 440;
  --weight-medium: 540;
  --weight-strong: 640;

  /* Space: 4 px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius: controls < islands < dialogs; pills for status and people. */
  --radius-control: 6px;
  --radius-island: 10px;
  --radius-dialog: 14px;
  --radius-pill: 999px;

  /* Elevation: a hairline ring plus a short and a long shadow. */
  --shadow-island: 0 0 0 1px rgba(26, 29, 35, 0.06), 0 1px 2px rgba(26, 29, 35, 0.06), 0 6px 20px rgba(26, 29, 35, 0.06);
  /* Resting surfaces of the management pages (cards, tables, forms). Same as islands in light; lighter in dark. */
  --shadow-card: var(--shadow-island);
  --shadow-pop: 0 0 0 1px rgba(26, 29, 35, 0.08), 0 4px 10px rgba(26, 29, 35, 0.08), 0 18px 48px rgba(26, 29, 35, 0.14);
  /* Menus and popovers (dialogs keep --shadow-pop). */
  --shadow-menu: 0 0 0 1px var(--c-line), 0 8px 24px rgba(26, 29, 35, 0.12);
  /* Edge of a color swatch, so white and pale swatches read on the surface. */
  --swatch-ring: inset 0 0 0 1px rgba(26, 29, 35, 0.18);

  /* Motion: short and only in answer to an action; cut under reduced motion. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* Layout: chrome insets the canvas fit respects (engine `insets`). */
  --chrome-gap: 12px;
  /* Two control heights: compact (toolbars, table rows, filters) and default (forms, dialogs,
     primary actions). */
  --control: 36px;
  --control-sm: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-canvas: #1a1c21;
    --c-grid: #363a44;
    --c-surface: #24272d;
    --c-surface-hover: #2e3138;
    --c-surface-pressed: #383c44;
    --c-ink: #eceef2;
    --c-ink-2: #a5abb7;
    --c-ink-3: #6c7280;
    --c-line: #34373e;
    --c-line-strong: #454a53;
    --c-accent: #8f87ff;
    --c-accent-hover: #a29bff;
    --c-accent-soft: #2b2850;
    --c-on-accent: #14122b;
    --c-danger: #ff8f80;
    --c-danger-soft: #3a2225;
    --c-warn: #f0b65a;
    --c-warn-soft: #362a17;
    --c-ok: #6fd3a0;
    --c-inverse: #eceef2;
    --c-on-inverse: #1a1d23;
    --c-scrim: rgba(0, 0, 0, 0.5);
    --shadow-island: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
    --shadow-menu: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.32);
    --swatch-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; height: 100%; }
body {
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
kbd {
  font: var(--weight-medium) var(--text-xs) / 1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  justify-content: center;
  border-radius: 4px;
  background: var(--c-surface-pressed);
  color: var(--c-ink-2);
}

/* ------------------------------------------------------------------ full-screen states */
.screen {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--space-5);
}
.screen-card {
  max-width: 420px;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.screen-card h1 { font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: -0.015em; margin-top: var(--space-2); }
.screen-card p { color: var(--c-ink-2); font-size: var(--text-lg); line-height: 1.5; }
.screen-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.screen-card p.screen-note { font-size: var(--text-md); color: var(--c-ink-2); }
.screen-card p.screen-note-error { color: var(--c-danger); }
/* Google's sign-in button: the neutral button with the "G" (Google branding guidelines). */
.btn-google { gap: 10px; }
.loading-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-ink-2);
}

/* ------------------------------------------------------------------ board layout */
.board { position: fixed; inset: 0; overflow: hidden; }
.board-canvas { position: absolute; inset: 0; }
.board-loading { position: absolute; inset: 0; background: var(--c-canvas); }

.island {
  background: var(--c-surface);
  border-radius: var(--radius-island);
  box-shadow: var(--shadow-island);
}

.topbar {
  position: absolute;
  top: var(--chrome-gap);
  left: var(--chrome-gap);
  right: var(--chrome-gap);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.board-id {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-3) 0 var(--space-2);
  min-width: 0;
}
.brand {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-control);
}
.brand:hover { background: var(--c-surface-hover); }
.board-sep { width: 1px; height: 18px; background: var(--c-line); }
.board-title {
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32vw;
}
.topbar-right { display: flex; align-items: center; gap: var(--space-2); }

/* Save status: quiet when saved, colored only when something needs attention. */
.save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Fits "Saving…", so the title island keeps its width between Saved and Saving…. */
  min-width: 72px;
  font-size: var(--text-sm);
  color: var(--c-ink-2);
  white-space: nowrap;
}
.save-icon { display: inline-grid; place-items: center; width: 14px; height: 14px; }
.save-saved .save-icon { color: var(--c-ok); }
.save-offline { color: var(--c-warn); font-weight: var(--weight-medium); }
.save-unsaved, .save-reload-required, .save-access-removed, .save-sign-in-required { color: var(--c-danger); font-weight: var(--weight-medium); }

/* People on the board. */
.people { display: flex; align-items: center; padding-right: var(--space-1); }
.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  margin-left: -6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: #1a1d23;
  box-shadow: 0 0 0 2px var(--c-canvas);
  user-select: none;
}
/* Your own avatar: your person color (as everywhere else, `colorFor`), first in the row. */
.avatar-me { order: -1; margin-left: 0; }
.avatar-more { background: var(--c-surface-pressed); color: var(--c-ink-2); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control);
  padding: 0 var(--space-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--c-surface-hover); }
.btn:active:not(:disabled) { background: var(--c-surface-pressed); }
.btn:disabled { cursor: default; color: var(--c-ink-2); }
.btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn-primary:active:not(:disabled) { background: color-mix(in srgb, var(--c-accent-hover) 88%, #000); border-color: transparent; }
/* A disabled primary keeps its fill, faded (the generic disabled color would sit on the accent). */
.btn-primary:disabled { color: var(--c-on-accent); opacity: 0.45; }
.btn-small { height: var(--control-sm); padding: 0 10px; font-size: var(--text-sm); }
.island-btn { height: 40px; border: 0; border-radius: var(--radius-island); box-shadow: var(--shadow-island); padding: 0 14px 0 12px; }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--control);
  height: var(--control);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover:not(:disabled) { background: var(--c-surface-hover); }
.icon-btn:active:not(:disabled) { background: var(--c-surface-pressed); }
.icon-btn[aria-expanded='true'] { background: var(--c-surface-pressed); }
/* Selected keeps its accent identity on hover; pressed is a little darker. */
.icon-btn.active, .icon-btn.active:hover:not(:disabled) { background: var(--c-accent-soft); color: var(--c-accent); }
.icon-btn.active:active:not(:disabled) { background: color-mix(in srgb, var(--c-accent-soft) 86%, var(--c-accent)); }
.icon-btn:disabled { color: var(--c-ink-3); cursor: default; }

:is(.btn, .icon-btn, .zoomval, .brand, .toast-close):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Tooltips: label + shortcut, shown on hover and keyboard focus (the button has the name). */
.tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-4px, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 6px 5px 9px;
  border-radius: var(--radius-control);
  background: var(--c-inverse);
  color: var(--c-on-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 10;
}
.tip kbd { background: color-mix(in srgb, var(--c-on-inverse) 16%, transparent); color: var(--c-on-inverse); }
.tip-up { left: 50%; top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 4px); }
/* Buttons at a window edge: the tooltip lines up with the button's outer edge instead of centring,
   so it never runs past the window (Undo at the left, Fit board at the right). */
.tip-up.tip-start { left: 0; transform: translate(0, 4px); }
.tip-up.tip-end { left: auto; right: 0; transform: translate(0, 4px); }
:is(.icon-btn, .zoomval):is(:hover, :focus-visible) > .tip { opacity: 1; transform: translate(0, -50%); transition-delay: 350ms; }
:is(.icon-btn, .zoomval):is(:hover, :focus-visible) > .tip-up { transform: translate(-50%, 0); }
:is(.icon-btn, .zoomval):is(:hover, :focus-visible) > .tip-up:is(.tip-start, .tip-end) { transform: translate(0, 0); }
:is(.icon-btn, .zoomval):focus-visible > .tip { transition-delay: 0ms; }
.icon-btn:disabled > .tip { display: none; }

/* ------------------------------------------------------------------ tool rail */
.toolbar {
  position: absolute;
  left: var(--chrome-gap);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
}
.toolbar-group { display: flex; flex-direction: column; gap: 2px; }
.toolbar-sep { height: 1px; background: var(--c-line); margin: var(--space-1) 6px; }

/* ------------------------------------------------------------------ zoom bar */
.bottom-right {
  position: absolute;
  right: var(--chrome-gap);
  bottom: var(--chrome-gap);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.zoombar { display: flex; align-items: center; padding: 2px; gap: 0; }
.zoombar .icon-btn { width: var(--control-sm); height: var(--control-sm); }
.help-btn { color: var(--c-ink-2); }
.zoomval {
  position: relative;
  min-width: 52px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.zoomval { transition: background var(--dur-fast) var(--ease-out); }
.zoomval:hover { background: var(--c-surface-hover); }
.zoomval[aria-expanded='true'] { background: var(--c-surface-pressed); }

/* ------------------------------------------------------------------ banner, toasts */
.banner {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(640px, calc(100vw - 2 * var(--chrome-gap) - 72px));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-island);
  box-shadow: var(--shadow-island);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}
.banner > svg { flex: none; }
.banner-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.banner-warn { background: var(--c-warn-soft); color: var(--c-warn); }
.banner .btn { flex: none; }

.toasts {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(560px, 80vw);
  padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3);
  border-radius: var(--radius-island);
  background: var(--c-inverse);
  color: var(--c-on-inverse);
  box-shadow: var(--shadow-pop);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast > svg { flex: none; }
.toast-error > svg { color: #ff8f80; }
.toast-success > svg { color: #6fd3a0; }
@media (prefers-color-scheme: dark) {
  .toast-error > svg { color: #b4322a; }
  .toast-success > svg { color: #1d7a4f; }
}
.toast-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; background: color-mix(in srgb, var(--c-on-inverse) 12%, transparent); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
}
/* Popovers and menus open with a short lift; the context toolbar (placed by transform) only fades. */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
}
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}
.popover, .menu-list, .combo-list { animation: pop-in var(--dur-fast) var(--ease-out); }

/* ------------------------------------------------------------------ empty state */
.empty-hint {
  position: absolute;
  left: calc(50% + 28px);
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  max-width: 320px;
  text-align: center;
  pointer-events: none;
}
.empty-hint .btn { pointer-events: auto; margin-top: var(--space-2); }
.empty-title { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.empty-body { color: var(--c-ink-2); line-height: 1.5; text-wrap: balance; }
.place-hint {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-inverse);
  color: var(--c-on-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  pointer-events: none;
}

/* ------------------------------------------------------------------ spinner */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  opacity: 0.8;
}
.spinner-sm { width: 10px; height: 10px; border-width: 1.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-right-color: currentColor; opacity: 0.45; }
  .toast, .popover, .menu-list, .combo-list, .ctx-toolbar, .tool-options, .sheet[open], .sheet[open]::backdrop { animation: none; }
}

/* ------------------------------------------------------------------ shortcuts sheet */
.sheet {
  width: min(560px, calc(100vw - 32px));
  /* Near the top, not re-centred: a dialog that grows (the share dialog's invite-link row) stays put. */
  margin: 12vh auto auto;
  max-height: calc(88vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-dialog);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-pop);
}
.sheet::backdrop { background: var(--c-scrim); }
.sheet[open] { animation: sheet-in var(--dur-base) var(--ease-out); }
.sheet[open]::backdrop { animation: fade-in var(--dur-base) var(--ease-out); }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5);
}
.sheet-head h2 { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.sheet-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-2) var(--space-5) var(--space-5);
}
.sheet-body:focus { outline: none; } /* focused on open so arrow keys scroll the list */
.sheet-body section:last-child { grid-column: 1 / -1; }
.sheet-body h3 { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--c-ink-2); margin-bottom: var(--space-2); }
.sheet-body dl { margin: 0; display: grid; gap: 6px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sc-row dt { color: var(--c-ink); }
.sc-row dd { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  .sheet-body { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ text editor (canvas proxy) */
[data-canvas-root] textarea::selection { background: color-mix(in srgb, var(--c-accent) 28%, transparent); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 640px) {
  .board-title { max-width: 40vw; }
  .people { display: none; }
  .island-btn span:last-child { display: none; }
  .island-btn { padding: 0 11px; }
  .help-btn { display: none; }
}

/* ------------------------------------------------------------------ forms, menus, dialogs (sharing and dashboard) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.input, .select {
  height: var(--control);
  padding: 0 var(--space-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  min-width: 0;
}
.input { padding: 0 10px; }
.input::placeholder { color: var(--c-ink-2); }
.select {
  appearance: none;
  padding-right: 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23596070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (prefers-color-scheme: dark) {
  .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a5abb7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E"); }
}
.select:disabled { cursor: default; color: var(--c-ink-2); }
/* Compact: table rows and filters. */
.select-plain { height: var(--control-sm); border-color: transparent; padding-left: 0; font-weight: var(--weight-medium); background-color: transparent; }
/* As wide as the chosen option, so the chevron sits by the label (the share dialog's General access). */
.select-plain { width: auto; justify-self: start; field-sizing: content; padding-right: 24px; }
@supports not (field-sizing: content) {
  .select-plain { min-width: 120px; }
}
.select-plain:hover { border-color: var(--c-line-strong); }
:is(.input, .select):focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); background: var(--c-danger); }
.btn-lg { height: var(--control); padding: 0 var(--space-4); }
.icon-btn-sm { width: 26px; height: 26px; color: var(--c-ink-2); }
.pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: var(--radius-pill);
  background: var(--c-surface-pressed);
  color: var(--c-ink-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  vertical-align: 1px;
  white-space: nowrap;
}
.pill-warn, .pill-role { background: var(--c-warn-soft); color: var(--c-warn); }
.pill-role { margin-left: 0; }

.field { display: grid; gap: 4px; font-size: var(--text-sm); color: var(--c-ink-2); font-weight: var(--weight-medium); }
.field .input, .field .select { font-size: var(--text-md); color: var(--c-ink); font-weight: var(--weight-regular); }
.field-grow { flex: 1; }
.form { display: grid; gap: var(--space-3); }
.form-error { color: var(--c-danger); font-size: var(--text-sm); }
.form-hint { color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.45; }

.modal { width: min(440px, calc(100vw - 32px)); }
.modal-wide { width: min(600px, calc(100vw - 32px)); }
.modal-body { padding: var(--space-1) var(--space-5) var(--space-5); }
.modal-text { color: var(--c-ink-2); line-height: 1.5; margin-bottom: var(--space-4); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

.menu { position: relative; }
.menu-trigger { width: 30px; height: 30px; color: var(--c-ink-2); }
.menu-list {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 190px;
  padding: 4px;
  display: grid;
  box-shadow: var(--shadow-menu);
}
.menu-right { right: 0; }
.menu-left { left: 0; }
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--c-surface-hover); outline: none; }
.menu-item:disabled { color: var(--c-ink-3); cursor: default; }
.menu-item.danger { color: var(--c-danger); }
.menu-sep { height: 1px; background: var(--c-line); margin: 4px 6px; }

.avatar-static { margin-left: 0; box-shadow: none; color: #fff; flex: none; }

/* ------------------------------------------------------------------ board top bar: title, share */
.board-title-btn {
  border: 0;
  background: transparent;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: var(--radius-control);
  font: inherit;
  color: inherit;
  cursor: text;
  display: block;
  max-width: 32vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-title-btn:hover { background: var(--c-surface-hover); }
.board-name { display: flex; align-items: center; gap: 2px; min-width: 0; }
.board-menu-wrap { position: relative; flex: none; }
.board-menu-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.board-menu-btn:hover, .board-menu-btn[aria-expanded='true'] { background: var(--c-surface-hover); color: var(--c-ink); }
.board-menu-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.popover.board-menu { top: calc(100% + 12px); left: -8px; }
.board-title-btn:focus-visible { outline: 2px solid var(--c-accent); }
.board-title-input {
  height: 28px;
  width: min(32vw, 360px);
  padding: 0 6px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-ink);
  font: var(--weight-strong) var(--text-md) / 1 var(--font-ui);
  outline: none;
}
.share-btn { padding: 0 14px 0 12px; }
.banner-info { background: var(--c-warn-soft); color: var(--c-warn); }

/* ------------------------------------------------------------------ share dialog */
/* 600 px wide (.modal-wide), 24 px padding (.modal-body), 24 px between sections. */
.share { display: grid; gap: var(--space-5); padding-top: var(--space-2); }
.share-invite { display: flex; gap: var(--space-2); align-items: center; }
.combo { position: relative; flex: 1; display: grid; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; margin: 0; padding: 4px; list-style: none; box-shadow: var(--shadow-menu); }
.combo-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; cursor: pointer; }
.combo-item:hover, .combo-item:focus-visible { background: var(--c-surface-hover); outline: none; }
.combo-text { display: grid; }
.combo-sub, .person-sub, .general-sub { color: var(--c-ink-2); font-size: var(--text-sm); }
.share-section { display: grid; gap: var(--space-3); }
.share-section-head { display: grid; gap: 2px; }
.share-section h3 { font-size: var(--text-md); line-height: 20px; font-weight: 600; color: var(--c-ink); }
.share .form-hint, .share-help { font-size: var(--text-sm); line-height: 18px; color: var(--c-ink-2); }
.share-invite .input, .share-invite .select, .share-invite .btn { height: 36px; }
.share .role-select, .role-fixed { width: 132px; flex: none; }
.role-fixed { padding-left: 9px; color: var(--c-ink-2); }
.link-row-label { flex: 1; min-width: 0; }
.general-row, .person-row { display: flex; align-items: center; gap: var(--space-3); }
.general-icon, .team-badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--c-surface-pressed); color: var(--c-ink-2); flex: none; }
.general-text, .person-text { display: grid; flex: 1; min-width: 0; }
.person-text > :not(.person-name) { overflow-wrap: anywhere; }
@media (max-width: 480px) { .share .role-select, .role-fixed { width: 104px; } .person-row { gap: var(--space-2); } }
.general-label { font-weight: var(--weight-medium); }
.person-name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list, .links-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-height: 260px; overflow: auto; }
.link-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.link-item { display: flex; align-items: center; gap: var(--space-2); color: var(--c-ink-2); font-size: var(--text-sm); }
.link-text { flex: 1; }
.copy-field { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.copy-field .input { flex: 1; min-width: 220px; font-size: var(--text-sm); }
.share-note { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-control); background: var(--c-accent-soft); line-height: 1.45; }
.share-foot { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--c-line); margin: 0 calc(-1 * var(--space-5)); padding: var(--space-4) var(--space-5) 0; }
.share-flash { flex: 1; min-width: 0; color: var(--c-ok); font-size: var(--text-sm); }
.share-flash.is-error { color: var(--c-danger); }
/* Phone width: the invite field and the link-role label each take a full row; the role select and
   the button share the next one, 8 px apart. */
@media (max-width: 480px) {
  .share-invite { flex-wrap: wrap; }
  .share-invite .combo, .link-row-label { flex: 1 1 100%; }
  .share-invite .select, .link-row .select { flex: 1; min-width: 0; }
}

/* ------------------------------------------------------------------ dev switcher (DEV_AUTH=1 only) */
.dev-switcher { position: relative; margin-top: var(--space-2); }
.dev-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 10px 0 4px; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--c-ink-2); font-size: var(--text-sm); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dev-tag { padding: 1px 6px; border-radius: var(--radius-pill); background: var(--c-warn-soft); color: var(--c-warn); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.dev-panel { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; width: 280px; padding: var(--space-3); display: grid; gap: var(--space-2); box-shadow: var(--shadow-menu); text-align: left; }
.dev-compact .dev-panel { bottom: auto; top: calc(100% + 6px); }
.dev-note { color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.4; }
.dev-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.dev-person { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 4px 6px; border: 0; border-radius: var(--radius-control); background: transparent; cursor: pointer; text-align: left; }
.dev-person:hover:not(:disabled) { background: var(--c-surface-hover); }
.dev-person:disabled { cursor: default; background: var(--c-accent-soft); }
.dev-person-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-person-role { color: var(--c-ink-2); font-size: var(--text-xs); }
.dev-form { display: flex; gap: 6px; }
.dev-form .input { flex: 1; height: 26px; font-size: var(--text-sm); }

/* ------------------------------------------------------------------ uploads (FIL-5, CNV-150) */
.drop-overlay {
  position: absolute;
  inset: var(--space-3);
  display: grid;
  place-items: center;
  border: 2px dashed var(--c-accent);
  border-radius: var(--radius-island);
  background: color-mix(in srgb, var(--c-accent-soft) 55%, transparent);
  color: var(--c-accent);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  pointer-events: none;
}
.upload-issue {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(560px, calc(100vw - 2 * var(--chrome-gap) - 72px));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-island);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  box-shadow: var(--shadow-island);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}
.upload-issue > svg { flex: none; }
.upload-issue span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-issue .btn { flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }