/* Image gallery. Layout matches the login and customize pages: a
   dark header bar at the top with the page title, a scrollable main
   area for the image tiles, an optional status row just above the
   bottom toolbar, and a bottom toolbar with the same look/feel as the
   login page (dev action on the left, primary actions on the right). */

h1,
h2,
h3,
h4,
h5,
h6,
p,
input {
  font-family: var(--editor-font-family, Arial, Helvetica, sans-serif);
}

/* Outer page: a flex column that fills the viewport so the header
   stays pinned at the top and the gallery tiles scroll inside the
   main area. */
#image-gallery-div.image-gallery-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background-color: var(--gallery-content-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  text-align: left;
  overflow: hidden;
}

/* Top header bar — same dimensions/style as .customize-header. */
.image-gallery-heading-div {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0.75rem 1.5rem;
  background-color: var(--top-toolbar-background-color);
  color: var(--toolbar-text-color);
  border-bottom: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
}

.image-gallery-heading {
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: normal;
  color: var(--header-1-color);
  background-color: transparent;
}

/* Main scrollable area: image grid lives here. */
.gallery-images-container {
  flex: 1 1 auto;
  overflow: auto;
  padding: 2.25rem 2rem 1.5rem;
}

.gallery-images-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
}

/* Image tile: a rounded clickable card, same look/feel as the home
   project tile. */
.gallery-image-group-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px 12px;
  border-radius: var(--corner-radius);
  border: 1px solid var(--editor-control-border-color);
  background-color: var(--gallery-tile-bg, var(--editor-input-bg, #ffffff));
  max-width: 150px;
  cursor: default;
}

.gallery-image-group-div:focus {
  outline: 2px solid var(--editor-selected-blue);
  outline-offset: -2px;
}

.gallery-image-div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
}

.gallery-image-div img {
  display: block;
  max-width: 110px;
  max-height: 110px;
}

#editing-input {
  width: 110px;
  margin: 5px 0 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-size: 0.85rem;
}

.image-name-p {
  display: block;
  width: 110px;
  margin: 6px 0 0;
  overflow: hidden;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
  color: var(--editor-text-color);
}

/* Status row — its own section, sitting just above the bottom toolbar
   so the toolbar reads as a clean action row. */
#status {
  flex: none;
  margin: 0;
  padding: 0.5rem 1.5rem;
  background-color: transparent;
  color: var(--editor-text-color);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

/* Bottom action toolbar — same look/feel as the login page's
   `.login-button-div`: dev action on the left, spacer, primary
   actions on the right. */
.image-gallery-footer-div {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  border-top: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
}

.image-gallery-dev-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.image-gallery-footer-spacer {
  flex: 1 1 auto;
}

.buttons {
  min-width: auto;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius);
  background-color: var(--button-bg);
  color: var(--button-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.buttons:hover:not(:disabled) {
  background-color: var(--button-bg-hover);
}

.ok-button:disabled {
  border-color: var(--editor-control-border-color);
  background-color: var(--editor-panel-separator-color);
  color: var(--editor-muted-text-color);
  cursor: not-allowed;
  opacity: 0.45;
}

/* Light-mode: main gallery area matches the editor's canvas surface;
   image tiles use the white "clickable surface" so they pop against
   the gray page. */
html[data-theme="light"] {
  --gallery-content-bg: var(--canvas-background-color);
  --gallery-tile-bg: #ffffff;
}

/* Dark-mode: gallery area uses the panel surface (same as customize
   and home); tiles use the top-toolbar surface so they read as
   elevated controls. */
html[data-theme="dark"] {
  --gallery-content-bg: var(--editor-panel-background-color);
  --gallery-tile-bg: var(--top-toolbar-background-color);
}

/* Status bar. Used on the Home, Customize, Login, Signup, Images, and
   editor pages. Sits flush with the bottom of the page; in the editor
   it pins below the canvas/panels and spans the full viewport. */

.status-bar {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.75rem;
  height: 26px;
  padding: 0 0.9rem;
  background-color: var(--status-bar-bg, var(--top-toolbar-background-color));
  color: var(--status-bar-text, var(--toolbar-text-color));
  border-top: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  user-select: none;
  box-sizing: border-box;
}

.status-bar-spacer {
  flex: 1 1 auto;
}

.status-bar-left,
.status-bar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-bar-right {
  justify-content: flex-end;
  color: var(--status-bar-muted, var(--editor-muted-text-color));
}

.status-bar-error {
  color: #c0392b;
}

/* Editor variant pins to the bottom of the viewport. The editor
   renders two of these — one spanning the left toolbar + layers tree,
   one spanning the details panel — and positions each via an inline
   `left`/`right`/`width` style so the canvas region in between is left
   uncovered. The left toolbar, tree, and details panels stop at
   --status-bar-height (see App.css) so they don't overlap. */
.status-bar-editor {
  position: fixed;
  bottom: 0;
  z-index: 15;
}

/* Light-mode: a softer surface than the dark top-toolbar so the bar
   doesn't read as a black slab against the canvas-gray pages. */
html[data-theme="light"] {
  --status-bar-bg: #e1e1e6;
  --status-bar-text: #46454e;
  --status-bar-muted: #6a6973;
}

/* Dark-mode: matches the top-toolbar surface. */
html[data-theme="dark"] {
  --status-bar-bg: var(--top-toolbar-background-color);
  --status-bar-text: var(--editor-text-color);
  --status-bar-muted: var(--editor-muted-text-color);
}

/* Authentication pages (login + signup). Layout mirrors the customize
   page: a dark header bar at the top with the page title, then a
   scrollable main area below that centers the form on the canvas
   surface. All colors come from editor variables so the pages match
   the active theme. */

/* All element rules below are scoped to the login + signup page
 * containers. Unscoped versions previously leaked into the rest of the
 * app (centering all <p>, restyling all <h2>) once UserAccountForm was
 * loaded once, since CSS imports in this project are global. */

.login-page h1,
.login-page h2,
.login-page h3,
.login-page h4,
.login-page h5,
.login-page h6,
.login-page p,
.login-page input,
.login-page select,
.signup-page h1,
.signup-page h2,
.signup-page h3,
.signup-page h4,
.signup-page h5,
.signup-page h6,
.signup-page p,
.signup-page input,
.signup-page select {
  font-family: var(--editor-font-family, Arial, Helvetica, sans-serif);
}

/* The .App element acts as our page shell. */
div.App {
  background-color: var(--editor-panel-background-color);
  color: var(--editor-text-color);
}

.login-page p,
.signup-page p {
  font-size: 1.25rem;
  text-align: center;
}

/* Outer page: a flex column that fills the viewport so the header
   stays pinned at the top and the form scrolls inside the main area. */
.login-page,
.signup-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: var(--login-content-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  overflow: hidden;
}

/* Forms fill the page and lay out as: heading bar, then the centered
   field block, then the action row at the bottom. */
.login-page > form,
.signup-page > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Top header bar — same dimensions/style as .customize-header. */
.signup-heading-div {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0.75rem 1.5rem;
  background-color: var(--top-toolbar-background-color);
  color: var(--toolbar-text-color);
  border-bottom: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
}

h2.signup-heading {
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--header-1-color);
  background-color: transparent;
}

/* h2 fallback for any other usage on these pages. Scoped to login +
   signup so it doesn't bleed into other routes' headings. */
.login-page h2,
.signup-page h2 {
  margin: 0;
  padding: 8px;
  color: var(--toolbar-text-color);
  background-color: var(--top-toolbar-background-color);
}

/* Centered form-card area between the header and the action row.
   Takes the remaining vertical space inside the form and centers the
   user-fields card both horizontally and vertically. Provides its
   own scrolling for tall forms (signup). */
.login-div,
.signup-div {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  margin: 0;
  background: transparent;
  text-align: center;
  overflow: auto;
}

/* The signup/account form can be tall. Its card uses `margin: auto`
   (see .account-card) to center within this area while still scrolling
   fully when it overflows — so no align-items override is needed. */

.user-fields-div {
  display: inline-block;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
}

.user-data-div {
  padding: 5px 10px;
  text-align: left;
}

.user-data-label {
  display: inline-block;
  width: 160px;
  margin: 5px;
  font-size: 14px;
  text-align: left;
  color: var(--editor-text-color);
}

.user-data-input {
  box-sizing: border-box;
  width: 260px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-size: 14px;
}

/* Legacy footer-toolbar layout retained for the signup / account-edit
   form (UserAccountForm) — that form still keeps its action row pinned
   at the bottom of the page so the long scrolling card doesn't push
   the buttons off-screen. The login pages have moved their actions
   into the card itself (see .login-card-actions below). */
.login-button-div {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
}

.login-dev-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.login-button-spacer {
  flex: 1 1 auto;
}

/* Action row tucked inside the form card, below the password input.
   Links (Forgot password / Sign Up) sit to the left of a soft spacer,
   the primary Log In button anchors the right. The previous full-width
   toolbar at the bottom of the page is gone — keeping everything in the
   centered card means messages and actions live in the same visual
   region the user is already focused on. */
.login-card-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1rem 10px 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--editor-panel-separator-color, var(--editor-control-border-color));
}

.login-card-actions .login-button {
  margin-left: auto;
}

/* Dev-only quick-fill row, currently only the Loren button on the Boss
   login. Dashed border + reduced opacity mark it as a non-production
   helper. Stripped from production builds via the NODE_ENV check in
   the Login component. */
.login-card-dev {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.9rem 10px 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--editor-panel-separator-color, var(--editor-control-border-color));
}

.login-card-dev .buttons {
  opacity: 0.75;
}

.login-card-dev .buttons:hover {
  opacity: 1;
}

.login-link,
.signup {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--editor-selected-blue);
  text-decoration: none;
}

.login-link:hover,
.signup:hover {
  text-decoration: underline;
}

/* Primary action button — same dimensions and surface as the customize
   page header buttons (.customize-back-button). */
.buttons {
  margin: 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius);
  background-color: var(--button-bg);
  color: var(--button-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.buttons:hover:not(:disabled) {
  background-color: var(--button-bg-hover);
}

#status {
  display: block;
  margin: 0 1.5rem 1rem;
  color: var(--editor-text-color);
  font-size: 0.95rem;
}

/* Light-mode: main form area paints the canvas color, matching the
   home and customize pages. */
html[data-theme="light"] {
  --login-content-bg: var(--canvas-background-color);
}

/* ============================================================
   Account / signup form — grouped fields on a centered card
   ============================================================ */

/* The form card. `margin: auto` centers it within the scrollable
   main area when it fits, and — unlike align/justify-center — still
   lets the user scroll up to the top when the form overflows. */
.account-card {
  margin: auto;
  width: 600px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  text-align: left;
}

/* Soft "Alpha" banner anchored at the top of the signup / account
   card. The accent-tinted background reads as informative rather than
   alarming — bordered + filled with the same selected-blue used
   elsewhere, at low opacity so it reads in both light and dark
   themes. */
.alpha-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--editor-selected-blue) 35%, transparent);
  border-radius: var(--corner-radius);
  background-color: color-mix(in srgb, var(--editor-selected-blue) 10%, transparent);
  color: var(--editor-text-color);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}

.alpha-banner-badge {
  flex: none;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: var(--editor-selected-blue);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.alpha-banner-text {
  flex: 1 1 auto;
}

/* A labelled group of related fields. */
.account-section {
  margin-bottom: 1.4rem;
}

.account-section:last-child {
  margin-bottom: 0;
}

.account-section-heading {
  margin: 0 0 0.7rem;
  padding-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--header-2-color);
  border-bottom: 1px solid var(--editor-panel-separator-color, var(--editor-control-border-color));
}

.account-section-note {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  text-align: left;
  color: var(--editor-text-color);
  opacity: 0.75;
}

/* Two-column grid of fields within a section. */
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1rem;
}

/* One stacked label + control. */
.account-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* A field that spans the full width of the grid. */
.account-field-wide {
  grid-column: 1 / -1;
}

.account-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--editor-text-color);
}

/* Shared style for text inputs and the country/state <select>s. */
.account-control {
  box-sizing: border-box;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-size: 14px;
}

.account-control:focus {
  outline: 1px solid var(--editor-selected-blue);
  outline-offset: -1px;
}

/* One consent/preference checkbox row inside an account section. */
.account-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--editor-text-color);
  cursor: pointer;
}

.account-checkbox input[type="checkbox"] {
  cursor: pointer;
}

/* Dev/test quick-fill buttons on the form's action row. The dashed
   border marks them as non-production helpers. */
.dev-fill-button {
  padding: 0.28rem 0.7rem;
  border: 1px dashed var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: transparent;
  color: var(--editor-text-color);
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.65;
}

.dev-fill-button:hover {
  opacity: 1;
}

/* Informational (non-error) status message. */
.status-bar-ok {
  color: var(--editor-selected-blue);
}

/* Prominent inline error / status block, shown inside the form card
   above the inputs. Replaces stuffing errors into the StatusBar at the
   bottom corner of the screen — that strip is small and easy to miss,
   especially on tall monitors where the form is centered way above it. */
.login-page .login-form-status,
.signup-page .login-form-status {
  display: block;
  margin: 0 auto 1rem;
  padding: 0.65rem 1rem;
  border-radius: var(--corner-radius);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.login-page .login-form-status.is-error,
.signup-page .login-form-status.is-error {
  background-color: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: #b91c1c;
}

.login-page .login-form-status.is-ok,
.signup-page .login-form-status.is-ok {
  background-color: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #15803d;
}

/* Home page. Layout mirrors the customize page: a dark header bar
   pinned at the top with action buttons, then a scrollable main area
   below that holds the project grid. */

#home-div.home-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: var(--home-content-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  text-align: center;
  box-sizing: border-box;
}

/* Top action bar — same dimensions and surface as .customize-header. */
.home-header-div {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--top-toolbar-background-color);
  color: var(--toolbar-text-color);
  border-bottom: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
}

.home-header-spacer {
  flex: 1 1 auto;
}

/* Buttons styled to match .customize-back-button / .customize-reset-button. */
.home-buttons {
  margin: 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius);
  background-color: var(--button-bg);
  color: var(--button-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  min-width: auto;
}

.home-buttons:hover:not(:disabled) {
  background-color: var(--button-bg-hover);
}

/* Icon-only header buttons (Add Project, Delete Project, Log Off).
   Transparent on the dark header surface, with a subtle hover/active
   tint so the click target is discoverable. The icon image is sized
   to read at toolbar scale. */
.home-icon-button {
  margin: 0;
  padding: 4px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--corner-radius);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 80ms ease-out, opacity 80ms ease-out;
}

.home-icon-button:disabled {
  cursor: default;
  opacity: 0.4;
}

.home-icon-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.14);
}

.home-icon-button:active:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.24);
}

.home-icon-button-img {
  height: 28px;
  width: auto;
  user-select: none;
  pointer-events: none;
}

/* Larger variant: shared by the four primary home-page icon buttons
   (Add, Delete, Account, Log Off). Button hit area is 40x40 with 4px
   padding (32x32 inner). The account initial badge fills that inner
   exactly; plus/minus/logout sit at 22px inside the same inner with
   breathing room. */
.home-icon-button-lg {
  width: 40px;
  height: 40px;
  padding: 4px;
}

.home-icon-button-img-lg {
  height: 22px;
}

.account-initial-badge-lg {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

/* Account icon-button (circular initial badge) + its dropdown menu.
   Pattern mirrors the editor TopToolbar's account button. The wrap
   provides a positioning context so the dropdown can be right-aligned
   to the button regardless of surrounding header layout. */
.home-account-wrap {
  position: relative;
  display: inline-flex;
}

.home-account-button {
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: background-color 80ms ease-out,
    outline-color 80ms ease-out;
}

.home-account-button-active,
.home-account-button-active:hover {
  outline-color: var(--editor-selected-blue);
  background-color: rgba(255, 255, 255, 0.18);
}

/* Reposition the shared `.account-menu-div` (defaulted for the editor
   TopToolbar at top:44 / right:194) so it drops directly under the
   home-page account button. Use a descendant selector to outrank the
   base single-class rule regardless of stylesheet load order. */
.home-account-wrap .account-menu-div,
.account-menu-div.home-account-menu {
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 4px;
}

/* Main scrollable area: project grid lives here. Padding is symmetric
   on all four sides so the outer whitespace is balanced; tile-to-tile
   gap stays unchanged. */
.home-projects-div {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
}

/* Legacy modifier — used to add header clearance when the header was
   fixed. The new layout pins the header with flex, so no extra padding
   is needed. Keeping the class as a no-op (matching the symmetric
   base padding) avoids touching the JSX. */
.home-projects-top {
  padding-top: 1.25rem;
}

.home-project-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Project tile: a clickable card. Light mode uses a true-white surface
   so the tile reads against the canvas-gray page; dark mode uses the
   top-toolbar surface so the tile reads as "elevated control" on the
   slightly brighter panel background. */
.home-project-group-div {
  display: block;
  /* +4px on the sides and bottom, +6px on the top, on top of the
     existing 8px base — gives the tile content a bit more room and
     a slightly larger headroom above the thumbnail. */
  padding: 14px 12px 12px;
  border-radius: var(--corner-radius);
  border: 1px solid var(--editor-control-border-color);
  background-color: var(--home-tile-bg, var(--editor-input-bg, #ffffff));
  cursor: default;
}

.home-project-group-div:focus {
  outline: 1px solid var(--editor-selected-blue);
  outline-offset: -1px;
}

.project-img {
  max-width: 220px;
  height: 150px;
  object-fit: contain;
  background-color: var(--home-project-img-bg, #f4f4f4);
}

.project-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 150px;
  color: var(--home-placeholder-text, #aaa);
  font-size: 0.95rem;
  font-style: italic;
  border: 2px dashed var(--home-placeholder-border, #ccc);
  border-radius: var(--corner-radius-sm);
  box-sizing: border-box;
}

.project-timestamp-p,
.project-descr-p {
  max-width: 220px;
  margin: 4px 4px 0;
  font-size: 0.85rem;
  text-align: left;
  user-select: none;
  word-wrap: break-word;
  color: var(--editor-text-color);
}

.home-status {
  margin: 0;
  padding: 0.75rem 1.5rem;
  color: #c0392b;
  flex: none;
  border-top: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
}

/* Light-mode: main project area matches the editor's canvas surface;
   project tiles use the white "clickable surface" so they pop against
   the gray page. */
html[data-theme="light"] {
  --home-content-bg: var(--canvas-background-color);
  --home-tile-bg: #ffffff;
}

/* Dark-mode: main project area uses the same panel surface as the
   customize page; project tiles take the top-toolbar surface so they
   match the elevated controls on the customize page. */
html[data-theme="dark"] {
  --home-content-bg: var(--editor-panel-background-color);
  --home-tile-bg: var(--top-toolbar-background-color);
  --home-project-img-bg: #14161b;
  --home-placeholder-text: #6f7383;
  --home-placeholder-border: #3a3d46;
}

/* Customize (preferences) page. Tabbed notebook with Theme, Layout,
   Keybindings, and Colors panels. Everything reads from the same CSS
   variables the editor uses, so the page itself respects the user's
   selected theme. */

.customize-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--customize-page-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-family: var(--editor-font-family);
  overflow: hidden;
  /* One indentation step. Descriptions sit one step under their section
     header; the details below them sit one step further again. */
  --cz-indent: 1.5rem;
}

.customize-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--panel-border-color);
  background-color: var(--top-toolbar-background-color);
  color: var(--toolbar-text-color);
}

.customize-header h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--header-1-color);
}

