/* =====================================================================
   VENDORED FROM ascend-portal — assets/ascend.css
   Folded in when Codedesk was extracted. Kept whole, in original
   cascade order, so nothing silently changed. Relative url() paths
   were rewritten: these rules moved from assets/ to styles/.
   ===================================================================== */

:root {
  /* ============================
   * BRAND & BASE COLORS
   * ========================== */

  /* Core surfaces */
  --ascend-color-bg: #050814;
  --ascend-color-surface: #0d1224;
  --ascend-color-surface-soft: #121830;

  /* Core accent */
  --ascend-color-accent: #4fd1c5;
  --ascend-color-accent-soft: #81e6d9;

  /* Text */
  --ascend-color-text-main: #f7fafc;
  --ascend-color-text-muted: #a0aec0;

  /* Borders */
  --ascend-color-border-subtle: rgba(255, 255, 255, 0.08);

  /* Semantic colors (for future use) */
  --ascend-color-danger: #f56565;
  --ascend-color-warning: #ecc94b;
  --ascend-color-success: #48bb78;
  --ascend-color-info: #63b3ed;

  /* Hopper progress indicator (shell-derived, desaturated) */
  --ascend-hopper-stage-1: #e6956a; /* warm amber / sunrise clay */
  --ascend-hopper-stage-2: #6fb9ad; /* desaturated teal / mid-sky */
  --ascend-hopper-stage-3: #4e86df; /* desaturated blue / horizon */
  --ascend-hopper-stage-off-opacity: 0.22;

  /* ============================
   * TYPOGRAPHY
   * ========================== */

  /* Font stacks */
  --ascend-font-sans: system-ui, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Segoe UI", sans-serif;
  --ascend-font-heading: var(--ascend-font-sans);
  --ascend-font-body: var(--ascend-font-sans);
  --ascend-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Weights */
  --ascend-weight-regular: 400;
  --ascend-weight-medium: 500;
  --ascend-weight-bold: 600;

  /* Type scale (not yet wired everywhere, but available) */
  --ascend-text-xxl: 2.1rem;
  --ascend-text-xl: 1.35rem;
  --ascend-text-l: 1.05rem;
  --ascend-text-m: 0.95rem;
  --ascend-text-s: 0.8rem;
  --ascend-text-xs: 0.72rem;

  /* ============================
   * LAYOUT & GEOMETRY
   * ========================== */

  /* Radii & elevation */
  --ascend-radius-lg: 18px;
  --ascend-radius-xl: 26px;
  --ascend-border-width: 1px;
  --ascend-shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.65);
  --ascend-shadow-strong: 0 26px 70px rgba(0, 0, 0, 0.75);

  /* Shell & layout */
  --ascend-gap: 1.25rem;
  --ascend-max-width: 80%;
  --ascend-shell-padding-y: 2.5rem;
  --ascend-shell-padding-x: 1.5rem;

  /* Spacing scale */
  --ascend-space-xxl: 3rem;
  --ascend-space-xl: 2rem;
  --ascend-space-l: 1.5rem;
  --ascend-space-m: 1rem;
  --ascend-space-s: 0.75rem;
  --ascend-space-xs: 0.5rem;

  /* ============================
   * SURFACE & BACKGROUND PATTERNS
   * ========================== */

   /* Body backdrop */
  --ascend-body-bg: radial-gradient(circle at top, #1a2144, #050814 60%, #02030a);

      /* Shell – dawn / ascension*/
    --ascend-shell-bg:
  linear-gradient(
    180deg,
    rgba(5, 8, 20, 0.55) 0%,
    rgba(10, 16, 38, 0.55) 32%,
    rgba(23, 63, 110, 0.55) 50%,
    rgba(47, 134, 173, 0.55) 64%,
    rgba(107, 188, 183, 0.55) 72%,
    rgba(221, 176, 122, 0.55) 80%,
    rgba(159, 76, 50, 0.55) 84%,
    rgba(2, 3, 10, 0.75) 86%,
    rgba(2, 3, 10, 0.75) 100%
  );

  /* Cards / panels */
  --ascend-card-surface: var(--ascend-color-surface);
  --ascend-card-surface-soft: var(--ascend-color-surface-soft);
  --ascend-card-border: var(--ascend-color-border-subtle);

  /* ============================
   * GRID MOTIF (BACKGROUND ONLY)
   * ========================== */

  --ascend-grid-visible: 1; /* 0 or 1 (toggle in future) */
  --ascend-grid-size: 16px;
  --ascend-grid-color: rgba(255, 245, 235, 0.09);
  --ascend-grid-thickness: 1.25px;
  --ascend-grid-opacity: 0.44;
  --ascend-grid-emphasis-interval: 4;
  --ascend-grid-mode: light;

  /* ============================
   * MOTION
   * ========================== */

  --ascend-transition-fast: 120ms ease-out;
  --ascend-transition-medium: 200ms ease-out;
  --ascend-transition-slow: 320ms ease-out;

  --ascend-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ascend-ease-emphasized: cubic-bezier(0.19, 1, 0.22, 1);

  /* ============================
   * COMPONENT KNOBS
   * ========================== */

  /* Buttons */
  --ascend-btn-bg: #ffffff;
  --ascend-btn-text: #0b1025;
  --ascend-btn-border: transparent;
  --ascend-btn-radius: 999px;
  --ascend-btn-hover-bg: #f7fafc;
  --ascend-btn-active-bg: #e2e8f0;
  --ascend-btn-focus-outline: rgba(129, 230, 217, 0.8);

  /* Toggles */
  --ascend-toggle-track: rgba(255, 255, 255, 0.18);
  --ascend-toggle-track-active: linear-gradient(135deg, #4fd1c5, #81e6d9);
  --ascend-toggle-thumb: #ffffff;

  /* Tool-level identity (future overrides per module) */
  --ascend-artstart-accent: var(--ascend-color-accent);
  --ascend-copydesk-accent: var(--ascend-color-accent);
  --ascend-codedesk-accent: var(--ascend-color-accent);
  --ascend-fileroom-accent: var(--ascend-color-accent);

/* ============================
 * GLOBAL CONTROL DEFAULTS
 * (portal defaults; light apps override in ascend-apps.css)
 * ========================== */

--ascend-control-bg: rgba(255, 255, 255, 0.08);
--ascend-control-bg-hover: rgba(255, 255, 255, 0.12);
--ascend-control-bg-active: rgba(255, 255, 255, 0.18);
--ascend-control-text: rgba(255, 255, 255, 0.92);
--ascend-control-border: rgba(255, 255, 255, 0.16);
--ascend-control-ring: rgba(129, 230, 217, 0.55);
--ascend-control-radius: 10px;
--ascend-control-padding-y: 0.45rem;
--ascend-control-padding-x: 0.7rem;

/* --------------------------------------------------------------------
   Shape tokens. Referenced throughout but never declared, which is why
   every control on the page rendered square.

   border-radius: var(--shape-corner-md), with no fallback, beats
   .rounded-md on specificity — and only afterwards does the undefined
   var make the declaration invalid at computed-value time, which resets
   border-radius to its initial 0. The utility never gets a chance, and
   the rule that outranked it paints nothing.

   Five rules use md, one sm, one full; only --shape-corner-lg was ever
   declared. md is set to match --ascend-control-radius so the controls
   agree with each other.
   -------------------------------------------------------------------- */
--shape-corner-sm: 6px;
--shape-corner-md: 10px;
--shape-corner-full: 9999px;
}

/* Global */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: var(--ascend-font-body);
  background: var(--ascend-body-bg);
  background-attachment: fixed;
  background-size: 100% 100vh;
  color: var(--ascend-color-text-main);
}

/* =========================================
 * Base controls (buttons + inputs)
 * ======================================= */

button,
.ascend-btn,
.ascend-btn-base {
  position: relative;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.1;
  color: var(--ascend-control-text);
  background: var(--ascend-control-bg);
  border: 1px solid var(--ascend-control-border);
  border-radius: var(--ascend-control-radius);
  padding: var(--ascend-control-padding-y) var(--ascend-control-padding-x);
  cursor: pointer;
  transition: transform 80ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
  will-change: transform;
}

button:hover,
.ascend-btn:hover,
.ascend-btn-base:hover {
  background: var(--ascend-control-bg-hover);
  border-color: color-mix(in srgb, var(--ascend-control-border) 70%, white 30%);
}

button:active,
.ascend-btn:active,
.ascend-btn-base:active {
  transform: translateY(1px) scale(0.99);
  background: var(--ascend-control-bg-active);
}

button:focus-visible,
.ascend-btn:focus-visible,
.ascend-btn-base:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ascend-control-ring);
}

button[disabled],
.ascend-btn[disabled],
.ascend-btn-base[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

input,
select,
textarea {
  font-family: inherit;
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="number"],
select,
textarea {
  color: var(--ascend-control-text);
  background: var(--ascend-control-bg);
  border: 1px solid var(--ascend-control-border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ascend-color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ascend-control-ring) 65%, transparent 35%);
}

/* Busy state: disables + shows spinner (button utility) */
.is-busy {
  pointer-events: none;
  opacity: 0.75;
}

.is-busy::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--ascend-control-text) 35%, transparent 65%);
  border-top-color: var(--ascend-control-text);
  animation: ascend-spin 700ms linear infinite;
}

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


#ascend-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--ascend-shell-padding-y) var(--ascend-shell-padding-x);
  box-sizing: border-box;
}

/* Shell */

.ascend-shell {
  width: calc(100% - 3rem);
  background: var(--ascend-shell-bg);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  box-shadow: var(--ascend-shadow-soft);
  border: var(--ascend-border-width) solid var(--ascend-color-border-subtle);
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  /* host for grid overlay */
  position: relative;
}

.ascend-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background-image:
    /* fine grid only */
    linear-gradient(
      to right,
      var(--ascend-grid-color) var(--ascend-grid-thickness),
      transparent var(--ascend-grid-thickness)
    ),
    linear-gradient(
      to bottom,
      var(--ascend-grid-color) var(--ascend-grid-thickness),
      transparent var(--ascend-grid-thickness)
    );
  background-size: var(--ascend-grid-size) var(--ascend-grid-size);

  opacity: calc(var(--ascend-grid-visible) * var(--ascend-grid-opacity));
}

/* keep actual content above the grid */
.ascend-shell > * {
  position: relative;
  z-index: 1;
}

.ascend-shell {
  margin-left: auto;
  margin-right: auto;
}

/* Header */

.ascend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.ascend-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ascend-logo-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #ffffff, #4fd1c5 35%, #171a3a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

.ascend-title-block h1 {
  margin: 0;
  font-size: var(--ascend-text-xl);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--ascend-weight-medium);
}

.ascend-title-block p {
  margin: 0.1rem 0 0;
  font-size: var(--ascend-text-s);
  color: var(--ascend-color-text-muted);
}

.ascend-header-right {
  text-align: right;
  font-size: var(--ascend-text-xs);
  color: var(--ascend-color-text-muted);
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Main content layout */

.ascend-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 1.5rem;
  overflow: visible;
}

/* When logged in, collapse the login column entirely */
[data-ascend-state="logged-in"] .ascend-main {
  grid-template-columns: 1fr !important;
}

/* Stacked mode (≤900px): rows stack vertically */
@media (max-width: 900px) {
  .ascend-main {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .ascend-panel {
    max-width: 400px;
    margin: 0 auto;
  }

  /* Rows stack vertically */
  .ascend-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .ascend-row-primary,
  .ascend-row-secondary {
    max-width: 100%;
  }
}

/* Narrow mode (900-1200px): dashboard fills shell */
@media (max-width: 1200px) {
  .ascend-header,
  .ascend-dashboard,
  #ascend-dashboard {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .ascend-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .ascend-header-left {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .ascend-logo-circle {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .ascend-title-block {
    text-align: center;
  }

  .ascend-title-block h1 {
    font-size: 1rem;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }

  .ascend-title-block p {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.25rem;
  }

  .ascend-header-right {
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    opacity: 0.75;
  }

  /* Mobile accordion row headers */
  .ascend-row-primary {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 0.75rem;
    align-items: center;
  }

  .ascend-row-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.65rem;
    margin-bottom: 0;
  }

  .ascend-row-title {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .ascend-row-description {
    display: none; /* Hide on mobile - too cramped */
  }

  .ascend-row-action-btn {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
  }
}

/* Left side: Login / session card */

.ascend-panel {
  background: var(--ascend-card-surface);
  border-radius: var(--ascend-radius-xl);
  border: var(--ascend-border-width) solid var(--ascend-card-border);
  padding: 1.4rem 1.3rem;
  position: relative;
  overflow: hidden;
}

.ascend-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    rgba(129, 230, 217, 0.16),
    transparent 55%
  );
  opacity: 0.7;
  pointer-events: none;
}

.ascend-panel-inner {
  position: relative;
  z-index: 1;
}

/* Login state */

.ascend-account-label {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 0.15rem;
}

.ascend-login-heading {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.4rem;
  color: var(--ascend-color-text-muted);
}

.ascend-login-title {
  font-size: 1.1rem;
  margin: 0 0 0.7rem;
}

.ascend-login-description {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--ascend-color-text-muted);
}

.ascend-login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.25rem;
}

.ascend-qr-frame {
  width: 260px;
  height: 260px;
  border-radius: 24px;
  border: 1px solid rgba(129, 230, 217, 0.6);
  background: radial-gradient(circle at top, #1a202f, #050814);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ascend-qr-placeholder {
  width: 100%;
  height: 100%;
  background-image: url("../assets/qr-auth.png");
  background-size: 115%;
  background-repeat: no-repeat;
  background-position: center;
}

.ascend-login-copy {
  display: none;
}

.ascend-login-copy strong {
  color: var(--ascend-color-text-main);
}

.ascend-toggle-row {
  display: none;
}

.ascend-toggle-label {
  font-size: 0.8rem;
}

.ascend-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--ascend-toggle-track);
  cursor: pointer;
  flex-shrink: 0;
}

.ascend-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ascend-toggle-thumb);
  transition: transform var(--ascend-transition-fast);
}

.ascend-toggle[data-on="true"] {
  background: var(--ascend-toggle-track-active);
}

.ascend-toggle[data-on="true"] .ascend-toggle-thumb {
  transform: translateX(18px);
}

/* Logged-in marker */

.ascend-session-status {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--ascend-color-text-muted);
}

/* Right side: Dashboard */

