/*
 * Drawplain product UI layer
 * Direction: calm creator workspace, Apple-like restraint, content first.
 * Green is not a brand requirement. Red is reserved for recording state.
 */

:root {
  /* Recorder UI tokens */
  --brand: #0066cc !important;
  --danger: #ff3b30 !important;
  --danger-hover: #e62f25 !important;
  --success: #30a14e !important;
  --warning: #d97706 !important;
  --surface: rgba(250, 250, 252, 0.92) !important;
  --surface-solid: rgba(250, 250, 252, 0.97) !important;
  --border: rgba(60, 60, 67, 0.16) !important;
  --text-1: rgba(29, 29, 31, 0.94) !important;
  --text-2: rgba(60, 60, 67, 0.68) !important;
  --text-3: rgba(60, 60, 67, 0.42) !important;
  --hover: rgba(60, 60, 67, 0.08) !important;
  --active: rgba(0, 102, 204, 0.12) !important;
  --shadow: 0 12px 38px rgba(0, 0, 0, 0.14) !important;
}

/* Main workspace: one cool-neutral system with a single interaction accent. */
.excalidraw.excalidraw,
.excalidraw.excalidraw.theme--light {
  --color-primary: #0066cc !important;
  --color-primary-hover: #0071e3 !important;
  --color-primary-darker: #0057b8 !important;
  --color-primary-darkest: #004a99 !important;
  --color-primary-light: #e8f2ff !important;
  --color-primary-light-darker: #d5e8ff !important;
  --color-primary-contrast-offset: #005fbe !important;
  --color-brand-hover: #0071e3 !important;
  --color-brand-active: #0057b8 !important;
  --color-logo-icon: #1d1d1f !important;
  --color-logo-text: #1d1d1f !important;
  --color-selection: #0066cc !important;
  --color-on-primary-container: #003b70 !important;
  --color-surface-primary-container: #e8f2ff !important;
  --color-surface-lowest: #ffffff !important;
  --color-surface-mid: #f7f7f8 !important;
  --color-surface-high: #f0f0f2 !important;
  --color-surface-low: #e8e8ed !important;
  --color-on-surface: #1d1d1f !important;
  --color-slider-track: #d1d1d6 !important;
  --island-bg-color: #ffffff !important;
  --popup-bg-color: #ffffff !important;
}

.excalidraw.excalidraw.theme--dark {
  --color-primary: #0a84ff !important;
  --color-primary-hover: #409cff !important;
  --color-primary-darker: #0071e3 !important;
  --color-primary-darkest: #68adff !important;
  --color-primary-light: #21344a !important;
  --color-primary-light-darker: #29415d !important;
  --color-primary-contrast-offset: #409cff !important;
  --color-brand-hover: #409cff !important;
  --color-brand-active: #68adff !important;
  --color-logo-icon: #f5f5f7 !important;
  --color-logo-text: #f5f5f7 !important;
  --color-selection: #0a84ff !important;
  --color-on-primary-container: #d9ebff !important;
  --color-surface-primary-container: #21344a !important;
  --color-surface-lowest: #1c1c1e !important;
  --color-surface-mid: #232326 !important;
  --color-surface-high: #2c2c2e !important;
  --color-surface-low: #343437 !important;
  --color-on-surface: #f5f5f7 !important;
  --color-slider-track: #48484a !important;
  --island-bg-color: #2c2c2e !important;
  --popup-bg-color: #2c2c2e !important;
}

/* Keep floating controls crisp and quiet. */
.excalidraw .Island {
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.08) !important;
}

.excalidraw.theme--dark .Island {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
}

/* Welcome: text wordmark only. No bean, mascot, or decorative logo mark. */
.excalidraw .ExcalidrawLogo-icon,
.excalidraw .welcome-screen-center__logo svg {
  display: none !important;
}

.excalidraw .welcome-screen-center__logo {
  gap: 0 !important;
  color: #1d1d1f !important;
  filter: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "PingFang SC", "Helvetica Neue", sans-serif !important;
  font-size: 34px !important;
  font-weight: 650 !important;
  letter-spacing: -0.045em !important;
}