.customize-header-spacer {
  flex: 1;
}

.customize-reset-button {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--corner-radius);
  border: 1px solid var(--editor-control-border-color);
  background-color: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
}

.customize-reset-button:hover {
  background-color: var(--button-bg-hover);
}

.customize-tabs {
  display: flex;
  gap: 2px;
  padding: 0 1.5rem;
  background-color: var(--customize-tab-strip-bg, var(--editor-panel-separator-color));
  border-bottom: 1px solid var(--panel-border-color);
}

.customize-tab {
  padding: 0.6rem 1.25rem;
  margin: 0;
  border: none;
  background: var(--customize-tab-bg-inactive, transparent);
  color: var(--customize-tab-color, var(--editor-muted-text-color));
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.customize-tab:hover {
  color: var(--customize-tab-color-active, var(--editor-text-color));
}

.customize-tab.active {
  color: var(--customize-tab-color-active, var(--editor-text-color));
  border-bottom-color: var(--editor-selected-blue);
  background-color: var(--customize-tab-bg-active, var(--editor-input-bg, var(--editor-panel-background-color)));
}

.customize-panel {
  flex: 1;
  overflow: auto;
  padding: 1.5rem 2rem;
  /* Defensive: keep panel content left-aligned even if a sibling page's
     CSS were to set a wider text-align: center. Section titles re-center
     below. */
  text-align: left;
}

.customize-section-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--header-2-color);
}

.customize-section-hint {
  /* Equal left/right margins so the description block is inset evenly. */
  margin: 0 var(--cz-indent) 1rem;
  color: var(--customize-hint-color, var(--editor-muted-text-color));
  font-size: 0.85rem;
  text-align: left;
}

/* Two-column tab layout. Collapses to a single column when the window
   is too narrow to comfortably hold two. */
.customize-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .customize-2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Engine Defaults groups flow into balanced columns that collapse to a
   single column when the window is too narrow. Multi-column (not grid) so
   groups pack tightly instead of row-aligning and leaving big vertical gaps. */
.customize-engine-cols {
  columns: 2 19rem;
  column-gap: 2.5rem;
}

.customize-engine-cols > .customize-group {
  break-inside: avoid;
  margin-bottom: 1.75rem;
}

/* The Keybindings / Colors group grid is indented one step so the
   group names sit under their tab's section header. */
.customize-2col-sub {
  margin-left: var(--cz-indent);
}

/* A section: the title stays centered (rule above); the description
   sits one indent step in (rule on .customize-section-hint), and the
   detail(s) below it sit one step further again. */
.customize-section {
  display: block;
}

.customize-section > .customize-section-hint {
  margin-bottom: 0.75rem;
}

.customize-section > :not(.customize-section-title):not(.customize-section-hint) {
  margin-left: calc(2 * var(--cz-indent));
}

/* A Keybindings / Colors group within a column. The group name stays
   flush left; the group's details are indented by the standard amount,
   matching the Layout-tab sections. */
.customize-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.customize-group > :not(.customize-subhead) {
  margin-left: var(--cz-indent);
}

.customize-subhead {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--header-2-color);
}

/* When a section stacks several labelled control groups (e.g. the
   color-picker magnifier settings), separate each subhead from the
   control above it. Margins collapse, so the first subhead keeps an
   even gap from the section hint too. */
.customize-section > .customize-subhead {
  margin-top: 1rem;
}

/* Theme tab */

.theme-options {
  display: grid;
  /* auto-fit so a 3- or 4-option list (theme picker, action announce,
     tooltip mode) lays out on a single row when there's horizontal
     room, and wraps gracefully on narrower viewports. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  gap: 1rem;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius);
  background: var(--theme-option-bg, var(--editor-panel-background-color));
  cursor: pointer;
  text-align: left;
  color: var(--theme-option-text, var(--editor-text-color));
  font-size: 0.95rem;
}

.theme-option.active {
  border-color: var(--editor-selected-blue);
}

.theme-option-swatch {
  width: 100%;
  height: 60px;
  border-radius: var(--corner-radius-sm);
  border: 1px solid var(--editor-control-border-color);
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.theme-option-swatch > span:first-child {
  border-right: 1px solid var(--editor-control-border-color);
}

/* Action-announcements swatches. Each one draws a tiny abstraction of the
 * fs-designer editor (top toolbar strip, left tools strip, canvas area)
 * and overlays the announcement element belonging to that mode:
 *   • toast — a rounded pill near the top of the canvas (matches the
 *             real canvas-notification position: top: 1.2rem, centred)
 *   • bar   — a thin status strip across the bottom of the editor
 *   • both  — the pill at top AND the bar at bottom
 *   • none  — ∅ glyph centred over a plain editor scene
 * Pseudo-elements layer on top of the base editor sketch so the swatch
 * conveys both the geometry of fs-designer and the announcement layout. */
.announce-swatch {
  display: block;
  position: relative;
  background-color: var(--editor-panel-separator-color);
  overflow: hidden;
}

/* Top-toolbar strip + left-tools strip drawn on every announce swatch so
 * the user recognises the rest of the editor regardless of mode. The
 * remaining area reads as the canvas. */
.announce-swatch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: var(--top-toolbar-background-color);
  border-bottom: 1px solid var(--editor-control-border-color);
}

/* Toast pill — small rounded rectangle just under the top-toolbar strip,
 * horizontally centred to mirror the real `.canvas-notification` at
 * top: 1.2rem. Reused for the "both" mode swatch (its bottom bar is
 * drawn via a background gradient since ::before/::after are taken). */
.announce-swatch-toast::after,
.announce-swatch-both::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  height: 9px;
  background: rgba(24, 24, 28, 0.82);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Status bar strip pinned to the bottom of the editor sketch. */
.announce-swatch-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--editor-panel-background-color);
  border-top: 1px solid var(--editor-control-border-color);
}

/* Both mode: the top-toolbar strip lives on `.announce-swatch::before`
 * and the toast pill on `::after` (above), which leaves no pseudo-element
 * for the bottom bar — so we paint it with a background gradient on the
 * swatch itself: a solid panel-bg band at the bottom 10px, transparent
 * above (so the base separator-color shows through as the canvas area). */
.announce-swatch-both {
  background:
    linear-gradient(to top,
      var(--editor-panel-background-color) 0,
      var(--editor-panel-background-color) 10px,
      transparent 10px,
      transparent 100%),
    var(--editor-panel-separator-color);
}

/* None: a centred ∅ over the plain editor scene. */
.announce-swatch-none::after {
  content: '∅';
  position: absolute;
  inset: 9px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--editor-muted-text-color);
  font-size: 1.4rem;
  font-weight: 600;
}

/* Tooltip-mode swatches. Each sketches the editor layout — a top
 * toolbar strip across the top, narrow left strip (Left Toolbar +
 * Layers Panel) on the left, narrow right strip (Design Panel) on the
 * right, and the canvas in the middle. Each mode tints the regions
 * that surface tooltips in blue, the others in muted grey. */
.tooltip-swatch {
  display: block;
  position: relative;
  background-color: var(--editor-panel-separator-color);
  overflow: hidden;
}

/* Top toolbar strip (top 9px), drawn on every tooltip swatch via
 * ::before and tinted by mode below. */
.tooltip-swatch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: var(--editor-control-border-color);
  border-bottom: 1px solid var(--editor-control-border-color);
}

/* The left + right side strips drawn together via ::after using a
 * two-band radial-friendly trick: two vertical bands on each edge.
 * We use a layered background on the swatch itself so the inner area
 * (canvas) stays the swatch's default background. */
.tooltip-swatch::after {
  content: '';
  position: absolute;
  top: 9px;
  bottom: 0;
  left: 0;
  right: 0;
  background:
    linear-gradient(to right,
      var(--editor-control-border-color) 0,
      var(--editor-control-border-color) 14px,
      transparent 14px,
      transparent calc(100% - 14px),
      var(--editor-control-border-color) calc(100% - 14px),
      var(--editor-control-border-color) 100%);
}

/* Mode-specific highlights — paint the region that's enabled with the
 * selection blue so the user sees at a glance where tooltips appear. */
.tooltip-swatch-top::before {
  background: var(--editor-selected-blue);
}

.tooltip-swatch-panels::after {
  background:
    linear-gradient(to right,
      var(--editor-selected-blue) 0,
      var(--editor-selected-blue) 14px,
      transparent 14px,
      transparent calc(100% - 14px),
      var(--editor-selected-blue) calc(100% - 14px),
      var(--editor-selected-blue) 100%);
}

.tooltip-swatch-both::before {
  background: var(--editor-selected-blue);
}

.tooltip-swatch-both::after {
  background:
    linear-gradient(to right,
      var(--editor-selected-blue) 0,
      var(--editor-selected-blue) 14px,
      transparent 14px,
      transparent calc(100% - 14px),
      var(--editor-selected-blue) calc(100% - 14px),
      var(--editor-selected-blue) 100%);
}

/* None: dim editor + ∅. The ::before and ::after stay grey; the ∅
 * sits on the swatch background via an extra inset wrapper. */
.tooltip-swatch-none {
  position: relative;
}

.tooltip-swatch-none > * { display: none }

/* Use a CSS-only ∅ via the swatch's content-area: we layer the glyph
 * as a background using SVG data URI to avoid clobbering ::before /
 * ::after that already draw the toolbar + side strips. */
.tooltip-swatch-none {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27><text x=%2750%27 y=%2765%27 text-anchor=%27middle%27 font-size=%2752%27 font-weight=%27700%27 fill=%27%238e8c9e%27 font-family=%27Arial, sans-serif%27>%E2%88%85</text></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px;
}

/* Layout tab */

.layout-grid {
  display: grid;
  grid-template-columns: 140px 1fr 56px;
  gap: 0.7rem 0.7rem;
  align-items: center;
  max-width: 420px;
}

.layout-grid label {
  font-size: 0.95rem;
}

.layout-grid input[type="range"] {
  width: 100%;
}

.layout-grid input[type="number"] {
  width: 70px;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
}

.layout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  user-select: none;
  cursor: pointer;
}

.layout-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.customize-radios {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.customize-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  user-select: none;
  cursor: pointer;
}

.customize-radio input[type="radio"] {
  margin: 0;
}

.customize-slider-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.customize-slider {
  width: 240px;
  max-width: 60%;
}

.customize-slider-value {
  font-size: 0.9rem;
  color: var(--customize-hint-color, var(--editor-muted-text-color));
  min-width: 3rem;
}

/* Keybindings tab */

.keybindings-table {
  /* Fills the group minus its indent (the table carries a margin-left
     of --cz-indent from the .customize-group rule). */
  width: calc(100% - var(--cz-indent));
  max-width: 720px;
  border-collapse: collapse;
  /* Fixed layout so the command column is a consistent width in every
     group's table and the shortcut boxes all line up. */
  table-layout: fixed;
}

.keybindings-table th,
.keybindings-table td {
  text-align: left;
  padding: 0.35rem 0.6rem;
  font-size: 0.95rem;
}

/* First cell (the command label) starts flush with the group name and
   has a fixed width, so the shortcut boxes in every group line up at
   the same x. Last cell (the shortcut box) has no trailing padding. */
.keybindings-table td:first-child {
  width: 150px;
  padding-left: 0;
}

.keybindings-table td:last-child {
  padding-right: 0;
}

.keybindings-table th {
  color: var(--editor-muted-text-color);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.keybindings-table tr:hover td {
  background-color: var(--editor-panel-separator-color);
}

.keybinding-input {
  width: 100%;
  max-width: 200px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.keybinding-input.capturing {
  border-color: var(--editor-selected-blue);
  outline: 1px solid var(--editor-selected-blue);
}

/* Colors tab */

/* Each color row: a clear gap between the description and its swatch
   (matching the keybindings layout), a generous row gap for space
   around each pair. */
.color-list {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 0.25rem 0;
}

.color-row-label {
  font-size: 0.95rem;
  text-align: left;
}

.color-row-input {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Radio-button group for enumerated engine defaults (e.g. Has on creation). */
.customize-radio-group {
  gap: 0.9rem;
}

.customize-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.color-row-input input[type="color"] {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background: transparent;
  cursor: pointer;
}

.color-row-input input[type="text"] {
  width: 120px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

/* Numeric defaults on the Engine tab share the colour-row grid. */
.color-row-input input[type="number"] {
  width: 78px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-size: 0.85rem;
}

/* Range slider used in the Engine Defaults grid (e.g. highlighter opacity). */
.engine-slider {
  width: 120px;
}

.engine-slider-value {
  min-width: 2.6rem;
  font-size: 0.9rem;
  color: var(--customize-hint-color, var(--editor-muted-text-color));
}

/* Engine tab: the "reset just these defaults" action sits below the
   groups, indented to line up with them. */
.customize-engine-reset {
  margin: 1.75rem 0 0 var(--cz-indent);
}

/* Each theme (light / dark) is its own section in the Colors tab. Its
   color rows are split into titled groups of related colors: the
   section title spans the column, each group's title sits one indent
   step in, and the swatches sit one step further (matching the
   Layout tab's section / detail hierarchy). */
.color-theme-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.color-theme-section > .customize-section-title {
  margin-bottom: 0.85rem;
  text-align: left;
}

.color-theme-section > .color-group {
  margin-left: var(--cz-indent);
}

.color-group {
  margin-bottom: 1.1rem;
}

.color-group:last-child {
  margin-bottom: 0;
}

/* Light-mode customizations:
   - Tab strip and tab titles a touch darker than the muted defaults
     so the navigation reads with a bit more weight.
   - Section hint text darker so descriptions don't look so faint.
   - Theme-option tiles keep their original near-white surface so they
     stand out against the now-grayish page background, but their
     label text is darkened slightly. */
html[data-theme="light"] {
  --customize-page-bg: var(--canvas-background-color);
  /* Three distinct levels in the tab strip:
     - selected tab is the brightest (true white)
     - unselected tabs sit a step darker
     - the strip area outside the tabs is darker still */
  --customize-tab-strip-bg: #b1afb8;
  --customize-tab-bg-inactive: #cfcdd5;
  --customize-tab-bg-active: #ffffff;
  --customize-tab-color: #46454e;
  --customize-tab-color-active: #2c2b33;
  --customize-hint-color: #6a6973;
  --theme-option-bg: #ffffff;
  --theme-option-text: #2c2b33;
}

/* Dark mode: same three-level hierarchy — the selected tab merges
   into the panel below, unselected tabs are a step darker, and the
   strip "frame" is darker still. Tile surfaces use the top-toolbar
   color so the clickable tiles read as elevated controls on the
   slightly brighter panel background. */
html[data-theme="dark"] {
  --customize-tab-strip-bg: #0c0e12;
  --customize-tab-bg-inactive: #14161b;
  --customize-tab-bg-active: var(--editor-panel-background-color);
  --theme-option-bg: var(--top-toolbar-background-color);
}

/* The Boss dashboard styling. Anchored to the .App frame like the rest
 * of the editor pages so the table scrolls inside its own area rather
 * than pushing the page past the viewport.
 *
 * Colors reuse the editor theme variables so light/dark theming follows
 * the rest of the app. Modal sits above on a translucent backdrop.
 */

.boss-page {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--editor-panel-background-color);
    color: var(--editor-text-color);
    font-family: var(--editor-font-family, Arial, Helvetica, sans-serif);
}

.boss-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Padding + button sizing match .home-header-div so the Boss / Admin
       pages share the same toolbar height as the home page. */
    padding: 0.75rem 1.5rem;
    background-color: var(--top-toolbar-background-color);
    color: var(--toolbar-text-color);
    border-bottom: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
}

.boss-header h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--header-1-color);
}

.boss-header-spacer { flex: 1 1 auto; }

/* Icon buttons in the Boss header (Add user, home, Log out boss,
   Log out all). Transparent so they read against the dark header
   surface, white-tint hover/active to match the home page header
   icon-button pattern. */
.boss-icon-button {
    background: transparent;
    border: none;
    margin: 0;
    padding: 4px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: var(--corner-radius);
    cursor: pointer;
    transition: background-color 80ms ease-out;
}

.boss-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

.boss-icon-button:active {
    background-color: rgba(255, 255, 255, 0.22);
}

/* Wider variant for the composite Log-out-boss button so the logout
   glyph plus the smaller crown badge fit comfortably without crowding. */
.boss-icon-button-wide {
    width: 54px;
}

.boss-icon-button-img {
    height: 22px;
    width: auto;
    user-select: none;
    pointer-events: none;
}

/* Smaller adornment used for the crown that sits next to the logout
   glyph on the Log-out-boss button. */
.boss-icon-button-img-sm {
    height: 14px;
    width: auto;
    user-select: none;
    pointer-events: none;
}

/* The email cell doubles as the row's edit affordance. Reset native
   button styling so it reads as a link, then add hover/focus underline
   so the cell visibly responds. */
.boss-email-link {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--editor-selected-blue);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.boss-email-link:hover,
.boss-email-link:focus-visible {
    text-decoration: underline;
}

