/* =========================================
 * 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;
}

/* 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;
}