.ascend-dashboard,
#ascend-dashboard {
  background: var(--ascend-card-surface-soft);
  border-radius: var(--ascend-radius-xl);
  border: var(--ascend-border-width) solid var(--ascend-card-border);
  padding: 1rem 1.25rem 1.2rem;

  display: flex;
  flex-direction: column;
  overflow: visible;

  /* Wide mode: 80% of shell, centered */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.ascend-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.ascend-dashboard-title {
  font-size: var(--ascend-text-s);
  font-weight: var(--ascend-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.ascend-user-chip {
  font-size: 0.75rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: rgba(79, 209, 197, 0.16);
  border: 1px solid rgba(79, 209, 197, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ascend-user-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #4fd1c5;
}

/* Logout button */

.ascend-logout-btn {
  display: none;
  border: none;
  background: transparent;
  color: var(--ascend-color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

[data-ascend-state="logged-in"] .ascend-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ascend-logout-btn:hover {
  background: rgba(79, 209, 197, 0.22);
}

/* Dashboard rows */

.ascend-row-list {
  display: grid;

  /* Let each row size to its content */
  grid-template-rows: auto auto auto auto;

  gap: 0.75rem;
  margin-top: 0.4rem;

  overflow: visible;
}

/* Content Pipeline group (ArtStart + Copydesk) */
.ascend-content-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ascend-calendar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(79, 209, 197, 0.4);
  border-radius: 10px;
  background: rgba(79, 209, 197, 0.08);
  color: var(--ascend-color-text-main);
  font-size: 0.8rem;
  font-weight: var(--ascend-weight-medium);
  cursor: pointer;
  transition: background-color var(--ascend-transition-fast),
    border-color var(--ascend-transition-fast),
    box-shadow var(--ascend-transition-fast);
}

.ascend-calendar-trigger:hover {
  background: rgba(79, 209, 197, 0.15);
  border-color: rgba(79, 209, 197, 0.6);
  box-shadow: 0 0 12px rgba(79, 209, 197, 0.2);
}

.ascend-calendar-trigger:active {
  background: rgba(79, 209, 197, 0.2);
}

.ascend-calendar-trigger[aria-expanded="true"] {
  background: rgba(79, 209, 197, 0.18);
  border-color: var(--ascend-color-accent);
}

.ascend-calendar-trigger-icon {
  font-size: 0.95rem;
}

.ascend-calendar-trigger-label {
  letter-spacing: 0.01em;
}

.ascend-row {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 0.75rem;
  align-items: stretch;
  min-height: 0;
}

.ascend-row > * {
  min-height: 0;
}

@media (max-width: 700px) {
  .ascend-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ascend-row-primary {
  background: linear-gradient(
      135deg,
      rgba(79, 209, 197, 0.2),
      rgba(16, 29, 61, 0.4)
    ),
    #0b1025; /* candidate for future token */
  border-radius: var(--ascend-radius-lg);
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;

  min-height: 120px;

  /* control-panel accent */
  border-left: 3px solid rgba(129, 230, 217, 0.9);
}

.ascend-row-label {
  font-size: var(--ascend-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
  color: var(--ascend-color-text-muted);
}

.ascend-row-title {
  font-size: 1.18rem;
  font-weight: var(--ascend-weight-medium);
  letter-spacing: 0.02em;
}

.ascend-row-description {
  font-size: 0.8rem;
  color: var(--ascend-color-text-muted);
}

.ascend-row-action-btn {
  margin-top: 0.25rem;
  align-self: flex-start;
  border-radius: var(--ascend-btn-radius);
  border: 1px solid var(--ascend-btn-border);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: var(--ascend-weight-medium);
  cursor: pointer;
  background: var(--ascend-btn-bg);
  color: var(--ascend-btn-text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background-color var(--ascend-transition-fast),
    color var(--ascend-transition-fast),
    box-shadow var(--ascend-transition-fast);
}

.ascend-row-action-btn:hover {
  background: var(--ascend-btn-hover-bg);
}

.ascend-row-action-btn:active {
  background: var(--ascend-btn-active-bg);
}

.ascend-row-action-btn:focus-visible {
  outline: 2px solid var(--ascend-btn-focus-outline);
  outline-offset: 2px;
}

.ascend-row-action-btn span.icon {
  font-size: 0.9rem;
}

.ascend-row-secondary {
  background: rgba(5, 9, 23, 0.9);
  border-radius: var(--ascend-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--ascend-color-text-muted);

  min-height: 120px;
  max-height: 280px;
  overflow-y: auto;
}

/* Hopper lists (ArtStart / Copydesk / Codedesk) */
.ascend-row-secondary > div[id$="-list"] {
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  background: radial-gradient(
    circle at top,
    rgba(15, 27, 54, 0.7),
    rgba(4, 7, 20, 0.9)
  );

  /* Spreadsheet drawer: no gaps, rows provide the separation */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;

  /* IMPORTANT: clip zebra/hover row fills to the drawer radius */
  overflow: hidden;
  overflow-y: auto;

  /* crisp perimeter so the drawer reads as a container */
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Hopper job rows (spreadsheet style) */

.ascend-job-card {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.ascend-job-list .ascend-job-card {
  flex: 1 1 0;
}

/* FileRoom rows use identical rhythm */
.ascend-fileroom-card {
  align-items: stretch;
}

/* Full-width clickable row */
.ascend-job-card-main {
  /* reset native button look */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;

  flex: 1;
  position: relative;

  /* row geometry */
  border-radius: 0;
  padding: 0.65rem 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;

  /* rule between rows */
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);

  /* hover */
  transition: background-color var(--ascend-transition-fast);
}

.ascend-job-card {
  position: relative;
}

.ascend-job-card-cancel {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  border: none;
  background: transparent;
  color: var(--ascend-color-text-muted);
  opacity: 0.70;

  width: 28px;
  height: 28px;
  padding: 0;

  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: 18px;
  line-height: 1;

  transition: background-color var(--ascend-transition-fast),
    color var(--ascend-transition-fast),
    opacity var(--ascend-transition-fast);
}

.ascend-job-card-cancel:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--ascend-color-text-main);
  opacity: 0.95;
}

/* =========================================================
 * FileRoom hopper provenance field
 * (matches the old 3-stacked-squares real estate)
 * ======================================================= */

.ascend-fileroom-card .ascend-job-card-main {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: stretch;
}

/* Provenance cell: invisible container (no pill), holds icon + letter */
.ascend-fileroom-card .ascend-job-card-provenance {
  align-self: stretch;
  width: 48px;
  height: 100%;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  /* Space for the icon footprint + a clean gap before the letter */
  padding-left: 26px;

  font-weight: var(--ascend-weight-bold);
  letter-spacing: 0.08em;

  /* Closer-to-white than subtext, but not pure white */
  color: color-mix(in srgb, var(--ascend-color-text-main) 92%, white 8%);

  background: none;
  box-shadow: none;
  border-radius: 0;
  opacity: 0.95;
}

/* Fixed-height, vertically centered bar: matches the outer 4 corners of the 3-square stack */
.ascend-fileroom-card .ascend-job-card-provenance::before {
  content: "";
  position: absolute;
  left: 8px;

  top: 50%;
  transform: translateY(-50%);

  /* 3 stacked 7px squares + 4px gaps => 29px tall */
  height: 29px;
  width: 7px;

  /* Match the stacked squares' corner language */
  border-radius: 2px;

  background: linear-gradient(
    180deg,
    var(--ascend-hopper-stage-3) 0%,
    var(--ascend-hopper-stage-2) 50%,
    var(--ascend-hopper-stage-1) 100%
  );

  pointer-events: none;
  z-index: 0;
}

/* Big monogram sits “in the same lane” as the old squares */
.ascend-fileroom-card .ascend-job-card-provenance span {
  position: relative;
  z-index: 1;

  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.06em;
}

.ascend-hopper-progress {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
}

.ascend-hopper-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  opacity: 1;
  background: transparent;
  border: 1px solid
    color-mix(in srgb, var(--ascend-hopper-stage-1) 55%, transparent);
}

.ascend-hopper-progress-dot[data-step="2"] {
  border-color: color-mix(
    in srgb,
    var(--ascend-hopper-stage-2) 55%,
    transparent
  );
}

.ascend-hopper-progress-dot[data-step="3"] {
  border-color: color-mix(
    in srgb,
    var(--ascend-hopper-stage-3) 55%,
    transparent
  );
}

/* Light the first N steps based on data-stage */
.ascend-hopper-progress[data-stage="1"] .ascend-hopper-progress-dot[data-step="1"],
.ascend-hopper-progress[data-stage="2"] .ascend-hopper-progress-dot[data-step="1"],
.ascend-hopper-progress[data-stage="3"] .ascend-hopper-progress-dot[data-step="1"] {
  background: var(--ascend-hopper-stage-1);
  border-color: transparent;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35);
}

/* CodeDesk templates: show “already done” (all blue) */
.ascend-hopper-progress.is-template .ascend-hopper-progress-dot {
  background: var(--ascend-hopper-stage-3) !important;
  opacity: 1 !important;
}

.ascend-hopper-progress.is-working .ascend-hopper-progress-dot {
  background: var(--ascend-hopper-stage-1) !important;
  opacity: 1 !important;
}

/* Translation subjobs: show all three lights lit (orange/teal/blue) */
.ascend-hopper-progress.is-translation .ascend-hopper-progress-dot {
  border-color: transparent !important;
  opacity: 1 !important;
}
.ascend-hopper-progress.is-translation .ascend-hopper-progress-dot[data-step="1"] {
  background: var(--ascend-hopper-stage-1) !important;
}
.ascend-hopper-progress.is-translation .ascend-hopper-progress-dot[data-step="2"] {
  background: var(--ascend-hopper-stage-2) !important;
}
.ascend-hopper-progress.is-translation .ascend-hopper-progress-dot[data-step="3"] {
  background: var(--ascend-hopper-stage-3) !important;
}

/* Progress cell: wraps dots + optional language lettermark */
.ascend-hopper-progress-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Language lettermark for translation jobs - matches FileRoom provenance style */
.ascend-lang-mark {
  font-size: 1rem;
  font-weight: var(--ascend-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ascend-color-text-main) 92%, white 8%);
  white-space: nowrap;
  line-height: 1;
}

.ascend-hopper-progress[data-stage="2"] .ascend-hopper-progress-dot[data-step="2"],
.ascend-hopper-progress[data-stage="3"] .ascend-hopper-progress-dot[data-step="2"] {
  background: var(--ascend-hopper-stage-2);
  border-color: transparent;
}

.ascend-hopper-progress[data-stage="3"] .ascend-hopper-progress-dot[data-step="3"] {
  background: var(--ascend-hopper-stage-3);
  border-color: transparent;
}

.ascend-job-card-stack {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

/* Zebra striping (rows are siblings inside the lane list) */
.ascend-job-card:nth-child(odd) .ascend-job-card-main {
  background: rgba(255, 255, 255, 0.03);
}
.ascend-job-card:nth-child(even) .ascend-job-card-main {
  background: rgba(255, 255, 255, 0.06);
}

.ascend-job-card:hover .ascend-job-card-main {
  background: rgba(79, 209, 197, 0.10);
}

/* =========================================================
 * CodeDesk — Template Rows (Hopper Only)
 * Static, reusable, non-persistent
 * ======================================================= */

.ascend-codedesk-template .ascend-hopper-progress-dot {
  background: var(--ascend-hopper-stage-3);
  border-color: transparent;
  box-shadow: none;
}

.ascend-codedesk-template {
  background:
    linear-gradient(
      90deg,
      rgba(78, 134, 223, 0.18),
      rgba(78, 134, 223, 0.04) 70%,
      transparent
    );
}

.ascend-codedesk-template .ascend-job-card-main {
  background: transparent;
}

.ascend-codedesk-template .ascend-job-card-title {
  color: color-mix(
    in srgb,
    var(--ascend-hopper-stage-3) 88%,
    white 12%
  );
}

/* CodeDesk lane typography MUST match the other portal slots (FileRoom/ArtStart/Copydesk) */
#ascend-codedesk-list .ascend-job-card-title {
  font-weight: var(--ascend-weight-bold);
  letter-spacing: 0.01em;
  font-size: 0.90rem;
  line-height: 1.15;
  color: color-mix(in srgb, var(--ascend-color-text-main) 94%, white 6%);
}

#ascend-codedesk-list .ascend-job-card-meta {
  margin-top: 0.18rem;
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--ascend-color-text-muted) 65%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--ascend-weight-regular);
}

/* Title + meta stack inside the left cell */
.ascend-job-card-title {
  font-weight: var(--ascend-weight-bold);
  letter-spacing: 0.01em;
  font-size: 0.90rem;
  line-height: 1.15;
  color: color-mix(in srgb, var(--ascend-color-text-main) 94%, white 6%);
}

.ascend-job-card-meta {
  margin-top: 0.18rem;
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--ascend-color-text-muted) 65%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--ascend-weight-regular);
}

.ascend-job-card-context,
.ascend-job-card-time {
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--ascend-color-text-muted) 72%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--ascend-weight-regular);
}

/* Status endcap disabled for FileRoom rows */
.ascend-fileroom-card .ascend-job-card-status {
  display: none;
}

/* FileRoom lane: always stretch cards full width */
#ascend-fileroom-list {
  width: 100%;
}

#ascend-fileroom-list .ascend-job-card {
  width: 100%;
}

#ascend-fileroom-list .ascend-job-card-main {
  width: 100%;
}

/* Row radius only at the very top/bottom of the drawer */
.ascend-row-secondary > div[id$="-list"] .ascend-job-card:first-child .ascend-job-card-main {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.ascend-row-secondary > div[id$="-list"] .ascend-job-card:last-child .ascend-job-card-main {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom: none;
}

/* Delete stays as a compact icon hit-area aligned with the row */
.ascend-job-card-delete {
  border: none;
  background: transparent;
  color: var(--ascend-color-text-muted);
  opacity: 0.70;

  width: 28px;
  height: 28px;
  padding: 0;

  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  align-self: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;

  transition: background-color var(--ascend-transition-fast),
    color var(--ascend-transition-fast),
    opacity var(--ascend-transition-fast);
}

.ascend-job-card-delete:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--ascend-color-text-main);
}

.ascend-job-card-delete.is-spacer {
  opacity: 0;
  pointer-events: none;
}

/* Restore button (trash lane) */
.ascend-job-card-restore {
  border: none;
  background: transparent;
  color: var(--ascend-color-success);
  opacity: 0.80;

  width: 28px;
  height: 28px;
  padding: 0;

  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  align-self: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;

  transition: background-color var(--ascend-transition-fast),
    color var(--ascend-transition-fast),
    opacity var(--ascend-transition-fast);
}

.ascend-job-card-restore:hover {
  background-color: rgba(72, 187, 120, 0.15);
  color: var(--ascend-color-success);
  opacity: 1;
}

/* Trashed item card styling (used in modal) */
.ascend-trash-card {
  opacity: 0.85;
}

.ascend-trash-card .ascend-job-card-provenance.is-trashed {
  filter: grayscale(0.3);
}

/* Empty-state text inside a lane */
.ascend-job-list-empty {
  font-size: 0.74rem;
  color: var(--ascend-color-text-muted);

  /* Make empties feel like a real "drawer" state */
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.ascend-row-secondary strong {
  color: var(--ascend-color-text-main);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Visibility states */

[data-ascend-state="logged-out"] #ascend-login-panel {
  display: block;
}

[data-ascend-state="logged-in"] #ascend-login-panel {
  display: none !important;
}

[data-ascend-state="logged-out"] #ascend-dashboard {
  display: none;
}

[data-ascend-state="logged-in"] #ascend-dashboard {
  display: flex !important;
}

/* "fileroom" disabled */
.ascend-row--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.ascend-row--disabled .ascend-row-action-btn {
  cursor: default;
}

/* =========================================================
 * Trash trigger button (footer of dashboard)
 * ======================================================= */

.ascend-trash-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ascend-color-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background-color var(--ascend-transition-fast),
    border-color var(--ascend-transition-fast),
    color var(--ascend-transition-fast);
}

.ascend-trash-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--ascend-color-text-main);
}

.ascend-trash-trigger-icon {
  font-size: 1rem;
  opacity: 0.7;
}

.ascend-trash-trigger-label {
  font-weight: var(--ascend-weight-medium);
  letter-spacing: 0.02em;
}

.ascend-trash-trigger-count {
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ascend-color-text-muted);
  min-width: 1.2rem;
  text-align: center;
}

.ascend-trash-trigger-count:empty {
  display: none;
}

/* =========================================================
 * Trash modal (FileRoom picker style)
 * ======================================================= */

.ascend-trash-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.ascend-trash-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 20, 0.75);
}

.ascend-trash-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 28px));
  background: var(--ascend-color-surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
}

.ascend-trash-modal-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}

.ascend-trash-modal-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ascend-color-text-main);
  letter-spacing: 0.02em;
}

.ascend-trash-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ascend-trash-modal-x {
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--ascend-color-text-muted);
  opacity: 0.7;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color var(--ascend-transition-fast),
    opacity var(--ascend-transition-fast);
}

.ascend-trash-modal-x:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

.ascend-trash-modal-body {
  padding: 14px 18px 18px;
  overflow: auto;
  flex: 1;
  min-height: 0;

  background: linear-gradient(
    180deg,
    rgba(13, 18, 36, 0.95),
    rgba(5, 8, 20, 0.98)
  );
}

.ascend-trash-modal-note {
  font-size: 0.75rem;
  color: var(--ascend-color-text-muted);
  margin-bottom: 12px;
}

/* Trash list inside modal */
.ascend-trash-list {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(5, 9, 23, 0.9);
}

/* Trash cards use same styling as fileroom cards */
.ascend-trash-list .ascend-job-card {
  display: flex;
  align-items: stretch;
}

.ascend-trash-list .ascend-job-card-main {
  flex: 1;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;

  border-radius: 0;
  padding: 0.65rem 1rem;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: background-color var(--ascend-transition-fast);
}

.ascend-trash-list .ascend-job-card:nth-child(odd) .ascend-job-card-main {
  background: rgba(255, 255, 255, 0.03);
}