/* Red × delete button matching the .color-picker-close pattern used
   elsewhere (e.g. ColorPicker, GradientEditor) — transparent
   background, red glyph at muted opacity, brighter + lightly tinted
   on hover/active. */
.boss-delete-x {
    background-color: transparent;
    border: none;
    border-radius: var(--corner-radius-sm);
    padding: 2px 8px;
    font-family: var(--editor-font-family);
    font-size: 1rem;
    font-weight: 700;
    color: #e53935;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    opacity: var(--editor-icon-muted-opacity, 0.6);
    transition: background-color 80ms ease-out, opacity 80ms ease-out;
}

.boss-delete-x:hover {
    background-color: rgba(128, 128, 128, 0.22);
    opacity: 1;
}

.boss-delete-x:active {
    background-color: rgba(128, 128, 128, 0.32);
    opacity: 1;
}

.boss-status-error {
    margin: 0;
    padding: 0.5rem 1.5rem;
    background-color: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
    font-size: 0.9rem;
}

.boss-table-wrap {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem 1.5rem 2rem;
}

.boss-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

.boss-table th, .boss-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--editor-panel-separator-color);
    vertical-align: middle;
}

.boss-table th {
    font-weight: 600;
    color: var(--header-2-color);
    background-color: rgba(0, 0, 0, 0.02);
    position: sticky;
    top: 0;
    z-index: 1;
}

.boss-row-actions {
    display: flex;
    gap: 0.4rem;
}

.boss-toggle input[type="checkbox"] { cursor: pointer; }

/* Inline role select in the Boss table. Sized to match surrounding
   text so the row stays on one line. */
.boss-role-select {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--editor-control-border-color);
    border-radius: var(--corner-radius-sm, 4px);
    background-color: var(--editor-input-bg, var(--editor-panel-background-color));
    color: var(--editor-text-color);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ----- Modal ----- */
.boss-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.boss-modal {
    background-color: var(--editor-panel-background-color);
    color: var(--editor-text-color);
    border-radius: var(--corner-radius, 6px);
    padding: 1.5rem 1.6rem;
    max-width: 560px;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.boss-modal-title {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--header-1-color);
}

.boss-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
}

.boss-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--editor-text-color);
}

.boss-form-grid input[type="text"],
.boss-form-grid input[type="email"],
.boss-form-grid input[type="password"],
.boss-form-grid input:not([type]) {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--editor-control-border-color);
    border-radius: var(--corner-radius-sm, 4px);
    background-color: var(--editor-input-bg, var(--editor-panel-background-color));
    color: var(--editor-text-color);
    font-size: 0.9rem;
}

.boss-form-wide { grid-column: 1 / -1; }

.boss-form-check {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
}

.boss-form-status {
    margin: 0.8rem 0 0;
    color: #b91c1c;
    font-size: 0.85rem;
}

.boss-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.boss-primary {
    background-color: var(--editor-selected-blue);
    color: #ffffff;
}

/* Styles for the in-app documentation site at /docs/*.
 * Reuses the tokens defined in App.css so light/dark themes apply
 * automatically through the existing data-theme attribute. */

.docs-page {
    /* Fill the .App frame instead of claiming 100vh. .App is
       position:absolute; overflow:hidden, so a 100vh child would push
       content past the clip and the system chrome could overlap the
       bottom. Anchored fills give the inner .docs-content a bounded
       height to scroll within. */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--editor-panel-background-color, #fff);
    color: var(--editor-text-color, #333);
    font-family: var(--editor-font-family, "Arial", sans-serif);
}

/* ----- Header ----- */
.docs-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.4rem;
    border-bottom: 1px solid var(--editor-panel-separator-color, #ececec);
}

.docs-back-button {
    background: transparent;
    border: none;
    color: var(--editor-text-color);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Driven by Customize > Corner roundness. --corner-radius spans 0px
       (square) to 16px (a full circle for this 32x32 button), so the
       button visibly follows the user's preference: subtly rounded at
       the default 0.5, fully circular at the max. */
    border-radius: var(--corner-radius, 8px);
    transition: background-color 80ms ease-out, color 80ms ease-out;
}

/* Theme-aware neutral hover/active tint: mix the button's own text color
   (which is dark in light mode, light in dark mode) with transparent.
   In light theme this gives a subtle dark wash; in dark theme a subtle
   light wash — readable on either surface without theme-specific rules. */
.docs-back-button:hover {
    background-color: color-mix(in srgb, currentColor 14%, transparent);
}

.docs-back-button:active {
    background-color: color-mix(in srgb, currentColor 24%, transparent);
}

.docs-back-icon {
    display: block;
    pointer-events: none;
}

.docs-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--header-1-color, #2a2935);
}

/* Push the audience switcher to the right end of the header. */
.docs-header > .docs-audience-switch {
    margin-left: auto;
}

