/* Selected component treatment: option 2, Soft. */
body[data-component-style] {
  --control-ground: #f6f6f2;
  --control-ink: #101b24;
  --control-muted: #4b5660;
  --control-line: #8b959c;
  --control-blue: #226192;
  --control-tint: #eae6de;
}
body[data-component-style]:has(.screen[data-theme="dark"]) {
  --control-ground: #000;
  --control-ink: #eae6de;
  --control-muted: #b6c1ca;
  --control-line: #627581;
  --control-blue: #82b7df;
  --control-tint: #101c25;
}
body[data-component-style] .route-toggle button,
body[data-component-style] .bottom-nav a,
body[data-component-style] .board-here,
body[data-component-style] .appearance-menu button {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
body[data-component-style] .icon-button { border-radius: 8px; }
body[data-component-style] .icon-button:hover { background: var(--control-tint); }
body[data-component-style] dialog,
body[data-component-style] .appearance-menu {
  background: var(--control-ground);
  color: var(--control-ink);
  border: 1px solid var(--control-line);
  padding: 20px;
}
body[data-component-style] dialog[data-theme] p { color: var(--control-muted); }
body[data-component-style] dialog[data-theme] .dialog-head button {
  background: var(--control-tint);
  color: var(--control-ink);
  border-radius: 8px;
}
body[data-component-style] .appearance-menu { padding: 8px; }
body[data-component-style] .appearance-menu p { padding: 4px 8px; }
body[data-component-style] .appearance-menu button { min-height: 44px; border-radius: 6px; }
body[data-component-style] .appearance-menu[data-theme] button[aria-pressed="true"] {
  background: var(--control-tint); color: var(--control-blue);
}
body[data-component-style] #preview-form input { border-color: var(--control-line); }
body[data-component-style="soft"] .screen .route-toggle {
  padding: 3px; gap: 4px; border: 1px solid var(--rule); border-radius: 16px;
  background: var(--ground);
}
body[data-component-style="soft"] .screen .route-toggle button {
  min-height: 44px; border-radius: 12px; border: 0;
}
body[data-component-style="soft"] .screen .route-toggle button:not([aria-pressed="true"]) { background: transparent; }
body[data-component-style="soft"] .screen .picker-field,
body[data-component-style="soft"] .screen .inspect-picker { border-radius: 12px; background: var(--route-tint); }
body[data-component-style="soft"] .screen .bottom-nav { align-items: center; gap: 4px; }
body[data-component-style="soft"] .screen .bottom-nav a { padding: 12px 14px; border: 0; border-radius: 12px; }
body[data-component-style="soft"] .screen .bottom-nav a.active { background: var(--route-solid); color: var(--on-route); font-weight: 650; }
body[data-component-style="soft"] dialog { border-radius: 20px; }
body[data-component-style="soft"] .appearance-menu { border-radius: 14px; }
body[data-component-style="soft"] .icon-button,
body[data-component-style="soft"] .dialog-head button { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  body[data-component-style] * { transition: none !important; }
}