.ascend-trash-list .ascend-job-card:nth-child(even) .ascend-job-card-main {
  background: rgba(255, 255, 255, 0.06);
}

.ascend-trash-list .ascend-job-card:hover .ascend-job-card-main {
  background: rgba(72, 187, 120, 0.08);
}

.ascend-trash-list .ascend-job-card:first-child .ascend-job-card-main {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.ascend-trash-list .ascend-job-card:last-child .ascend-job-card-main {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom: none;
}

/* Trash empty state inside modal */
.ascend-trash-list .ascend-job-list-empty {
  padding: 2rem 1rem;
  text-align: center;
  border-radius: 12px;
}

/* =========================================================
 * RESPONSIVE SCALING — Laptop & Tablet Support
 * Addresses jumbled/oversized layouts on smaller screens
 * ======================================================= */

/* Base: Fluid typography scaling */
html {
  /* Scales from 14px at 320px viewport to 16px at 1440px */
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
}

/* Force all boxes to include padding in width calculations */
*, *::before, *::after {
  box-sizing: border-box;
}



/* Trash modal scales down on smaller screens */
@media (max-width: 1023px) {
  .ascend-trash-modal-panel {
    width: min(600px, calc(100vw - 20px));
    max-height: min(480px, calc(100vh - 20px));
  }
}

/* Small tablets / large phones (max 767px) */
@media (max-width: 767px) {
  #ascend-root {
    padding: 1rem 0.5rem;
  }

  .ascend-shell {
    border-radius: 12px;
    padding: 0.85rem 0.75rem;
    gap: 1rem;
  }

  .ascend-header {
    gap: 0.75rem;
  }

  .ascend-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .ascend-row-primary {
    padding: 0.65rem 0.85rem;
    gap: 0.4rem;
  }

  .ascend-row-title {
    font-size: 0.95rem;
  }

  .ascend-row-action-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
  }

  .ascend-qr-frame {
    width: 160px;
    height: 160px;
    border-radius: 18px;
  }

  .ascend-dashboard-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ascend-job-card-main {
    padding: 0.5rem 0.75rem;
  }

  .ascend-job-card-title {
    font-size: 0.82rem;
  }

  .ascend-trash-modal-panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 12px;
  }

  .ascend-trash-modal-header {
    padding: 10px 14px;
  }

  .ascend-trash-modal-body {
    padding: 10px 14px 14px;
  }
}

/* Prevent horizontal overflow globally */
html {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  width: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  width: 100%;
  min-width: 0;
}

#ascend-root,
.ascend-main,
.ascend-dashboard,
#ascend-dashboard,
.ascend-row,
.ascend-row-primary,
.ascend-row-secondary {
  min-width: 0;
}

/* Ensure images and media scale */
img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent text from causing overflow */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Long URLs/text in cards */
.ascend-job-card-title,
.ascend-job-card-url,
.ascend-job-card-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================================================
   VENDORED FROM ascend-portal — assets/ascend-apps.css
   ===================================================================== */

/* =========================================
 * ASCEND APP SHELL (ArtStart / Copydesk / Codedesk)
 * "Reverse" of the portal: light surfaces, same DNA
 * ======================================= */

:root {
  /* App-level mappings derived from ascend.css tokens */
  --ascend-app-bg: #e7ecf5;
  --ascend-app-surface: #ffffff;

  /* App desk slab (panel behind cards) */
  --ascend-app-desk-top: rgba(232, 249, 248, 0.98);
  --ascend-app-desk-bottom: rgba(227, 241, 252, 0.98);
  --ascend-app-desk-wash: rgba(80, 190, 255, 0.20);
  --ascend-app-border: rgba(15, 23, 42, 0.12);
  --ascend-app-shadow-soft: 0 26px 70px rgba(15, 23, 42, 0.22);

  --ascend-app-accent: var(--ascend-color-accent, #4fd1c5);
  --ascend-app-accent-soft: rgba(79, 209, 197, 0.12);

  --ascend-app-text-main: #020617;
  --ascend-app-text-muted: #64748b;
  --ascend-app-label: #475569;

  --ascend-app-radius-lg: var(--ascend-radius-lg, 18px);
  --ascend-app-radius-xl: var(--ascend-radius-xl, 26px);
  --ascend-app-radius-pill: 999px;

  /* =========================================================
     ASCEND APP — SHARED COSMETIC TOKENS (Authoritative Skin)
     ========================================================= */

  /* Backdrop/grid */
  --ascend-grid-bg: #dbe3f0;

  --ascend-grid-major: 48px;
  --ascend-grid-minor: 12px;

  --ascend-grid-line-color: rgba(0, 81, 255, 0.20);
  --ascend-grid-line-color-soft: rgba(79, 209, 197, 0.14);

  --ascend-grid-wash-color: rgba(79, 209, 197, 0.12);
  --ascend-grid-wash-stop: 55%;

  /* Compatibility tokens expected by theme.css (unification layer) */
  --ascend-grid-size: var(--ascend-grid-major);
  --ascend-grid-opacity: 1;

  --ascend-grid-glow-color: var(--ascend-grid-line-color-soft);
  --ascend-grid-glow-opacity: 1;
  --ascend-grid-glow-blur: 0px;

  --ascend-grid-vignette-strength: 0.20;
  --ascend-grid-vignette-size: 55%;
  --ascend-grid-vignette-y: top;


  /* Compatibility tokens expected by theme.css */
  --stage-frame: var(--ascend-stage-frame);
  --stage-frame-w: var(--ascend-stage-frame-w);

  /* Card stroke cosmetics (filled mode) */
  --ascend-bg-card-stroke-color: color-mix(in oklab, var(--ascend-app-accent) 85%, white);
  --ascend-bg-card-stroke-width: 1px;
  --ascend-bg-card-stroke-glow: 0 0 10px color-mix(in oklab, var(--ascend-app-accent) 45%, transparent);

  /* Placeholder ink */
  --ascend-caption-placeholder-fill: color-mix(in oklab, var(--ascend-app-accent) 75%, black);

  /* Modal cosmetics */
  --ascend-modal-backdrop: rgba(0, 0, 0, .25);
  --ascend-modal-blur: 3px;

  /* Control hover wash */
  --ascend-control-hover-wash: rgba(255, 255, 255, .08);

  /* Destructive / warning (used already by CODEDESK setup-done state) */
  --ascend-app-danger: rgba(220, 38, 38, 0.92);
  --ascend-app-danger-border: rgba(185, 28, 28, 0.70);
  --ascend-app-danger-hover: rgba(220, 38, 38, 0.98);

  /* Hover/focus glow knobs */
  --ascend-hover-glow-color: color-mix(in oklab, var(--ascend-app-accent) 30%, transparent);
  --ascend-hover-glow-blur: 8px;
  --ascend-focus-glow-blur: 10px;

  /* =========================================================
     ASCEND APP — SHARED COSMETIC TOKENS (Authoritative Skin)
     ========================================================= */

  /* Backdrop/grid */
  --ascend-grid-bg: #dbe3f0;

  --ascend-grid-major: 48px;
  --ascend-grid-minor: 12px;

  --ascend-grid-line-color: rgba(0, 81, 255, 0.20);
  --ascend-grid-line-color-soft: rgba(79, 209, 197, 0.14);

  --ascend-grid-wash-color: rgba(79, 209, 197, 0.12);
  --ascend-grid-wash-stop: 55%;

  /* Compatibility tokens expected by theme.css (unification layer) */
  --ascend-grid-size: var(--ascend-grid-major);
  --ascend-grid-opacity: 1;

  --ascend-grid-glow-color: var(--ascend-grid-line-color-soft);
  --ascend-grid-glow-opacity: 1;
  --ascend-grid-glow-blur: 0px;

  --ascend-grid-vignette-strength: 0.20;
  --ascend-grid-vignette-size: 55%;
  --ascend-grid-vignette-y: top;

  /* QR / stage frame */
  --ascend-stage-frame: var(--ascend-app-accent);
  --ascend-stage-frame-w: 3px;

  /* Compatibility tokens expected by theme.css */
  --stage-frame: var(--ascend-stage-frame);
  --stage-frame-w: var(--ascend-stage-frame-w);

  /* Card stroke cosmetics (filled mode) */
  --ascend-bg-card-stroke-color: color-mix(in oklab, var(--ascend-app-accent) 85%, white);
  --ascend-bg-card-stroke-width: 1px;
  --ascend-bg-card-stroke-glow: 0 0 10px color-mix(in oklab, var(--ascend-app-accent) 45%, transparent);

  /* Placeholder ink */
  --ascend-caption-placeholder-fill: color-mix(in oklab, var(--ascend-app-accent) 75%, black);

  /* Modal cosmetics */
  --ascend-modal-backdrop: rgba(0, 0, 0, .25);
  --ascend-modal-blur: 3px;

  /* Control hover wash */
  --ascend-control-hover-wash: rgba(255, 255, 255, .08);

  /* Hover/focus glow knobs */
  --ascend-hover-glow-color: color-mix(in oklab, var(--ascend-app-accent) 30%, transparent);
  --ascend-hover-glow-blur: 8px;
  --ascend-focus-glow-blur: 10px;
}

/* Base for all app pages: light version of the portal body */
html,
body.ascend-app-body {
  /* Undo portal document-locking for standalone app pages */
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body.ascend-app-body {
  margin: 0;
  font-family: var(--ascend-font-body, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif);

  /* Control defaults for light app pages */
  --ascend-control-bg: #ffffff;
  --ascend-control-bg-hover: #f8fafc;
  --ascend-control-bg-active: #eef2f7;
  --ascend-control-text: var(--ascend-app-text-main);
  --ascend-control-border: rgba(148, 163, 184, 0.85);
  --ascend-control-ring: var(--ascend-app-accent-soft);
  --ascend-control-radius: 10px;

    background-color: var(--ascend-grid-bg);
  background-image:
    linear-gradient(to right, var(--ascend-grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ascend-grid-line-color) 1px, transparent 1px),
    linear-gradient(to right, var(--ascend-grid-line-color-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ascend-grid-line-color-soft) 1px, transparent 1px),
    radial-gradient(circle at top, var(--ascend-grid-wash-color), transparent var(--ascend-grid-wash-stop));
  background-size:
    var(--ascend-grid-major) var(--ascend-grid-major),
    var(--ascend-grid-major) var(--ascend-grid-major),
    var(--ascend-grid-minor) var(--ascend-grid-minor),
    var(--ascend-grid-minor) var(--ascend-grid-minor),
    auto;

  background-attachment: fixed;
  background-repeat: repeat;

  color: var(--ascend-app-text-main);
}

/* Centered light panel, same radii spirit as portal shell */
.ascend-app-shell {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 32px 40px; /* L/R equals top */
}

.ascend-app-panel {
  width: 100%;
  max-width: none; /* allow 2 lanes; inner cap is handled by .copydesk-content */

  /* Solid reading surface (not white) so text remains effortless.
     Tune hue greener/cyan to live cleanly on the blue graph-paper grid. */
  background:
    linear-gradient(
      180deg,
      var(--ascend-app-desk-top),
      var(--ascend-app-desk-bottom)
    );

  border-radius: var(--ascend-app-radius-xl);
  border: 1px solid var(--ascend-app-border);
  box-shadow: var(--ascend-app-shadow-soft);
  padding: 22px 22px 26px; /* L/R equals top */
  position: relative;
  overflow: hidden;
}

/* Soft accent wash in the corner, mirroring the portal cards */
.ascend-app-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at top right,
    var(--ascend-app-desk-wash),
    transparent 58%
  );
  opacity: 0.16;
}

/* Keep content above the wash */
.ascend-app-panel > * {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------
   APP CONTROLS (global)
   Copydesk is not inside .ascend-app-form, so it needs these.
   ------------------------------------------------------- */

/* Read-only calendar reference (keeps icon, prevents interaction) */
.job-cutoff-ref {
  pointer-events: none;   /* prevents clicks & picker */
  cursor: default;
}

.ascend-app-panel button,
.ascend-app-panel .card-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ascend-control-border);
  background: var(--ascend-control-bg);
  color: var(--ascend-control-text);
  border-radius: var(--ascend-control-radius);
  padding: 8px 10px;
  font: 600 0.84rem/1 var(--ascend-font-body, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.ascend-app-panel button:hover:not(:disabled),
.ascend-app-panel .card-btn:hover:not(:disabled) {
  background: var(--ascend-control-bg-hover);
}

.ascend-app-panel button:active:not(:disabled),
.ascend-app-panel .card-btn:active:not(:disabled) {
  background: var(--ascend-control-bg-active);
}

.ascend-app-panel button:disabled,
.ascend-app-panel .card-btn:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

.ascend-app-panel select,
.ascend-app-panel input[type="text"],
.ascend-app-panel input[type="date"],
.ascend-app-panel textarea {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ascend-control-border);
  background: var(--ascend-control-bg);
  color: var(--ascend-control-text);
  border-radius: var(--ascend-control-radius);
  padding: 9px 10px;
  font: 500 0.86rem/1.25 var(--ascend-font-body, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.ascend-app-panel select {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(2, 6, 23, 0.65) 50%),
    linear-gradient(135deg, rgba(2, 6, 23, 0.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.ascend-app-panel select:focus,
.ascend-app-panel input[type="text"]:focus,
.ascend-app-panel input[type="date"]:focus,
.ascend-app-panel textarea:focus,
.ascend-app-panel button:focus,
.ascend-app-panel .card-btn:focus {
  outline: none;
  border-color: var(--ascend-app-accent);
  box-shadow:
    0 0 0 2px var(--ascend-control-ring),
    0 1px 0 rgba(15, 23, 42, 0.04);
}

/* Header: same uppercase system as portal, but dark-on-light */
.ascend-app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Ensure all headers inherit Ascend light-theme ink (not Material black) */
.ascend-app-panel h1,
.ascend-app-panel h2,
.ascend-app-panel h3,
.ascend-app-panel h4 {
  color: var(--ascend-app-text-main);
}

.ascend-app-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ascend-app-title {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ascend-app-text-muted);
}

.ascend-app-subtitle {
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Right-side header actions (e.g., Push) */
.ascend-app-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ascend-app-meta {
  font-size: 0.78rem;
  color: var(--ascend-app-text-muted);
  text-align: right;
}

.ascend-app-meta a,
.ascend-app-meta .ascend-app-meta-link {
  color: inherit;
  text-decoration: none;
}

.ascend-app-meta a:hover,
.ascend-app-meta .ascend-app-meta-link:hover {
  text-decoration: underline;
}

/* Form layout: single column on mobile, optional 2-col on wide */
.ascend-app-form {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 900px) {
  .ascend-app-form.ascend-app-form--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 12px;
  }
}

/* Labels: same uppercase rhythm as portal row labels */
.ascend-app-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ascend-app-label);
}

/* Inputs / selects / textareas: scoped spacing + sizing (visuals come from ascend.css control vars) */
.ascend-app-form input[type="text"],
.ascend-app-form input[type="date"],
.ascend-app-form select,
.ascend-app-form textarea {
  margin-top: 4px;
  width: 100%;
  font-size: 0.86rem;
}

.ascend-app-form textarea {
  min-height: 90px;
  resize: vertical;
}

/* Focus: crisp stroke + subtle teal halo */
.ascend-app-form input[type="text"]:focus,
.ascend-app-form input[type="date"]:focus,
.ascend-app-form select:focus,
.ascend-app-form textarea:focus {
  border-color: var(--ascend-app-accent);
  box-shadow: 0 0 0 2px var(--ascend-app-accent-soft);
}

/* Small helper text under a label, if needed */
.ascend-app-helper {
  font-size: 0.72rem;
  color: var(--ascend-app-text-muted);
  margin-top: 2px;
}

/* Primary action: pill, teal-forward, but more tool than marketing */
.ascend-app-primary-btn {
  margin-top: 18px;
  align-self: flex-start;
  padding: 8px 20px;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: var(--ascend-app-radius-pill);
  border: 1px solid rgba(4, 120, 87, 0.0);
  cursor: pointer;
  background: linear-gradient(135deg, #4fd1c5, #2c7a7b);
  color: #0b1025;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25);
}

.ascend-app-primary-btn:hover:not(:disabled) {
  filter: brightness(0.97);
}

.ascend-app-primary-btn:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

/* =========================================================
   CODEDESK — Finish/Setup button states
   ========================================================= */

/* Busy feedback */
.ascend-app-primary-btn.is-busy {
  cursor: progress;
  filter: brightness(0.96);
}

/* “Setup complete” — dramatic crosshatch warning state */
.ascend-app-primary-btn.is-setup-done {
  border-color: rgba(220, 38, 38, 0.55);
  color: rgba(255, 255, 255, 0.92);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(220, 38, 38, 0.34) 0px,
      rgba(220, 38, 38, 0.34) 6px,
      rgba(0, 0, 0, 0.0) 6px,
      rgba(0, 0, 0, 0.0) 12px
    ),
    linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25);
}

