/* Studio Controls — the shared Studio kit. Loaded after surface styles.
 * Usage: public-site/STUDIO-CONTROLS.md. Tokens, buttons, selects, fields,
 * checkbox/radio, file inputs, menus and card materials live in this file.
 * Keep the real selects, inputs and buttons: their values, labels, events and IDs are contracts.
 * Zero-specificity exclusions preserve customer-authored controls in the inline component canvas. */
:root {
  --control-radius: 11px;
  --control-radius-small: 8px;
  --control-size-small: 32px;
  --control-size-regular: 40px;
  --control-size-touch: 44px;
  --control-edge: var(--line2);
  --control-hover: var(--accent);
  --control-wash: var(--accent-soft);
  --control-shadow: var(--shadow-lg, var(--shadow));
  --control-ease: cubic-bezier(.2, .8, .2, 1);
  --control-calendar-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='3'/%3E%3Cpath d='M8 3v4m8-4v4M4 10h16m-11 4h2m3 0h2m-7 4h2'/%3E%3C/svg%3E");
  --control-clock-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --control-editor-accent: #2563eb; /* Existing website-workbench accent, also for portaled dialogs. */
  --control-editor-line: #e3e6ec; /* Same line token as .se-workspace, including portaled forms. */
}
@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
  :root {
    --control-edge: color-mix(in srgb, var(--ink) 23%, var(--card));
    --control-hover: color-mix(in srgb, var(--accent) 48%, var(--line2));
    --control-wash: color-mix(in srgb, var(--accent) 8%, var(--card));
    --control-shadow: 0 16px 44px color-mix(in srgb, var(--ink) 16%, transparent), 0 3px 10px color-mix(in srgb, var(--ink) 7%, transparent);
  }
}
/* Shop warning chips/notices already share these names. Bind them to the
 * existing dark amber palette instead of their light-only fallbacks. */
:root[data-theme="dark"] #shopPane .shop-page {
  --amber-wash: var(--amber-soft);
  --amber-ink: var(--amber-badge-ink);
}

/* 1. The voice picker first. The same select material continues through every surface.
 * Unsupported browsers keep a styled native picker, including the OS accessibility UI. */
:root body select:not(:where(.se-template-card, .se-template-card *)) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--control-edge);
  border-radius: var(--control-radius);
  background-color: var(--card);
  color: var(--ink);
  font-family: Manrope, sans-serif;
  font-size: .8125rem;
  font-weight: 550;
  line-height: 1.5;
  padding: 9px 12px;
  accent-color: var(--accent);
  transition: border-color 160ms, box-shadow 160ms, background-color 160ms;
}
:root body select:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *)) {
  appearance: none;
  padding-inline-end: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
:root body select:not(:disabled):hover:not(:where(.se-template-card, .se-template-card *)) { border-color: var(--control-hover); }
:root body select:disabled:not(:where(.se-template-card, .se-template-card *)) { opacity: .55; cursor: not-allowed; }
:root body select option:not(:where(.se-template-card, .se-template-card *)) { color: var(--ink); background: var(--card); }
:root body select option:disabled:not(:where(.se-template-card, .se-template-card *)) { color: var(--muted); }
@supports (appearance: base-select) {
  /* Beat retains its wrapper chevron in native fallback browsers. The enhanced
   * picker supplies its own, so hide only the duplicate decoration here. */
  :root #alBeat .bsel:not(:where(.se-template-card, .se-template-card *))::after { content: none; }
  /* The older agent sheet sets appearance:none with a four-class selector.
   * This semantic enhancement must win in every sheet, including injected styles. */
  :root body select:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *)),