/* Three-segment audience switcher. */
.docs-audience-switch {
    display: inline-flex;
    border: 1px solid var(--editor-control-border-color, #d0d0d0);
    border-radius: var(--corner-radius, 6px);
    overflow: hidden;
}

.docs-audience-button {
    background: transparent;
    border: none;
    padding: 0.45rem 0.95rem;
    color: var(--editor-text-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-right: 1px solid var(--editor-control-border-color, #d0d0d0);
    transition: background-color 80ms ease-out, color 80ms ease-out;
}

.docs-audience-button:last-child {
    border-right: none;
}

.docs-audience-button:hover {
    background-color: rgba(16, 151, 226, 0.12);
    color: var(--editor-selected-blue, rgb(16, 151, 226));
}

.docs-audience-button:active {
    background-color: rgba(16, 151, 226, 0.22);
}

.docs-audience-button-active,
.docs-audience-button-active:hover {
    background-color: var(--editor-selected-blue, rgb(16, 151, 226));
    color: #fff;
}

.docs-audience-button-active:active {
    background-color: rgb(13, 121, 181);
}

/* ----- Account button + dropdown ----- */
.docs-account-button {
    background: transparent;
    border: none;
    padding: 4px;
    margin-left: 0.6rem;
    border-radius: var(--corner-radius, 6px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 80ms ease-out, outline-color 80ms ease-out;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.docs-account-button:hover {
    background-color: rgba(16, 151, 226, 0.10);
}

.docs-account-button:active {
    background-color: rgba(16, 151, 226, 0.20);
}

.docs-account-button-active,
.docs-account-button-active:hover {
    outline-color: var(--editor-selected-blue, rgb(16, 151, 226));
    background-color: rgba(16, 151, 226, 0.10);
}

/* Reposition the shared `.account-menu-div` for the docs header. Defaults
 * in App.css target the editor's TopToolbar; we want the menu to drop
 * under the account button at the right edge of the docs header. The
 * compound selector outranks the base single-class rule regardless of
 * stylesheet load order. */
.account-menu-div.docs-account-menu {
    top: 56px;
    right: 1.4rem;
    left: auto;
}

/* ----- Body grid ----- */
.docs-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0;
    flex: 1;
    min-height: 0;
}

/* ----- Sidebar ----- */
.docs-sidebar {
    padding: 1.2rem 1rem 2rem;
    border-right: 1px solid var(--editor-panel-separator-color, #ececec);
    overflow-y: auto;
}

.docs-sidebar-home {
    display: block;
    padding: 0.4rem 0.6rem;
    margin-bottom: 1rem;
    color: var(--editor-text-color);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--corner-radius-sm, 4px);
    transition: background-color 80ms ease-out, color 80ms ease-out;
}

.docs-sidebar-home:hover {
    background-color: rgba(16, 151, 226, 0.10);
    color: var(--editor-selected-blue, rgb(16, 151, 226));
}

.docs-sidebar-home:active {
    background-color: rgba(16, 151, 226, 0.20);
}

.docs-sidebar-home.active {
    background-color: rgba(16, 151, 226, 0.14);
    color: var(--editor-selected-blue, rgb(16, 151, 226));
}

.docs-sidebar-section {
    margin-bottom: 1.2rem;
}

.docs-sidebar-section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--header-3-color, #6f6e7c);
    padding: 0 0.6rem;
    margin-bottom: 0.35rem;
}

.docs-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-sidebar-link {
    display: block;
    padding: 0.35rem 0.6rem;
    color: var(--editor-text-color);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: var(--corner-radius-sm, 4px);
    transition: background-color 80ms ease-out, color 80ms ease-out;
}

.docs-sidebar-link:hover {
    background-color: rgba(16, 151, 226, 0.10);
    color: var(--editor-selected-blue, rgb(16, 151, 226));
}

.docs-sidebar-link:active {
    background-color: rgba(16, 151, 226, 0.22);
}

.docs-sidebar-link-active,
.docs-sidebar-link-active:hover {
    background-color: rgba(16, 151, 226, 0.14);
    color: var(--editor-selected-blue, rgb(16, 151, 226));
    font-weight: 600;
}

.docs-sidebar-link-active:active {
    background-color: rgba(16, 151, 226, 0.26);
}

/* ----- Content ----- */
.docs-content {
    padding: 2rem 2.4rem 4rem;
    overflow-y: auto;
}

.docs-article {
    max-width: 760px;
    line-height: 1.55;
}

.docs-article h1 {
    margin: 0 0 1.1rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--header-1-color, #2a2935);
}

.docs-article h2 {
    margin: 2rem 0 0.6rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--header-2-color, #3b3a45);
}

.docs-article h3 {
    margin: 1.4rem 0 0.45rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--header-2-color, #3b3a45);
}

.docs-article p {
    margin: 0.55rem 0 1rem;
}

.docs-article ul,
.docs-article ol {
    margin: 0.55rem 0 1rem;
    padding-left: 1.4rem;
}

.docs-article li {
    margin: 0.3rem 0;
}

.docs-article code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-family: "Menlo", "Consolas", monospace;
    font-size: 0.88em;
}

.docs-article pre {
    background-color: rgba(0, 0, 0, 0.06);
    padding: 0.9rem 1rem;
    border-radius: var(--corner-radius-sm, 4px);
    overflow-x: auto;
    line-height: 1.4;
}

.docs-article pre code {
    background: none;
    padding: 0;
}

.docs-article kbd {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    background-color: var(--editor-panel-background-color, #fff);
    border: 1px solid var(--editor-control-border-color, #d0d0d0);
    border-bottom-width: 2px;
    border-radius: 3px;
    font-family: "Menlo", "Consolas", monospace;
    font-size: 0.82em;
    color: var(--editor-text-color);
}

/* Inline links inside article body — including the audience-mismatch
 * "Overview" link and any future cross-references. */
.docs-article a {
    color: var(--editor-selected-blue, rgb(16, 151, 226));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 80ms ease-out, background-color 80ms ease-out;
}

.docs-article a:hover {
    color: rgb(13, 121, 181);
    background-color: rgba(16, 151, 226, 0.08);
}

.docs-article a:active {
    color: rgb(9, 92, 138);
    background-color: rgba(16, 151, 226, 0.18);
}

/* ----- Landing-page extras ----- */
.docs-lead {
    font-size: 1.05rem;
    color: var(--editor-text-color);
}

.docs-audience-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 1.5rem 0 2rem;
}

.docs-audience-card {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    border: 1px solid var(--editor-panel-separator-color, #ececec);
    border-radius: var(--corner-radius, 6px);
    padding: 0.85rem 0.95rem;
    background-color: rgba(0, 0, 0, 0.015);
    cursor: pointer;
    transition: background-color 80ms ease-out, border-color 80ms ease-out,
        box-shadow 80ms ease-out;
}

.docs-audience-card:hover {
    background-color: rgba(16, 151, 226, 0.06);
    border-color: var(--editor-selected-blue, rgb(16, 151, 226));
}

.docs-audience-card:active {
    background-color: rgba(16, 151, 226, 0.14);
}

.docs-audience-card h3 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
}

.docs-audience-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--header-3-color, #6f6e7c);
}

.docs-audience-card-active,
.docs-audience-card-active:hover {
    border-color: var(--editor-selected-blue, rgb(16, 151, 226));
    background-color: rgba(16, 151, 226, 0.08);
}

.docs-topic-group {
    margin: 1rem 0 1.6rem;
}

.docs-topic-group-heading {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--header-3-color, #6f6e7c);
    border-bottom: 1px solid var(--editor-panel-separator-color, #ececec);
    padding-bottom: 0.3rem;
}

.docs-topic-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-topic-list li {
    padding: 0.35rem 0;
}

.docs-topic-list a {
    color: var(--editor-selected-blue, rgb(16, 151, 226));
    text-decoration: none;
    font-weight: 500;
    padding: 0.15rem 0.35rem;
    margin: 0 -0.35rem;
    border-radius: var(--corner-radius-sm, 4px);
    transition: background-color 80ms ease-out, color 80ms ease-out;
}

.docs-topic-list a:hover {
    text-decoration: underline;
    background-color: rgba(16, 151, 226, 0.08);
}

.docs-topic-list a:active {
    background-color: rgba(16, 151, 226, 0.18);
    color: rgb(13, 121, 181);
}

/* ----- Audience-mismatch hint ----- */
.docs-audience-mismatch {
    border: 1px dashed var(--editor-control-border-color, #d0d0d0);
    border-radius: var(--corner-radius, 6px);
    padding: 1rem 1.2rem;
    color: var(--header-3-color, #6f6e7c);
    background-color: rgba(0, 0, 0, 0.02);
}

.docs-audience-inline-switch {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--editor-selected-blue, rgb(16, 151, 226));
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    transition: color 80ms ease-out;
}

.docs-audience-inline-switch:hover {
    color: rgb(13, 121, 181);
}

.docs-audience-inline-switch:active {
    color: rgb(9, 92, 138);
}

/* ----- Tables (keyboard shortcuts) ----- */
.docs-shortcut-table {
    border-collapse: collapse;
    margin: 0.6rem 0 1.4rem;
    width: 100%;
}

.docs-shortcut-table th,
.docs-shortcut-table td {
    text-align: left;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--editor-panel-separator-color, #ececec);
    vertical-align: top;
}

.docs-shortcut-table th {
    font-weight: 600;
    color: var(--header-2-color, #3b3a45);
    background-color: rgba(0, 0, 0, 0.025);
}

/* ----- FAQ ----- */
.docs-faq {
    margin: 0.6rem 0 0;
}

.docs-faq-item {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--editor-panel-separator-color, #ececec);
}

.docs-faq dt {
    font-weight: 600;
    color: var(--header-2-color, #3b3a45);
    margin-bottom: 0.35rem;
}

.docs-faq dd {
    margin: 0;
}

/* ----- Narrow viewports: collapse sidebar ----- */
@media (max-width: 760px) {
    .docs-body {
        grid-template-columns: 1fr;
    }
    .docs-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--editor-panel-separator-color, #ececec);
        padding: 0.8rem 1rem;
    }
    .docs-content {
        padding: 1.4rem 1.2rem 3rem;
    }
    .docs-header {
        flex-wrap: wrap;
        gap: 0.7rem;
    }
}

/* Verify-email banner anchored at the top of the viewport above all
 * other content. position: fixed + z-index keeps it above the editor
 * canvas and other absolute-positioned page chrome. */

.verify-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.9rem;
    background-color: #f59e0b;
    color: #1f1100;
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.verify-banner-text { flex: 1 1 auto; }

.verify-banner-button {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--corner-radius-sm, 4px);
    background-color: #0a1020;
    color: #ffffff;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.verify-banner-button:hover:not(:disabled) {
    background-color: #131b2e;
}

.verify-banner-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.verify-banner-status {
    font-size: 0.82rem;
    opacity: 0.85;
}

/* Full-screen overlay shown when the backend server is unreachable.
   It sits above every route via a high z-index so it covers the editor,
   home page, etc. without unmounting them — the user's work is preserved
   underneath and reappears on reconnect. The background is fully opaque
   so the page behind it (login screen, editor, etc.) is hidden: it can't
   be interacted with while offline and is irrelevant until reconnect.
   Colors come from editor theme variables to match the active theme. */

.disconnected-page {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--editor-panel-background-color, #1e1e1e);
  color: var(--editor-text-color, #eee);
  font-family: var(--editor-font-family, Arial, Helvetica, sans-serif);
}

/* Content sits in a bordered box that is darker than the page behind
   it, so it reads as a distinct panel rather than blending into the
   surrounding background. */
.disconnected-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 22rem;
  max-width: 90vw;
  padding: 2.5rem 2rem;
  border: 1px solid var(--editor-control-border-color, #444);
  border-radius: 12px;
  background-color: var(--editor-input-bg, #15171c);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

/* Spinning accent ring — gives the screen motion and signals that
   reconnection is actively in progress. */
.disconnected-spinner {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 3px solid var(--editor-control-border-color, #444);
  border-top-color: var(--editor-selected-blue, #1097e2);
  animation: disconnected-spin 0.9s linear infinite;
}

@keyframes disconnected-spin {
  to { transform: rotate(360deg); }
}

.disconnected-heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.disconnected-message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--editor-muted-text-color, #8e8c9e);
}

/* Matches the standard `.buttons` style used on the login/signup pages. */
.disconnected-retry {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.25rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius);
  cursor: pointer;
  background-color: var(--button-bg);
  color: var(--button-text);
}

.disconnected-retry:hover:not(:disabled) {
  background-color: var(--button-bg-hover);
}

.disconnected-retry:disabled {
  opacity: 0.55;
  cursor: default;
}

.disconnected-attempts {
  margin: 0;
  font-size: 0.8rem;
  color: var(--editor-muted-text-color, #8e8c9e);
}

/* Editor design tokens shared by toolbar, panels, and canvas layout. */
:root {
  --tree-width: 250px;
  --details-width: 320px;
  --standard-icon-height: 48px;
  --standard-icon-width: 44px;
  --top-toolbar-height: 48px;
  --left-toolbar-width: 82px;
  --chevron-left: 37px;
  --top-toolbar-left-of-zoom-icons: 120px;
  --top-toolbar-background-color: #282c34;
  --left-toolbar-background-color: #d8d6d6;
  --toolbar-text-color: #dedede;
  --editor-text-color: #5A5964;
  --editor-muted-text-color: #8e8c9e;
  /* header-1 is the most-prominent header; it must be DARKER than the
     panel background in light mode. Old #f4f4f6 was a stray dark-mode
     value that rendered tab text white-on-white. */
  --header-1-color: #2a2935;
  --header-2-color: #3b3a45;
  --header-3-color: #6f6e7c;
  --editor-panel-background-color: white;
  --editor-panel-separator-color: #ececec;
  --editor-control-border-color: #cccbd8;
  --editor-control-border: 1px solid var(--editor-control-border-color);
  --editor-selected-blue: rgb(16, 151, 226);
  --editor-hover-color: #5fd8c0;
  --editor-constraint-line-color: #b2b2b2;
  --tools-group-columns: 2;
  --canvas-background-color: var(--editor-panel-separator-color);
  --panel-border-color: rgb(200, 200, 200);
  --tree-selection-bg: rgb(194, 232, 255);
  /* Clickable / editable surface — true white in light mode so buttons
     and inputs stand out against the now-grayish page background.
     Dark mode redefines this further down. */
  --editor-input-bg: #ffffff;
  --editor-font-family: Arial, Helvetica, sans-serif;
  --editor-control-font-size: 14px;
  --editor-icon-muted-opacity: 0.6;
  --editor-small-icon-size: 18px;
  --editor-swatch-size: 18px;
  /* Design-panel control-row height. Overridden by preferences.ts
     (the "Design panel row height" customization). */
  --details-row-height: 30px;
  --details-content-width: calc(var(--details-width) - var(--panel-indent));
  --panel-edge-gap: 8px;
  --panel-triangle-size: 12px;
  --panel-triangle-title-gap: 4px;
  /* Single indent step. Level N content lives at N * --panel-indent from the
     panel's left edge. Disclosure triangles for Level N occupy the band from
     (N-1)*panel-indent to N*panel-indent. The 12px image is offset 1px to
     the right of the band's natural center, so the left/right padding around
     it is 7/10 — visible room on each side, slight rightward weight. */
  --panel-indent: 28px;
  --panel-level-2: calc(2 * var(--panel-indent));
  --panel-level-3: calc(3 * var(--panel-indent));
  --panel-triangle-pad-left: 8px;
  --panel-triangle-pad-right: 8px;
  --panel-row-gap: 6px;
  --panel-control-gap: 6px;
  --panel-pair-gap: 20px;
  --panel-right-gutter: 12px;
  --panel-checkbox-label-gap: 8px;
  /* Default status-bar height. Overridden by preferences.ts: set to
     0px when the bar is hidden, ~26px when it's visible. Editor panels
     anchor their bottom edges to this value. */
  --status-bar-height: 26px;
  /* Justification of numeric edit boxes. Overridden by preferences.ts. */
  --number-input-align: right;
  /* Corner radii driven by the corner-roundness slider (preferences.ts);
     0px at the square end. */
  --corner-radius: 8px;
  --corner-radius-sm: 3px;
  /* Selection outline/border width for selectable icons. */
  --selection-border-width: 2px;
  /* Action-button surface. Light mode uses a light grey (not white)
     with dark-enough text; dark mode overrides below. */
  --button-bg: #e6e6ea;
  --button-bg-hover: #d8d8de;
  --button-text: #45444e;
}

/* Root application frame. */
p {
  font-size: var(--editor-control-font-size);
}

.App {
  position: absolute;
  overflow: hidden;
  /* The verify-email banner is position: fixed at the viewport top; push
     .App (and every absolute-positioned page inside it) down by the
     banner's height so it doesn't cover the home header / editor top
     toolbar. The variable is set by VerifyBanner when visible, removed
     when hidden — defaulting to 0 keeps every other page intact. */
  top: var(--verify-banner-height, 0px);
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: var(--editor-panel-background-color);
}

/* Top toolbar: navigation, project metadata, zoom controls, and account actions. */
.home-icon {
  position: absolute;
  left: 0px;
}

.logo-icon {
  height: 30px;
  display: block;
}

/* File menu, opened by the top-toolbar logo button. Sits just below the
   toolbar, left-aligned under the logo. */
.logo-menu-div {
  position: absolute;
  top: 44px;
  left: 44px;
  width: 180px;
  z-index: 60;
  padding: 4px 0;
  color: var(--toolbar-text-color);
  background-color: var(--top-toolbar-background-color);
  border-radius: var(--corner-radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.logo-menu-item-div {
  padding: 6px 14px;
  cursor: pointer;
}

.logo-menu-item-div:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.logo-menu-item-div p {
  font-family: var(--editor-font-family);
  font-size: 10pt;
  margin: 0;
  text-align: left;
  user-select: none;
}

.top-toolbar-text {
  color: var(--toolbar-text-color);
  font-family: var(--editor-font-family);
  font-size: 10pt;
  margin: 0px;
}

/* Transparent full-screen layer behind an open top-toolbar menu — a click
   anywhere off the menu lands here and closes it. */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
}

/* Account dropdown, opened by the top-toolbar user icon. Sits just below
   the toolbar, horizontally centred under the user icon: the icon button
   spans right 266..302px (.user-icon right: 266px + .tt-btn 36px wide), so
   its centre is at right 284px; a 180px-wide menu centred there starts at
   right 194px. */
.account-menu-div {
  position: absolute;
  top: 44px;
  right: 194px;
  width: 180px;
  z-index: 60;
  padding: 4px 0;
  color: var(--toolbar-text-color);
  background-color: var(--top-toolbar-background-color);
  border-radius: var(--corner-radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.account-menu-item-div {
  padding: 6px 14px;
  cursor: pointer;
}

.account-menu-item-div:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.account-menu-item-div p {
  font-family: var(--editor-font-family);
  font-size: 10pt;
  margin: 0;
  text-align: left;
  user-select: none;
}

.project-name-textbox {
  position: absolute;
  top: 6px;
  left: 96px;
  height: 12px;
  width: 120px;
  background-color: var(--top-toolbar-background-color)
}

.project-name {
  position: absolute;
  top: 7px;
  left: 96px;
}

.project-date-time {
  position: absolute;
  top: 26px;
  left: 96px;
}

.zoom-percentage {
  position: relative;
  user-select: none;
}

.zoom-percentage-textbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--top-toolbar-background-color);
  text-align: center;
}

/* Right-side toolbar cluster. Element right-edge offsets are tuned so the
   36px icon buttons, the share button, and the zoom read-out all sit 8px
   apart. Order from the right edge: zoom −, zoom %, zoom +, play, share,
   user, notifications, help. */
.zoom-text-div {
  position: absolute;
  top: 17px;
  right: 56px;
  text-align: center;
  width: 50px;
  height: 50px;
}

.zoom-minus-icon {
  position: absolute;
  right: 114px;
  user-select: none;
}

.zoom-plus-icon {
  position: absolute;
  right: 12px;
  user-select: none;
}

.play-icon {
  position: absolute;
  top: 0;
  right: 158px;
}

/* Share button in the editor's top toolbar. Presented as a plain text
   glyph on the toolbar background — no fill or border — with the same
   size, radius, and hover/active highlight as the icon buttons
   (.tt-btn), so it reads as one of the same family of controls. */
.share-button {
  position: absolute;
  top: 6px;
  right: 202px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  border-radius: var(--corner-radius);
  font-family: var(--editor-font-family);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--toolbar-text-color);
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

.share-button:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.share-button:active {
  background-color: rgba(255, 255, 255, 0.22);
}

.user-icon {
  position: absolute;
  top: 0;
  right: 266px;
}

/* Circular initial badge inside the account button. Matches the size and
   fill of the previous static user.svg circle so the toolbar layout is
   unchanged, but the letter is the signed-in user's first initial. */
.account-initial-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #5259ff;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.notifications-icon {
  position: absolute;
  top: 0;
  right: 310px;
}

/* Help-mode toggle, sat just left of the notifications icon. */
.help-mode-icon {
  position: absolute;
  top: 0;
  right: 354px;
  cursor: pointer;
}

/* The Boss-area crown — only rendered when the signed-in user is a
   Boss, so the slot is empty for everyone else and the other right-
   cluster icons keep their existing positions. Sits just left of the
   help-mode toggle. */
.boss-icon {
  position: absolute;
  top: 0;
  right: 398px;
}

/* When help mode is active the question-mark button stays highlighted. */
/* Button-like container for the clickable top-toolbar icons. It is inset
   from the toolbar's top and bottom — leaving roughly equal space above and
   below — and rounds with the corner-roundness preference, like the
   left-toolbar tools. The icon image keeps its own size and is allowed to
   overflow the (transparent) button box. */
.tt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  top: 6px;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  border-radius: var(--corner-radius);
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  appearance: none;
}

.tt-btn > img {
  display: block;
}

.tt-btn:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.tt-btn:active {
  background-color: rgba(255, 255, 255, 0.22);
}

/* A toggled top-toolbar button stays highlighted while its state is on,
   marked with a selection-coloured border like a selected tool — the
   help-mode toggle while help mode is on, and the account button while
   its menu is open. */
.help-mode-icon-active,
.help-mode-icon-active:hover,
.user-icon-active,
.user-icon-active:hover,
.logo-btn-active,
.logo-btn-active:hover {
  background-color: rgba(255, 255, 255, 0.16);
  outline: var(--selection-border-width) solid var(--editor-selected-blue);
  outline-offset: calc(-1 * var(--selection-border-width));
}

/* Logo button: an icon-button in the same family as the other top-toolbar
   buttons, but width-hugging the (wider-than-tall) logo image. Sits just
   right of the home button and opens the File menu. */
.logo-btn {
  position: absolute;
  left: 40px;
  width: auto;
  padding: 0 8px;
}

/* Icon sizing for the small zoom buttons. */
.tt-zoom-icon {
  height: 16px;
  user-select: none;
}

.standard-top-toolbar-icon {
  height: var(--standard-icon-height);
  user-select: none;
}

.home-div {
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
}

.top-toolbar {
  position: absolute;
  box-sizing: border-box;
  background-color: var(--top-toolbar-background-color);
  height: var(--top-toolbar-height);
  width: 100%;
  border-bottom: 1px solid var(--panel-border-color, var(--editor-panel-separator-color));
  /* Above the editor panels and their resize handles (z-index 10..30) so
     the toolbar's dropdown menus (logo / account) layer on top of them. */
  z-index: 40;
}

/* Left tool palette and resizable toolbar rail. */
.left-toolbar {
  position: absolute;
  background-color: var(--left-toolbar-background-color);
  top: var(--top-toolbar-height);
  left: 0px;
  width: var(--left-toolbar-width);
  bottom: var(--status-bar-height, 0px);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.left-toolbar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.left-toolbar-scroll,
.item-tree-scroll,
.details-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.left-toolbar-scroll::-webkit-scrollbar,
.item-tree-scroll::-webkit-scrollbar,
.details-scroll::-webkit-scrollbar {
  display: none;
}

.tools-group {
  display: grid;
  grid-template-columns: repeat(var(--tools-group-columns, 2), 38px);
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 4px;
  gap: 2px;
  border-width: 0 0 1px;
  border-bottom: 1px;
  border-style: solid;
  border-color: #b8b8b8;
}

.tools {
  min-height: min-content;
}

.left-toolbar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 30;
  touch-action: none;
}

/* Tool button grid and active/hover states. */
.hdr {
  grid-column: 1/-1;
  font: 600 10px/1.2 system-ui;
  letter-spacing: .04em;
  color: #8b93a0;
  opacity: var(--editor-icon-muted-opacity);
  text-transform: uppercase;
  margin: 2px 0 2px;
}

/* Light mode: the left-toolbar section labels read a touch darker. */
[data-theme="light"] .hdr {
  color: #6e7480;
}

.tools button {
  aspect-ratio: 1/1;
  width: 38px;
  padding: 1px;
  display: grid;
  place-items: center;
  border-radius: var(--corner-radius);
  border: 0;
  background: #f4f3f3;
  opacity: 0.5;
}

.tool-icon {
  position: relative;
  width: 36px;
  margin: 0;
  padding: 0;
  /* Normal at rest; full brightness on hover and for the selected tool. */
  opacity: 0.9;
  border-radius: var(--corner-radius);
  user-select: none;
}

.tool {
  aspect-ratio: 1/1;
  border-radius: var(--corner-radius);
  display: grid;
  place-items: center;
  background: #ffffff14;
  /* default tile */
}

.tool:hover {
  outline: var(--selection-border-width) solid #6ea8ff;
  outline-offset: calc(-1 * var(--selection-border-width));
}

/* Selected tool: keep the icon glyph visible (don't flood the cell
   with a saturated color), and mark the state with a 2px selection
   outline at full opacity plus a slightly lifted neutral background. */
.tool[aria-pressed="true"] {
  background: var(--tool-active-bg, #e3e8f2);
  outline: var(--selection-border-width) solid var(--editor-selected-blue);
  outline-offset: calc(-1 * var(--selection-border-width));
  color: inherit;
}

.tool:focus-visible {
  outline: var(--selection-border-width) solid var(--input-focus-outline, #fff);
  outline-offset: calc(-1 * var(--selection-border-width));
}

.left-toolbar-item-div {
  border-radius: var(--corner-radius);
}

/* Mouseover highlight for toolbar tools. The selected tool keeps its
   stronger .left-toolbar-item-active treatment (background + blue outline). */
.left-toolbar-item-div:hover {
  background-color: rgba(128, 128, 128, 0.22);
}

/* Hovering the selected tool keeps its normal active background — the
   neutral grey hover tint above must not recolour it. */
.left-toolbar-item-active:hover {
  background-color: var(--tool-active-bg, #e3e8f2);
}

/* Hovered and selected tools also get a full-brightness glyph. */
.left-toolbar-item-div:hover .tool-icon,
.left-toolbar-item-active .tool-icon {
  opacity: 1;
}

/* Currently-selected tool. A 2px selection-blue outline + a soft lift
   instead of a saturated blue fill — the icon glyph stays readable
   and the active state reads as "structurally marked" rather than a
   splash of color. */
.left-toolbar-item-active {
  background-color: var(--tool-active-bg, #e3e8f2);
  outline: var(--selection-border-width) solid var(--editor-selected-blue);
  outline-offset: calc(-1 * var(--selection-border-width));
}

/* Left layers panel: page list and visual item tree. */
.tree-div {
  position: absolute;
  top: var(--top-toolbar-height);
  left: var(--left-toolbar-width);
  bottom: var(--status-bar-height, 0px);
  width: var(--tree-width);
  text-align: left;
  background-color: var(--editor-panel-background-color);
  border-right: 1px solid var(--panel-border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.page-div {
  width: 100%;
  color: var(--editor-text-color);
  flex: 0 0 auto;
  padding: 5px 0;
}

.page-triangle-img {
  padding: 4px var(--panel-triangle-pad-right) 4px var(--panel-triangle-pad-left);
  opacity: var(--editor-icon-muted-opacity);
  height: var(--panel-triangle-size);
  width: var(--panel-triangle-size);
  vertical-align: middle;
  cursor: pointer;
  box-sizing: content-box;
}

/* Section (Level-1) disclosure triangle. Element fills the 0..panel-indent
   band; the 12px image sits at 7..19 within it (1px right of the band's
   natural center), with --panel-triangle-pad-right of space to the title. */
.section-triangle-img {
  padding: 4px var(--panel-triangle-pad-right) 4px var(--panel-triangle-pad-left);
  opacity: var(--editor-icon-muted-opacity);
  height: var(--panel-triangle-size);
  width: var(--panel-triangle-size);
  vertical-align: middle;
  cursor: pointer;
  box-sizing: content-box;
  position: relative;
  z-index: 25;
}

.separator {
  border-color: var(--editor-panel-separator-color);
  border-width: 0px 0px 2px 0px;
  border-style: solid;
}

/* Header row holding the disclosure triangle, the "Page" title, and the
   add / delete icons — laid out with flex so everything sits on a shared
   vertical centre line. margin-right: auto on the title pushes the icons
   to the right. padding-right keeps them clear of the 12px-wide
   .left-panel-resize-handle that overlays the panel's right edge, so the
   icons stay hoverable / clickable instead of being captured by it. */
.page-header-row {
  display: flex;
  align-items: center;
  padding-right: 14px;
}

.page-heading {
  margin: 0 auto 0 0;
  user-select: none;
  vertical-align: middle;
  color: var(--header-2-color);
}

.page-list-plus-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

.minus-variable-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

.page-list-minus-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

.page-list-ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  margin-top: 6px;
  margin-bottom: 0px;
  padding-left: 3px;
  font-size: var(--editor-control-font-size);
}

.page-list-item-div {
  padding: 4px 0px;
}

.item-tree-div {
  width: 100%;
  color: var(--editor-text-color);
}

.item-tree-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.item-tree-ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  font-size: var(--editor-control-font-size);
}

.item-tree-item p {
  margin: 0px;
  padding-bottom: 3px;
  user-select: none;
  display: inline-block;
}

.item-tree-item input {
  padding: 0px;
  width: 140px;
  margin: 5px 3px;
  user-select: none;
}

.item-tree-item img {
  padding: 5px 5px 2px;
  /* the opacity is set in the javascript */
  height: 6px;
  width: 6px;
}

/* Shared detail-panel row controls and inline icon controls. */
.align-items-div {
  padding: 0px 6px;
}

.align-icon {
  padding: 2px;
  margin: 0 4px 0 0;
  opacity: 0.7;
  cursor: pointer;
  user-select: none;
  border: var(--selection-border-width) solid transparent;
  border-radius: var(--corner-radius);
  box-sizing: border-box;
}

.align-icon:hover {
  background-color: rgba(128, 128, 128, 0.22);
  opacity: 1;
}

/* Selectable alignment icons (image / text justification) sit inside an
   unfiltered cell, just like a line-end cap. The selection outline lives
   on this cell so it shows the true selection colour in dark mode (the
   icon itself is luminance-inverted), and the selected icon goes to full
   opacity — so a selected alignment icon reads exactly as bright as a
   selected cap. */
.align-icon-cell {
  display: inline-flex;
  margin: 0 4px 0 0;
  border-radius: var(--corner-radius-sm);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  outline: var(--selection-border-width) solid transparent;
  outline-offset: calc(-1 * var(--selection-border-width));
}

.align-icon-cell .align-icon {
  margin: 0;
}

.align-icon-cell-selected {
  background-color: var(--tool-active-bg, #e3e8f2);
  outline-color: var(--editor-selected-blue);
}

.align-icon-cell-selected .align-icon {
  opacity: 1;
}

.groups-add-remove-div {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--panel-control-gap);
}

.add-group-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

.remove-groups-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

/* Right details panel shell and resizer. */
.details-div {
  position: fixed;
  text-align: left;
  top: var(--top-toolbar-height);
  right: 0;
  bottom: var(--status-bar-height, 0px);
  width: var(--details-width);
  background-color: var(--editor-panel-background-color);
  color: var(--editor-text-color);
  border-left: 1px solid var(--panel-border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.details-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.left-panel-resize-handle,
.details-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: col-resize;
  z-index: 20;
  touch-action: none;
}

.left-panel-resize-handle {
  right: 0;
}

.details-resize-handle {
  left: 0;
}

/* Details panel form rows, inputs, and disclosure affordances. */
.section-content-row {
  margin-left: var(--panel-indent);
}

/* Content revealed by a secondary disclosure (stroke options, line options,
   corners) is indented to Level 2 so the visual hierarchy matches the
   disclosure tree. Both the disclosure-toggled title row and its expanded
   content land at the same X. */
.details-line-group,
.stroke-options-group {
  margin-left: var(--panel-level-2);
}

/* One (label + control) pair inside a stroke-options sub-section. Wrapper
   is --details-row-height tall; children stay at their natural height and
   are centered vertically. */
.stroke-options-div {
  display: flex;
  align-items: center;
  height: var(--details-row-height);
}

/* Wrapper for the Dimensions grid (X/Y/W/H/Corners/Angle).
   Shifts the column-cell layout right so the first column aligns with
   title-text. The cells themselves remain inline-block at 40% width. */
.dim-grid {
  padding-left: var(--panel-indent);
  /* Standard right gutter so the rightmost fields (Y, H) stop 8px short
     of the panel edge rather than running flush against it. */
  padding-right: 8px;
}

/* X|Y and W|H pairs: the second field packs flush against the first
   instead of sitting out at a fixed column. */
.dim-row {
  display: flex;
  align-items: center;
  gap: var(--panel-pair-gap, 20px);
}

.dim-row .details-line-half-div {
  width: auto;
  /* Split the row evenly so each field (X|Y, W|H) — all formula-capable
     — claims half the available width and its input can grow into it. */
  flex: 1 1 0;
  min-width: 0;
}

/* Flex row so children center on the geometric midline (matches every
   other panel row — .stroke-options-div, .color-details-div, etc.).
   Using line-height + vertical-align:middle here drifted the contents
   off-center relative to the surrounding flex rows. */
.details-line-div {
  display: flex;
  align-items: center;
  height: var(--details-row-height);
  width: 100%;
}

/* Multi-pair rows (west/east adornment selects, west/east cap selects,
   west/east size sliders). The label (icon) keeps its intra-pair gap to
   its control via its own margin-right; we add --panel-pair-gap as left
   margin to the start of each subsequent pair so the pairs visibly
   separate. */
.details-line-div > .arrow-icon ~ .arrow-icon,
.details-line-div > .stroke-cap ~ .stroke-cap,
.details-line-div > .line-cap ~ .line-cap,
.details-line-div > .adornment-size-div ~ .adornment-size-div {
  margin-left: var(--panel-pair-gap);
}

.details-line-half-div {
  display: inline-flex;
  align-items: center;
  height: var(--details-row-height);
  /* Standalone rows (Angle, Corner Count, Corners) span the panel so the
     formula input can stretch; the X|Y / W|H pairs override this in the
     `.dim-row` rule above. */
  width: 100%;
  vertical-align: middle;
}

/* Inside a half-div, the .vi-dim wrapper would force a non-flex child box
   that prevents the label/input from centering directly. Collapse it with
   display: contents so the label + input become flex items of the
   .details-line-half-div and get vertically centered by align-items. */
.details-line-half-div > .vi-dim {
  display: contents;
}

.details-line-sides-div {
  display: inline-flex;
  align-items: center;
  height: var(--details-row-height);
  /* Claim the row space left of the Equilateral checkbox (40%) so the
     formula-capable Side input has room to grow. */
  width: 58%;
  vertical-align: middle;
}

.details-line-checkbox {
  display: inline-block;
  height: var(--details-row-height);
  width: 40%;
  line-height: var(--details-row-height);
  vertical-align: middle;
}

.details-line-star-div {
  display: block;
  height: var(--details-row-height);
  line-height: var(--details-row-height);
}

/* W / E adornment-size control: an E/W label + slider that line up
   with the line-end ADORNMENT row above — the label occupies the same
   width as the arrow icon (10px) and the slider the same width as the
   adornment select (86px), with the standard 8px gap between. */
.adornment-size-div {
  display: inline-flex;
  align-items: center;
  height: var(--details-row-height);
}

.adornment-size-label {
  flex: none;
  width: 10px;
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  font-size: var(--editor-control-font-size);
  color: var(--editor-muted-text-color);
  text-align: left;
  user-select: none;
}

/* The W / E adornment-size sliders share the star-ratio slider class;
   size them to match the adornment select (86px). */
.adornment-size-div .star-depth-slider {
  flex: none;
  width: 86px;
  margin: 0;
}

.corners-line-div {
  height: var(--details-row-height);
  width: calc(100% - var(--panel-indent));
  line-height: var(--details-row-height);
  margin: 0 0 0 var(--panel-indent);
}

.vi-dim {
  display: inline-block;
  vertical-align: middle;
}

.details-div p {
  display: inline-block;
  margin: 0px var(--panel-checkbox-label-gap) 0px 0;
  width: 14px;
  font-size: var(--editor-control-font-size);
  line-height: normal;
  text-align: left;
  color: var(--editor-muted-text-color);
  user-select: none;
  vertical-align: middle;
}

/* Collapsible "Scale / Skew" sub-section header in the dimensions panel. */
.scale-skew-header {
  display: flex;
  align-items: center;
  min-height: var(--details-row-height);
}

.scale-skew-title {
  font-weight: 600;
  font-size: var(--editor-control-font-size);
  color: var(--header-3-color);
  user-select: none;
}

.scale-skew-normal {
  margin-left: 6px;
  color: var(--editor-muted-text-color);
}

/* "Use Scaled Info" toggle at the top of the Scale / Skew sub-section.
   Indented one step (level 2) so it lines up with the scale/skew rows;
   the checkbox and its label use the standard panel checkbox gap. */
.scale-skew-checkbox {
  display: flex;
  align-items: center;
  min-height: var(--details-row-height);
  margin-left: var(--panel-indent);
}

.scale-skew-checkbox label {
  display: flex;
  align-items: center;
  font-size: var(--editor-control-font-size);
  color: var(--editor-muted-text-color);
  user-select: none;
}

.scale-skew-checkbox input {
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
}

/* Scale / skew rows in the dimensions panel: label, slider, and a
   small percentage edit box, each control on its own line, indented
   one step (level 2) past the panel's level-1 content. */
.scale-skew-row {
  display: flex;
  align-items: center;
  min-height: var(--details-row-height);
  margin-left: var(--panel-indent);
  gap: var(--panel-checkbox-label-gap);
}

/* Auto width so the gap after the label equals the gap after the
   slider (both are just the row's flex gap). */
.scale-skew-label {
  flex: none;
  font-size: var(--editor-control-font-size);
  color: var(--editor-muted-text-color);
  user-select: none;
  white-space: nowrap;
}

.scale-skew-slider {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100px;
  vertical-align: middle;
}

/* Design-panel range sliders tint with the editor selection color, so
   they restyle along with it when it is changed in Customize | Colors. */
.scale-skew-slider,
.star-depth-slider,
.highlighter-opacity-slider {
  accent-color: var(--editor-selected-blue);
}

.scale-skew-input {
  width: 42px;
  flex: none;
  font-size: var(--editor-control-font-size);
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

/* Numeric edit boxes. Justification follows the --number-input-align
   preference (Customize → Layout); defaults to right so digits line up.
   The `input[type="number"]` selector applies it everywhere — including
   the Customize page's own number fields. */
input[type="number"],
.details-line-div input,
.details-line-half-div input,
.details-line-sides-div input,
.corners-line-div input,
.details-line-star-div input,
.line-width-input,
.stroke-width-input,
.miter-limit-text-input,
.scale-skew-input,
.star-depth,
.alpha-input,
.color-part-input,
.gradient-stop-position-input,
.gradient-offset-input,
.shadow-offset-input,
.delay-input,
.font-div-size,
.stroke-dashes-text-input,
.line-dashes-text-input {
  text-align: var(--number-input-align, right);
}

/* Secondary (Level-2) disclosure triangle. The triangle element fills the
   panel-indent..panel-level-2 band (its parent row's margin-left is
   panel-indent, so the triangle starts there). Inside the element, the
   12px image sits at the same offset as the Level-1 section triangle —
   nudged 1px right of the band's natural center — and the title that
   follows starts at panel-level-2. */
.corners-triangle,
.line-width-triangle {
  margin: 0;
  padding: 4px var(--panel-triangle-pad-right) 4px var(--panel-triangle-pad-left);
  box-sizing: content-box;
  height: var(--panel-triangle-size);
  width: var(--panel-triangle-size);
  opacity: var(--editor-icon-muted-opacity);
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  z-index: 25;
}

.section-triangle {
  margin: 0px 0px 0px 3px;
  /* opacity is set in the code */
  padding: 3px;
  height: 12px;
  width: 12px;
  position: relative;
  z-index: 25;
}

#item-dim-0 {
  width: 45px;
}

#item-dim-side {
  width: 45px;
}

.corners-icon {
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  opacity: var(--editor-icon-muted-opacity);
  vertical-align: middle;
}

.corners-line-div input {
  display: inline-block;
  font-size: var(--editor-control-font-size);
  width: 25px;
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

.corners-line-div .vi-dim {
  margin-right: var(--panel-control-gap);
}

.corners-line-div .vi-dim:last-child {
  margin-right: 0;
}

.star-depth-slider[type="range"]::after,
.adornment-size-slider[type="range"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 8px;
  transform: translate(-1px, -50%);
  background: currentColor;
  opacity: .35;
  pointer-events: none;
}

.details-line-star-div input {
  display: inline-block;
  position: relative;
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
}

.star-depth {
  display: inline-block;
  width: 42px;
  margin-left: 10px;
}

.details-line-div input,
.details-line-half-div input,
.details-line-sides-div input {
  display: inline-block;
  width: 60px;
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

/* Formula-capable dimension inputs (X / Y / W / H, angle, corner radius,
   corner count, side) grow to use leftover row width so a longer
   expression like 50{(count+5)*5} stays readable — but `max-width` caps
   the growth so a lone field in a wide row doesn't stretch the whole
   panel. A descendant selector is required: the VIDimension input sits
   inside a `display:contents` `.vi-dim` wrapper, so a `>` child
   combinator wouldn't match it. */
.details-line-half-div input,
.details-line-sides-div input {
  flex: 1 1 0;
  width: auto;
  min-width: 44px;
  max-width: 150px;
}

.details-div-heading,
.prototype-div-heading {
  text-align: left;
  margin: 0;
  user-select: none;
  display: inline-block;
  vertical-align: middle;
  color: var(--header-2-color);
}

/* Sections without a disclosure triangle render the heading as the first
   child of .details-header. Indent it to match the title-text position of
   triangled sections (the triangle is panel-indent wide, so triangled
   headings start at panel-indent automatically). */
.details-header > .details-div-heading:first-child,
.details-header > .prototype-div-heading:first-child {
  margin-left: var(--panel-indent);
}

.details-div-heading-descr {
  font-size: var(--editor-control-font-size);
  vertical-align: middle;
}

.details-div-group,
.prototype-div-group {
  padding: 10px 0;
  line-height: var(--details-row-height);
}

/* Vertical breathing room between consecutive rows inside a section,
   so lines don't crowd against each other.
.details-div-group > .details-line-div,
.details-div-group > .details-line-half-div,
.details-div-group > .stroke-details-div,
.details-div-group > .line-details-div,
.details-div-group > .image-details-div,
.details-div-group > .stroke-options-group,
.details-div-group > .color-details-div,
.details-div-group > .shadow-div,
.details-div-group > .section-content-row {
  margin-top: var(--panel-row-gap);
}
*/
/* Floating toolbar submenus and editor canvas containers. */
.chevron-icon {
  position: absolute;
  top: 22px;
  left: var(--chevron-left);
  opacity: var(--editor-icon-muted-opacity);
  user-select: none;
}

.toolbar-submenu {
  position: absolute;
  left: var(--left-toolbar-width);
  background-color: var(--left-toolbar-background-color);
  height: var(--standard-icon-height);
  /* top is calculated in the javascript */
  z-index: 100;
}

#canvas-div {
  position: absolute;
  overflow: hidden;
  top: var(--top-toolbar-height);
  left: calc(var(--left-toolbar-width) + var(--tree-width));
  bottom: 0px;
  right: var(--details-width);
  z-index: 0;
  background-color: var(--canvas-background-color);
}

/* Floating save/load status pill centered near the top of the canvas. */
.canvas-notification {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(24, 24, 28, 0.80);
  color: #fff;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  letter-spacing: 0.02em;
}

#prototype-canvas-div {
  position: absolute;
  overflow-y: auto;
  overflow-x: auto;
  /* Anchor below the top toolbar (matches #canvas-div). Otherwise the
     canvas extends behind the toolbar, and a frame stretched to fill the
     canvas vertically tucks its top under the toolbar. */
  top: var(--top-toolbar-height);
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

/* When the page hides the prototype top toolbar, the canvas takes the
   full viewport height (no toolbar offset to compensate for). Escape
   stops playback in this mode. */
.prototype-no-toolbar #prototype-canvas-div {
  top: 0;
}

.canvas,
.prototype-canvas {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

/* Focus indicator: shows when the editor canvas has keyboard focus so the user
   knows that canvas-only shortcuts (arrow nudge, eyedropper Enter, etc.) will
   fire. The prototype-canvas is excluded — during playback the canvas is the
   "screen" the user is interacting with, and a focus ring around it reads as
   a stray editor chrome leak. outline-offset: -2px keeps the ring inside the
   canvas so layout doesn't shift. Color matches TColor.selection (paint.ts). */
.canvas:focus {
  outline: 2px solid var(--editor-selected-blue);
  outline-offset: -2px;
}

/* Hidden assets and custom cursor images used by the canvas. */
.selected-icon {
  height: 12px;
  opacity: 0.5;
}

#rotation-cursor {
  position: relative;
  left: -99999px;
  height: 20px;
  width: 20px;
}

#pen-cursor {
  position: relative;
  left: -99999px;
  height: 25px;
  width: 14px;
}

#eyedropper-cursor {
  height: 25px;
  user-select: none;
  z-index: 750;
}

/* Page, fill, stroke, gradient, behavior, and ring add/remove controls.
   The page add/delete divs are flex items of .page-header-row, centred on
   its line — no float. The right-edge gap comes from the row's
   padding-right; the plus (rightmost) needs no margin of its own. */
.page-add-div {
  display: flex;
  align-items: center;
  margin: 0;
}

.fill-add-div,
.stroke-add-div,
.gradient-add-div {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--panel-control-gap) 0 0;
}

.add-fill-icon,
.add-palette-color-icon,
.add-stroke-icon,
.add-variable-icon,
.add-trigger-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

.page-delete-div {
  display: flex;
  align-items: center;
  margin: 0 5px 0 0;
}

.fill-delete-div,
.stroke-delete-div,
.gradient-delete-div,
.delete-gradient-color-div,
.delete-behavior-div,
.delete-ring-div {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--panel-control-gap) 0 0;
}

.ring-shift-div {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--panel-control-gap) 0 0;
}

.add-behavior-div,
.variable-add-div,
.trigger-add-div {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--panel-control-gap) 0 0;
}

.delete-color-icon,
.delete-stroke-icon,
.delete-gradient-icon,
.delete-gradient-color-icon,
.delete-behavior-icon,
.delete-ring-icon,
.variables-delete-icon,
.delete-trigger-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

.add-behavior-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  user-select: none;
  vertical-align: middle;
}

/* Color, fill, stroke, line, and selection color controls. */
/* Color swatch that opens the color picker — sized and styled to match
   the gradient color-stop swatches. */
.color-div {
  height: 20px;
  width: 28px;
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  display: inline-block;
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  flex: 0 0 auto;
  cursor: pointer;
}

.fill-details-div label {
  display: inline;
  margin: 0px;
  position: relative;
  font-size: 14pt;
  top: -10px;
  user-select: none;
}

.color-text-input {
  width: 60px;
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

/* Opacity %. Styled and behaving like the scale / skew percentage
   boxes — the "%" lives inside the box (no trailing label). */
.alpha-input {
  width: 42px;
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  font-size: var(--editor-control-font-size);
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

.gradient-stop-position-input {
  position: relative;
  width: 25px;
  margin: 0 3px;
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
}

/* Level-1 row: width is left auto so it fills the panel content area
   live as the panel resizes, keeping the right-aligned sight controls
   pinned to the panel's right edge. */
.color-details-div {
  display: flex;
  align-items: center;
  height: var(--details-row-height);
  margin-left: var(--panel-indent);
}

/* Generic Level-1 row wrapper: --details-row-height tall (min), flex with
   align-items: center, indented to panel-indent. Use this for single-control
   rows and for icon rows whose icons fill the row height (like the Text
   align icons). The vertical padding adds breathing room above and below
   the children, so a row of full-height icons reads with the same visual
   spacing as a row of text + input. */
.section-row {
  display: flex;
  align-items: center;
  min-height: var(--details-row-height);
  margin-left: var(--panel-indent);
  padding: var(--panel-row-gap) 0;
}

.stroke-details-div,
.line-details-div,
.image-details-div {
  display: flex;
  align-items: center;
  height: var(--details-row-height);
  margin-left: var(--panel-indent);
  /* Right gutter so the width input (which now grows to fill the row)
     stops short of the panel edge. */
  margin-right: var(--panel-right-gutter);
}

.fill-details-div p {
  width: 100%;
  text-align: left;
}

.stroke-details-div p {
  width: 100%;
  text-align: left;
}

.line-width-icon,
.stroke-width-icon {
  width: 16px;
  height: 16px;
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  opacity: var(--editor-icon-muted-opacity);
  vertical-align: middle;
}

.line-width-input,
.stroke-width-input {
  position: relative;
  /* Formula-capable — grow into spare row width but cap the growth so a
     lone width field doesn't stretch across the whole panel. */
  flex: 1 1 0;
  width: auto;
  min-width: 40px;
  max-width: 150px;
  margin: 0 var(--panel-control-gap) 0 0;
  vertical-align: middle;
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
}

/* .line-width-triangle shares its layout rule with .corners-triangle above. */

.stroke-dashes-label,
.line-dashes-label {
  display: inline-block;
  width: auto;
  font-size: var(--editor-control-font-size);
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  text-align: left;
  vertical-align: middle;
}

/* Dash / gap row: small label→input gap, modest input→Auto gap, and
   every item vertically centered. The shared is-auto-dashes rules add
   stray top offsets, so re-flatten them within the dash rows. */
.stroke-details-div .is-auto-dashes-label,
.line-details-div .is-auto-dashes-label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 13px;
}

.stroke-details-div .is-auto-dashes-checkbox,
.line-details-div .is-auto-dashes-checkbox {
  position: static;
  top: 0;
  margin: 0 4px 0 0;
}

.stroke-dashes-text-input,
.line-dashes-text-input {
  position: relative;
  width: 110px;
  font-size: var(--editor-control-font-size);
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

/* Match count + sight icon, pushed to the right edge of the color row.
   Flex (not float) so the count and icon align on the row's centre line;
   flex: none so the group keeps its natural width and never clips. */
.sight-div {
  display: flex;
  align-items: center;
  flex: none;
  height: var(--details-row-height);
  margin-left: auto;
}

.sight-icon {
  opacity: var(--editor-icon-muted-opacity);
  height: 20px;
  padding: 4px 7px;
  user-select: none;
}

/* Match count "N / M": the count, slash, and total spaced by an even
   8px gap and sized so the text always has room and never clips. */
.sight-count {
  display: flex;
  align-items: center;
  gap: var(--panel-checkbox-label-gap);
  margin: 0;
  flex: none;
  white-space: nowrap;
  font-size: var(--editor-control-font-size);
  color: var(--editor-text-color);
}

/* Clickable panel icons — the section plus / minus add & delete icons,
   the selection-colors targeting icon, the path-operation icons, and the
   pen-ring icons — get a top-toolbar-style hover background. It sits on
   the icon element itself so it hugs the icon's own box and never shifts
   the surrounding layout the way a padded toolbar button would. */
.add-fill-icon,
.add-palette-color-icon,
.add-stroke-icon,
.add-variable-icon,
.add-trigger-icon,
.delete-color-icon,
.delete-gradient-color-icon,
.delete-gradient-icon,
.delete-ring-icon,
.delete-stroke-icon,
.variables-delete-icon,
.delete-trigger-icon,
.page-list-plus-icon,
.page-list-minus-icon,
.sight-icon,
.group-icon,
.union-icon,
.outline-icon,
.subtract-icon,
.exclude-icon,
.intersect-icon,
.pen-icon,
.ring-icon {
  border-radius: var(--corner-radius-sm);
  cursor: pointer;
}

.add-fill-icon:hover,
.add-palette-color-icon:hover,
.add-stroke-icon:hover,
.add-variable-icon:hover,
.add-trigger-icon:hover,
.delete-color-icon:hover,
.delete-gradient-color-icon:hover,
.delete-gradient-icon:hover,
.delete-ring-icon:hover,
.delete-stroke-icon:hover,
.variables-delete-icon:hover,
.delete-trigger-icon:hover,
.page-list-plus-icon:hover,
.page-list-minus-icon:hover,
.sight-icon:hover,
.group-icon:hover,
.union-icon:hover,
.outline-icon:hover,
.subtract-icon:hover,
.exclude-icon:hover,
.intersect-icon:hover,
.pen-icon:hover,
.ring-icon:hover {
  background-color: rgba(128, 128, 128, 0.22);
  opacity: 1;
}

/* Plus / minus add & delete icon-buttons: a slightly larger clickable area,
   and a hover that brightens only the glyph rather than painting a background. */
.add-fill-icon,
.add-palette-color-icon,
.add-stroke-icon,
.add-behavior-icon,
.add-variable-icon,
.add-trigger-icon,
.delete-color-icon,
.delete-stroke-icon,
.delete-gradient-icon,
.delete-gradient-color-icon,
.delete-behavior-icon,
.delete-ring-icon,
.variables-delete-icon,
.delete-trigger-icon,
.page-list-plus-icon,
.page-list-minus-icon,
.minus-variable-icon,
.remove-groups-icon {
  box-sizing: content-box;
  padding: 1px;
  cursor: pointer;
}

.add-fill-icon:hover,
.add-palette-color-icon:hover,
.add-stroke-icon:hover,
.add-behavior-icon:hover,
.add-variable-icon:hover,
.add-trigger-icon:hover,
.delete-color-icon:hover,
.delete-stroke-icon:hover,
.delete-gradient-icon:hover,
.delete-gradient-color-icon:hover,
.delete-behavior-icon:hover,
.delete-ring-icon:hover,
.variables-delete-icon:hover,
.delete-trigger-icon:hover,
.page-list-plus-icon:hover,
.page-list-minus-icon:hover,
.minus-variable-icon:hover,
.remove-groups-icon:hover,
.sight-icon:hover {
  background-color: transparent;
  opacity: 1;
}

.corner-count-icon {
  opacity: var(--editor-icon-muted-opacity);
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  height: 14px;
  user-select: none;
  vertical-align: middle;
}

/* Angle dimension glyph — replaces the old "A" text label. */
.angle-icon {
  opacity: var(--editor-icon-muted-opacity);
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  width: 14px;
  height: 14px;
  user-select: none;
  vertical-align: middle;
}

.star-ratio-icon {
  opacity: var(--editor-icon-muted-opacity);
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  height: 14px;
  user-select: none;
  vertical-align: middle;
}

/* Text, typography, media, alignment, and shape option controls. */
#text-area {
  font-family: var(--editor-font-family);
  position: absolute;
  display: block;
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  font-size: var(--editor-control-font-size);
  font-weight: normal;
  line-height: 1.25em;
  resize: none;
  color: black;
  z-index: 100;
  user-select: all;
  overflow: hidden;
  white-space: break-spaces;
  overflow-wrap: normal;
}

.font-div {
  display: flex;
  align-items: center;
  height: var(--details-row-height);
  margin-left: var(--panel-indent);
}

.font-div label {
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  font-size: var(--editor-control-font-size);
  color: var(--editor-muted-text-color);
}

.font-div input {
  border: var(--editor-control-border);
  outline-color: var(--editor-text-color);
  color: var(--editor-text-color);
}

.font-div input.font-div-font {
  margin-right: var(--panel-pair-gap);
}

.font-div input.font-div-size {
  margin-right: var(--panel-control-gap);
}

.is-vertex-up-checkbox,
.is-equilateral-checkbox,
.is-even-odd-checkbox,
.is-closed-checkbox,
.is-auto-dashes-checkbox {
  position: relative;
  top: 2px;
  margin: 5px var(--panel-checkbox-label-gap) 0px 0px;
}

.is-vertex-up-label,
.is-equilateral-label,
.is-even-odd-label,
.is-is-closed-label,
.is-auto-dashes-label {
  font-family: var(--editor-font-family);
  font-size: var(--editor-control-font-size);
  margin: 3px 0 0 3px;
  color: var(--editor-muted-text-color);
  user-select: none;
}

.is-italic-checkbox {
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  vertical-align: middle;
}

.is-radial-checkbox {
  position: relative;
  top: 2px;
  margin: 5px var(--panel-checkbox-label-gap) 0px 12px;
}

#is-italic-label,
#is-radial-label {
  font-size: var(--editor-control-font-size);
  margin: 0;
  user-select: none;
  vertical-align: middle;
}

.font-div-font {
  width: 120px;
}

.font-div-size {
  width: 50px;
}

.font-weight-types {
  margin-right: var(--panel-pair-gap);
  border: var(--editor-control-border);
  outline-color: var(--editor-text-color);
  color: var(--editor-text-color);
  vertical-align: middle;
}

.align-div {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 var(--panel-indent);
}

.align-items-section {
  padding: 6px 0;
}

.image-align-div {
  height: var(--details-row-height);
  /* The align icons fill the row's full height edge-to-edge, so a clear
     bottom margin is needed to separate them from the Get Image button on
     the next line. */
  margin: 0 4px 14px var(--panel-indent);
  display: block;
}

/* The Image section's align group sits inside .image-align-div, which
   already provides the Level-1 indent — cancel the shared .align-div indent
   here so the group starts at Level 1 rather than stacking to Level 2. */
.image-align-div .align-div {
  margin-left: 0;
}

.offscreen-image {
  position: relative;
  left: -99999px;
}

.video {
  position: absolute;
  top: 100px;
  left: 200px;
}

.arrow-types {
  width: 86px;
  vertical-align: middle;
}

.arrow-icon {
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  width: 10px;
  opacity: var(--editor-icon-muted-opacity);
  vertical-align: middle;
}

/* Line-end cap picker: three selectable icons (butt / round / square)
   replacing the old cap dropdown. The selection outline lives on the
   (unfiltered) cell so it shows the true selection colour — the icon
   image itself carries the dark-mode invert filter. */
.cap-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}

/* A cap picker for a line end that carries an adornment — the cap is
   irrelevant there, so it is shown greyed-out and non-interactive. */
.cap-selector-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.cap-icon-cell {
  display: inline-flex;
  padding: 1px;
  border-radius: var(--corner-radius-sm);
  cursor: pointer;
  user-select: none;
  outline: var(--selection-border-width) solid transparent;
  outline-offset: calc(-1 * var(--selection-border-width));
}

.cap-icon-cell:hover {
  outline-color: var(--editor-control-border-color);
}

.cap-icon-cell-selected:hover {
  outline-color: var(--editor-selected-blue);
}

/* Selected cap: identical to a pressed left-toolbar tool — same active
   background and same selection outline. The outline lives on this
   (unfiltered) cell, so it shows the true selection colour in dark
   mode rather than the brightened tint the icon filter produced. */
.cap-icon-cell-selected {
  background-color: var(--tool-active-bg, #e3e8f2);
  outline-color: var(--editor-selected-blue);
}

.cap-icon-img {
  display: block;
  width: 18px;
  height: 18px;
  opacity: var(--editor-icon-muted-opacity);
}

.cap-icon-cell-selected .cap-icon-img {
  opacity: 1;
}

/* West-end caps: rotate the icon 180° so the end faces left. */
.cap-icon-west {
  transform: rotate(180deg);
}

/* Link / unlink toggle between west and east cap selectors. */
.cap-link-toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 4px;
  opacity: var(--editor-icon-muted-opacity);
  cursor: pointer;
  user-select: none;
  border-radius: var(--corner-radius-sm);
  padding: 1px;
  box-sizing: content-box;
}

.cap-link-toggle:hover {
  background-color: transparent;
  opacity: 1;
}

.cap-link-toggle-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* (icon + cap selector) pair. The second pair on a row is nudged right
   so the two ends read as two distinct groups. */
.line-end-pair {
  display: inline-flex;
  align-items: center;
}

.line-end-pair ~ .line-end-pair {
  margin-left: var(--panel-pair-gap);
}

/* Aligned two-column rows for the line section's west/east controls.
   The first (west) column is a fixed width so every east control —
   and its label / icon — starts at the same x. */
.line-pair-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--details-row-height);
}

.adornment-autosize-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px var(--panel-right-gutter) 2px 0;
  cursor: pointer;
  user-select: none;
}