/* Status messages (JS sets className='status' / 'status error', etc.) */
.status {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--ascend-app-text-muted);
}

.status.error {
  color: #b91c1c;
}

.status.success {
  color: #166534;
}

/* Media spec preview line inside the label */
#mediaSpecPreview {
  font-size: 0.75rem;
  color: var(--ascend-app-text-muted);
  margin-top: 4px;
}

.notes-block textarea {
  height: 120px;
  resize: vertical;
}

/* Intake form: Notes on left spanning full height, Collaborators + Button on right */
@media (min-width: 900px) {
  .ascend-app-form .notes-block.notes-block--left {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
  }

  .ascend-app-form .notes-block.notes-block--left textarea {
    flex: 1 1 0;
    height: 0 !important;
    min-height: 100px;
    resize: none;
  }

  .ascend-app-form .intake-right-column {
    grid-row: span 2;
    align-self: stretch;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ascend-app-form .intake-submit-frame {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(236, 72, 153, 0.5);
    border-radius: var(--ascend-control-radius);
    padding: 12px;
    background: linear-gradient(135deg, rgba(147, 112, 158, 0.08), rgba(120, 90, 140, 0.12));
  }

  .ascend-app-form .intake-submit-frame .ascend-app-primary-btn {
    margin-top: 0 !important;
    width: 80%;
    align-self: auto;
  }
}

/* Keep label text + asterisk on one line */
.label-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Red asterisk */
.required {
  color: #d62121;
  font-weight: 700;
}

/* -------------------------------------------------------
   DIGITAL CANVAS MODE
   Only difference allowed: hide bleed in digital previews.
   ------------------------------------------------------- */

.artstart-canvas-box[data-media-kind="digital"] .artstart-canvas-bleed {
  display: none !important;
}

/* =========================================================
   ARTSTART — LANGUAGE TRANSLATION SQUARE
   Filled = machine translation (linked)
   Empty  = human-edited (decoupled). Click to re-translate.
   ========================================================= */

/* Legacy outside-square (replaced by per-language squares inside dropdown) */
#working-language-square{
  display: none !important;
}

.artstart-language-square{
  width: 12px;
  height: 12px;
  border-radius: 2px;

  /* Ascend blue (filled = linked/machine) */
  border: 1px solid rgba(0, 81, 255, 0.85);
  background: rgba(0, 81, 255, 0.92);

  box-shadow: 0 1px 2px rgba(15,23,42,0.18);
  flex: 0 0 auto;
  margin-right: 8px;
  cursor: default;
  padding: 0;
}

.artstart-language-square.is-empty{
  /* Edited/human = empty square with orange outline */
  background: transparent;
  border-color: rgba(249, 115, 22, 0.95); /* orange-500-ish */
  box-shadow: none;
  cursor: pointer;
}

.artstart-language-square.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   ARTSTART — CUSTOM LANGUAGE PICKER (COLORED SQUARES IN SITU)
   ========================================================= */

#working-language.is-hidden{
  display: none !important;
}

.artstart-langpicker{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* IMPORTANT: must beat `.ascend-app-panel button` */
.ascend-app-panel .artstart-langpicker-btn{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* Slimmer type */
  font-size: 0.88rem;
  line-height: 1.05;
  font-weight: 560;
  letter-spacing: 0.005em;

  /* Compact geometry */
  min-height: 36px;
  padding: 7px 12px;

  /* Outer corners can be rounded */
  border-radius: 10px;

  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);

  color: rgba(15,23,42,0.92);
  cursor: pointer;
}

.ascend-app-panel .artstart-langpicker-btn:hover{
  background: rgba(255,255,255,0.98);
}

.ascend-app-panel .artstart-langpicker-btn:active{
  transform: translateY(1px);
}

.artstart-langpicker-label{
  font-size: 0.88rem;
  font-weight: 560;
  letter-spacing: 0.005em;
}

.artstart-langpicker-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 9999;

  min-width: 320px;
  max-height: 360px;
  overflow: auto;

  /* One continuous tray (outer corners only) */
  padding: 0;
  border-radius: 14px;

  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 26px 70px rgba(15,23,42,0.22);

  overflow: hidden;
}

.artstart-langpicker-menu.is-hidden{
  display: none;
}

/* IMPORTANT: must beat `.ascend-app-panel button` */
.ascend-app-panel .artstart-langpicker-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  /* Slimmer type */
  font-size: 0.88rem;
  line-height: 1.1;
  font-weight: 560;
  letter-spacing: 0.005em;

  /* Flat, full-width rows (NO inner rounding) */
  padding: 10px 12px;
  border-radius: 0 !important;

  border: 0;
  background: transparent;
  box-shadow: none !important;

  color: rgba(15,23,42,0.92);
  cursor: pointer;
  text-align: left;

  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.ascend-app-panel .artstart-langpicker-item:last-child{
  border-bottom: 0;
}

/* zebra (FileRoom-like) */
.ascend-app-panel .artstart-langpicker-item:nth-child(odd){
  background: rgba(240,246,252,0.65);
}

.ascend-app-panel .artstart-langpicker-item:nth-child(even){
  background: rgba(255,255,255,0.65);
}

.ascend-app-panel .artstart-langpicker-item:hover{
  background: color-mix(
    in srgb,
    var(--ascend-hopper-stage-2) 10%,
    rgba(240,246,252,0.92)
  );
}

/* active selection: quiet, not loud */
.ascend-app-panel .artstart-langpicker-item.is-active{
  background: color-mix(
    in srgb,
    var(--ascend-app-accent) 8%,
    rgba(240,246,252,0.88)
  );
}

.artstart-langpicker-item-label{
  /* Was 800; this is the “slim down” fix */
  font-weight: 600;
  letter-spacing: 0.005em;
}

.artstart-langpicker-spacer{
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* =========================================================
   ARTSTART — RED “RE-TRANSLATE” SQUARE BUTTON
   Appears only when active non-EN language is human-edited.
   Unlabeled; destructive-ish but lightweight.
   ========================================================= */

/* Force this to win over the global .ascend-app-panel button styling */
.ascend-app-panel .artstart-retranslate-btn{
  appearance: none;
  -webkit-appearance: none;

  /* hard geometry: true square */
  width: 12px;
  height: 12px;
  min-height: 0;
  padding: 0;
  line-height: 0;

  /* do NOT inherit the global button pill look */
  border-radius: 2px;
  border: 1px solid var(--ascend-app-danger-border);
  background: var(--ascend-app-danger);

  /* keep it feeling like our other indicator squares */
  box-shadow: 0 1px 2px rgba(15,23,42,0.18);

  /* inline-left placement */
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 0;

  cursor: pointer;
}

.ascend-app-panel .artstart-retranslate-btn:hover{
  background: var(--ascend-app-danger-hover);
}

.ascend-app-panel .artstart-retranslate-btn:active{
  transform: translateY(1px);
}

.ascend-app-panel .artstart-retranslate-btn.is-hidden{
  display: none;
}

/* Custom language dropdown wrapper (keeps native <select> for state) */
.artstart-lang-dropdown{
  position: relative;
}

/* Hide the native select but keep it in the DOM for change handlers */
.artstart-lang-dropdown select{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.artstart-lang-button{
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(45,212,191,0.45);
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08);
  cursor: pointer;
}

.artstart-lang-button:focus{
  outline: none;
  border-color: rgba(45,212,191,0.75);
  box-shadow: 0 0 0 3px rgba(45,212,191,0.18);
}

.artstart-lang-menu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  display: none;

  /* One continuous tray (outer corners only) */
  padding: 0;
  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 26px 70px rgba(15,23,42,0.22);
}

.artstart-lang-menu.is-open{
  display: block;
}

.artstart-lang-item{
  display: flex;
  align-items: center;

  /* Flat, full-width rows (no stacked rounded pills) */
  padding: 12px 14px;
  border-radius: 0;
  cursor: pointer;

  /* Subtle separators */
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.artstart-lang-item:last-child{
  border-bottom: 0;
}

/* Zebra striping */
.artstart-lang-item:nth-child(odd){
  background: rgba(240,246,252,0.65);
}

.artstart-lang-item:nth-child(even){
  background: rgba(255,255,255,0.65);
}

.artstart-lang-item:hover{
  background: color-mix(
    in srgb,
    var(--ascend-app-accent) 10%,
    rgba(240,246,252,0.92)
  );
}

.artstart-lang-label{
  /* Lighter (700 is why it feels shouty) */
  font-weight: 520;
}

/* =========================================================
   CODEDESK — WORKING FILE INDICATOR (ORANGE STACK)
   ========================================================= */

/* Target working files explicitly marked by CodeDesk */
.ascend-hopper-item[data-indicator="working_orange_stack"] .hopper-indicator,
.ascend-hopper-item[data-kind="working"] .hopper-indicator {

  /* preserve existing geometry */
  width: 14px;
  height: 14px;
  position: relative;
}

/* Base square */
.ascend-hopper-item[data-indicator="working_orange_stack"] .hopper-indicator::before,
.ascend-hopper-item[data-kind="working"] .hopper-indicator::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #fb923c,   /* orange-400 */
    #f97316    /* orange-500 */
  );
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Middle square */
.ascend-hopper-item[data-indicator="working_orange_stack"] .hopper-indicator::after,
.ascend-hopper-item[data-kind="working"] .hopper-indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(3px, -3px);
  background: linear-gradient(
    135deg,
    #fdba74,   /* orange-300 */
    #fb923c    /* orange-400 */
  );
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Top square (uses existing inner element if present) */
.ascend-hopper-item[data-indicator="working_orange_stack"] .hopper-indicator span,
.ascend-hopper-item[data-kind="working"] .hopper-indicator span {
  position: absolute;
  inset: 0;
  transform: translate(6px, -6px);
  background: linear-gradient(
    135deg,
    #fed7aa,   /* orange-200 */
    #fdba74    /* orange-300 */
  );
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35);
}

/* =========================================
 * Copydesk Subjob — Translator Notes stack
 * - Uses Ascend hopper markup, but forces ALL 3 squares filled
 * - Scoped ONLY to the notes glyph button in subjob rows
 * ======================================= */

/* Notes glyph must NOT inherit global app button styling */
.ascend-app-panel button.subjob-notes-toggle {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.subjob-notes-toggle:focus {
  outline: none;
}

/* Copydesk Subjob notes glyph: force normal stack order (top→bottom) */
#subjob-rows .subjob-notes-toggle .ascend-hopper-progress {
  display: inline-flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.subjob-notes-toggle .ascend-hopper-progress-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 0 !important;
  opacity: 1 !important;
}

/* Force the exact color/shape configuration (all filled)
   Desired order (top→bottom): Blue, Teal, Orange */
/* Notes stack uses Ascend hopper palette.
   NOTE: .ascend-hopper-progress is column-reverse, so:
   step 1 = bottom, step 3 = top. */
.subjob-notes-toggle .ascend-hopper-progress-dot[data-step="1"] {
  background: var(--ascend-hopper-stage-1) !important; /* orange / bottom */
}

.subjob-notes-toggle .ascend-hopper-progress-dot[data-step="2"] {
  background: var(--ascend-hopper-stage-2) !important; /* teal / middle */
}

.subjob-notes-toggle .ascend-hopper-progress-dot[data-step="3"] {
  background: var(--ascend-hopper-stage-3) !important; /* blue / top */
}

/* CLOSED-mode pop panel (simple + sturdy; not a floating tooltip) */
.subjob-notes-pop {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ascend-app-border);
  border-radius: 12px;
  background: var(--ascend-app-surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.subjob-notes-pop__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ascend-app-text-muted);
  margin-bottom: 6px;
}

.subjob-notes-pop__body {
  white-space: pre-wrap;
  color: var(--ascend-app-text-main);
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Notes glyph: when pop is open, show translucent stack + stroke (signals "click to close") */
#subjob-rows .subjob-notes-toggle.is-open .ascend-hopper-progress-dot {
  background: rgba(255, 255, 255, 0.55) !important; /* translucent fill */
  border: 1.5px solid transparent !important;       /* stroke set per-step below */
}

/* Keep the “3 colors” identity, but as outlines when open */
#subjob-rows .subjob-notes-toggle.is-open .ascend-hopper-progress-dot[data-step="1"] {
  border-color: var(--ascend-hopper-stage-1) !important;
}
#subjob-rows .subjob-notes-toggle.is-open .ascend-hopper-progress-dot[data-step="2"] {
  border-color: var(--ascend-hopper-stage-2) !important;
}
#subjob-rows .subjob-notes-toggle.is-open .ascend-hopper-progress-dot[data-step="3"] {
  border-color: var(--ascend-hopper-stage-3) !important;
}

/* =====================================================================
   CODEDESK'S OWN — the original styles/theme.css follows.
   Last in the cascade, as it was when these were three files.
   ===================================================================== */

/* =======================================================================
   CodeDesk — THEME.CSS
   Master style sheet controlling UI variables, theming, and component look.
   Author: Jacob Eugene Henderson
   -----------------------------------------------------------------------
   STRUCTURE OVERVIEW
   -----------------------------------------------------------------------
   1.  CONTROL PANEL — BASE (dark mode default)
         • Global design tokens and CSS variables (color, radii, density, motion)
         • Defines reusable Material-inspired system values (md-sys-color-* etc.)
   2.  GLOBAL SCAFFOLD
         • Body background gradients, theme grid overlay, layout padding
   3.  CARDS / SURFACES
         • Card containers, elevation shadows, stepper highlights
   4.  CONTROLS
         • Inputs, selects, buttons, and top-bar menu items
         • Includes hover/focus, emoji picker, and color-chip definitions
   5.  PREVIEW LAYOUT
         • QR preview area, SVG mount, transparent-frame styling
   6.  ARROWS
         • Navigation arrows for QR subtype switching
   7.  FOOTER
         • Fixed footer gradient bar and copyright text
   8.  THEME MODES
         • :root.light, :root.hc, and reduced-motion overrides
   9.  UTILITIES / OVERRIDES (sandbox)
         • Temporary tweaks, experimental features, or future controls
   -----------------------------------------------------------------------
   NOTES
   -----------------------------------------------------------------------
   • Variables follow Material Design token conventions where possible.
   • All custom properties begin with `--md-sys-`, `--ui-`, or `--qr-` prefixes.
   • JS can read certain variables via `getComputedStyle()` (e.g., --export-*).
   • To add new features, prefer creating new tokens at the top-level :root.
   • For experiments or nonstandard styling, append at the bottom section (9).
   ======================================================================= */