:root body select:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *))::picker(select) { appearance: base-select !important; }
  :root body select:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *)) {
    display: inline-flex;
    background-image: none !important;
    padding-inline-end: 12px;
    gap: 16px;
    align-items: center;
  }
  :root body select:not(:where(.se-template-card, .se-template-card *))::picker-icon {
    color: var(--muted);
    width: 12px;
    height: 8px;
    content: '';
    background: currentColor;
    clip-path: polygon(0 0, 50% 65%, 100% 0, 100% 30%, 50% 100%, 0 30%);
    transition: rotate 180ms var(--control-ease);
  }
  :root body select:open:not(:where(.se-template-card, .se-template-card *))::picker-icon { rotate: 180deg; color: var(--accent); }
  :root body select:not(:where(.se-template-card, .se-template-card *))::picker(select) {
    inset: auto;
    position-area: block-end span-inline-end;
    position-try-order: normal;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    box-sizing: border-box;
    margin-block: 6px;
    padding: 6px;
    border: 1px solid var(--control-edge);
    border-radius: 14px;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--control-shadow);
    max-inline-size: calc(100vw - 24px);
    max-block-size: min(360px, 60dvh);
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    translate: 0 -5px;
    transition: opacity 160ms var(--control-ease), translate 160ms var(--control-ease),
      display 160ms allow-discrete, overlay 160ms allow-discrete;
  }
  :root body select:open:not(:where(.se-template-card, .se-template-card *))::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style {
    :root body select:open:not(:where(.se-template-card, .se-template-card *))::picker(select) { opacity: 0; translate: 0 -5px; }
  }
  :root body select:not([multiple]):not([size]) option:not(:where(.se-template-card, .se-template-card *)) {
    min-block-size: 38px;
    padding: 9px 12px;
    border-radius: 8px;
    gap: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    font: 550 .8125rem/1.45 Manrope, sans-serif;
    cursor: pointer;
  }
  :root body select option:not(:where(.se-template-card, .se-template-card *))::checkmark { color: var(--accent); }
  :root body select option:checked:not(:where(.se-template-card, .se-template-card *)) { background: var(--control-wash); color: var(--accent-ink); }
  :root body select option:not(:disabled):is(:hover, :focus):not(:where(.se-template-card, .se-template-card *)) { background: var(--accent-soft); color: var(--accent-ink); }
  :root body select optgroup:not(:where(.se-template-card, .se-template-card *)) { padding: 5px 0; font: 650 .75rem/1.5 Manrope, sans-serif; }
  :root body select option:disabled:not(:where(.se-template-card, .se-template-card *)) { cursor: not-allowed; opacity: .65; }
  /* These agent fields were block-level. Keep their aligned picker without
   * overriding inline display:none, [hidden], or the application's hidden class. */
  :root .sheet.sheet-agent .ag3 .sav select:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *)),
:root .ag3 select.ag2-in:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *)) { display: inline-flex; }
  :root #alBeat .bsel select:not(:where(.se-template-card, .se-template-card *)) { gap: 4px; padding-inline: 7px; white-space: nowrap; }
  :root #alBeat .bsel select:not(:where(.se-template-card, .se-template-card *))::picker-icon { width: 8px; height: 6px; flex-shrink: 0; }
}
:root body select[hidden]:not(:where(.se-template-card, .se-template-card *)),
:root body select.hidden:not(:where(.se-template-card, .se-template-card *)) { display: none !important; }
.sheet.sheet-agent .sav-voice .vcrow:not(:where(.se-template-card, .se-template-card *)) { align-items: stretch; gap: 8px; }
.sheet.sheet-agent .sav-voice .vcrow select:not(:where(.se-template-card, .se-template-card *)) { min-height: 40px; }
.sheet.sheet-agent .sav-voice .vplay:not(:where(.se-template-card, .se-template-card *)) { flex: none; align-self: stretch; }
.veseg:not(:where(.se-template-card, .se-template-card *)) { padding: 3px; gap: 2px; border-color: var(--control-edge); }
.veseg button:not(:where(.se-template-card, .se-template-card *)) { border-radius: 999px; min-height: 30px; padding: 5px 14px; }
.veseg button[aria-checked="true"]:not(:where(.se-template-card, .se-template-card *)) { background: var(--accent); color: var(--on-accent); }

/* 2. Account menu: identity header, evenly paced actions and a quiet exit. */
:root .acctmenu:not(:where(.se-template-card, .se-template-card *)) {
  z-index: 9600; /* Above Live Desk (850 desktop / 9500 phone), below editors (9990). */
  box-sizing: border-box;
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  width: 308px;
  min-width: 0;
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--control-edge);
  border-radius: 20px;
  padding: 8px;
  box-shadow: var(--control-shadow);
  transform: translateY(-6px) scale(.985);
  transform-origin: top right;
  transition: opacity 170ms var(--control-ease), transform 170ms var(--control-ease), visibility 170ms;
}
:root .acctmenu.on:not(:where(.se-template-card, .se-template-card *)) {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none;
  /* Keyboard focus must enter immediately, before the first animation frame. */
  transition: opacity 170ms var(--control-ease), transform 170ms var(--control-ease), visibility 0s;
}
:root .acctmenu .who:not(:where(.se-template-card, .se-template-card *)) {
  padding: 15px 12px 16px;
  margin: 0 4px 6px;
  font: 650 .75rem/1.5 Manrope, sans-serif;
  letter-spacing: .015em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  word-break: normal;
}
:root .acctmenu .out:not(:where(.se-template-card, .se-template-card *)) {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--soft-ink);
  font: 550 .8125rem/1.4 Manrope, sans-serif;
  text-decoration: none;
  text-align: start;
  transition: background-color 140ms, color 140ms, border-color 140ms;
}
/* The existing Desktop app visibility gate uses display:block; the icon margin
 * gives that link the same gutter as the flex button rows without changing its gate. */