.line-pair-row > .line-pair-col {
  display: flex;
  align-items: center;
}

.line-pair-row > .line-pair-col:first-child {
  width: 128px;
  flex: none;
}

/* Cap row: two equal halves with the link/unlink toggle centred between them.
   Unlike the other line-pair-rows, this row does not use a fixed-width first
   column — both sides flex to equal width so the icon lands exactly between
   the two CapSelector groups. */
.cap-link-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--details-row-height);
}

.cap-link-row > .cap-link-west,
.cap-link-row > .cap-link-east {
  flex: 1;
  display: flex;
  align-items: center;
}

/* In the line-end context only: inset matches arrow-icon (10px) +
   gap so cap icons left-align with the selects and sliders below. */
.details-line-group .cap-link-west,
.details-line-group .cap-link-east {
  padding-left: calc(10px + var(--panel-checkbox-label-gap));
}

/* Line style (solid / dashed) radio group, indented to level 1. */
.line-style-section {
  margin-left: var(--panel-indent);
}

/* The dashes row nested under the (already level-1) line-style section
   adds one more indent step so the dash / gap line sits at level 2. */
.line-style-section .line-details-div {
  margin-left: var(--panel-indent);
}

.line-style-radios {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--details-row-height);
}

.line-style-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--editor-control-font-size);
  color: var(--editor-muted-text-color);
  user-select: none;
  cursor: pointer;
}