/* =========================
   1. CONTROL PANEL — BASE
========================= */
:root{

  /* ----- Header ----- */
  --header-h: 56px;

  /* ----- Ascend token aliases (no CodeDesk branding here) ----- */
  --md-sys-color-primary:          var(--ascend-app-accent, var(--ascend-color-accent, #4fd1c5));
  --md-sys-color-primary-hover:    color-mix(in oklab, var(--md-sys-color-primary) 86%, white);
  --md-sys-color-primary-pressed:  color-mix(in oklab, var(--md-sys-color-primary) 78%, black);
  --md-sys-color-on-primary:       #ffffff;

  /* QR frame cosmetics (Ascend-owned) */
  --stage-frame:   var(--ascend-stage-frame, #1ff0ff);
  --stage-frame-w: var(--ascend-stage-frame-w, 3px);

  /* Surfaces & text (inherit Ascend app shell)
     IMPORTANT: include fallbacks so light-mode doesn't go "empty" if Ascend tokens aren't present. */
  --md-sys-color-background:       var(--ascend-app-bg, #e7ecf5);
  --md-sys-color-on-background:    var(--ascend-app-text-main, #020617);
  --md-sys-color-surface:          var(--ascend-app-surface, #ffffff);
  --md-sys-color-on-surface:       var(--ascend-app-text-main, #020617);
  --md-sys-color-surface-variant:  var(--ascend-control-bg, #ffffff);
  --md-sys-color-muted:            var(--ascend-app-text-muted, #64748b);

  /* Strokes (inherit Ascend app shell) */
  --md-sys-color-outline:          var(--ascend-app-border, rgba(15, 23, 42, 0.22));
  --md-sys-color-outline-variant:  color-mix(in oklab, var(--md-sys-color-outline) 70%, var(--md-sys-color-primary) 30%);

  /* ---------------------------------------------------------
     UI ALIASES (authoritative, applies in BOTH dark + light)
     Without these, cards/headers can go transparent in CodeDesk.
     --------------------------------------------------------- */
  --ui-surface:         var(--md-sys-color-surface);
  --ui-surface-variant: var(--md-sys-color-surface-variant);
  --ui-stroke:          var(--md-sys-color-outline);
  --ui-stroke-hover:    var(--md-sys-color-outline-variant);
  --ui-focus-ring:      var(--md-sys-color-primary);
  --ui-glow-color:      var(--md-sys-color-primary);
  
  /* QR frame (Transparent mode) */
  --qr-stroke-color:   rgba(139,92,246,.70);
  --qr-stroke-width:   1;
  --qr-stroke-glow:    0 0 18px rgba(139,92,246,.28);

  /* ----- Density / Compact scale ----- */
  --density-scale: 1;
  --density-control-h-base: 2.25rem;
  --density-gap-base: .75rem;
  --density-control-h: calc(var(--density-control-h-base) * var(--density-scale));
  --density-gap:       calc(var(--density-gap-base) * var(--density-scale));

  /* ----- Focus ring (consistent keyboard focus) ----- */
  --focus-ring-width: 2px;
  --focus-ring-color: color-mix(in oklab, var(--md-sys-color-primary) 35%, transparent);

  /* ----- Motion scale (global speed) ----- */
  --motion-scale: 1;
  --motion-duration-1-base: 120ms;
  --motion-duration-2-base: 180ms;
  --motion-duration-1: calc(var(--motion-duration-1-base) * var(--motion-scale));
  --motion-duration-2: calc(var(--motion-duration-2-base) * var(--motion-scale));
  --motion-ease: cubic-bezier(.2,.6,.2,1);

  /* ----- Export defaults (read by JS) ----- */
  --export-png-scale: 3;
  --export-filename: "Codedesk";

  /* ----- Grid overlay knobs (Ascend-owned cosmetics) ----- */
  /* Unification layer: provide Ascend-compatible defaults derived from the canonical Ascend shell tokens */
  --ascend-grid-size:         var(--ascend-grid-major, 48px);
  --ascend-grid-opacity:      1;
  --ascend-grid-glow-color:   var(--ascend-grid-line-color-soft, rgba(79, 209, 197, 0.22));
  --ascend-grid-glow-opacity: 1;
  --ascend-grid-glow-blur:    0px;
  --ascend-grid-vignette-strength: 0.20;
  --ascend-grid-vignette-size:     var(--ascend-grid-wash-stop, 55%);
  --ascend-grid-vignette-y:        top;

  --grid-size:              var(--ascend-grid-size, 48px);
  --grid-opacity:           var(--ascend-grid-opacity, 1);
  --grid-line-color:        var(--ascend-grid-line-color, rgba(0, 81, 255, 0.35));
  --grid-glow-color:        var(--ascend-grid-glow-color, rgba(79, 209, 197, 0.22));
  --grid-glow-opacity:      var(--ascend-grid-glow-opacity, 1);
  --grid-glow-blur:         var(--ascend-grid-glow-blur, 0px);
  --grid-vignette-strength: var(--ascend-grid-vignette-strength, 0.20);
  --grid-vignette-size:     var(--ascend-grid-vignette-size, 55%);
  --grid-vignette-y:        var(--ascend-grid-vignette-y, top);

  /* Hover / focus glow knobs (Ascend-owned cosmetics) */
  --hover-glow-color: var(
    --ascend-hover-glow-color,
    color-mix(in oklab, var(--md-sys-color-primary) 30%, transparent)
  );
  --hover-glow-blur:  var(--ascend-hover-glow-blur, 8px);
  --focus-glow-blur:  var(--ascend-focus-glow-blur, 10px);

  /* Shared chevron for top controls */
  --chev-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.17l3.71-2.94a.75.75 0 111.04 1.08l-4.23 3.35a.75.75 0 01-.96 0L5.21 8.31a.75.75 0 01.02-1.1z'/></svg>");
  
  /* Phone radius... */
  --phone-radius: 22px;

  /* Keep all major card rounding on the same knob */
  --shape-corner-lg: var(--phone-radius);

  /* Arrows placement... */
  --edge-gutter: clamp(24px, 2vw, 24px);

  /* Footer height token */
    --footer-h: 72px;

  /* … existing vars … */
  --stack-gap: 0rem;        /* unify spacing rhythm */

  /* ----- BG CARD STROKE (filled mode) — Ascend-owned cosmetics ----- */
  --bg-card-stroke-color: var(--ascend-bg-card-stroke-color, hsl(179, 100%, 38%));
  --bg-card-stroke-width: var(--ascend-bg-card-stroke-width, 1px);
  --bg-card-stroke-glow:  var(--ascend-bg-card-stroke-glow, 0 0 10px rgba(0,240,200,.35));

    /* Featured / open card accent (default = global lilac story) */
  --featured-stroke-width: 1px;
  --step-color-primary: var(--md-sys-color-primary);
  --featured-stroke-color: color-mix(in oklab, var(--step-color-primary) 45%, transparent);
  --featured-stroke-glow: none;

  /* Open step fills (used only inside cards) */
  --step-header-open-bg: color-mix(in oklab, var(--ui-surface) 85%, var(--step-color-primary) 15%);
  --step-card-open-bg:   color-mix(in oklab, var(--ui-surface) 94%, var(--step-color-primary) 6%);

  --stepper-stroke-closed: var(--md-sys-color-outline);
 
}

  /* ==========================================================
   SECTION COLOR THEMES
   Uses existing brand knobs: --brand-h / --brand-s / --brand-l
   ========================================================== */

/* shared sticky offset */
.stage-stick {
  position: sticky;
  top: var(--header-h);
}

/* =========================
   2. GLOBAL SCAFFOLD (functional only)
========================= */

html, body{
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto; /* allow native scroll + middle-click autoscroll */
}

body{
  margin: 0;
  color: var(--md-sys-color-on-background);

  /* Ascend app grid (same as Copydesk) */
  background-color: var(--ascend-grid-bg, var(--md-sys-color-background));
  background-image:
    linear-gradient(to right, var(--ascend-grid-line-color, rgba(0, 81, 255, 0.35)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ascend-grid-line-color, rgba(0, 81, 255, 0.35)) 1px, transparent 1px),
    linear-gradient(to right, var(--ascend-grid-line-color-soft, rgba(79, 209, 197, 0.22)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ascend-grid-line-color-soft, rgba(79, 209, 197, 0.22)) 1px, transparent 1px),
    radial-gradient(circle at top, var(--ascend-grid-wash-color, rgba(79, 209, 197, 0.20)), transparent var(--ascend-grid-wash-stop, 55%));
  background-size:
    var(--ascend-grid-major, 48px) var(--ascend-grid-major, 48px),
    var(--ascend-grid-major, 48px) var(--ascend-grid-major, 48px),
    var(--ascend-grid-minor, 12px) var(--ascend-grid-minor, 12px),
    var(--ascend-grid-minor, 12px) var(--ascend-grid-minor, 12px),
    auto;
  background-attachment: fixed;
  background-repeat: repeat;

  position: relative;
  isolation: isolate;
}

/* Ensure the actual UI sits above any upstream decorative layers */
#app, #root, main, header, footer, .app, .shell, .wrap, #stepper, #qrPreview, .preview-stage{
  position: relative;
  z-index: 1;
}

/* =========================
   3. CARDS / SURFACES
========================= */
.card{
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--phone-radius);
  box-shadow: var(--elevation-2);
}
.step-card{ overflow:hidden; } /* remove square border artifact on rounded cards */

/* Open card highlight */
#stepper>div{ transition:background-color .15s,border-color .15s; }
#stepper .step-header{ transition:background-color .15s,border-color .15s,color .15s; }

/* Collapsed header: subtle tint + crisp edge (reuses existing knobs) */
#stepper > .step-card:not(.is-open) .step-header{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Hover tint must hit the FULL header shell (wrap), not just the left button chunk */
#stepper > div:not(.is-open) .step-header-wrap:hover{
  background: color-mix(in oklab, var(--ui-surface) 88%, var(--step-color-primary) 12%);
}

/* Caption has no wrap — tint the button itself */
#stepper > div[data-step="caption"]:not(.is-open) > .step-header:hover{
  background: color-mix(in oklab, var(--ui-surface) 88%, var(--step-color-primary) 12%);
}

#stepper>div.is-open .step-header {
  border-bottom: var(--featured-stroke-width) solid var(--featured-stroke-color);
  background: var(--step-header-open-bg); /* ✅ selected = light blue */
  backdrop-filter: saturate(1.1) blur(6px);
}

/* ✅ Open header slab: same height as closed, flat bottom corners */
#stepper > div.is-open .step-header-wrap{
  min-height: 3.4rem;
  border-radius: var(--phone-radius) var(--phone-radius) 0 0;
}

/* When a step is open, its outer shell adopts the local step color story */
.step-card.is-open{
  --ui-stroke: color-mix(in oklab, var(--step-color-primary) 40%, transparent);
  --ui-stroke-hover: color-mix(in oklab, var(--step-color-primary) 60%, transparent);

  /* ✅ card stays white; only the header stripe gets the blue */
  background: var(--ui-surface);
  border-color: var(--featured-stroke-color);
  box-shadow: var(--featured-stroke-glow);
}

/* Inputs & labels inside the active step pick up the section accent */
#stepper > div.is-open input:not([type="range"]),
#stepper > div.is-open select,
#stepper > div.is-open textarea,
#stepper > div.is-open .control,
#stepper > div.is-open .topctl {
  border-color: color-mix(in oklab, var(--step-color-primary) 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--step-color-primary) 40%, transparent) inset;
}

#stepper > div.is-open label,
#stepper > div.is-open .field-label {
  color: color-mix(in oklab, var(--md-sys-color-on-surface) 86%, var(--step-color-primary) 14%);
}

/* Mechanicals (open): unified stripe, full-bleed to card edge */
.step-card[data-step="mechanicals"].is-open .step-header-wrap {
  background: var(--step-header-open-bg);
  border-bottom: 0 !important;
  position: relative;

  /* harden full-bleed geometry */
  margin: 0;
  width: 100%;

  /* ✅ match closed indentation */
  padding-inline: 1.25rem;
}

.step-card[data-step="mechanicals"].is-open .step-header {
  background: transparent !important;
  border-bottom: 0 !important;
}

/* Single thin rule painted behind ECC pill (visual match with Caption) */
.step-card[data-step="mechanicals"].is-open .step-header-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ui-stroke);
  pointer-events: none;
}

/* Mechanicals body should match other panels’ surface */
.step-card[data-step="mechanicals"] [data-step-panel]{
  background: var(--ui-surface-variant);
}

/* Nudge the panel up 1px so it tucks under the header line (no step) */
.step-card[data-step="mechanicals"].is-open [data-step-panel]{
  margin-top: -1px;
}

/* Keep it “alive” even if something disables it */
#codedeskFilename:disabled{
  opacity: 1;
  -webkit-text-fill-color: currentColor;
  cursor: text;
}

/* Optional: when locked, keep the filename fully vivid even if other UI dims */
body.codedesk-locked #codedeskFilename{
  opacity: 1 !important;
  filter: none !important;
}

/* The stepper is the scroll container + the gap owner */
#stepper{
  display:flex;
  flex-direction:column;
  height:auto;
  overflow:visible;
  gap: var(--stack-gap);
  min-width:0; width:100%; max-width:720px; margin-inline:auto;
  scroll-padding-top: calc(var(--header-h,56px) + var(--preview-overlap, 200px));
  padding-bottom: 16px; /* footer removed; keep a little breathing room */
}

#captionEl{
  white-space: pre-wrap;        /* 🔑 preserves \n + collapses extra spaces */
  overflow-wrap: anywhere;      /* allow breaking long words/URLs */
  word-break: break-word;       /* legacy safety */
  hyphens: auto;                /* prettier wrapping for long words */
  text-wrap: balance;           /* nicer line breaks when multi-line */
}

#captionBox{
  max-width: 90%;
  margin: .5rem auto 0;
   max-height: clamp(3rem, 16vh, 220px);
  overflow: auto;
  scrollbar-width: thin;
}
#captionBox::-webkit-scrollbar{ width: 8px; }
#captionBox::-webkit-scrollbar-thumb{ border-radius: 999px; background: var(--ui-stroke-hover); }

#captionEl{
  font-size: clamp(.9rem, 2.2vw, 1.5rem);
  line-height: 1.15;
}

.step-card[data-step="caption"] .caption-toggle-row { justify-self: start; }

.step-card[data-step="caption"] label:has(#campaign),
.step-card[data-step="caption"] label:has(#captionBody){
  display: block;
  width: 100%;
}

.step-card[data-step="caption"] label:has(#showCaption){
  justify-self: start;
}

/* Ensure the caption text field spans the whole card */
.step-card[data-step="caption"] label:has(#campaign){
  display: grid;                /* keep label as a block wrapper */
  grid-template-columns: 1fr;   /* kill any leftover two-column form rules */
}
.step-card[data-step="caption"] #campaign{
  width: 100%;
}

/* Put the toggle on its own row under the input, left-aligned */
.step-card[data-step="caption"] #showCaption,
.step-card[data-step="caption"] [for="showCaption"]{
  justify-self: start;
}

/* (Optional) tighten the vertical rhythm of the toggle row */
.step-card[data-step="caption"] [for="showCaption"]{
  line-height: 1.2;
}

/* Caption text input: single row, full width */
#campaign{
  display:block;
  width: 100%;
  height: var(--density-control-h);
  line-height: var(--density-control-h);
  padding: 0 .75rem;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: none;       /* Focus Ring */
}

/* Caption body input: multi-line, matching shell */
#captionBody{
  display:block;
  width: 100%;
  min-height: calc(var(--density-control-h) * 1.5);
  padding: 0.5rem .75rem;
  line-height: 1.3;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
  box-shadow: none;
}

/* Header slab must be full-bleed; padding moves to title only */
.step-card .step-header {
  padding: 0;
}

.step-card [data-step-panel]{
  padding-top: 0.75rem;  /* panels had no top padding */
}

/* Optional: give the very first control inside a panel a bit of air */
.step-card [data-step-panel] > :first-child {
  margin-top: 0.25rem;
}

/* Base step card + header use token surfaces (theme-aware) */
.step-card{
  background: var(--ui-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--phone-radius);
  box-shadow: var(--elevation-2);
}

/* When a step is open, its outer shell adopts the local step color story */
#stepper .step-card.is-open{
  --ui-stroke: color-mix(in oklab, var(--step-color-primary) 40%, transparent);
  --ui-stroke-hover: color-mix(in oklab, var(--step-color-primary) 60%, transparent);

  /* ✅ card stays white; only the header stripe gets the blue */
  background: var(--ui-surface);
  border-color: var(--featured-stroke-color);
  box-shadow: var(--featured-stroke-glow);
}

.step-card:not(.is-open) .step-header{
  /* no background here; collapsed is handled above already */
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--ui-stroke);
}

/* Panel body (the content region) */
.step-card [data-step-panel]{
  background: var(--ui-surface-variant);
  color: var(--md-sys-color-on-surface);
}

/* Hover/focus feedback (matches your global glow) */
.step-card .step-header:hover{
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--hover-glow-blur) var(--hover-glow-color);
}
.step-card .step-header:focus-visible{
  border-color: var(--ui-stroke-hover);
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--focus-glow-blur) var(--focus-ring-color);
}