:root .acctmenu .out .pic:not(:where(.se-template-card, .se-template-card *)) { width: 19px; height: 19px; margin-inline-end: 8px; color: var(--muted); }
:root .acctmenu .out:is(:hover, :focus-visible):not(:where(.se-template-card, .se-template-card *)) { background: var(--control-wash); color: var(--accent-ink); }
:root .acctmenu .out:is(:hover, :focus-visible) .pic:not(:where(.se-template-card, .se-template-card *)) { color: var(--accent); }
:root .acctmenu :is(#acctRoles, #acctUsage):not(:where(.se-template-card, .se-template-card *)) { margin-top: 5px; border-top-color: var(--line); }
:root .acctmenu #acctOut:not(:where(.se-template-card, .se-template-card *)) { margin-top: 7px; border-top-color: var(--line); border-radius: 0 0 12px 12px; color: var(--muted); }
:root .acctmenu #acctOut:is(:hover, :focus-visible):not(:where(.se-template-card, .se-template-card *)) { color: var(--rose); background: var(--rose-soft); }

/* 3. The remaining inventory shares this scale. Surface-specific geometry owns
 * timelines, pads, keybeds and canvas handles; defaults style basic controls. */
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where(.se-template-card, .se-template-card *)) {
  box-sizing: border-box;
  border: 1px solid var(--control-edge);
  border-radius: var(--control-radius);
  padding: 8px 13px;
  background: var(--card);
  color: var(--ink);
  font: 600 .8125rem/1.4 Manrope, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 140ms, border-color 140ms, color 140ms, box-shadow 140ms;
}
:where(button:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled)):hover:not(:where(.se-template-card, .se-template-card *)) {
  border-color: var(--control-hover);
  background-color: var(--control-wash);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled:not(:where(.se-template-card, .se-template-card *)) { cursor: not-allowed; opacity: .55; }
:root :is(button, a, select, input, summary, [tabindex]):focus-visible:not(:where(.se-template-card, .se-template-card *)) {
  outline: 2px solid var(--accent);
  /* Later pane styles must not pull the shared keyboard ring into the control. */
  outline-offset: 3px !important;
}
:root :is(.rowbtn, .sav button, .pg-btn):not(:where(.se-template-card, .se-template-card *)) { border-radius: var(--control-radius); }
:root :is(.rowbtn, .tbtn, .pg-btn, .shop-btn, .ship-btn, .se-btn):not(:where(.se-template-card, .se-template-card *)) { min-height: var(--control-size-small); }
:root :is(button.prim, button.primary):not(:where(.se-template-card, .se-template-card *)) { min-height: var(--control-size-regular); }
:root input:is([type="checkbox"], [type="radio"]):not(:where(.se-template-card, .se-template-card *)) { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
:root input:is([type="checkbox"], [type="radio"]):disabled:not(:where(.se-template-card, .se-template-card *)) { cursor: not-allowed; }
:root input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):not(:where(.se-template-card, .se-template-card *)),
:root input[type="radio"]:not(:where(.se-template-card, .se-template-card *)) {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  vertical-align: middle;
  border: 1px solid var(--muted);
  border-radius: 5px;
  background: var(--card);
  transition: background-color 140ms, border-color 140ms, box-shadow 140ms;
}
:root input[type="radio"]:not(:where(.se-template-card, .se-template-card *)) { border-radius: 50%; }
:root input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):checked:not(:where(.se-template-card, .se-template-card *)),
:root input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):indeterminate:not(:where(.se-template-card, .se-template-card *)),
:root input[type="radio"]:checked:not(:where(.se-template-card, .se-template-card *)) { background: var(--accent); border-color: var(--accent); }
:root input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):checked:not(:where(.se-template-card, .se-template-card *))::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
:root input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):indeterminate:not(:where(.se-template-card, .se-template-card *))::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  border: 0;
  rotate: none;
  background: var(--on-accent);
}
:root input[type="radio"]:checked:not(:where(.se-template-card, .se-template-card *)) { box-shadow: inset 0 0 0 4px var(--card); }
:root input:is([type="checkbox"], [type="radio"]):disabled:not(:where(.se-template-card, .se-template-card *)) { opacity: .5; }
:root :is(.ordsw, .ag2-sw input[type="checkbox"]):not(:where(.se-template-card, .se-template-card *)) {
  border-color: var(--control-edge);
  background: var(--trough);
  transition: background-color 170ms, border-color 170ms;
}
:root :is(.ordsw, .ag2-sw input[type="checkbox"]):checked:not(:where(.se-template-card, .se-template-card *)) { background: var(--accent); border-color: var(--accent); }
:root .ordsw:not(:where(.se-template-card, .se-template-card *))::after { background: var(--card); }
:root .ordsw:checked:not(:where(.se-template-card, .se-template-card *))::after { background: var(--on-accent); }
/* The OFF state needs a visible knob and boundary on the dark card, too. */
:root[data-theme="dark"] :is(.ordsw, .ag2-sw input[type="checkbox"]):not(:checked):not(:where(.se-template-card, .se-template-card *)) { border-color: var(--muted); }
:root[data-theme="dark"] :is(.ordsw, .ag2-sw input[type="checkbox"]):not(:checked):not(:where(.se-template-card, .se-template-card *))::after { background: var(--soft-ink); }
@media (forced-colors: active) {
  :root :is(.ordsw, .ag2-sw input[type="checkbox"]):not(:checked):not(:where(.se-template-card, .se-template-card *))::after { background: ButtonText; forced-color-adjust: none; }
}
/* Voice permissions use the same native checkbox switch as Chat settings.
 * The voice module's injected 16px checkbox rule must not shrink its track. */
