@layer views {
  /* ── sketch pad: a full-viewport dialog; the canvas itself is always white (ink assumes
     it), the chrome around it follows the app's own light/dark tokens ── */
  dialog.sketch {
    position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; overflow: hidden;
    display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
  }
  dialog.sketch::backdrop { background: rgb(0 0 0 / .45); }

  dialog.sketch .sketch-bar {
    order: 0; flex: none; position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 10px calc(12px + env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--line); background: var(--bg-raise);
  }

  dialog.sketch .sketch-close {
    flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0;
    display: grid; place-items: center; background: var(--surface-2); color: var(--fg);
    font-size: 20px; line-height: 1; transition: background var(--t-fast);
  }
  dialog.sketch .sketch-close:hover { background: var(--line); }

  dialog.sketch .sketch-group {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  }

  dialog.sketch .sketch-tool,
  dialog.sketch .sketch-width {
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-pill);
    display: grid; place-items: center; background: transparent; color: var(--muted);
    transition: background var(--t-fast), color var(--t-fast);
    & svg { width: 16px; height: 16px; }
    &:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); }
    &:disabled { opacity: .35; cursor: not-allowed; }
    &[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  }

  dialog.sketch .sketch-swatch {
    width: 24px; height: 24px; padding: 0; border-radius: 50%;
    border: 1.5px solid var(--line-2); background: transparent;
    &[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
  }

  dialog.sketch .sketch-width i {
    display: block; border-radius: 50%; background: currentColor;
  }

  dialog.sketch .sketch-done { margin-left: auto; flex: none; }

  dialog.sketch .sketch-bar button:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
  }

  dialog.sketch .sketch-surface {
    order: 1; flex: 1 1 auto; min-height: 0; position: relative;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    padding: 16px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  }

  dialog.sketch .sketch-canvas {
    display: block; background: #fff; border-radius: var(--r-tile);
    box-shadow: var(--shadow-float); touch-action: none; cursor: crosshair;
    &[data-tool="eraser"] { cursor: cell; }
    &[data-tool="text"] { cursor: text; }
  }

  dialog.sketch .sketch-text-input {
    position: absolute; z-index: 3; min-width: 60px; line-height: 1.2;
    padding: 1px 4px; margin: 0; border: 1.5px dashed var(--grad-b); border-radius: 4px;
    background: rgb(255 255 255 / .92); font-family: var(--font); font-weight: 600;
    outline: none;
  }

  /* narrow screens: toolbar reads better pinned to the bottom, thumb-reachable */
  @media (max-width: 640px) {
    dialog.sketch .sketch-bar {
      order: 1; border-bottom: 0; border-top: 1px solid var(--line);
      padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      justify-content: center;
    }
    dialog.sketch .sketch-surface { order: 0; padding-bottom: 16px; }
    dialog.sketch .sketch-done { margin-left: 0; flex-basis: 100%; order: 10; }
  }
}