/* Tinted placeholder text (Ascend-owned cosmetics) */
.card--fill text.placeholder {
  fill: var(--ascend-caption-placeholder-fill, rgb(3, 162, 171));
}

/* Closed accordion buttons: navy stroke */
#stepper > div:not(.is-open) .step-header-wrap,
#stepper > div[data-step="caption"]:not(.is-open) > .step-header{
  background: var(--ui-surface); /* ✅ load state = white/light */
  border: 1px solid color-mix(in oklab, var(--md-sys-color-on-surface) 22%, transparent); /* ✅ darker/crisper */
  border-radius: var(--phone-radius);

  /* ✅ kill the fuzzy “double stroke” */
  box-shadow: 0 1px 0 rgba(0,0,0,.06);

  min-height: 3.4rem;
  display: flex;
  align-items: center;
}

/* Buttons — CANONICAL */
.ecc-btn {
  inline-size: 1.75rem;
  block-size: 1.75rem;

  /* shape + sizing */
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  padding: 0;

  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* visuals (Ascend controls) */
  background: var(--ascend-control-bg, #ffffff);
  border: 1px solid var(--ascend-control-border, rgba(148, 163, 184, 0.85));
  color: var(--ascend-app-text-main, #020617);
  text-decoration: none !important;

  /* type + motion */
  font: 600 0.85rem/1 var(--font-family, system-ui);
  transition:
    box-shadow var(--motion-duration-1) var(--motion-ease),
    background-color var(--motion-duration-1) var(--motion-ease),
    transform var(--motion-duration-1) var(--motion-ease);
}

/* Buttons — pressed (canonical, token-based) */
.ecc-btn[aria-pressed="true"] {
  outline: none; /* avoid default rectangular outline */
  background: var(--ascend-control-bg-active, #eef2f7);
  color: var(--md-sys-color-primary);
  border-color: var(--ascend-control-border, rgba(15, 23, 42, 0.10));
  /* thin, token-based ring so it matches Ascend focus visuals */
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Optional: keyboard-only ring, consistent with your body.kbd focus policy */
body.kbd .ecc-btn[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--focus-ring-color);
}

/* Remove any inherited text underline on the label */
.ecc-btn,
.ecc-btn:focus,
.ecc-btn:hover {
  text-decoration: none;
}

.ecc-btn:hover, .ecc-btn:focus-visible { background: var(--ascend-control-bg-hover, #f8fafc); outline: none; }
.ecc-btn:hover { transform: translateY(-1px); }

/* Mobile tweaks */
@media (max-width: 640px) {
  .step-card[data-step="mechanicals"]:not(.is-open) .step-header { padding-bottom: 1rem; }
}

/* Make header wraps true edge-to-edge slabs (Design/Mechanicals/Finish) */
.step-header-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;

  /* slab geometry */
  width: 100%;
  margin: 0;

  /* ✅ canonical horizontal inset for ALL headers */
  padding-inline: 1.25rem;
}

/* ✅ Caption must match the same inset, always */
.step-card[data-step="caption"] .step-header-wrap{
  padding-inline: 1.25rem;
}

/* Keep the existing mechanials selector for specificity parity */
.step-card[data-step="mechanicals"] .step-header-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Let the title take the left, pill pushes to the right */
.step-card[data-step="mechanicals"] .step-header-wrap [data-step-toggle] {
  flex: 1 1 auto;
  padding-right: 0; /* overrides earlier padding-right safely */
}

/* Place the pill inline at the right (no absolute positioning) */
.step-card[data-step="mechanicals"] .step-header-wrap #eccPill.ecc-pill {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--density-gap);
  margin-left: auto;
  padding-right: 0; /* ✅ header-wrap owns the inset */
}

/* Remove underline and focus outline in all states */
.ecc-btn:hover,
.ecc-btn:focus,
.ecc-btn:active {
  text-decoration: none !important;
  outline: none;
}

/* Design (open): unified stripe, full-bleed to card edge */
.step-card[data-step="design"].is-open .step-header-wrap{
  background: var(--step-header-open-bg);
  border-bottom: 0 !important;
  position: relative;

  /* harden full-bleed geometry */
  margin: 0;
  width: 100%;

  /* ✅ match closed indentation */
  padding-inline: 1.25rem;
}

/* Caption has NO .step-header-wrap — tint the button itself when open */
.step-card[data-step="caption"].is-open > .step-header{
  background: var(--step-header-open-bg) !important;
  border-bottom: var(--featured-stroke-width) solid var(--featured-stroke-color);
  backdrop-filter: saturate(1.1) blur(6px);
  min-height: 3.4rem;
  border-radius: var(--phone-radius) var(--phone-radius) 0 0;
  padding-inline: 1.25rem;
}

/* Design uses the wrap slab, not the button */
.step-card[data-step="design"].is-open .step-header{ background: transparent !important; border-bottom: 0 !important; }
.step-card[data-step="design"].is-open .step-header-wrap::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ui-stroke); pointer-events:none;
}
.step-card[data-step="design"] #fontPill{ display:flex !important; }

/* Pills: hide when their flipper is not active */
.step-card[data-step="design"]:not(.is-open) #fontPill,
.step-card[data-step="mechanicals"]:not(.is-open) #eccPill{
  visibility: hidden;
  pointer-events: none;
}

.step-card[data-step="design"].is-open #fontPill,
.step-card[data-step="mechanicals"].is-open #eccPill{
  visibility: visible;
  pointer-events: auto;
}

.step-card[data-step="design"] .step-header-wrap #fontPill.ecc-pill{
  align-items:center;
  flex-wrap:nowrap;
  gap:var(--density-gap);
  margin-left:auto;
}

/* Font pill alignment */
.step-card[data-step="design"] .step-header-wrap{
  display:flex;                    /* mirror Mechanicals */
  align-items:center;              /* vertical centering */
  gap:.5rem;
}

/* Let the title take the left; pill pushes right (mirrors [data-step-toggle] rule) */
.step-card[data-step="design"] .step-header-wrap [data-step-toggle]{
  flex:1 1 auto;
  padding-right:0;
}

/* =========================
   4. CONTROLS (inputs/selects/Menu)
========================= */

/* =========================
   CODEDESK HEADER BAR (Ascend styling)
========================= */

/* Header bar: dark surface, light text */
.header-bar {
  background: #0d1224 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f7fafc;
}

/* CODEDESK header mark: light text on dark header */
.header-bar .codedesk-mark,
.header-bar .codedesk-mark a {
  color: #f7fafc !important;
  text-decoration: none;
}
.header-bar .codedesk-mark a:hover { text-decoration: underline; }

/* Types dropdown: Ascend control on dark header */
.header-bar select#qrType {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f7fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  height: auto;
  padding: 8px 32px 8px 12px;
  font: 600 0.84rem/1.2 var(--font-family, system-ui);
  box-shadow: none;
  cursor: pointer;

  /* Custom chevron (light) */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 8px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.header-bar select#qrType:hover {
  /* background-COLOR — see the note on .topctl:hover. The shorthand here beat
     the base rule's !important background-image and erased the chevron. */
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25);
}

.header-bar select#qrType:focus {
  outline: none;
  border-color: #4fd1c5;
  box-shadow: 0 0 0 2px rgba(79, 209, 197, 0.35);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="color"],
select{
  background: var(--ui-surface-variant);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-md);
  height: var(--density-control-h);
  box-shadow: 0 0 0 1px var(--ui-stroke) inset;  /* thin baseline */
  transition:
    box-shadow var(--motion-duration-1) var(--motion-ease),
    border-color var(--motion-duration-1) var(--motion-ease),
    color var(--motion-duration-1) var(--motion-ease),
    background-color var(--motion-duration-1) var(--motion-ease);
}

input:hover,
textarea:hover,
select:hover{
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--hover-glow-blur) var(--hover-glow-color);
}


/* Muted/disabled helper */
.field-muted,
.field-muted *{
  opacity:.55;
  pointer-events:none;
}

/* Finish mode must keep the export sparkle clickable */
#stepper.finish-active #exportBtn{
  pointer-events:auto !important;
  opacity: 1 !important;

  /* Match header pills (icon-only circle) */
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--ascend-control-bg, #ffffff);
  border: 1px solid var(--ascend-control-border, rgba(148, 163, 184, 0.85));
  color: var(--ascend-app-text-main, #020617);
  font: 600 0.85rem/1 var(--font-family, system-ui);
}

/* === TOP BAR — text styling (only) =================================== */
/* Restore heavier label for the pills and keep baselines consistent */
#qrType{
  font: 600 var(--typo-input-size)/1 var(--font-family);
  letter-spacing: .01em;
  color: var(--md-sys-color-on-surface);
}

/* === TOP BAR — pill layout =========================================== */
#qrType{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  line-height: 1;             /* prevent extra vertical space from fonts */
  padding-inline: 1rem;       /* horizontal padding stays constant */
}

/* Safari/WebKit quirk: ensure the selected option uses the same weight */
#qrType option { font-weight: 600; }

/* Unified top-bar controls (selects + Menu) */
.control,
#appMenuBtn,
#qrType,
select.rounded-md,
.topctl{
  background: var(--ui-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-md);
  /* BASELINE: thin inset stroke only */
  box-shadow: 0 0 0 1px var(--ui-stroke) inset;
  height: var(--density-control-h);
  transition:
    box-shadow var(--motion-duration-1) var(--motion-ease),
    border-color var(--motion-duration-1) var(--motion-ease);
}

#fontPill select {
  display: inline-flex;
  align-items: center;          /* vertical centering */
  justify-content: center;      /* horizontal centering */
  text-align: center;
  line-height: 1;               /* eliminate font baseline drift */
  height: var(--density-control-h);
  padding-inline: 1rem;
}

/* Make top-bar controls feel like .ecc-btn on hover/focus/active */
/* ⚠ background-COLOR, never the `background` shorthand. These controls paint a
   chevron with background-image, and the shorthand resets every background
   longhand it does not mention — including background-repeat, which returns to
   `repeat`. #qrType then had its image re-supplied by a more specific rule
   (body.codedesk-embed-mode) while repeat, size and position stayed reset, so
   hovering tiled three chevrons across the control at their intrinsic size.
   Unframed the same reset simply erased the chevron on hover. */
.topctl:hover,
#qrType:hover,
#appMenuBtn:hover,
.topctl:focus-visible,
#qrType:focus-visible,
#appMenuBtn:focus-visible{
  background-color: var(--ascend-control-hover-wash, rgba(255,255,255,.08));
  transform: translateY(-1px);
  outline: none;
}

/* Active/click state parity with your focus ring tokens */
.topctl:active,
#qrType:active,
#appMenuBtn:active{
  transform: translateY(0);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  border-color: var(--md-sys-color-primary);
}

/* Emoji picker buttons */
#emojiGrid button{
  background: var(--ui-surface);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-sm);
  box-shadow: 0 0 0 1px var(--ui-stroke) inset;

  /* emoji = square glyph buttons, not form controls */
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
}

#emojiGrid button:hover{
  box-shadow: 0 0 0 1px var(--ui-stroke-hover) inset;
}

/* HOVER: keep thin inset + add faint outer glow */
.control:hover,
#appMenuBtn:hover,
select.rounded-md:hover,
.topctl:hover{
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--hover-glow-blur) var(--hover-glow-color);
}

/* Hide all focus by default (mouse/touch or scripted focus) */
:focus { outline: none; }

/* Show the ring only when the user is tabbing (keyboard) */
body.kbd .control:focus-visible,
body.kbd #appMenuBtn:focus-visible,
body.kbd select.rounded-md:focus-visible,
body.kbd .topctl:focus-visible,
body.kbd button[data-emoji-target]:focus-visible,
body.kbd input:focus-visible,
body.kbd textarea:focus-visible,
body.kbd select:focus-visible{
  outline: none;
  border-color: var(--ui-stroke-hover);
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--focus-glow-blur) var(--focus-ring-color);
}

/* Remove native arrow so our chevron matches */
select.rounded-md,
select.topctl{
  -webkit-appearance:none;
  appearance:none;
  padding-right:2rem;
}
button.topctl{ padding-right:2rem; }

/* Optional: ensure consistent min-width so short labels (like “M”) don’t look cramped */
#ecc{ min-width: 3.25rem; justify-content:center; }

/* Chevron for top controls */
.topctl--chev{ position: relative; }

.topctl--chev::after{
  content:"";
  pointer-events:none;
  position:absolute;
  right:.6rem;
  top:50%;
  width:.75rem;
  height:.75rem;
  transform:translateY(-50%);
  opacity:.85;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  background-image: var(--chev-icon);
}

/* Emoji picker trigger = match other controls */
button[data-emoji-target]{
  /* visuals */
  background: var(--ui-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-md);
    box-shadow: 0 0 0 1px var(--ui-stroke) inset;

  /* sizing / type */
  height: var(--density-control-h);
  padding: 0 .875rem;
  line-height: 1;
  font-size: .875rem;
  font-weight: 600;

  /* behavior */
  cursor: pointer;
  transition:
    box-shadow var(--motion-duration-1) var(--motion-ease),
    border-color var(--motion-duration-1) var(--motion-ease);
}

button[data-emoji-target]:hover{
  box-shadow: 0 0 0 1px var(--ui-stroke-hover) inset, var(--elevation-2);
}

#emojiGrid button:focus{
  outline: none;
  border-color: var(--ui-stroke-hover);
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--focus-glow-blur) var(--focus-ring-color);
}

/* If it was getting a white default button style anywhere, neutralize it */
button[data-emoji-target]::-moz-focus-inner{ border: 0; }

/* DISPLAY: section headers (Caption / Design / Mechanicals / Finish) */
.step-header{
  font-family: var(--font-family);
  font-size: var(--typo-display-size, 1rem);
  font-weight: var(--typo-display-weight, 700);
  letter-spacing: var(--typo-display-track, .01em);
  color: var(--md-sys-color-on-surface);

  /* horizontal padding lives on .step-header-wrap */
  padding: 0;

  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;

  width: 100%;
  display: flex;
  align-items: center;
  min-height: 3.4rem; /* matches your updated value */
}

.step-card[data-step="caption"] [data-step-panel]{
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* ✅ Caption step does NOT use .step-header-wrap in the HTML.
   So: treat the .step-header itself as the header slab. */

/* Caption — parity with other steps (stowed stroke + open header slab) */
.step-card[data-step="caption"]{
  /* dedicated closed-stroke token (never “disappears”) */
  --stepper-stroke-closed: var(--md-sys-color-outline, rgba(15, 23, 42, 0.22));

  border: 1px solid var(--stepper-stroke-closed);
  border-radius: var(--phone-radius);
  background: var(--ui-surface);
  overflow: hidden;

  /* reinforce the edge even when the border blends into the page */
  box-shadow: 0 0 0 1px var(--stepper-stroke-closed) inset;
}

/* Closed: subtle tint + crisp edge */
#stepper > .step-card[data-step="caption"]:not(.is-open) .step-header{
  background: color-mix(in oklab, var(--ui-surface) 92%, var(--step-color-primary) 8%);
  border-bottom: 1px solid var(--stepper-stroke-closed);
  box-shadow:
    0 0 0 1px var(--stepper-stroke-closed) inset,
    0 1px 0 rgba(0,0,0,.06);
}

/* Caption header padding (since there is no .step-header-wrap) */
.step-card[data-step="caption"] .step-header{
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* CLOSED: the header IS the pill — keep full rounding */
#stepper > .step-card[data-step="caption"]:not(.is-open) > .step-header{
  border-radius: var(--phone-radius) !important;
}

/* OPEN: header becomes the slab — round only the top corners */
#stepper > .step-card[data-step="caption"].is-open > .step-header{
  border-radius: var(--phone-radius) var(--phone-radius) 0 0 !important;
}

/* Open: header slab styling (applied to .step-header directly) */
#stepper .step-card[data-step="caption"].is-open .step-header{
  background: var(--step-header-open-bg);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 0 !important; /* we paint the rule via ::after for parity */
  min-height: 3.4rem;
  border-radius: var(--phone-radius) var(--phone-radius) 0 0;
  position: relative;
}

/* Open: single thin rule at bottom of header slab */
#stepper .step-card[data-step="caption"].is-open .step-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: var(--ui-stroke);
  pointer-events:none;
}

/* Open: tuck the panel under the header rule (no step) */
#stepper .step-card[data-step="caption"].is-open [data-step-panel]{
  margin-top: -1px;
  background: var(--ui-surface-variant);
}