:root .sheet.sheet-agent .sav-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin-top: 12px; cursor: pointer; }
:root .sheet.sheet-agent .sav-check > span { flex: 1; min-width: 0; }
:root .sheet.sheet-agent .sav-check input.ordsw { width: 38px; height: 22px; flex: 0 0 38px; margin: 1px 0 0; padding: 0; border-radius: 999px; }
:root input[type="file"]:not(:where(.se-template-card, .se-template-card *)) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  color: var(--muted);
  font: 500 .8125rem/1.5 Manrope, sans-serif;
}
:root input[type="file"]:not(:where(.se-template-card, .se-template-card *))::file-selector-button {
  margin-inline-end: 12px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--control-radius);
  background: var(--accent);
  color: var(--on-accent);
  font: 650 .8125rem/1.4 Manrope, sans-serif;
  cursor: pointer;
  transition: background-color 140ms, border-color 140ms;
}
:root input[type="file"]:not(:disabled):not(:where(.se-template-card, .se-template-card *))::file-selector-button:hover { box-shadow: 0 0 0 3px var(--control-wash); }
:root input[type="file"]:disabled:not(:where(.se-template-card, .se-template-card *)) { opacity: .55; cursor: not-allowed; }
:root input[type="file"]:disabled:not(:where(.se-template-card, .se-template-card *))::file-selector-button { cursor: not-allowed; color: var(--muted); background: var(--paper2); }
:where(summary):not(:where(.se-template-card, .se-template-card *)) { cursor: pointer; color: var(--soft-ink); padding-block: 8px; font-weight: 600; }
:where(summary):not(:where(.se-template-card, .se-template-card *))::marker { color: var(--muted); }
/* Only summaries that still had the native marker receive this decoration.
 * The adapter adds a class, never a new click/key handler or accessible name. */
:root summary.studio-control-disclosure:not(:where(.se-template-card, .se-template-card *)) { position: relative; list-style: none; padding-inline-start: 24px; }
:root summary.studio-control-disclosure:not(:where(.se-template-card, .se-template-card *))::-webkit-details-marker { display: none; }
:root summary.studio-control-disclosure:not(:where(.se-template-card, .se-template-card *))::before {
  content: ''; position: absolute; inset-inline-start: 2px; inset-block-start: calc(.75em + 5px);
  width: 10px; height: 7px; background: var(--control-neutral-accent, var(--accent));
  clip-path: polygon(0 0, 50% 65%, 100% 0, 100% 30%, 50% 100%, 0 30%);
  rotate: -90deg; transition: rotate 180ms var(--control-ease); pointer-events: none;
}
:root details[open] > summary.studio-control-disclosure:not(:where(.se-template-card, .se-template-card *))::before { rotate: 0deg; }
/* Keep date segments, locale, validation and the native picker. Only its closed
 * field and calendar/clock artwork use the kit; no replacement date parser. */