.line-style-radio input[type="radio"] {
  margin: 0;
}

.stroke-cap,
.line-cap {
  margin: 0 var(--panel-control-gap) 0 0;
  vertical-align: middle;
}

.palette {
  position: relative;
  padding: 1px;
  height: 12px;
  width: var(--editor-swatch-size);
  opacity: var(--editor-icon-muted-opacity);
}

/* ── Item-tree drag and drop ──────────────────────────────────────────
   A blue line marks a sibling drop; a tinted, outlined row marks a drop
   *into* a container; the row being dragged is dimmed. */
.tree-drop-line {
  height: 2px;
  margin-right: 6px;
  background-color: var(--editor-selected-blue, #1097e2);
  border-radius: 1px;
  pointer-events: auto;
}

/* A small knob at the start of the insertion line for extra clarity. */
.tree-drop-line::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin: -2px 0 0 -3px;
  border-radius: 50%;
  background-color: var(--editor-selected-blue, #1097e2);
}

.tree-drop-into {
  background-color: rgba(16, 151, 226, 0.22) !important;
  outline: 1px solid var(--editor-selected-blue, #1097e2);
  outline-offset: -1px;
}

.tree-row-dragging {
  opacity: 0.4;
}

/* ── Help mode panel ──────────────────────────────────────────────────
   Shown in the left panel, in place of the layers tree, while help mode
   is on. Describes whatever element the pointer is over. */
.help-panel {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
  color: var(--editor-text-color);
}

/* Help mode is view-only: force the question-mark help cursor everywhere
   so it's obvious the pointer describes things rather than operating them.
   The help-mode toggle button is the one exception — it stays a pointer
   so the user can click it to exit. */
body.help-mode,
body.help-mode * {
  cursor: help !important;
}

body.help-mode .help-mode-icon,
body.help-mode .help-mode-icon * {
  cursor: pointer !important;
}

/* "Help mode" header: a recessed band near the top of the panel, with a
   light background and an even 7px gap above, below, and on either side.
   The negative margins cancel the .help-panel padding (12px 14px) down to
   that 7px inset — hence -5px top and -7px sides. */
.help-panel-badge {
  display: block;
  margin: -5px -7px 7px -7px;
  padding: 8px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--editor-muted-text-color);
  background-color: var(--editor-panel-separator-color);
}

.help-panel-title {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--header-2-color);
}

/* Sub-heading inside the help panel — used for the "Customizable" block
   that names where a field's default lives in Customize → Engine Defaults. */
.help-panel-subtitle {
  margin: 10px 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--header-2-color);
}

/* The description is indented under the title, left-aligned, with a
   selection-coloured accent line down its left edge. */
.help-panel-body {
  margin: 0 0 10px 0;
  padding-left: 12px;
  border-left: 2px solid var(--editor-selected-blue, #1097e2);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  opacity: 0.85;
}

/* Floating help tooltip that follows the cursor in help mode. Shows the
   title and (when present) a body summary — the prototype canvas uses the
   body to describe the hovered item's type and interactions. */
.help-tooltip {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 10000;
  max-width: 380px;
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.4;
  color: #ffffff;
  background-color: rgba(20, 22, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--corner-radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.help-tooltip-title {
  font-size: 16px;
  font-weight: 600;
}

.help-tooltip-body {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.85;
  white-space: pre-line;
}

/* Subhead inside the tooltip — used for "Customizable" before the
   default-location sentence. Sits above its own body block. */
.help-tooltip-subtitle {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
}

.help-tooltip-hidden {
  display: none;
}

.group-icon,
.union-icon,
.outline-icon,
.exclude-icon,
.intersect-icon,
.subtract-icon {
  margin: 0 3px 0 0;
  opacity: var(--editor-icon-muted-opacity);
  height: var(--editor-small-icon-size);
  vertical-align: middle;
}

/* Gap separating the regular group icon from the special-group icons,
   and the special-group icons from the add/remove icons. */
.group-icon {
  margin-right: 7px;
}

.intersect-icon {
  margin-right: 7px;
}

.path-operations-div {
  display: inline-flex;
  align-items: center;
}

/* Section header group: disclosure triangle + title + (optional) descriptor
   + (optional) add/delete icon buttons. Everything lives on one row, full
   width, vertically centered. The triangle, title, and descriptor sit on
   the left at order 0; icon buttons (add/delete, ring shift, group ops)
   are tagged order 2 so they're pushed to the right; a ::after spacer at
   order 1 with flex: 1 absorbs all the free space in between. */
.details-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--details-row-height);
}

.details-header::after {
  content: '';
  flex: 1 1 auto;
  order: 1;
}

.details-header > [class*="-add-div"],
.details-header > [class*="-delete-div"],
.details-header > .ring-shift-div,
.details-header > .groups-add-remove-div {
  order: 2;
}

.palette-options {
  position: relative;
  display: inline-block;
  padding: 3px;
  margin: 0 3px;
  top: -9px;
  opacity: var(--editor-icon-muted-opacity);
}

.palette-options-menu {
  position: absolute;
  transition: 0s visibility;
  z-index: 50;
}

.palette-options-div {
  position: absolute;
  background-color: var(--top-toolbar-background-color);
  color: #fff;
  padding: 8px 12px;
  border-radius: 3px;
  width: 170px;
}

.palette-options-span {
  display: block;
  color: #fff;
  font-size: var(--editor-control-font-size);
  text-align: left;
  border-radius: var(--corner-radius-sm);
  padding: 1px 3px;
}

.inline-block {
  display: inline-block;
}

.palette-options-span:hover {
  color: #fff;
  background-color: var(--editor-selected-blue);
}

.palette-options-menu .palette-options-div::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  right: 26px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--top-toolbar-background-color) transparent;
}