.step-header .title{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  display: block;
  padding: 0; /* ✅ padding now lives on .step-header so Caption matches */
}

/* LABELS: field labels like “Module Fill”, “Background” */
label,
.field-label{
  font-family: var(--font-family);
  font-size: var(--typo-label-size);
  font-weight: var(--typo-label-weight);
  letter-spacing: var(--typo-label-track);
  color: var(--typo-label-color);
}

/* INPUT TEXT: value text inside inputs/selects/buttons */
input, textarea, select,
.control, .topctl, button[data-emoji-target]{
  font-family: var(--font-family);
  font-size: var(--typo-input-size);
  font-weight: var(--typo-input-weight);
}

/* PLACEHOLDERS: “dummy” text in fields */
input::placeholder,
textarea::placeholder{
  color: var(--typo-ph-color);
  font-weight: var(--typo-ph-weight);
  opacity: var(--typo-ph-opacity);
}

/* Utility: “temp” or dummy inline text outside inputs */
.text-temp {
  color: var(--typo-ph-color);
  font-weight: var(--typo-ph-weight);
  opacity: var(--typo-ph-opacity);
  font-style: italic;
}

/* default: no transitions before JS marks ready */
:not(.ui-ready) #stepper .step-header,
:not(.ui-ready) #stepper > .step-card{
  transition: none !important;
  box-shadow: none !important;
}

/* Design & Mechanicals: scroll inside a viewport-based cap that clears the footer */
.step-card[data-step="design"].is-open [data-step-panel],
.step-card[data-step="mechanicals"].is-open [data-step-panel]{
  overflow: auto;
  max-height: calc(
    100dvh
    - var(--header-h,56px)   /* top controls if present */
    - 24px                   /* card margins/breathing */
  );
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-stroke-hover) transparent;
}

/* Mechanicals: no internal scroller; let #stepper scroll instead */
.step-card[data-step="mechanicals"].is-open [data-step-panel]{
  overflow: visible !important;
  max-height: none !important;
  overscroll-behavior: auto;       /* release containment */
  scrollbar-gutter: auto;
  scrollbar-width: none;           /* hide any vestigial bar in Firefox */
}
.step-card[data-step="mechanicals"].is-open [data-step-panel]::-webkit-scrollbar { display: none; }

/* Base pill styles (authoritative) */
.step-card[data-step="mechanicals"] .step-header-wrap #eccPill.ecc-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--density-gap);
  margin-left: auto;
}

/* Stowed vs open: never remove from layout (prevents “gone” states) */
.step-card[data-step="mechanicals"]:not(.is-open) #eccPill{
  visibility: hidden;                   /* keeps header geometry stable */
  pointer-events: none;
}

.step-card[data-step="mechanicals"].is-open #eccPill{
  visibility: visible;
  pointer-events: auto;
}

/* Kill any competing header paint so the wrap shows through */
.step-card[data-step="mechanicals"].is-open .step-header {
  background: transparent !important;  /* beats #stepper>div.is-open .step-header */
  border-bottom: 0;
}

#emojiSearch { display: none !important; }

/* There should be no "Details" step in CodeDesk */
.step-card[data-step="details"]{
  display: none !important;
}

/* =========================
   5. PREVIEW LAYOUT
========================= */

/* -----------------------------------------------------------------------
   QR PREVIEW CARD — single geometry; stroke (OFF) vs gradient fill (ON)
   ----------------------------------------------------------------------- */
#qrPreview{
  position: relative;
  border-radius: var(--phone-radius);
  overflow: clip;                      /* clip to the rounded card */
  background: transparent !important;  /* no card fill here */
  border: 0 !important; 
  box-shadow: none !important; 
  isolation: isolate;                  /* local stacking; ::before stays behind */
}

/* One pseudo-element draws BOTH modes so size/shape never drift */
#qrPreview::before{
  content:"";
  position:absolute;
  z-index: 0;
  inset:0;                  /* exact same box in both modes */
  border-radius:inherit;
  pointer-events:none;
}

/* Background ON = gradient fill (set via --bg-fill) */
#qrPreview.card--fill::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: var(--bg-paint, #fff);   /* solid or gradient from JS */
  opacity: var(--bg-alpha, 1);         /* 🔑 hook your slider sets */
  box-shadow:none;
  pointer-events:none;
  z-index:0;                           /* behind QR + caption */
}

/* Background OFF = empty bright turquoise stroke */
#qrPreview.card--stroke::before{
  inset:0;
  border-radius:inherit;
  background: transparent;
  opacity: 1; /* ensure stroke stays visible even if card--fill leaves --bg-alpha at 0 */
  box-shadow:none;
  border: var(--stage-frame-w, 3px) solid var(--stage-frame, #1ff0ff);
}

/* Portrait stage wrapper (outer container) */
.preview-stage{
  position: relative;
  background: transparent !important;
  width: clamp(250px, 26vw, 330px);
  aspect-ratio: .63 / 1;   /* wallet portrait */
  margin-inline: auto;
  border-radius: var(--phone-radius);
  display: grid;
  align-items: start;
  justify-items: center;
  overflow: visible;
  padding: 0;
}

/* Square state when there is no caption */
.preview-stage.preview--square{
  width: clamp(250px, 26vw, 330px);
  aspect-ratio: 1 / 1;        /* true square shell */
  align-items: start;          /* top-anchor like wallet mode */
}

/* QR background paint layer (real element for better browser support) */
#qrBgPaint{
  position: absolute;
  inset: 0;
  z-index: 0;                         /* behind the QR mount */
  border-radius: inherit;
  pointer-events: none;
  background: #ffffff;                /* default white, JS will update */
}

/* QR mount = container for the SVG */
#qrMount{
  position: relative;
  z-index: 1;                         /* above the background paint layer */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit;
  overflow: clip;
  background: transparent !important; /* never add a host fill */
}

/* Circular color tiles: add a visible ring around the CIRCLE (not the cell) */
input[type="color"].color-dot{
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ascend-app-text-main) 18%, transparent);
}

input[type="color"].color-dot::-webkit-color-swatch-wrapper{
  padding: 0;
  border-radius: 9999px;
}
input[type="color"].color-dot::-webkit-color-swatch{
  border: 0;
  border-radius: 9999px;
}
input[type="color"].color-dot::-moz-color-swatch{
  border: 0;
  border-radius: 9999px;
}

#qrMount > svg{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important; /* no bg rects from generators */
}

  .preview-stage,
  #qrPreview,
  #prevSubtype,
  #nextSubtype { z-index: 1; }

  /* Let the stepper slide under the preview */
  #stepper {
    position: relative;
    z-index: 1;                       /* below the raised preview section */
  }

/* Finish: header-only row; let it flow like others */
.step-card[data-step="finish"]{
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  backdrop-filter: none !important;
  border-top: 1px solid var(--ui-stroke);
}

/* Finish header row should look like the other header slabs */
.step-card[data-step="finish"] .step-header-wrap{
  background: color-mix(in oklab, var(--ui-surface) 92%, var(--step-color-primary) 8%);
  border-bottom: 1px solid var(--stepper-stroke-closed);
  box-shadow:
    0 0 0 1px var(--stepper-stroke-closed) inset,
    0 1px 0 rgba(0,0,0,.06);
}

/* When finish card is "open" (if JS ever adds .is-open), use the open slab */
.step-card[data-step="finish"].is-open .step-header-wrap{
  background: var(--step-header-open-bg);
}

/* …but keep the on-phone UI (arrows) interactive */
.preview-stage .nav-arrow {
  pointer-events: auto;
  z-index: 50;            /* ↑ ensure above sticky + stepper */
  position: absolute;
}

/* Make the WHOLE sticky preview block "glass" on mobile/stacked */
@media (max-width: 1279px){
  /* Make only the phone preview "glass" on mobile; never mute the stepper controls */
  .preview-stage,
  .preview-stage > .absolute,
  #qrPreview,
  #qrMount,
  #qrMount > svg { pointer-events: none !important; }

  /* …but keep the L/R arrows on the phone clickable */
  .preview-stage .nav-arrow {
    pointer-events: auto !important;
  }
}

/* =========================
   6. ARROWS
========================= */
.nav-arrow{
  background: var(--ui-surface);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-full);
  box-shadow: 0 0 0 1px var(--ui-stroke) inset; /* thin baseline */
}
.nav-arrow:hover{
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--hover-glow-blur) var(--hover-glow-color);
}
.nav-arrow:focus{
  outline: none;
  border-color: var(--ui-stroke-hover);
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--focus-glow-blur) var(--focus-ring-color);
}

/* Triangle glyphs */
#prevSubtype::after,
#nextSubtype::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}
#prevSubtype::after{
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid var(--md-sys-color-on-surface);
}
#nextSubtype::after{
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--md-sys-color-on-surface);
}  

/* Put each arrow just outside the card edges */
#prevSubtype{
  top:50%;
  left: calc(-2 * var(--edge-gutter));        /* or: calc(-1 * var(--edge-gutter)) */
  right: auto;
  transform: translateY(-50%);
  z-index: 20;
}
#nextSubtype{
  top:50%;
  right: calc(-2 * var(--edge-gutter));       /* or: calc(-1 * var(--edge-gutter)) */
  left:  auto;
  transform: translateY(-50%);
  z-index: 20;
}

/* High-contrast toggle (add .hc on <html>) */

html.hc, :root.hc{
  --md-sys-color-on-surface: #fff;
  --md-sys-color-outline: rgba(255,255,255,.65);
  --md-sys-color-outline-variant: rgba(255,255,255,.9);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :root{ --motion-scale: .01; }
}

/* Optional hover/focus feedback (subtle glow) */
input[type="color"]:hover{
  filter: drop-shadow(0 0 4px var(--ui-stroke-hover));
}
input[type="color"]:focus{
  outline: none;
  filter: drop-shadow(0 0 6px var(--focus-ring-color));
}

/* Group color pickers + hex fields neatly */
.color-field {
  display: flex;
  align-items: center;
  gap: var(--density-gap);
}

/* Make hex field visually tied to its picker */
.color-field input[type="text"] {
  flex: 1;
  text-align: center;
  font-family: monospace;
  font-size: .875rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  background: var(--ui-surface-variant);
  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-md);
  height: var(--density-control-h);
  box-shadow: 0 0 0 1px var(--ui-stroke) inset;
  transition:
    box-shadow var(--motion-duration-1) var(--motion-ease),
    border-color var(--motion-duration-1) var(--motion-ease);
}

.color-field input[type="text"]:hover {
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--hover-glow-blur) var(--hover-glow-color);
}

.color-field input[type="text"]:focus {
  outline: none;
  border-color: var(--ui-stroke-hover);
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--focus-glow-blur) var(--focus-ring-color);
}

/* Color chip: fixed, perfect circle — never stretch */
input[type="color"]{
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;       /* prevent flex/grid shrinking */
  min-height: 1.75rem;
  aspect-ratio: 1 / 1;      /* stay square even if a parent tries to stretch */
  flex: 0 0 1.75rem;        /* don’t grow or shrink */
  align-self: center;       /* keeps it centered in tall rows */
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  box-sizing: content-box;
}

/* Make the actual swatch inherit shape and remove its inner border */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50% }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50% }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 50% }

/* ---- Color rows: keep chip circular and let the hex input take the width ---- */

/* Generic label rows: title + control */
label.text-sm.block{
  display: grid;
  grid-template-columns: auto 1fr;   /* title, then a flexible control */
  align-items: center;
  gap: .75rem;
}

/* Rows that include a color swatch: title · swatch · hex */
.step-card[data-step="design"] label:has(input[type="color"]),
.step-card[data-step="mechanicals"] label:has(input[type="color"]){
  grid-template-columns: auto auto 1fr; /* title, chip, hex input */
}

/* Make the hex field actually flex and not collapse */
.step-card[data-step="design"] label:has(input[type="color"]) input[type="text"],
.step-card[data-step="mechanicals"] label:has(input[type="color"]) input[type="text"]{
  width: 100%;
  min-width: 16ch;     /* keep it readable on tight layouts */
}

/* Optional: keep the chip from crowding the field */
.step-card[data-step="design"] label:has(input[type="color"]) input[type="color"],
.step-card[data-step="mechanicals"] label:has(input[type="color"]) input[type="color"]{
  margin-inline-start: .25rem;
}

/* === Modal & legacy dropdown overrides (safe, CSS-only) ================== */

/* 2) Bulletproof centering of the dialog card (ignores any old absolute rules) */
#appModal > div,
#emojiModal > div {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* === Modal overlays (final, consolidated) =============================== */

/* Hide any legacy dropdown if it still exists */
#appMenu { display: none !important; }

/* Prevent locked state when hidden */
#appModal.hidden,
#emojiModal.hidden {
  display: none !important;
}

/* Neutralize legacy popover positioning inside overlays */
#appModal [role="menu"],
#emojiModal [role="menu"] {
  position: static !important;
}

/* Backdrop polish + allow dismissal clicks */
.modal-bg {
  /* ✅ light modal backdrop (no dark theme vibes) */
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(var(--ascend-modal-blur, 3px));
  pointer-events: auto;
}

/* ✅ force emoji dialog to light, even if any dark classes exist */
#emojiModal > div{
  background: #fff !important;
  color: #0b0b0b !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
}

/* ✅ make the emoji picker a real, full-width grid */
#emojiGrid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)) !important;
  gap: .5rem !important;
  width: 100% !important;
}

/* When hidden, backdrop ignores all input */
#appModal.hidden .modal-bg,
#emojiModal.hidden .modal-bg {
  pointer-events: none;
}

/* === QR Types: show the custom chevron === */
#qrType {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 2rem;                       /* room for chevron */
  background-image: var(--chev-icon);        /* your SVG variable */
  background-repeat: no-repeat;
  background-position: right .65rem center;  /* nudge as before */
  background-size: .75rem .75rem;
}

/* Types Hover for Pills (shared) */
#qrType:hover {
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--hover-glow-blur) var(--hover-glow-color);
}

/* === Hamburger: no chevron; keep icon centered ======================== */
#appMenuBtn::after { content: none !important; }
#appMenuBtn {
  padding-inline: 1rem;               /* same side padding as QR Types */
}


/* =========================
  MOBILE OVERRIDES
========================= */

/* --- Single-column / stacked behavior (< 1280px) -------------------- */
@media (max-width: 1279px) {
  /* Only the *first* stage-stick (the preview section) is sticky */
  main > section.stage-stick:first-of-type {
    position: sticky;
    top: calc(var(--header-h, 56px) + 8px);
    z-index: 30;
  }

  /* Let the stepper flow normally (no fixed footer) */
  #stepper{
  position: static;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 96px; /* keep a little breathing room */
  margin-bottom: 16px;
}

  /* No fixed footer spacing needed */
  main{
    padding-bottom: 0;
  }
  
  /* Ensure the stepper is not sticky in stacked mode */
  #stepper.stage-stick {
    position: static;
    top: auto;
  }
}

  /* Park the stepper up under the phone */
@media (max-width: 1279px){
  :root{
  /* how far the stepper is allowed to slide under the phone */
  --preview-overlap: clamp(180px, 52vh, 320px);
  --preview-gap: 12px;
  --park-nudge: 16px;
}

  #stepper{
    margin-top: calc(var(--preview-overlap) * -1);
    padding-top: calc(var(--preview-overlap) + var(--preview-gap));
    scroll-padding-top: calc(var(--header-h, 56px) + var(--park-offset, 180px));
    scroll-behavior: smooth;
  }

   #stepper .step-header{
    scroll-margin-top: calc(var(--header-h, 56px) + var(--park-offset, 180px));
  }
}

 /* Desktop align fix */
@media (min-width: 1280px){
  .stage-stick { position: static; top: auto; }

  /* Standard scroll: #stepper does not own scrolling on desktop. */
  #stepper{
    height: auto;
    overflow: visible;
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 1279px){
  html { scroll-padding-top: calc(var(--header-h,56px) + var(--park-offset,180px)); }
}

 /* === Emoji modal: always on top, full-viewport ======================= */
 #emojiModal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;           /* win against any local stacking ctx */
    display: grid;                 /* center its panel if you have one */
    place-items: center;
}
#emojiModal.hidden { display: none; }