:root body input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]):not(:where(.se-template-card, .se-template-card *)) {
  appearance: none; box-sizing: border-box; min-width: 0; max-width: 100%; min-height: var(--control-size-regular);
  border: 1px solid var(--control-neutral-line, var(--control-edge)); border-radius: var(--control-radius);
  padding: 9px 12px; background: var(--control-neutral-fill, var(--card)); color: var(--control-neutral-ink, var(--ink));
  font: 600 .8125rem/1.5 Manrope, sans-serif; font-variant-numeric: tabular-nums;
  --control-picker-mark: var(--control-calendar-mark);
}
:root body input[type="time"]:not(:where(.se-template-card, .se-template-card *)) { --control-picker-mark: var(--control-clock-mark); }
:root body input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]):not(:where(.se-template-card, .se-template-card *))::-webkit-calendar-picker-indicator {
  width: 18px; height: 18px; padding: 2px; margin-inline-start: 10px; opacity: 1; cursor: pointer;
  background: var(--control-neutral-accent, var(--accent));
  mask: var(--control-picker-mark) center / 18px 18px no-repeat;
}
:root body input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]):disabled:not(:where(.se-template-card, .se-template-card *))::-webkit-calendar-picker-indicator { opacity: .5; cursor: not-allowed; }
:root body input:not(:where(.se-template-card, .se-template-card *))::-webkit-datetime-edit { padding: 0; }
/* Native resize behavior remains available; the corner uses the same stroke
 * weight and theme accent as the kit's other small affordances. */
:root textarea:not(:where(.se-template-card, .se-template-card *))::-webkit-resizer {
  background-color: var(--control-neutral-fill, var(--card));
  background-image: linear-gradient(135deg, transparent 43%, var(--control-neutral-accent, var(--accent)) 43% 57%, transparent 57%), linear-gradient(135deg, transparent 40%, var(--control-neutral-accent, var(--accent)) 40% 60%, transparent 60%);
  background-size: 10px 10px, 5px 5px;
  background-position: right 3px bottom 3px;
  background-repeat: no-repeat;
}
/* The adapter opts in only native-appearance ranges. Existing instrument tracks
 * keep their geometry; native min/max/step, thumb movement and events own behavior. */
:root input.studio-control-range:not(:where(.se-template-card, .se-template-card *)) {
  appearance: none; box-sizing: border-box; min-width: 80px; max-width: 100%; vertical-align: middle;
  min-height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent;
  --control-range-accent: var(--control-neutral-accent, var(--accent));
  --control-range-rest: var(--control-neutral-line, var(--line2));
  cursor: pointer;
}
:root input.studio-control-range:disabled:not(:where(.se-template-card, .se-template-card *)) { opacity: .5; cursor: not-allowed; }
:root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--control-range-accent) var(--control-range-progress), var(--control-range-rest) var(--control-range-progress));
}
:root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-webkit-slider-thumb {
  appearance: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: -7px;
  border: 3px solid var(--control-range-accent); border-radius: 50%; background: var(--control-neutral-fill, var(--on-accent)); cursor: inherit;
}
:root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-moz-range-track { height: 6px; border-radius: 999px; background: var(--control-range-rest); }
:root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--control-range-accent); }
:root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 3px solid var(--control-range-accent); border-radius: 50%; background: var(--control-neutral-fill, var(--on-accent)); cursor: inherit; }
@supports (interpolate-size: allow-keywords) {
  :root details:not(:where(.se-template-card, .se-template-card *)) { interpolate-size: allow-keywords; }
  :root details:not(:where(.se-template-card, .se-template-card *))::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 180ms, opacity 180ms, content-visibility 180ms allow-discrete; }
  :root details[open]:not(:where(.se-template-card, .se-template-card *))::details-content { block-size: auto; opacity: 1; }
}
@media (max-width: 600px) {
  :root body select:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *)) { min-height: 42px; }
  :root body select:not([multiple]):not([size]) option:not(:where(.se-template-card, .se-template-card *)) { min-block-size: 44px; }
  :root .acctmenu:not(:where(.se-template-card, .se-template-card *)) { max-height: calc(100dvh - 76px); }
  :root .acctmenu .out:not(:where(.se-template-card, .se-template-card *)) { min-height: 44px; }
  :root input[type="file"]:not(:where(.se-template-card, .se-template-card *))::file-selector-button { min-height: 44px; }
  :root body input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]):not(:where(.se-template-card, .se-template-card *)) { min-height: var(--control-size-touch); }
  :root input.studio-control-range:not(:where(.se-template-card, .se-template-card *)) { min-height: var(--control-size-touch); }
  :root .pmod .ps-field:has(> input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])) { grid-column: 1 / -1; min-width: 0; }
  :root :is(.rowbtn, .tbtn, .pg-btn, .shop-btn, .ship-btn):not(:where(.se-template-card, .se-template-card *)) { min-height: var(--control-size-touch); }
}