/* Pen mode toolbar and canvas context menu. Block-level with no side
   margin so the .separator bottom border spans the full panel width,
   matching the other design-panel sections. */
.pen-mode-div {
  display: block;
  margin: 0;
}

.pen-mode-heading-div {
  margin: 3px 0px 0px var(--panel-indent);
  user-select: none;
  display: block;
}

.pen-icons-div {
  margin: 3px var(--panel-right-gutter) 3px var(--panel-indent);
}

.connector-mode-help {
  margin: 4px var(--panel-right-gutter) 10px var(--panel-indent);
  color: var(--editor-muted-text-color);
  font-size: var(--editor-control-font-size);
  line-height: 1.45;
}

.pen-icon {
  padding: 2px 6px 3px;
  height: 22px;
  opacity: 60%;
}

.wrapper {
  display: inline-block;
}

.canvas-context-menu-div {
  position: absolute;
}

.canvas-context-menu-ul {
  position: absolute;
  background-color: var(--top-toolbar-background-color);
  color: white;
  border-radius: 4px;
  width: 200px;
  margin: 10px;
  list-style: none;
  padding: 5px;
  z-index: 100;
}

.canvas-context-menu-li {
  background: none;
  height: 20px;
  width: 190px;
  margin: 0;
  padding: 5px;
  cursor: pointer;
  z-index: 150;
  font-size: 12pt;
}

.canvas-context-menu-li:hover {
  background: var(--editor-selected-blue);
}

.add-gradient-span {
  position: relative;
  top: -10px;
  font-size: var(--editor-control-font-size);
  background-color: var(--editor-muted-text-color);
  color: white;
  border-radius: 3px;
  padding: 0px 3px 1px;
  margin: 0 9px;
}

/* Gradient, shadow, image, export, and tab controls. */
.gradient-colors-heading {
  margin: 0 12px;
}

.gradient-color-div {
  margin: 0;
  height: var(--details-row-height);
}

.color-picker-div {
  position: fixed;
  text-align: left;
  padding: 6px 11px 8px;
  border: 2px solid var(--editor-control-border-color);
  border-radius: 9px;
  background-color: var(--editor-panel-background-color);
  width: 190px;
  z-index: 1000;
  user-select: none;
}

/* Thin drag-handle strip at the top of the floating picker.
   Extends wall-to-wall inside the border by negating the parent's padding.
   The ::before shows a row of dots so the user can see it is draggable. */
.color-picker-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -6px -11px 6px;
  padding: 4px 6px;
  border-radius: 7px 7px 0 0;
  background-color: rgba(128, 128, 128, 0.1);
  border-bottom: 1px solid var(--editor-control-border-color);
  cursor: grab;
  height: 18px;
  box-sizing: content-box;
}

.color-picker-title {
  font-size: var(--editor-control-font-size);
  /* Match the Design/Prototype tab heading colour. */
  color: var(--customize-tab-color-active, var(--editor-text-color));
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  /* Keep the title clear of the centered drag-handle dots. */
  max-width: calc(50% - 26px);
  padding-right: 6px;
}

.color-picker-header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 8px;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 6px 4px;
  opacity: 0.3;
  pointer-events: none;
}

.color-picker-header:active {
  cursor: grabbing;
}

/* Red × close button — styled like the Share toolbar button but in panel context. */
.color-picker-close {
  background-color: transparent;
  border: none;
  border-radius: var(--corner-radius-sm);
  padding: 1px 4px;
  font-family: var(--editor-font-family);
  font-size: 0.78rem;
  font-weight: 600;
  color: #e53935;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  opacity: var(--editor-icon-muted-opacity);
}

.color-picker-close:hover {
  background-color: rgba(128, 128, 128, 0.22);
  opacity: 1;
}

.color-picker-close:active {
  background-color: rgba(128, 128, 128, 0.32);
  opacity: 1;
}

.gradient-location-div {
  height: var(--details-row-height);
}

#gradient-start-label,
#gradient-end-label {
  display: inline-block;
  font-size: var(--editor-control-font-size);
  width: 30px;
  margin: 6px 0 0 12px;
  user-select: none;
}

.gradient-offset-label {
  display: inline-block;
  font-size: var(--editor-control-font-size);
  width: 14px;
  margin: 6px 6px 6px 2px;
  user-select: none;
}

.shadow-offset-label {
  display: inline-block;
  font-size: var(--editor-control-font-size);
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  user-select: none;
  vertical-align: middle;
  text-align: left;
}

/* The single-cell shadow rows (Blur and Type) get a fixed-width label so
   their inputs line up at the same X. X/Y stay auto-width — they're
   intentionally not aligned with Blur/Type. */
.shadow-div > .shadow-offset-label,
.shadow-offset-row > .shadow-offset-div:only-child > .shadow-offset-label {
  width: 32px;
}

/* X and Y labels (the multi-cell shadow row) get the standard
   --panel-checkbox-label-gap of right margin to their input — a bit wider
   than the default --panel-control-gap so the short labels don't crowd
   their fields. */
.shadow-offset-row > .shadow-offset-div:not(:only-child) > .shadow-offset-label {
  margin-right: var(--panel-checkbox-label-gap);
}

/* Wrapper for one (label + input) pair in a shadow offset row. The wrapper
   is --details-row-height tall and centers its children at their natural
   height — neither the label nor the input is forced to a row height. */
.shadow-offset-div {
  display: inline-flex;
  align-items: center;
  height: var(--details-row-height);
  margin: 0;
  /* Each offset cell shares the flex row so its formula input can grow. */
  flex: 1 1 0;
  min-width: 0;
}

.gradient-location-types {
  font-size: var(--editor-control-font-size);
  margin: 6px;
  border: var(--editor-control-border);
  outline-color: var(--editor-text-color);
  color: var(--editor-text-color);
}

.gradient-offset-input {
  position: relative;
  width: 25px;
  font-size: var(--editor-control-font-size);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  margin: 0 3px 0 0;
}

.shadow-offset-input {
  position: relative;
  /* Formula-capable (Blur, and the X/Y offsets) — grow into spare row
     width, capped so a lone Blur field doesn't span the whole panel. */
  flex: 1 1 0;
  width: auto;
  min-width: 35px;
  max-width: 150px;
  font-size: var(--editor-control-font-size);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  margin: 0;
}

.image-div {
  display: inline-block;
  height: var(--details-row-height);
  /* One indent-step of space separating it from the horizontal-align group. */
  margin-left: var(--panel-indent);
}

.shadow-div,
.export-div {
  min-height: var(--details-row-height);
  line-height: var(--details-row-height);
  margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}

/* The Type-selector row of the shadow section is a bare label + select
   directly inside .shadow-div. Center the select on the row's baseline. */
.shadow-div > select {
  vertical-align: middle;
}

/* Shadow X/Y row + Blur row: each row is a flex container so its items
   wrap if the panel is too narrow. The rows themselves are block-level,
   so Blur naturally lands on the line below X/Y. All rows align to the
   shadow-div's left content edge (panel-indent). */
.shadow-offset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--panel-pair-gap) + 12px);
  row-gap: var(--panel-row-gap);
  min-height: var(--details-row-height);
  margin: 0;
}

.shadow-offset-row + .shadow-offset-row {
  margin-top: var(--panel-row-gap);
}

.get-image-div {
  height: var(--details-row-height);
}

.get-image-btn {
  margin: 5px 0 0 12px;
  font-size: var(--editor-control-font-size);
}

/* Export action button — a subtle bordered button styled to match the
   share button on the top toolbar. The .export-div parent already
   supplies the panel indent / right gutter. */
.export-button {
  display: block;
  width: 100%;
  margin: 6px 0 4px 0;
  padding: 6px 12px;
  font-family: var(--editor-font-family);
  font-size: var(--editor-control-font-size);
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: var(--button-text);
  background-color: var(--button-bg);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  cursor: pointer;
  user-select: none;
}

.export-button:hover,
.export-button:active {
  background-color: var(--button-bg-hover);
}

.export-button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Export rows: name on its own row; format + size share a row. */
.export-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--panel-pair-gap) + 10px);
  row-gap: var(--panel-row-gap);
  min-height: var(--details-row-height);
}

/* A label + select pair that sits inline with its sibling pair. */
.export-field {
  display: inline-flex;
  align-items: center;
  column-gap: var(--panel-pair-gap);
}

.export-row select,
.export-field select {
  vertical-align: middle;
}

.export-label {
  display: inline-block;
  font-size: var(--editor-control-font-size);
}

/* The name field stretches to fill the rest of its row, and is styled to
   match the other edit fields in the design panel. */
.export-name-input {
  flex: 1 1 auto;
  min-width: 80px;
  font-size: var(--editor-control-font-size);
  color: var(--editor-text-color);
  background-color: var(--editor-input-bg);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

/* Resulting pixel dimensions, shown below the size selector. */
.export-dims {
  min-height: var(--details-row-height);
  line-height: var(--details-row-height);
  font-size: var(--editor-control-font-size);
  opacity: 0.7;
}

/* Highlighter opacity control. */
.highlighter-div {
  min-height: var(--details-row-height);
  margin: 0 var(--panel-right-gutter) 0 var(--panel-indent);
}

.highlighter-opacity-row {
  display: flex;
  align-items: center;
  column-gap: var(--panel-pair-gap);
  min-height: var(--details-row-height);
}

.highlighter-opacity-label {
  display: inline-block;
  width: 54px;
  font-size: var(--editor-control-font-size);
}

.highlighter-opacity-slider {
  flex: 1 1 auto;
  min-width: 40px;
}

.highlighter-opacity-input {
  width: 42px;
}

.highlighter-opacity-unit {
  font-size: var(--editor-control-font-size);
  opacity: 0.7;
}

/* Design / Prototype tab strip. Styled to match the Customize page tabs
   exactly: a flat strip with an underline-style active tab. Each tab is
   only as wide as its label. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 1.5rem;
  background-color: var(--customize-tab-strip-bg, var(--editor-panel-separator-color));
  border-bottom: 1px solid var(--panel-border-color);
  flex: 0 0 auto;
}

.tabs h3 {
  padding: 0.6rem 1.25rem;
  margin: 0;
  border: none;
  background: var(--customize-tab-bg-inactive, transparent);
  /* The Design / Prototype tabs are the panel's top-level headers. */
  color: var(--header-1-color);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  user-select: none;
}

.tabs h3:hover {
  color: var(--header-1-color);
}

.tabs .active,
.tabs .active:hover {
  color: var(--header-1-color);
  border-bottom-color: var(--editor-selected-blue);
  background-color: var(--customize-tab-bg-active, var(--editor-input-bg, var(--editor-panel-background-color)));
}

/* Prototype interaction controls. */
.activation-types {
  display: inline-block;
  font-size: 13px;
  margin: 6px 0px 6px 12px;
  user-select: none;
}

.action-types {
  display: inline-block;
  font-size: 13px;
  margin: 6px;
  user-select: none;
}

/* Plain-text stand-in for the action dropdown on a Connection row.
   Connections only run Navigate, so the dropdown becomes a label that
   sits in the same row position as the trigger row's select. */
.action-label {
  display: inline-block;
  font-size: 13px;
  margin: 6px;
  user-select: none;
}

/* Connections / Triggers section content: indented to Level 1, under
   the section heading. */
.connections-content,
.triggers-content {
  margin-left: var(--panel-indent);
}

/* Triggers are grouped by item; leave a gap before each new item group. */
.trigger-group:not(:first-child) {
  margin-top: 10px;
}

.interaction-start-end-heading {
  display: flex;
  align-items: center;
  margin: 6px 0px 0px 0px;
  user-select: none;
}

/* Trigger item-name heading: same structural role as the connection
   start→end heading, but a level dimmer so it doesn't visually compete
   with the parent "Triggers" section heading. */
.trigger-group .interaction-start-end-heading {
  font-size: var(--editor-control-font-size);
  font-weight: 600;
  color: var(--header-3-color);
}

/* In a trigger row, the activation-types select sits flush with the
   row's left edge — no need for the connection rows' 12px indent to
   line up under a separate start→end heading. */
.trigger-group .activation-types {
  margin-left: 0;
}

/* Heading text + arrow as one flex item; takes the available width so
   the add-behavior control is pushed to the right edge of the panel. */
.interaction-title {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

/* Connector arrow between the start and end item names. */
.interaction-arrow {
  flex: none;
  width: 22px;
  height: 8px;
  margin: 0 6px;
  fill: none;
  stroke: var(--editor-muted-text-color, #8e8c9e);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Add-behavior (+) and delete-connection (-) controls: grouped at the
   right edge of the connection heading, vertically centered. */
.connection-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--panel-control-gap);
  margin-left: auto;
  margin-right: var(--panel-control-gap);
}

/* Behavior row: activation + action selects, with the delete (-)
   control pushed to the right edge and vertically centered. */
.interaction-behavior-row {
  display: flex;
  align-items: center;
}

.interaction-behavior-row .delete-behavior-div {
  margin-left: auto;
}

.miter-limit-text-input {
  width: 50px;
  margin: 0;
  font-size: var(--editor-control-font-size);
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
}

.mitre-limit-label,
.stroke-join-label {
  display: inline-block;
  width: 74px;
  font-size: var(--editor-control-font-size);
  margin: 0 var(--panel-checkbox-label-gap) 0 0;
  text-align: left;
  vertical-align: middle;
}

#stroke-join {
  margin: 0;
  vertical-align: middle;
}

p.file-name-p {
  display: block;
  line-height: normal;
  margin: 0 0 0 6px;
  text-align: left;
  word-wrap: normal;
  width: 140px;
}

/* Detailed color editor and constraint controls. */
/* Row that holds R/G/B inputs on the left and the palette area on the right. */
.color-picker-bottom-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}

.color-picker-palette-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.color-parts-div {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}

.color-part-div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.color-part-label {
  flex-shrink: 0;
  width: 12px;
  text-align: right;
  font-size: var(--editor-control-font-size);
}

.color-part-percentage-label {
  flex-shrink: 0;
  font-size: var(--editor-control-font-size);
}

.color-part-input {
  width: 38px;
  flex-shrink: 0;
  color: var(--editor-text-color);
  font-size: var(--editor-control-font-size);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
}

.color-picker-div .add-palette-color-icon {
  height: 12px;
}

.palette-color-div {
  height: 10px;
  width: 10px;
  flex-shrink: 0;
  border: 2px solid var(--editor-control-border-color);
}

.palette-colors-div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  position: relative;
  margin: 0;
  width: 100%;
}

.missing-triangle-div {
  display: inline-block;
  height: 10px;
  width: 8px;
}

.constraints-div {
  margin: 3px var(--panel-right-gutter) 3px var(--panel-indent);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 3×3 grid: corner cells empty, edge cells hold the constraint handles,
   center cell holds the inner bordered box. */
.constraints-outer-box {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 60px;
  height: 57px;
  border: 2px solid var(--editor-control-border-color);
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  grid-template-rows: 1fr 31px 1fr;
}

.constraints-top-box {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 1px;
  cursor: pointer;
}

.constraints-top {
  width: 3px;
  height: 9px;
  background-color: var(--editor-constraint-line-color);
}

.constraints-bottom-box {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 1px;
  cursor: pointer;
}

.constraints-bottom {
  width: 3px;
  height: 9px;
  background-color: var(--editor-constraint-line-color);
}

.constraints-left-box {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 1px;
  cursor: pointer;
}

.constraints-left {
  height: 3px;
  width: 9px;
  background-color: var(--editor-constraint-line-color);
}

.constraints-right-box {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1px;
  cursor: pointer;
}

.constraints-right {
  height: 3px;
  width: 9px;
  background-color: var(--editor-constraint-line-color);
}

.constraints-inner-box {
  grid-column: 2;
  grid-row: 2;
  box-sizing: border-box;
  border: 2px solid var(--editor-control-border-color);
  position: relative;
}

/* Vertical and horizontal center handles overlap inside the inner box.
   Each is absolutely positioned to occupy its own axis-centered strip,
   with a shared 3px bar in the middle rendered by the inner element. */
.vertical-center-box {
  position: absolute;
  inset: 0 35% 0 35%;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.vertical-center {
  width: 3px;
  background-color: var(--editor-constraint-line-color);
}

.horizontal-center-box {
  position: absolute;
  inset: 35% 0 35% 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.horizontal-center {
  width: 100%;
  height: 3px;
  background-color: var(--editor-constraint-line-color);
}

/* Label + select pairs laid out as a two-column grid. */
.constraints-details-div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 6px;
}

.constraints-label {
  font-family: var(--editor-font-family);
  color: var(--editor-muted-text-color);
  font-size: var(--editor-control-font-size);
}

#horizontal-constraint,
#vertical-constraint {
  color: var(--editor-text-color);
  width: 106px;
}

/* Eyedropper and color-picker mode controls. */
.eyedropper {
  height: 20px;
  display: block;
}

.color-picker-mode-cancel-icon {
  position: relative;
  top: -2px;
  height: 25px;
}

.color-picker-eyedropper-btn {
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--corner-radius-sm);
  padding: 3px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: var(--editor-icon-muted-opacity);
  margin: 0 0 3px;
}

.color-picker-eyedropper-btn:hover {
  background-color: rgba(128, 128, 128, 0.22);
  opacity: 1;
}