.excalidraw .welcome-screen-center__heading {
  max-width: 520px !important;
  color: #6e6e73 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Helvetica Neue", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

.excalidraw .welcome-screen-center__heading::after {
  content: none;
}

.excalidraw.theme--dark .welcome-screen-center__logo {
  color: #f5f5f7 !important;
}

.excalidraw.theme--dark .welcome-screen-center__heading {
  color: #aeaeb2 !important;
}

/* Recording entry: neutral until recording starts; red remains a tiny state cue. */
._iconButton_1fnlc_7 {
  color: #1d1d1f !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(60, 60, 67, 0.18) !important;
  border-radius: 11px !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1) !important;
}

._iconButton_1fnlc_7:hover {
  background: #f2f2f4 !important;
}

._iconButton_1fnlc_7[data-active="true"] {
  color: #0066cc !important;
  background: #e8f2ff !important;
  border-color: rgba(0, 102, 204, 0.28) !important;
}

._recordOuter_1fnlc_31 {
  border-color: #3a3a3c !important;
}

._recordInner_1fnlc_51,
._indicatorDot_1fnlc_95 {
  background: #ff3b30 !important;
}

/* Recording controls use the same light material as the drawing toolbar. */
._panel_1iaeh_1 {
  background: rgba(250, 250, 252, 0.94) !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.16) !important;
}

._toolButton_1iaeh_58 {
  color: #1d1d1f !important;
}

._toolButton_1iaeh_58:hover:not(:disabled) {
  background: rgba(60, 60, 67, 0.08) !important;
}

._toolButton_1iaeh_58[data-active="true"] {
  color: #0066cc !important;
  background: #e8f2ff !important;
}

._label_1iaeh_95 {
  color: #6e6e73 !important;
}

._separator_1iaeh_44,
._dragHandle_1iaeh_23 {
  border-color: rgba(60, 60, 67, 0.14) !important;
}

._dragHandle_1iaeh_23 {
  color: #8e8e93 !important;
}

/* Recorder popovers were originally tuned for a dark panel. Normalize them. */
._popover_1jmgo_1 {
  color: #1d1d1f !important;
  background: rgba(250, 250, 252, 0.97) !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}

._arrow_1jmgo_21 {
  background: rgba(250, 250, 252, 0.97) !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}

._segmentBtn_1jmgo_65,
._select_1jmgo_50,
._quickRestore_1qr4h_13,
._freeDraw_1qr4h_14,
._presetCard_1qr4h_49,
._outputModeCard_1qr4h_132,
._screenCard_1qr4h_193 {
  color: #1d1d1f !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}

._quickFull_1qr4h_12 {
  color: #0057b8 !important;
  background: #e8f2ff !important;
  border-color: #8fc4f5 !important;
}

._segmentBtn_1jmgo_65[data-active="true"] {
  color: #0057b8 !important;
  background: #e8f2ff !important;
  border-color: #8fc4f5 !important;
}

._ratioThumb_1qr4h_70 {
  background: #cfe5ff !important;
  border-color: #9bc8f4 !important;
}

._outputModeCard_1qr4h_132[data-active="true"] {
  color: #0057b8 !important;
  background: #e8f2ff !important;
  border-color: #8fc4f5 !important;
}

._startButton_1jymq_251 {
  color: #ffffff !important;
  background: #1d1d1f !important;
  border-color: #1d1d1f !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
}

._startButton_1jymq_251:hover:not(:disabled) {
  background: #343436 !important;
  border-color: #343436 !important;
}

._toolButton_1iaeh_58:focus-visible,
._segmentBtn_1jmgo_65:focus-visible,
._quickFull_1qr4h_12:focus-visible,
._quickRestore_1qr4h_13:focus-visible,
._presetCard_1qr4h_49:focus-visible,
._freeDraw_1qr4h_14:focus-visible,
._outputModeCard_1qr4h_132:focus-visible,
._screenCard_1qr4h_193:focus-visible {
  outline: 2px solid rgba(0, 102, 204, 0.72) !important;
  outline-offset: 2px !important;
}

/* Finish Studio theming now lives in the FinishStudio CSS module (2026-07-20). */

/*
 * Native video fullscreen must preserve the recording's intrinsic aspect ratio.
 * Finish Studio uses object-fit: fill inside an already aspect-correct viewport;
 * that rule must not stretch the video when Chrome promotes it to the screen.
 */
video:fullscreen,
video:-webkit-full-screen,
:fullscreen video,
:-webkit-full-screen video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000000 !important;
}

@media (prefers-reduced-motion: reduce) {
  .excalidraw * {
    scroll-behavior: auto !important;
  }
}