/* Opt-in materials for new panes. Existing controls keep their surface geometry.
 * These classes do not select any existing Studio or customer content. */
.studio-control-button:not(:where(.se-template-card, .se-template-card *)) {
  min-height: var(--control-size-regular);
  border: 1px solid var(--control-neutral-line, var(--control-edge));
  border-radius: var(--control-radius);
  padding: 9px 14px;
  background: var(--control-neutral-fill, var(--card));
  color: var(--control-neutral-ink, var(--ink));
  font: 600 .8125rem/1.4 Manrope, sans-serif;
}
.studio-control-button[data-emphasis="primary"]:not(:where(.se-template-card, .se-template-card *)) {
  background: var(--control-neutral-accent, var(--accent));
  border-color: var(--control-neutral-accent, var(--accent));
  color: var(--control-neutral-fill, var(--on-accent));
}
:is(input, textarea).studio-control-field:not(:where(.se-template-card, .se-template-card *)) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--control-size-regular);
  border: 1px solid var(--control-neutral-line, var(--control-edge));
  border-radius: var(--control-radius);
  padding: 9px 12px;
  background: var(--control-neutral-fill, var(--card));
  color: var(--control-neutral-ink, var(--ink));
  font: 500 .875rem/1.5 Manrope, sans-serif;
  transition: border-color 160ms, background-color 160ms;
}
.studio-control-field:not(:where(.se-template-card, .se-template-card *))::placeholder { color: var(--control-neutral-muted, var(--muted)); opacity: 1; }
.studio-control-field:read-only:not(:where(.se-template-card, .se-template-card *)) { background: var(--control-neutral-fill, var(--paper2)); }
.studio-control-field:disabled:not(:where(.se-template-card, .se-template-card *)) { opacity: .55; cursor: not-allowed; }
.studio-control-field[aria-invalid="true"]:not(:where(.se-template-card, .se-template-card *)) { border-color: var(--rose); }
.studio-control-card:not(:where(.se-template-card, .se-template-card *)) {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--control-neutral-line, var(--line));
  border-radius: 18px;
  background: var(--control-neutral-fill, var(--card));
  color: var(--control-neutral-ink, var(--ink));
}
@media (max-width: 600px) {
  .studio-control-button:not(:where(.se-template-card, .se-template-card *)),
  :is(input, textarea).studio-control-field:not(:where(.se-template-card, .se-template-card *)) { min-height: var(--control-size-touch); }
  :is(input, textarea).studio-control-field:not(:where(.se-template-card, .se-template-card *)) { font-size: 1rem; }
}

/* The website workbench deliberately has a neutral palette in both Studio
 * themes. Use its existing tokens (system canvas tokens for portaled dialogs),
 * so one dark Studio field never appears inside an otherwise light editor.
 * The customer website stays in its isolated iframe and receives none of this. */
@media (max-width: 900px) {
  /* The canvas is an isolated stacking context. Its content dialog must rise
   * above the phone inspector before its own z-index can take effect. */
  :root .se-stage:has(.se-content-layer):not(:where(.se-template-card, .se-template-card *)) { z-index: 4; }
}
:root :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]):not(:where(.se-template-card, .se-template-card *)) {
  color-scheme: light;
  --control-neutral-fill: var(--se-card, Canvas);
  --control-neutral-ink: var(--se-ink, CanvasText);
  --control-neutral-line: var(--se-line, var(--control-editor-line));
  --control-neutral-muted: var(--se-muted, GrayText);
  --control-neutral-accent: var(--se-accent, var(--control-editor-accent));
}
/* Chromium omits the native picker indicator while a date is disabled. Reuse
 * its decorative mark on the existing record-field wrapper; it is not a button
 * and does not make the unavailable native input focusable or editable. */