/* While the emoji modal is open, make everything under the phone ignore taps */
:root.emoji-open .preview-stage,
:root.emoji-open #qrPreview {
  pointer-events: none !important;
}
:root.emoji-open #emojiModal {
  pointer-events: auto !important; /* but keep the modal interactive */
}

/* Step parking: every step header parks under the phone cleanly */
.step-card .step-header {
  scroll-margin-top: calc(var(--header-h, 56px) + var(--park-offset, 180px));
}

/* Stack the "Show caption" toggle below the text field */
.step-card[data-step="caption"] .step-body {
  display: flex;
  flex-direction: column;   /* stack instead of row */
  align-items: flex-start;  /* left-align the checkbox label */
  gap: 0.5rem;              /* small vertical space */
}

/* --- Global Modal Priority Layer --- */
.modal-bg,
[id$="Modal"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important; /* ensure it's above all sticky and preview layers */
  pointer-events: auto !important;
}

/* ------------------------------------------------------------
   Background controls: branded link + clean color tiles + blue sliders
------------------------------------------------------------ */

/* No squares around circular color tiles (override any utility borders) */
input[type="color"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  border: none !important;
  border-radius: 9999px !important;
}
input[type="color"]::-webkit-color-swatch {
  border: none !important;
  border-radius: 9999px !important;
}

/* Ascend-blue sliders */
input[type="range"] {
  accent-color: var(--ascend-app-accent) !important;
}

/* Branded link button */
#bgLink {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 0.75rem;
  border: 1px solid var(--ascend-app-border);
  background: var(--ascend-app-surface);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);

  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
#bgLink:hover {
  background: color-mix(in oklab, var(--ascend-app-surface), var(--ascend-app-accent) 6%);
}
#bgLink:active {
  transform: translateY(1px);
}

/* CodeDesk — Mandatory filename capture (under preview) */
#codedeskFilenameSection{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 12px;
}

#codedeskFilenameSection > label{
  display: block;
  width: min(360px, calc(100% - 24px));
  margin: 0 auto;
}

/* Make the field read as a real, opaque input */
#codedeskFilename{
  appearance: none;
  width: 100%;
  height: var(--density-control-h);
  line-height: var(--density-control-h);
  padding: 0 12px;
  box-sizing: border-box;

  background: var(--md-sys-color-surface); /* more opaque than surface-variant */
  color: var(--md-sys-color-on-surface);

  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-md);

  box-shadow: 0 0 0 1px var(--ui-stroke) inset, var(--elevation-1);
}

#codedeskFilename::placeholder{
  opacity: .65;
}

#codedeskFilename:focus{
  outline: none;
  border-color: var(--ascend-app-accent, var(--ui-focus-ring));
  box-shadow:
    0 0 0 1px var(--ascend-app-accent, var(--ui-focus-ring)) inset,
    0 0 0 3px color-mix(in oklab, var(--ascend-app-accent, var(--ui-focus-ring)) 22%, transparent);
}

/* Emoji picker should own its layout */
#emojiModal emoji-picker{
  max-height: none !important;
  height: auto !important;
}

/* =========================================================
 * RESPONSIVE SCALING — Laptop & Small Screen Support
 * ======================================================= */

/* Base: Fluid typography */
html {
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
}

/* Large laptops (1366px and below) */
@media (max-width: 1366px) {
  :root {
    --density-scale: 0.95;
    --phone-radius: 18px;
  }

  #stepper {
    max-width: 640px;
  }

  .preview-stage {
    width: clamp(220px, 24vw, 300px);
  }
}

/* Medium laptops (1024px - 1279px) — fills the gap */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --density-scale: 0.9;
    --phone-radius: 16px;
    --header-h: 48px;
  }

  #stepper {
    max-width: 580px;
    gap: 0.5rem;
  }

  .preview-stage {
    width: clamp(200px, 22vw, 280px);
  }

  .step-header {
    min-height: 3rem;
    font-size: 0.9rem;
  }

  .step-card [data-step-panel] {
    padding: 0.6rem 1rem;
  }

  /* Smaller controls */
  .ecc-btn {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: 0.75rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  select {
    height: calc(var(--density-control-h) * 0.9);
    font-size: 0.85rem;
  }

  label, .field-label {
    font-size: 0.8rem;
  }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --density-scale: 0.85;
    --phone-radius: 14px;
    --header-h: 44px;
  }

  #stepper {
    max-width: 520px;
    padding-inline: 0.75rem;
  }

  .preview-stage {
    width: clamp(180px, 28vw, 240px);
  }

  .step-header {
    min-height: 2.8rem;
    font-size: 0.85rem;
  }

  .step-header-wrap {
    padding-inline: 1rem;
  }

  #codedeskFilenameSection > label {
    width: min(300px, calc(100% - 16px));
  }
}

/* Small screens / large phones (< 768px) */
@media (max-width: 767px) {
  :root {
    --density-scale: 0.8;
    --phone-radius: 12px;
    --edge-gutter: 12px;
  }

  #stepper {
    max-width: 100%;
    padding-inline: 0.5rem;
  }

  .preview-stage {
    width: clamp(160px, 50vw, 220px);
  }

  .step-card {
    border-radius: 12px;
  }

  .step-header {
    min-height: 2.6rem;
    font-size: 0.8rem;
  }

  .step-header-wrap {
    padding-inline: 0.75rem;
  }

  .step-card [data-step-panel] {
    padding: 0.5rem 0.75rem;
  }

  /* Smaller nav arrows */
  #prevSubtype, #nextSubtype {
    width: 28px;
    height: 28px;
  }

  #prevSubtype::after {
    border-right-width: 7px;
    border-top-width: 4px;
    border-bottom-width: 4px;
  }

  #nextSubtype::after {
    border-left-width: 7px;
    border-top-width: 4px;
    border-bottom-width: 4px;
  }

  /* Caption text scales */
  #captionEl {
    font-size: clamp(0.75rem, 2vw, 1.1rem);
  }

  #codedeskFilenameSection > label {
    width: calc(100% - 12px);
  }

  #codedeskFilename {
    font-size: 0.85rem;
  }
}

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure nothing breaks out of container */
#stepper, .step-card, [data-step-panel] {
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================
   MECHANICALS PANEL — DYNAMIC FORM FIELDS
   Styling for fields generated by qr_ui_toolkit.js
   (matches Ascend canonical form patterns)
========================= */

/* Container for the #detailsPanel form fields */
#detailsPanel {
  display: flex;
  flex-direction: column;
  gap: var(--density-gap, 0.75rem);
}

/* Form row: label + input stacked vertically */
.fldRow {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Field label: uppercase, muted, matches Ascend app forms */
.fldLbl {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ascend-app-label, #475569);
}

/* Field input: full-width with proper sizing */
.fldInp {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ui-stroke);
  background: var(--ui-surface-variant);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--ascend-control-radius, 10px);
  padding: 9px 10px;
  font: 500 0.86rem/1.25 var(--font-family, system-ui);
  box-shadow: 0 0 0 1px var(--ui-stroke) inset, 0 1px 0 rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  transition:
    box-shadow var(--motion-duration-1) var(--motion-ease),
    border-color var(--motion-duration-1) var(--motion-ease);
}

.fldInp:hover {
  box-shadow:
    0 0 0 1px var(--ui-stroke-hover) inset,
    0 0 var(--hover-glow-blur) var(--hover-glow-color);
}

.fldInp:focus {
  outline: none;
  border-color: var(--ascend-app-accent, var(--md-sys-color-primary));
  box-shadow:
    0 0 0 2px var(--ascend-app-accent-soft, rgba(79, 209, 197, 0.12)),
    0 1px 0 rgba(15, 23, 42, 0.04);
}

/* Select dropdown: add custom chevron */
select.fldInp {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(2, 6, 23, 0.65) 50%),
    linear-gradient(135deg, rgba(2, 6, 23, 0.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Textarea: taller with vertical resize */
textarea.fldInp {
  min-height: calc(var(--density-control-h, 2.25rem) * 1.5);
  line-height: 1.4;
  resize: vertical;
}

/* Checkbox row: inline layout */
.fldCheckRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Checkbox input */
.fldCheck {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--ascend-app-accent, var(--md-sys-color-primary));
  cursor: pointer;
}

/* Checkbox label text */
.fldCheckLabel {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

/* Empty state message */
.fldEmpty {
  font-size: 0.8rem;
  color: var(--md-sys-color-muted, #64748b);
  font-style: italic;
  padding: 0.5rem 0;
}

/* =====================================================================
   EMBED MODE — the document sizes to its content, not to the frame
   ---------------------------------------------------------------------
   Unframed, this app is a full-viewport application: html and body are
   height:100% and body scrolls. Framed, that makes self-sizing impossible —
   the document is DEFINED as the height of the iframe, so nothing inside it
   can report how tall the content actually is. documentElement.scrollHeight
   returns the viewport; body's border box returns the viewport; both are the
   frame we are already in.

   The visible result was a one-way ratchet and then, once embed-height.js
   started measuring the body instead, a slow crawl: the parent shrank the
   frame a little, body re-measured a little smaller, and the two converged
   two pixels at a time for about twenty seconds. Jacob reported both.

   So framed, the document sizes to its content and the PARENT does the
   scrolling. Only in embed mode: unframed behaviour is untouched, and the
   middle-click autoscroll the overflow rule exists for still works there.
   ===================================================================== */
html:has(body.codedesk-embed-mode),
body.codedesk-embed-mode {
  height: auto;
  min-height: 0;
  overflow-y: visible;
}

/* =====================================================================
   EMBED MODE — type selector relocated out of the header
   ---------------------------------------------------------------------
   #qrType carries an unscoped rule painting --chev-icon, a white SVG that
   reads correctly only on the dark header bar. Moved onto a white card it
   would be an invisible chevron sitting under the one .topctl--chev draws.
   Specificity has to beat the bare #qrType rule, hence the body prefix.
   ===================================================================== */
body.codedesk-embed-mode #qrType {
  /* --chev-icon is white: correct on the dark header bar, invisible on a card.
     Same path, light-card ink. It cannot use .topctl--chev like its neighbours
     because that draws with ::after, which a <select> does not render. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.17l3.71-2.94a.75.75 0 111.04 1.08l-4.23 3.35a.75.75 0 01-.96 0L5.21 8.31a.75.75 0 01.02-1.1z'/></svg>");
}

/* Hidden while Mechanicals is closed, exactly as #eccPill and Design's
   #fontPill are. A control sitting in a shut drawer's header reads as a
   stray button, which is what it looked like before this rule. */
.step-card[data-step="mechanicals"]:not(.is-open) #typePill {
  visibility: hidden;
  pointer-events: none;
}

.step-card[data-step="mechanicals"].is-open #typePill {
  visibility: visible;
  pointer-events: auto;
}

/* Caption is a <textarea>, so two rules make it diverge from the <input>
   beside it: textarea.fldInp forces min-height 1.5x the control height, and the
   legacy #campaign rule (written for the old Caption drawer) overrides padding,
   line-height and radius. Restate .fldInp's own values so the two fields match.
   #id .class outranks both #campaign and textarea.fldInp. */
/* =====================================================================
   EMBED MODE — what the frame does not show
   ---------------------------------------------------------------------
   Presentation belongs here rather than in JS setting .style.display,
   which is an inline style by another name and invisible to anyone
   reading the stylesheet.

   The header: a wordmark linking to ./index.html, which inside a frame
   reloads the embed and discards the visitor's work, plus a type select
   that JS relocates into the Code drawer.
   The filename prompt: names a working file that embed mode never writes.
   The Caption card: its headline is moved into the Code drawer; the card
   stays in the document so #captionBody still exists for render(), which
   reads val('captionBody').
   ===================================================================== */
body.codedesk-embed-mode header.header-bar,
body.codedesk-embed-mode #codedeskFilenameSection,
body.codedesk-embed-mode #stepper .step-card[data-step="caption"] {
  display: none;
}

/* =====================================================================
   Generated field rows — sizing fix
   ---------------------------------------------------------------------
   Two element-level rules force these inputs to
   calc(var(--density-control-h) * 0.9), about 28px. .fldInp then asks for
   9px padding top and bottom around a ~16px line: 34px of content in a
   28px box, so every generated field clipped the bottom of its own text.
   Element selectors lose to .fldRow > .fldInp, so the height goes back to
   auto with the old fixed height as a floor. The radius is restated
   because something later zeroes it, leaving these boxes square while
   every other control on the page is round.

   This is not embed-specific — it applies in normal use too, where the
   same fields clip identically.
   ===================================================================== */
.fldRow > .fldInp {
  height: auto;
  min-height: var(--density-control-h);
  border-radius: var(--ascend-control-radius, 10px);
}

/* The same fixed height squashes the hand-written controls in Design, which
   are not .fldInp: a select with py-2 padding and a ~20px line needs about
   36px and was given 28, so "Square" and "Shape" lost their descenders. The
   height becomes a floor rather than a ceiling. #stepper outranks the bare
   element selectors that set it. */
#stepper select,
#stepper input[type="text"],
#stepper input[type="url"],
#stepper input[type="email"],
#stepper input[type="number"],
#stepper input[type="search"],
#stepper input[type="password"] {
  height: auto;
  min-height: var(--density-control-h);
}

/* Caption is a <textarea>, and the legacy #campaign rule — written for the
   old Caption drawer — sets its own height, line-height and padding. Id
   beats class, so restate .fldInp's values here to match the field above. */
#embedCaptionGroup .fldInp {
  height: auto;
  min-height: var(--density-control-h);
  /* The same padding and font the input beside it resolves to, so the two
     boxes come out the same height rather than three pixels apart. */
  padding: 0.5rem 0.65rem;
  font: 500 0.86rem/1.25 var(--font-family, system-ui);
  border-radius: var(--ascend-control-radius, 10px);
  resize: none;
  overflow: hidden;
}

/* The Advanced disclosure holding the UTM parameters. Sits last in the panel,
   below the caption — it is the thing reached for least. No display on the
   summary: summary{display:flex} breaks <details> in Safari while looking
   correct in Chrome, so the marker is swapped rather than the box model. */
.embed-advanced {
  border-top: 1px solid color-mix(in oklab, var(--ui-stroke) 70%, transparent);
  padding-top: .85rem;
  margin-top: .25rem;
}

.embed-advanced > summary {
  position: relative;
  cursor: pointer;
  padding-left: 1.1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--md-sys-color-on-surface) 55%, transparent);
  user-select: none;
  list-style: none;
  transition: color var(--motion-duration-1, .15s) var(--motion-ease, ease);
}

/* Replace the default triangle with one that can be animated. */
.embed-advanced > summary::-webkit-details-marker { display: none; }

.embed-advanced > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform var(--motion-duration-1, .15s) var(--motion-ease, ease);
}

.embed-advanced[open] > summary::before {
  transform: translateY(-35%) rotate(45deg);
}

.embed-advanced > summary:hover {
  color: var(--md-sys-color-on-surface);
}

.embed-advanced[open] > summary {
  margin-bottom: .85rem;
}


/* =====================================================================
   Emoji modal — close button
   ---------------------------------------------------------------------
   Was a lowercase letter "x" in a rectangle, styled with Tailwind
   utilities including dark: variants. Those variants are keyed to
   prefers-color-scheme, while this app decides light/dark with a .dark
   class on <html> — so on a machine preferring dark the button painted
   itself neutral-700 inside a light modal. Same mismatch that made the
   emoji picker render dark.

   Styled from tokens instead, so it follows the app rather than the OS.
   Fallbacks on the two tokens the two apps do not share.
   ===================================================================== */
.emoji-close {
  margin-left: auto;               /* the search field beside it is hidden */
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--ui-stroke);
  border-radius: var(--shape-corner-full);
  background: var(--ui-surface);
  color: var(--md-sys-color-on-surface);
  font: 500 1.25rem/1 var(--font-family, system-ui, sans-serif);
  cursor: pointer;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .1s ease;
}

.emoji-close:hover {
  background: var(--ui-surface-variant);
  border-color: var(--ui-stroke-hover);
}

.emoji-close:active {
  transform: scale(0.94);
}

.emoji-close:focus-visible {
  outline: 2px solid var(--ascend-control-ring, rgba(129, 230, 217, 0.55));
  outline-offset: 2px;
}