.color-picker-eyedropper-active {
  background-color: var(--tool-active-bg, #e3e8f2);
  outline: var(--selection-border-width) solid var(--editor-selected-blue);
  outline-offset: calc(-1 * var(--selection-border-width));
  opacity: 1;
}

/* Interaction targets, modifiers, variables, and conditional fields.
   Labels in this group baseline-align with their adjacent text input via
   `vertical-align: middle` (the inputs already use it from the shared
   text-input rule), so the label text sits centered to the input box. */
.drop-target-label,
.scroll-target-label,
.delay-label,
.set-to-label {
  vertical-align: middle;
  font-size: var(--editor-control-font-size);
  margin: 0 6px 0 12px;
}

.drop-targets,
.scroll-targets {
  font-size: var(--editor-control-font-size);
}

.snap-back-label,
.select-target-label,
.show-toolbar-label,
.allow-zoom-label,
.allow-scroll-label {
  position: relative;
  top: -2px;
  font-size: var(--editor-control-font-size);
}

.snap-back-checkbox,
.select-target-checkbox,
.show-toolbar-checkbox,
.allow-zoom-checkbox,
.allow-scroll-checkbox {
  margin: 6px var(--panel-checkbox-label-gap) 3px 12px;
}

.hovering-select-checkbox,
.ctrl-checkbox {
  position: relative;
  top: 1px;
  margin: 3px var(--panel-checkbox-label-gap) 3px 12px;
}

.ctrl-checkbox,
.shift-checkbox,
.alt-checkbox,
.caps-lock-checkbox,
.num-lock-checkbox {
  position: relative;
  top: 1px;
  margin: 3px var(--panel-checkbox-label-gap) 3px 12px;
}

/* When a checkbox starts a new group on the same row, widen its left margin
   so adjacent [checkbox][label] pairs read as visually separated groups
   rather than a continuous strip. The first checkbox in each row keeps its
   smaller leading indent (above). */
.ctrl-checkbox,
.alt-checkbox,
.num-lock-checkbox,
.select-target-checkbox {
  margin-left: var(--panel-pair-gap);
}

.additional-ib-properties,
.additional-var-properties {
  /* Indent the variable rows to level 1, under the section heading. */
  margin: 0 0 3px var(--panel-indent);
}

/* Shared visual styling for editable text inputs in the prototype panel —
   matches the design-panel text inputs (color hex, stroke width, etc.).
   Width and margin remain per-instance since they're content-specific. */
.delay-input,
.key-down-input,
.playback-zoom-input,
.user-variable-name-input,
.user-variable-initial-value-input,
.link-input,
.set-to-text-input,
.if-condition,
.then-statement,
.else-statement {
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  vertical-align: middle;
  font-size: var(--editor-control-font-size);
}

.delay-input {
  position: relative;
  top: -1px;
  width: 40px;
}

.star-depth-slider {
  display: inline-block;
  margin: 0 var(--panel-control-gap) 0 0;
  width: 100px;
  vertical-align: middle;
}

.hovering-select-label {
  font-size: var(--editor-control-font-size);
}

/* Match the variable-name label column (fixed width, inline-block) so the
   key input lines up under the variable inputs above it. */
.key-down-label {
  display: inline-block;
  margin: 0 3px 0 12px;
  width: 42px;
  font-size: var(--editor-control-font-size);
}

/* Playback "Zoom %" label — wider than the standard 42px column and
   no-wrap so the input doesn't get pushed to a second line. */
.playback-zoom-label {
  display: inline-block;
  margin: 0 3px 0 12px;
  width: 60px;
  white-space: nowrap;
  font-size: var(--editor-control-font-size);
}

.key-down-input,
.playback-zoom-input {
  margin: 0 3px;
  width: 70px;
}

.ctrl-label,
.shift-label,
.alt-label,
.caps-lock-label,
.num-lock-label {
  font-size: var(--editor-control-font-size);
}

.link-label {
  margin: 0 3px 0 12px;
  font-size: var(--editor-control-font-size);
}

.link-input {
  position: relative;
  margin: 0 3px;
  width: 180px;
}

.user-variable-list,
.user-variable-type-list {
  max-width: 160px;
  margin: 0 3px;
  font-size: var(--editor-control-font-size);
}

.user-variable-name-label,
.user-variable-list-label,
.user-variable-type-label,
.user-variable-initial-value-label {
  display: inline-block;
  margin: 0 3px 0 12px;
  width: 42px;
  font-size: var(--editor-control-font-size);
}

.user-variable-name-input {
  margin: 0 3px;
  width: 140px;
}

.user-variable-initial-value-input {
  margin: 0 3px;
  width: 140px;
}

/* ── Variables section (prototype panel) ─────────────────────────────────
   Row-per-variable layout. The header has a "+" button to add; each row
   carries inputs for name, type, initial value, and a delete button. */
.variables-empty {
  margin: 6px 0 6px var(--panel-indent);
  font-size: var(--editor-control-font-size);
  opacity: 0.7;
}

.variables-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 12px 4px var(--panel-indent);
}

.variables-row {
  display: grid;
  grid-template-columns: 1fr 84px 1fr auto;
  column-gap: 6px;
  align-items: center;
}

.variables-row > .variables-delete-icon {
  justify-self: end;
}

.variables-header-row {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--editor-muted-text-color);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.variables-name-input,
.variables-value-input {
  width: 100%;
  min-width: 0;
  padding: 1px 4px;
  color: var(--editor-text-color);
  border: var(--editor-control-border);
  border-radius: var(--corner-radius-sm);
  outline-color: var(--editor-text-color);
  font-size: var(--editor-control-font-size);
  box-sizing: border-box;
}

.variables-type-select {
  width: 100%;
  min-width: 0;
  font-size: var(--editor-control-font-size);
  box-sizing: border-box;
}


.set-to-text-input {
  width: 180px;
}

.conditional-label {
  display: inline-block;
  width: 32px;
  margin: 0 3px 0 12px;
  font-size: var(--editor-control-font-size);
}

.if-condition,
.then-statement,
.else-statement {
  width: 170px;
}

.vi-textarea-text {
  display: block;
  box-sizing: border-box;
  width: calc(100% - var(--panel-indent) - var(--panel-right-gutter));
  font-family: var(--editor-font-family);
  font-size: 12px;
  margin: 5px var(--panel-right-gutter) 5px var(--panel-indent);
}

/* Pen ring controls and generic rotation helpers. */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.rings-div {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  top: -5px;
}

.ring-descr-div {
  position: relative;
  display: inline-block;
  margin-right: 7px;
}

#ring-p {
  position: relative;
  font-size: 12px;
  font-weight: bold;

  top: -5px;
  margin: 0;
}

.ring-icon {
  display: inline-block;
  position: relative;
  top: 1px;
  width: var(--editor-small-icon-size);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.stroke-align-select {
  margin-left: 0;
  vertical-align: middle;
}

p.sides-p {
  width: 35px;
}

.sides-dim {
  width: 100px;
}

/* Dark theme overrides. Colors come from CSS variables that the
   PreferencesProvider sets on :root. The non-color tweaks here adjust
   the few hard-coded swatches, borders, and form-control surfaces that
   wouldn't track those variables on their own. */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas-background-color: #0c0e12;
  --panel-border-color: #2a2c33;
  /* Form-control surface and a section-title color that sits midway
     between the bright body text and the muted labels so titles read
     as a quieter "structural" element instead of glare. */
  --editor-input-bg: #15171c;
  --editor-input-bg-disabled: #1f2126;
  --editor-input-text-color: #b9b7c5;
  --header-1-color: #d9d8e3;
  --header-2-color: #c9c7d6;
  --header-3-color: #8f8d9e;
  --tree-list-bg: #0e1014;
  --tool-active-bg: #383b44;
  --tool-button-bg: #34373f;
  --tree-selection-bg: rgba(16, 151, 226, 0.30);
  /* Focused-control ring. Sits clearly above the input-bg / panel
     surfaces but well below body text, so the focus state reads as
     "marked" without the bright white glare the browser default
     produces on top of the dark panels. */
  --input-focus-outline: #4a4d57;
  /* Dark-mode action-button surface. */
  --button-bg: #23252b;
  --button-bg-hover: #2e3038;
  --button-text: var(--editor-text-color);
}

[data-theme="dark"] .tools-group {
  border-color: #2f323a;
}

[data-theme="dark"] .tools button {
  background: var(--tool-button-bg);
}

[data-theme="dark"] .tool {
  background: #ffffff08;
}

[data-theme="dark"] #text-area {
  color: #e8e8ee;
}

[data-theme="dark"] .hdr {
  color: #6c707b;
  opacity: 1;
}

/* Tree panel reads as the darkest "structural" surface so its content
   stands out from the brighter details panel. */
[data-theme="dark"] .tree-div {
  background-color: var(--tree-list-bg);
}

/* Tool/details/tree icons ship as dark glyphs on a light surface. On
   dark theme, invert their luminance so the strokes become near-white
   against the now-dark panels, with a hue-rotate to keep colored
   accents roughly where they were. Top-toolbar icons (play, share,
   user, notifications, zoom-plus/minus, etc.) are NOT inverted —
   they're already drawn as light glyphs and the top toolbar stays
   dark in both themes. */
[data-theme="dark"] .tool-icon,
[data-theme="dark"] .pen-icon,
[data-theme="dark"] .align-icon,
[data-theme="dark"] .arrow-icon,
[data-theme="dark"] .cap-icon-img,
[data-theme="dark"] .corners-icon,
[data-theme="dark"] .corner-count-icon,
[data-theme="dark"] .angle-icon,
[data-theme="dark"] .star-ratio-icon,
[data-theme="dark"] .line-width-icon,
[data-theme="dark"] .stroke-width-icon,
[data-theme="dark"] .add-fill-icon,
[data-theme="dark"] .add-palette-color-icon,
[data-theme="dark"] .add-stroke-icon,
[data-theme="dark"] .add-behavior-icon,
[data-theme="dark"] .add-variable-icon,
[data-theme="dark"] .add-trigger-icon,
[data-theme="dark"] .add-group-icon,
[data-theme="dark"] .remove-groups-icon,
[data-theme="dark"] .delete-color-icon,
[data-theme="dark"] .delete-stroke-icon,
[data-theme="dark"] .delete-gradient-icon,
[data-theme="dark"] .delete-gradient-color-icon,
[data-theme="dark"] .delete-behavior-icon,
[data-theme="dark"] .delete-ring-icon,
[data-theme="dark"] .variables-delete-icon,
[data-theme="dark"] .delete-trigger-icon,
[data-theme="dark"] .page-list-plus-icon,
[data-theme="dark"] .page-list-minus-icon,
[data-theme="dark"] .minus-variable-icon,
[data-theme="dark"] .page-triangle-img,
[data-theme="dark"] .section-triangle-img,
[data-theme="dark"] .corners-triangle,
[data-theme="dark"] .line-width-triangle,
[data-theme="dark"] .sight-icon,
[data-theme="dark"] .eyedropper,
[data-theme="dark"] .color-picker-mode-cancel-icon,
[data-theme="dark"] .ring-icon,
[data-theme="dark"] .group-icon,
[data-theme="dark"] .union-icon,
[data-theme="dark"] .outline-icon,
[data-theme="dark"] .exclude-icon,
[data-theme="dark"] .intersect-icon,
[data-theme="dark"] .subtract-icon,
[data-theme="dark"] .palette,
[data-theme="dark"] .selected-icon,
[data-theme="dark"] .cap-link-toggle {
  filter: invert(0.94) hue-rotate(180deg) brightness(1.02);
}

/* Form-control surface: every editable text/number input and select
   inside the editor uses the panel-input variable for a dark
   background. Input text is a touch dimmer than body text so the
   labels (which use --editor-muted-text-color) and section titles
   read with a clean hierarchy. Range sliders are excluded — the
   browser's color-scheme: dark on :root re-skins them automatically. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input:not([type]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--editor-input-bg);
  color: var(--editor-input-text-color);
  border-color: var(--editor-control-border-color);
}

[data-theme="dark"] input[type="text"]:disabled,
[data-theme="dark"] input[type="number"]:disabled,
[data-theme="dark"] input:not([type]):disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled {
  background-color: var(--editor-input-bg-disabled);
  color: var(--editor-muted-text-color);
}

/* Color swatch borders need to read against the dark panel. */
[data-theme="dark"] .color-div,
[data-theme="dark"] .palette-color-div,
[data-theme="dark"] .constraints-outer-box,
[data-theme="dark"] .constraints-inner-box {
  border-color: #4a4d57;
}

/* Item-tree row text & file-name text — explicit color so it sits
   correctly on the darker tree panel surface. */
[data-theme="dark"] .item-tree-item p,
[data-theme="dark"] p.file-name-p {
  color: var(--editor-text-color);
}

/* Project-image placeholder background on home page. */
[data-theme="dark"] .project-img-placeholder {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Top-toolbar glyphs ship in near-white (#DEDEDE) and read as overly
   loud against the very dark toolbar. Dim them a touch in dark mode
   so they sit at roughly the same visual weight as the rest of the
   chrome. The standard-top-toolbar-icon class is the umbrella used by
   most of these icons, so this single rule covers the bulk of them. */
[data-theme="dark"] .standard-top-toolbar-icon,
[data-theme="dark"] .tt-zoom-icon,
[data-theme="dark"] .logo-icon {
  opacity: 0.85;
}

/* Disclosure triangles originally use --editor-icon-muted-opacity (0.6);
   combined with the dark-theme invert filter that's too faint, so push
   them up to stay readable. The page-list add/remove icons deliberately
   stay at the muted 0.6 (via .page-list-plus-icon/.page-list-minus-icon)
   so they recede like the design-panel section icons and titles. */
[data-theme="dark"] .page-triangle-img,
[data-theme="dark"] .section-triangle-img,
[data-theme="dark"] .corners-triangle,
[data-theme="dark"] .line-width-triangle,
[data-theme="dark"] .minus-variable-icon {
  opacity: 0.9;
}

/* Zoom percentage reads as toolbar text by default — very bright in
   dark mode. Match the design-panel input text color so it doesn't
   draw the eye as much as the rest of the toolbar chrome. */
[data-theme="dark"] .zoom-percentage,
[data-theme="dark"] .zoom-percentage-textbox {
  color: var(--editor-input-text-color);
}

/* Focused-control outline. Default browser behavior renders a bright
   ring; the editor's per-input rules also set outline-color to the
   bright editor-text-color. In dark mode, swap both to a softer
   mid-gray that reads as "focused" without glaring. Buttons get the
   same treatment so the focus ring across the Home / Customize /
   Login / Signup / Images pages stays consistent. */
[data-theme="dark"] input:focus,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] select:focus,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] button:focus-visible {
  outline: 2px solid var(--input-focus-outline);
  outline-offset: -1px;
  border-color: var(--input-focus-outline);
}

/* Page-level surface. The .App element already paints the panel
   background across the whole viewport, but if any page is ever
   sized smaller than the window, html/body fall back to the same
   surface so the user never sees the browser's default white. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--editor-panel-background-color);
}

html[data-theme="light"],
html[data-theme="light"] body {
  background-color: var(--editor-panel-background-color);
}

/* ============================================================
   Fill / stroke gradient editor
   ============================================================ */

.gradient-editor {
  margin: 6px var(--panel-right-gutter, 12px) 6px var(--panel-indent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Fill-type combo box, sat at the end of the color line. */
.gradient-type-select {
  flex: none;
  margin-left: auto;
  margin-right: 8px;
  padding: 2px 4px;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-size: var(--editor-control-font-size);
}

/* Preview bar + draggable stop markers. */
.gradient-bar {
  display: flex;
  flex-direction: column;
}

/* Preview bar: a checkerboard backdrop with the live gradient on top so
   stop transparency reads correctly. */
.gradient-preview {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%),
    linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.gradient-preview-fill {
  position: absolute;
  inset: 0;
}

/* Strip below the preview bar holding the draggable stop markers. */
.gradient-marker-track {
  position: relative;
  height: 14px;
  margin-top: 3px;
}

.gradient-marker {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
}

/* Indicator line spanning the full preview bar at each stop's location.
   Rendered inside .gradient-preview (which clips it) so it covers the
   whole bar height. */
.gradient-stop-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background-color: #ffffff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.gradient-stops {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gradient-stop-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gradient-stop-color {
  flex: none;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background: none;
  cursor: pointer;
}

.gradient-stop-alpha {
  flex: none;
  width: 44px;
  box-sizing: border-box;
  padding: 2px 4px;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--editor-input-bg, var(--editor-panel-background-color));
  color: var(--editor-text-color);
  font-size: var(--editor-control-font-size);
}

.gradient-stop-range {
  flex: 1 1 auto;
  min-width: 0;
}

.gradient-stop-pos {
  flex: none;
  width: 34px;
  text-align: right;
  font-size: var(--editor-control-font-size);
  color: var(--editor-text-color);
}

.gradient-stop-remove {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--button-bg);
  color: #d92c2c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.gradient-stop-remove:disabled {
  opacity: 0.4;
  cursor: default;
}

.gradient-add-stop {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid var(--editor-control-border-color);
  border-radius: var(--corner-radius-sm);
  background-color: var(--button-bg);
  color: var(--button-text);
  font-size: var(--editor-control-font-size);
  cursor: pointer;
}

.gradient-add-stop:hover {
  background-color: var(--button-bg-hover);
}

/* The gradient endpoint handles are drawn directly on the canvas by the
   renderer (see render.ts drawGradientHandles) — no CSS overlay. */

/* ============================================================
   Color-picker eyedropper overlay & magnifier loupe
   ============================================================ */

/* Transparent layer shown while the color picker is in eyedropper
   mode. It covers only the canvas region (matching #canvas-div) so the
   toolbars and panels stay usable; sits below the toolbar dropdown
   menus (z-index 55–60) so those still open over it. */
.eyedropper-overlay {
  position: fixed;
  top: var(--top-toolbar-height);
  left: calc(var(--left-toolbar-width) + var(--tree-width));
  right: var(--details-width);
  bottom: 0;
  z-index: 50;
  background: transparent;
  cursor: crosshair;
}

/* The magnifier loupe — a zoomed view of the canvas pixels around the
   cursor. Positioned (in viewport coords) in a canvas corner; round or
   square per prefs. */
.eyedropper-loupe {
  position: fixed;
  box-sizing: content-box;
  border: 3px solid #ffffff;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  pointer-events: none;
  background: #7a7a82;
}

.eyedropper-loupe.round {
  border-radius: 50%;
}

.eyedropper-loupe.square {
  border-radius: 10px;
}

.eyedropper-loupe canvas {
  display: block;
}