:root .se-records-field:has(> input[type="date"]:disabled:last-child):not(:where(.se-template-card, .se-template-card *)) { position: relative; }
:root .se-records-field:has(> input[type="date"]:disabled:last-child):not(:where(.se-template-card, .se-template-card *))::after {
  content: ''; position: absolute; inset-inline-end: 15px; inset-block-end: calc((var(--control-size-regular) - 18px) / 2);
  width: 18px; height: 18px; background: var(--control-neutral-accent, var(--control-editor-accent));
  mask: var(--control-calendar-mark) center / 18px 18px no-repeat; opacity: .5; pointer-events: none;
}
@media (max-width: 760px) {
  :root .se-records-field:has(> input[type="date"]:disabled:last-child):not(:where(.se-template-card, .se-template-card *))::after { inset-block-end: calc((var(--control-size-touch) - 18px) / 2); }
}
@media (forced-colors: active) {
  :root .se-records-field:has(> input[type="date"]:disabled:last-child):not(:where(.se-template-card, .se-template-card *))::after { background: GrayText; forced-color-adjust: none; }
}
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) select:not(:where(.se-template-card, .se-template-card *)),
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) select option:not(:where(.se-template-card, .se-template-card *)) {
  color: var(--control-neutral-ink);
  background-color: var(--control-neutral-fill);
  border-color: var(--control-neutral-line);
}
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) select:not([multiple]):not([size]):not(:where(.se-template-card, .se-template-card *)) {
  background-image: linear-gradient(45deg, transparent 50%, var(--control-neutral-muted) 50%), linear-gradient(135deg, var(--control-neutral-muted) 50%, transparent 50%);
}
@supports (appearance: base-select) {
  :root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) select:not(:where(.se-template-card, .se-template-card *))::picker(select) {
    color: var(--control-neutral-ink); background-color: var(--control-neutral-fill); border-color: var(--control-neutral-line);
  }
}
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) select option:is(:checked, :hover, :focus):not(:where(.se-template-card, .se-template-card *)) {
  background-color: color-mix(in srgb, var(--control-neutral-accent) 9%, var(--control-neutral-fill));
  color: var(--control-neutral-ink);
}
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) select:not(:where(.se-template-card, .se-template-card *))::picker-icon,
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) select option:not(:where(.se-template-card, .se-template-card *))::checkmark { color: var(--control-neutral-accent); }
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input:is([type="checkbox"], [type="radio"]):not(:where(.se-template-card, .se-template-card *)) {
  background-color: var(--control-neutral-fill); border-color: var(--control-neutral-muted);
}
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):is(:checked, :indeterminate):not(:where(.se-template-card, .se-template-card *)),
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input[type="radio"]:checked:not(:where(.se-template-card, .se-template-card *)) {
  background-color: var(--control-neutral-accent); border-color: var(--control-neutral-accent);
}
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):is(:checked, :indeterminate):not(:where(.se-template-card, .se-template-card *)) { background-color: var(--control-neutral-fill); border: 2px solid var(--control-neutral-accent); border-radius: 6px; }
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input[type="checkbox"]:checked:not(:where(.se-template-card, .se-template-card *))::after { border-color: var(--control-neutral-accent); }
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input[type="checkbox"]:indeterminate:not(:where(.se-template-card, .se-template-card *))::after { background: var(--control-neutral-accent); }
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input[type="radio"]:checked:not(:where(.se-template-card, .se-template-card *)) { box-shadow: inset 0 0 0 4px var(--control-neutral-fill); }
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) input[type="file"]:not(:where(.se-template-card, .se-template-card *))::file-selector-button {
  background: var(--control-neutral-accent); color: var(--control-neutral-fill); border-color: var(--control-neutral-accent);
}
:root body :is(.se-workspace, dialog[class^="se-"], [class^="se-"][role="dialog"]) :is(button, select, input, summary):focus-visible:not(:where(.se-template-card, .se-template-card *)) { outline-color: var(--control-neutral-accent); }
@media (prefers-reduced-motion: reduce) {
  :root body select:not(:where(.se-template-card, .se-template-card *)),
:root .acctmenu:not(:where(.se-template-card, .se-template-card *)),
:root .acctmenu .out:not(:where(.se-template-card, .se-template-card *)),
:root button:not(:where(.se-template-card, .se-template-card *)),
:root input:not(:where(.se-template-card, .se-template-card *)),
:root input:not(:where(.se-template-card, .se-template-card *))::after { transition: none !important; }
  :root summary.studio-control-disclosure:not(:where(.se-template-card, .se-template-card *))::before { transition: none !important; }
  @supports (interpolate-size: allow-keywords) {
    :root details:not(:where(.se-template-card, .se-template-card *))::details-content { transition: none !important; }
  }
  @supports (appearance: base-select) {
    :root body select:not(:where(.se-template-card, .se-template-card *))::picker(select),
:root body select:not(:where(.se-template-card, .se-template-card *))::picker-icon { transition: none !important; }
  }
}
@media (forced-colors: active) {
  :root summary.studio-control-disclosure:not(:where(.se-template-card, .se-template-card *))::before { background: ButtonText; forced-color-adjust: none; }
  :root body input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]):not(:where(.se-template-card, .se-template-card *))::-webkit-calendar-picker-indicator { background: ButtonText; forced-color-adjust: none; }
  :root textarea:not(:where(.se-template-card, .se-template-card *))::-webkit-resizer { --control-neutral-accent: CanvasText; --control-neutral-fill: Canvas; forced-color-adjust: none; }
  :root input.studio-control-range:not(:where(.se-template-card, .se-template-card *)) { --control-range-accent: Highlight; --control-range-rest: GrayText; }
  :root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-webkit-slider-runnable-track { forced-color-adjust: none; }
  :root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-webkit-slider-thumb { border-color: ButtonText; background: ButtonFace; forced-color-adjust: none; }
  :root input.studio-control-range:not(:where(.se-template-card, .se-template-card *))::-moz-range-thumb { border-color: ButtonText; background: ButtonFace; forced-color-adjust: none; }
  :root body select:not(:where(.se-template-card, .se-template-card *)),
:root input[type="file"]:not(:where(.se-template-card, .se-template-card *))::file-selector-button,
:root .acctmenu:not(:where(.se-template-card, .se-template-card *)) { border-color: ButtonText; }
  :root body select option:checked:not(:where(.se-template-card, .se-template-card *)) { color: HighlightText; background: Highlight; }
  :root input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):not(:where(.se-template-card, .se-template-card *)),
:root input[type="radio"]:not(:where(.se-template-card, .se-template-card *)) { appearance: auto; box-shadow: none; }
  :root input[type="checkbox"]:not(.ordsw):not(.ag2-sw input):not(:where(.se-template-card, .se-template-card *))::after { content: none !important; }
}

/* SVG-only and single-symbol actions are a separate material. The narrowly
 * scoped importance wins over late-injected surface styles, including .sav.
 * Primary/pressed/recording variants keep their authored semantic colors.
 * Width, height, display and visibility remain the owning surface's rules. */
:root button:is([data-studio-icon], .studio-control-icon):not(:where(.se-template-card, .se-template-card *)) {
  /* Do not animate newly mounted icons from the inherited text-button fill. */
  transition: none !important;
  text-align: center !important;
  align-content: center;
}
:root button:is([data-studio-icon], .studio-control-icon):not(:where(.se-template-card, .se-template-card *)):not(:where(.primary, .prim, .pri, .play, .rec, .arm, .send, .on, .active, .selected, .playing, .recording, [aria-pressed="true"], [aria-selected="true"], [data-emphasis])) {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
:root button:is([data-studio-icon][data-studio-icon-fit="compact"], .studio-control-icon):not(:where(.se-template-card, .se-template-card *)) { padding: 0 !important; line-height: 1 !important; }
:root button:is([data-studio-icon], .studio-control-icon):not(:disabled):is(:hover, :focus-visible):not(:where(.se-template-card, .se-template-card *)):not(:where(.primary, .prim, .pri, .play, .rec, .arm, .send, .on, .active, .selected, .playing, .recording, [aria-pressed="true"], [aria-selected="true"], [data-emphasis])) {
  background: var(--control-wash) !important;
}
:root button:is([data-studio-icon], .studio-control-icon):not(:where(.se-template-card, .se-template-card *)) > svg {
  vertical-align: middle;
  margin: 0;
}
@media (forced-colors: active) {
  :root button:is([data-studio-icon], .studio-control-icon):focus-visible:not(:where(.se-template-card, .se-template-card *)) { outline-color: Highlight; }
}