/* ============================================================
   title-admin-page-design-v1.4.13.css
   INBXIFY Title-Admin Page Design System
   Electric Blue primary · Gold accent · Cream surfaces

   v1.4.13 (T-A main tab strip fits without horizontal scroll,
            centered, icons hidden via CSS):
            Pairs with no JS change. Three concerns, one footprint
            (§ HORIZONTAL TAB MENU, lines ~1673–1759):

            1. Tab strip overflowed viewport. 10 tabs at
               padding 12px 24px 10px + font-size 14px ≈
               140–160px each ≈ 1500px total. Viewport
               ~1280–1400px. Result: horizontal scroll, left
               tabs clipped, centering broken.

               Fix: reduced tab padding 12px 24px 10px →
               8px 12px 6px on .pl-link-tabs.w-tab-link.
               Reduced label font 14px → 12px on .pl-label-sm.
               Removed flex-shrink: 0 from tab links. Each tab
               now ~80–100px, 10 tabs ≈ 900px, fits with margin.

            2. Tabs centered horizontally. The .w-tab-menu rule
               already had justify-content: center, but
               overflow-x: auto + flex-shrink: 0 prevented it
               from acting (content overflowed instead of
               centering). Removed overflow-x: auto,
               overflow-y: hidden, and -webkit-overflow-scrolling
               from .vertical-tabs.w-tab-menu / .w-tab-menu.
               justify-content: center now works naturally.

            3. Icons hidden. New rule hides any direct child of
               .pl-link-tabs.w-tab-link that is NOT .pl-label-sm
               (the label). This strips icon divs / img elements
               in the tab markup without needing to know the
               exact icon class. NOTE: if any tab has its icon
               as an emoji prefix INSIDE the .pl-label-sm text
               (e.g. "📋 Publication Planner" as a single
               string), that prefix must be removed in Webflow
               Designer — CSS cannot strip text content.

            Footprint: §HORIZONTAL TAB MENU only. No other
            rules modified. Scrollbar-hiding rule for
            .w-tab-menu::-webkit-scrollbar left in place
            (harmless — there is no scrollbar to hide now).

   v1.4.12 (S13 Step 3 polish — Converter thumbnail aspect-ratio):
           Pairs with ta-converter-v1.0.1.js. Single concern:
           Converter preview thumbnail rendering distorted
           (squished horizontally on portrait images, vertically
           on extreme landscapes).

           Root cause: .cm-conv-thumb declared `max-width: 200px;
           max-height: 200px;` but did not declare `width: auto;
           height: auto; object-fit: contain;`. Inside the
           .cm-conv-preview flexbox, some Webflow base styles
           plus flex-item interaction were forcing the <img>
           into the box without preserving its native aspect
           ratio.

           Fix in v1.4.12: explicit `width: auto; height: auto;`
           lets the browser compute the unspecified dimension
           to preserve native aspect ratio. `object-fit: contain;`
           is a backstop ensuring aspect ratio holds even if
           any upstream rule tries to set width/height to 100%.

           Also bumped max-width/max-height 200px → 280px
           (Q-S/Q-T lock) for a more useful preview. Square box
           keeps it shape-agnostic — landscapes and portraits
           letterbox cleanly inside the same container.

           Footprint: §13 .cm-conv-thumb only. No other rules
           modified. .cm-conv-info min-width unchanged at 200px
           (info column doesn't need to scale with the larger
           thumbnail).

   v1.4.11 (S13 Step 2 polish #2 — Transcriber-in-Studio width):
           Pairs with ta-page-body-v1.2.21.js. Single concern:
           Transcriber rendering at narrow width when mounted
           inside Studio Tab 4.

           Root cause: §2 (base/reset) and §22 (TRANSCRIBER
           OVERRIDES) scoped their rules to
           `#screenshot-transcriber-mount` — the legacy UP shell
           mount only. After the v1.2.18 dual-mount migration,
           the Transcriber renders into Studio's
           `#std-transcriber-mount` instead, where these rules
           don't match. Result: Transcriber inherited its
           default narrower widths and rendered at ~60% of the
           panel width with empty left margin.

           Fix in v1.4.11: extend both §2 and §22 to include
           `#std-transcriber-mount` alongside the legacy mount.
           Every chrome-override and box-sizing rule now applies
           to the Studio-hosted mount too. Identical visual
           treatment in both locations during parallel run;
           after S15 UP decommission, only the Studio rules
           are load-bearing (legacy selector left in place
           harmlessly).

           Footprint: §2 selector list + §22 selector list.
           No other rules modified.

   v1.4.10 (S13 Step 2 — Transcriber TD-165 layout cleanup):
           Pairs with ta-page-body-v1.2.18.js. Two changes:

           1. NEW §30b — issues banner (.sct-issues / .sct-issues-hdr
              / .sct-issues-list) + .sct-sub-bar polish. Banner
              renders ABOVE the .sct-sub-bar when sctValidate()
              finds unmet requirements. Cream fill, gold left-border,
              bulleted list. Hidden when the form is valid (the
              disabled→enabled Save Draft button colour is sufficient
              signal). Sub-bar gets explicit alignment + gap rules
              so nothing mashes regardless of inline content.
              "Ready to save" affordance freed from Save Draft —
              the inline #sct-ready-msg is now blank in v1.2.18,
              and issues no longer mash inline next to the button.

           2. §30 polish — minimal stacked-div spacing pass
              (Q-K option a). .sct-frow bottom-margin loosened
              (10px → 16px), .sct-divider margin loosened (14px →
              20px). No structural rewrite. .sct-writers-grid
              untouched.

           Footprint: §30 polish + new §30b. No other rules
           modified.

   v1.4.9 (S13 Step 1 follow-up — Q-G):
           Studio tab strip rebuilt for ix-btn--tab variant
           (added in ix-buttons-v1.0.2.css). Changes:
             - .std-subtabs strip wrapper now provides the
               bottom rail (1px border-bottom). Pills had no
               rail; tabs sit on one. Gap 8px → 0 (tabs use
               their own internal margin-right).
             - .std-subtab-icon and .std-subtab-count rules
               removed. Tab emits dropped icons + counts in
               v1.2.10 of ta-studio (text-only labels per
               Q-G design). Removing dead selectors keeps
               file lean.
             - .std-panel display rules unchanged.
           Footprint: §31 only. No other rules modified.

   v1.4.8 (S13 / TD-166 — Studio tab strip rebuild):
           .std-subtab class definition removed. Studio tab
           buttons rendered as `ix-btn ix-btn--pill` from
           ix-buttons-v1.0.1.css. v1.4.9 supersedes this with
           --tab variant; pill rules stay in ix-buttons module
           for unmigrated surfaces.

   v1.4.7: TD-160 close — orphan .ix-btn-* + dead
           .sct-toolbar / .sct-rte rules stripped after
           Wave 3 ship. (Live shipped baseline before S13.)

   v1.4.6: PubPlan issue header tile redesign.
           Was electric-blue gradient + white text + cream
           date at 60% opacity. The cream-on-blue date was
           designed to read against the blue background, but
           in production the tile was rendering without the
           blue background (root cause TBD — possibly Webflow
           chrome override or specificity conflict), leaving
           cream-on-white text invisible.
           v1.4.6 redesigns the tile from the ground up:
             - Background: cream (--ix-cream) instead of blue
               gradient. Reads as a card, not a header block.
             - Border: 1.5px solid gold for clear tile
               boundary (per Jeff's "more obvious border"
               requirement).
             - Issue ID (.pp-issue-name): explicit teal text.
             - Date (.pp-issue-date): teal at 65% opacity
               instead of cream at 60%.
             - "open →" link: gold (unchanged) but bumped to
               weight 600 for stronger visual presence.
             - Hover: border switches gold → blue with subtle
               blue glow.
           Footprint: §28 only. No other rules modified.

   v1.4.5: Save-bar error state visual treatment. Pairs with
           ta-studio-v1.1.5.js, which applies .has-error on
           the .asm-save-bar when a save fails (e.g. Webflow
           validation 500). The class was being toggled but
           had no styling — the error text appeared on a
           normal-looking bar. Now mirrors the established
           pattern (.has-changes = gold, .just-saved = green,
           .saving = dim) with .has-error = red: red top
           border accent + subtle red gradient fill + bold
           red info text. Consistent visual language across
           all save-bar states.

   v1.4.4: Studio toast notification. Paired with ta-studio-
           v1.1.4.js, which now shows a floating "✓ Body saved
           to Webflow" pill in the bottom-right corner when a
           body save via Scenario G Route 3 completes. Rendered
           into <body> (not Studio's mount) so it survives DOM
           replacement. Slides up + fades in, auto-removes after
           ~2.2s. Uses Studio's electric-blue accent.

   v1.4.3: Studio editing hides publisher header. When
           ta-studio-v1.1.3.js has an article open in the
           Assembler, it adds `studio-editing` to <body>. This
           rule hides .publisher-wrapper while that class is
           present, giving the edit form the full page height
           without competing with the sticky publisher banner.
           The class comes off automatically on save-auto-close,
           cancel, back, reset-close, or tab switch. One rule
           appended to §32 ASSEMBLER footprint.

   v1.4.2: Post-smoke-test cleanup. Removed the 75 lines of
           custom .std-hdr* rules that v1.4.1 added. TA Studio's
           header now inherits from the shared .ix-hdr classes
           at §3 (same as Uploads Processor, Client Manager,
           and every other tab). No rule changes outside §31
           + §32 + §33 footprint.

   v1.4.1: TA STUDIO — Phase 2 Session 1 (EDITABLE ASSEMBLER).
           Studio header row now uses the SHARED .ix-hdr classes
           from §3 (not a custom block), so TA Studio's header
           matches Uploads Processor and every other tab.
           Extends §32 ASSEMBLER with edit-mode ruleset:
             - .asm-input / .asm-textarea / .asm-select
             - .asm-sc.dirty  (gold border + glow)
             - .asm-sc.has-value  (distinctive border for any
               select/field that has a selection, per product
               UX rule)
             - .asm-sc-counter  (char counter, .over = red)
             - .asm-save-bar   (sticky save surface with
               Cancel link, Reset, Save buttons)
             - .asm-switch-row (editable switch with checkbox)
             - .asm-sc-group + .asm-sc-row (grouped inline
               fields for Writers + CTA)
             - .asm-inline-ff + .asm-inline-label
               (two-per-row compact inline inputs)
             - .asm-sc-readonly (opacity-reduced for read-only
               sections like Identifiers)
           No changes outside §31 + §32 footprint.

   v1.4.0: STUDIO TAB — Phase 1.
           Added §31 STUDIO SHELL (sub-tab navigation,
           placeholder panels for Input and Components).
           Added §32 ASSEMBLER (Phase 1 read-only).
             - Asset type toggle (Articles | Ads | Events | RE)
             - Asset picker with filters (name, customer,
               product library, MNLS) and sort
             - Metadata strip
             - Three-column horizontal working area
             - Component tile display (read-only)
           Phase 1 = read-only; Phase 2 will add editing, save,
           dirty-state, and unified Scenario F routing.

   v1.3.9: SCREENSHOT TRANSCRIBER RESTORED.
           Added full §30 SCREENSHOT TRANSCRIBER ruleset
           that was missing since an earlier CSS extraction.

   v1.3.0: HORIZONTAL TABS — Mockup C architecture — Complete token rewrite.
           Electric blue (#5b7fff) replaces teal as the
           primary UI color for headers, active states,
           selection, focus rings, badges, and buttons.
           Teal demoted to supporting role (PubPlan section
           colors, subtle text). Gold remains the "changed/
           pending" signal on form fields.
           Added §28 PubPlan Overview classes.
           Added §29 Webflow chrome overrides (sidebar,
           banner, nav) for full-page styling.
   Universal CSS for all T-A page tabs.

   ARCHITECTURE:
   This file replaces ta-page-head-v1.4.css AND all inline
   <style> blocks previously embedded in tab JS files.
   Loaded once in Webflow T-A page <head>.

   All tab JS files (uploads-processor, content-library,
   client-manager, pubplan-overview, etc.) reference these
   classes instead of injecting their own CSS.

   PREFIX: ix-  (short for INBXIFY)
   Legacy .cm- classes aliased below for backward compat
   until all JS files are migrated.

   FONTS: DM Sans (body), DM Mono (labels/meta), Fraunces (display)
   Load in <head>:
   https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&display=swap
   ============================================================ */


/* ─────────────────────────────────────────────
   §1  DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
  /* ── PRIMARY: Electric Blue ── */
  --ix-blue:          #5b7fff;
  --ix-blue-deep:     #4060dd;
  --ix-blue-light:    #8ba3ff;
  --ix-blue-ghost:    rgba(91,127,255,0.06);
  --ix-blue-glow:     rgba(91,127,255,0.12);
  --ix-blue-shadow:   rgba(91,127,255,0.20);

  /* ── ACCENT: Gold ── */
  --ix-gold:          #C4A35A;
  --ix-gold-bright:   #dbb868;
  --ix-gold-warm:     #e8c172;
  --ix-gold-glow:     rgba(196,163,90,0.12);
  --ix-gold-shadow:   rgba(196,163,90,0.20);

  /* ── SUPPORTING: Teal (demoted — PubPlan sections, subtle text) ── */
  --ix-teal:          #1A3A3A;
  --ix-teal-soft:     #2d5a5a;
  --ix-teal-ghost:    rgba(26,58,58,0.06);

  /* ── Surfaces ── */
  --ix-cream:         #FAF9F5;
  --ix-cream-warm:    #f5f0e4;
  --ix-cream-deep:    #ebe5d4;
  --ix-white:         #ffffff;
  --ix-surface:       #fdfcf9;

  /* ── Borders ── */
  --ix-border:        #e4e0d4;
  --ix-border-soft:   #eee9dc;
  --ix-border-input:  #ddd9c8;

  /* ── Text ── */
  --ix-text-dark:     #1e2a3a;
  --ix-text-mid:      #5a6478;
  --ix-text-light:    #8a8e9a;
  --ix-text-tiny:     #a8abb4;

  /* ── Semantic ── */
  --ix-danger:        #c0392b;
  --ix-ok:            #27ae60;
  --ix-warn:          #e8a030;

  /* ── Changed/pending state (gold border) ── */
  --ix-changed-border: var(--ix-gold);
  --ix-changed-shadow: rgba(196,163,90,0.20);

  /* ── Radii ── */
  --ix-radius:        12px;
  --ix-radius-sm:     8px;
  --ix-radius-pill:   20px;
  --ix-radius-sharp:  4px;

  /* ── Shadows ── */
  --ix-shadow-sm:     0 1px 4px rgba(91,127,255,0.05);
  --ix-shadow-md:     0 4px 24px rgba(91,127,255,0.06);
  --ix-shadow-lg:     0 8px 40px rgba(91,127,255,0.08);
  --ix-shadow-gold:   0 0 0 3px var(--ix-gold-shadow);
  --ix-shadow-blue:   0 0 0 3px var(--ix-blue-shadow);

  /* ── Z-layers ── */
  --ix-z-dropdown:    5000;
  --ix-z-modal:       10000;
  --ix-z-lightbox:    10001;

  /* ── Fonts ── */
  --ix-font-body:     'DM Sans', system-ui, sans-serif;
  --ix-font-mono:     'DM Mono', monospace;
  --ix-font-display:  'Fraunces', serif;

  /* ── Transitions ── */
  --ix-ease:          0.2s ease;
}


/* ─────────────────────────────────────────────
   §2  BASE / RESET (scoped to T-A mount roots)
   ───────────────────────────────────────────── */
.ix-root,
#content-manager-mount,
#content-library-mount,
#client-manager-mount,
#pubplan-overview-mount,
#screenshot-transcriber-mount,
#std-transcriber-mount,
#studio-mount {
  font-family: var(--ix-font-body);
  color: var(--ix-text-dark);
  line-height: 1.5;
}
.ix-root *, .ix-root *::before, .ix-root *::after { box-sizing: border-box; }
#screenshot-transcriber-mount *,
#screenshot-transcriber-mount *::before,
#screenshot-transcriber-mount *::after { box-sizing: border-box; }
#std-transcriber-mount *,
#std-transcriber-mount *::before,
#std-transcriber-mount *::after { box-sizing: border-box; }
#studio-mount *,
#studio-mount *::before,
#studio-mount *::after { box-sizing: border-box; }


/* ─────────────────────────────────────────────
   §3  TAB HEADER (.ix-hdr)
   Shared by every tab — icon + title + badge
   ───────────────────────────────────────────── */
.ix-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--ix-border-soft);
  margin-bottom: 14px;
}
.ix-hdr-left {
  display: flex; align-items: center; gap: 12px;
}
.ix-hdr-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, var(--ix-blue), var(--ix-blue-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--ix-gold); font-size: 15px;
  box-shadow: 0 2px 8px var(--ix-blue-shadow);
}
.ix-hdr h3,
.ix-hdr-title {
  font-family: var(--ix-font-display);
  font-size: 18px; font-weight: 600;
  color: var(--ix-text-dark); margin: 0; line-height: 1.15;
}
.ix-hdr-sub {
  font-family: var(--ix-font-mono);
  font-size: 9px; color: var(--ix-text-light);
  letter-spacing: .06em; text-transform: uppercase; margin-top: 1px;
}
.ix-badge {
  font-family: var(--ix-font-mono); font-size: 9px;
  padding: 4px 10px; border-radius: var(--ix-radius-pill);
  background: var(--ix-blue); color: var(--ix-white);
  letter-spacing: .06em;
}


/* ─────────────────────────────────────────────
   §4  CHANNEL TABS (.ix-channels)
   Top-level horizontal tabs within a tab pane
   (e.g. Google Drive | Email | Transcriber)
   ───────────────────────────────────────────── */
.ix-channels {
  display: flex; gap: 0; border-bottom: 1px solid var(--ix-border-soft);
  align-items: flex-end; margin-bottom: 0;
}
.ix-channel {
  font-family: var(--ix-font-body); font-size: 13px; font-weight: 600;
  padding: 12px 20px 10px; border: none; background: transparent;
  color: var(--ix-text-light); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: all var(--ix-ease);
}
.ix-channel:hover { color: var(--ix-text-dark); }
.ix-channel.active {
  color: var(--ix-blue); border-bottom-color: var(--ix-blue);
  background: var(--ix-white);
  border-radius: var(--ix-radius-sm) var(--ix-radius-sm) 0 0;
}
.ix-channel-spacer { flex: 1; }


/* ─────────────────────────────────────────────
   §5  SUB-TABS / PILLS (.ix-tabs / .ix-tab)
   Status filter pills inside a channel
   ───────────────────────────────────────────── */
.ix-tabs {
  display: flex; gap: 6px; margin-top: 12px; margin-bottom: 14px;
  align-items: center; flex-wrap: wrap;
}
.ix-tab {
  font-family: var(--ix-font-mono); font-size: 10px;
  letter-spacing: .04em; padding: 6px 16px;
  border-radius: var(--ix-radius-pill);
  border: 1.5px solid var(--ix-border);
  background: var(--ix-cream); color: var(--ix-text-mid);
  cursor: pointer; transition: all var(--ix-ease);
  display: flex; align-items: center; gap: 5px;
}
.ix-tab:hover { border-color: var(--ix-blue); color: var(--ix-blue); background: var(--ix-white); }
.ix-tab.active {
  background: var(--ix-blue); color: var(--ix-white);
  border-color: var(--ix-blue);
  box-shadow: 0 2px 8px var(--ix-blue-shadow);
}
.ix-tab-count { font-size: 9px; opacity: 0.6; }
.ix-tab.active .ix-tab-count { opacity: 0.8; }
.ix-tab-spacer { flex: 1; }


/* ─────────────────────────────────────────────
   §6  MONITOR STRIP (.ix-monitor)
   Folder count cards across the top
   ───────────────────────────────────────────── */
.ix-monitor-strip {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.ix-monitor-card {
  flex: 1; padding: 10px 14px;
  background: var(--ix-cream); border-radius: var(--ix-radius-sm);
  border: 1px solid var(--ix-border-soft);
  display: flex; align-items: center; gap: 8px;
}
.ix-monitor-icon { font-size: 18px; }
.ix-monitor-label {
  font-family: var(--ix-font-mono); font-size: 9px;
  color: var(--ix-text-light); text-transform: uppercase;
  letter-spacing: .06em;
}
.ix-monitor-val {
  font-family: var(--ix-font-display);
  font-size: 18px; font-weight: 700; color: var(--ix-blue);
}
.ix-monitor-val.warn { color: var(--ix-warn); }
.ix-monitor-val.alert { color: var(--ix-danger); font-weight: 700; }

/* Inline monitor (compact, sits in tab row) */
.ix-monitor-inline {
  font-family: var(--ix-font-mono); font-size: 9px;
  color: var(--ix-text-light);
  display: flex; align-items: center; gap: 3px; margin-right: 10px;
}
.ix-monitor-count { font-weight: 600; color: var(--ix-text-mid); }
.ix-monitor-count.warn { color: var(--ix-warn); }
.ix-monitor-count.alert { color: var(--ix-danger); font-weight: 700; }


/* ─────────────────────────────────────────────
   §7  REFRESH BUTTON (.ix-refresh)
   ───────────────────────────────────────────── */
.ix-refresh {
  font-family: var(--ix-font-mono); font-size: 9px;
  padding: 4px 12px; border-radius: var(--ix-radius-pill);
  border: 1.5px solid var(--ix-border); background: var(--ix-white);
  color: var(--ix-text-light); cursor: pointer;
  transition: all var(--ix-ease); align-self: center;
}
.ix-refresh:hover { border-color: var(--ix-blue); color: var(--ix-blue); }


/* ─────────────────────────────────────────────
   §8  SELECTION BAR (.ix-sel-bar)
   Appears when files/items are selected
   ───────────────────────────────────────────── */
.ix-sel-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--ix-blue), var(--ix-blue-deep));
  color: var(--ix-cream); border-radius: var(--ix-radius);
  margin-bottom: 14px;
  box-shadow: 0 4px 20px var(--ix-blue-shadow);
}
.ix-sel-count { font-family: var(--ix-font-mono); font-size: 12px; font-weight: 600; }
.ix-sel-spacer { flex: 1; }
.ix-sel-bar button {
  font-family: var(--ix-font-mono); font-size: 10px;
  padding: 6px 16px; border-radius: var(--ix-radius-pill);
  cursor: pointer; transition: all 0.15s;
}
.ix-desel {
  border: none; background: none; color: var(--ix-cream); opacity: 0.5;
  font-family: var(--ix-font-mono); font-size: 9px; cursor: pointer;
}
.ix-desel:hover { opacity: 1; }


/* ─────────────────────────────────────────────
   §9  ACTION BUTTONS
   ───────────────────────────────────────────── */
/* Primary gold CTA */
.ix-btn-primary {
  font-family: var(--ix-font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 22px; border-radius: var(--ix-radius-pill); border: none;
  background: linear-gradient(135deg, var(--ix-gold), var(--ix-gold-warm));
  color: var(--ix-text-dark); font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 12px var(--ix-gold-shadow);
  transition: all var(--ix-ease);
}
.ix-btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 20px var(--ix-gold-shadow); transform: translateY(-1px);
}
.ix-btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

/* Secondary (outline) */
.ix-btn-secondary {
  font-family: var(--ix-font-mono); font-size: 10px;
  letter-spacing: .04em; padding: 5px 16px;
  border-radius: var(--ix-radius-pill);
  border: 1.5px solid rgba(240,237,216,0.4);
  background: transparent; color: var(--ix-cream);
  cursor: pointer; transition: all 0.15s;
}
.ix-btn-secondary:hover { background: rgba(255,255,255,0.15); }

/* PDF action (gold tint) */
.ix-btn-pdf {
  font-family: var(--ix-font-mono); font-size: 10px;
  letter-spacing: .04em; padding: 5px 14px;
  border-radius: var(--ix-radius-pill);
  border: 1.5px solid rgba(240,237,216,0.4);
  background: transparent; color: var(--ix-cream);
  cursor: pointer; transition: all 0.15s;
}
.ix-btn-pdf:hover { background: rgba(255,255,255,0.15); }
.ix-btn-pdf.transcribe { background: rgba(196,163,90,0.3); border-color: var(--ix-gold); }
.ix-btn-pdf.transcribe:hover { background: rgba(196,163,90,0.5); }

/* Cancel / reset link */
.ix-cancel {
  font-family: var(--ix-font-mono); font-size: 10px;
  color: var(--ix-danger); cursor: pointer;
  background: none; border: none; text-decoration: underline;
  transition: opacity 0.15s; padding: 0;
}
.ix-cancel:hover { opacity: 0.6; }

/* Link button */
.ix-link-btn {
  font-family: var(--ix-font-mono); font-size: 10px;
  color: var(--ix-blue); background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.ix-link-btn:hover { opacity: 0.7; }


/* ─────────────────────────────────────────────
   §10  FILE LIST (.ix-flist / .ix-frow)
   Rows of files/items with checkbox, icon, meta
   ───────────────────────────────────────────── */
.ix-flist { display: flex; flex-direction: column; gap: 4px; }

.ix-frow {
  background: var(--ix-cream);
  border: 1.5px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sm);
  transition: all var(--ix-ease);
}
.ix-frow:hover { border-color: var(--ix-gold); box-shadow: 0 2px 8px var(--ix-gold-glow); }
.ix-frow.sel {
  border-color: var(--ix-gold);
  background: linear-gradient(135deg, #fdfcf8 0%, #faf6ec 100%);
  box-shadow: var(--ix-shadow-gold), 0 4px 16px var(--ix-gold-glow);
}
.ix-frow.assigned { opacity: 0.65; background: #f4fbf4; border-color: #d4eed4; }

.ix-frow-main {
  display: grid; grid-template-columns: 32px 32px 1fr auto;
  align-items: center; padding: 10px 14px; cursor: pointer;
}
.ix-frow-main.no-select { grid-template-columns: 32px 1fr auto; cursor: default; }

.ix-fcheck { width: 16px; height: 16px; accent-color: var(--ix-blue); cursor: pointer; }
.ix-ficon { font-size: 18px; text-align: center; }
.ix-finfo { min-width: 0; }
.ix-fname {
  font-size: 13px; font-weight: 600; color: var(--ix-text-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ix-fmeta {
  font-size: 9px; font-family: var(--ix-font-mono);
  color: var(--ix-text-tiny); display: flex; gap: 8px;
  margin-top: 2px; flex-wrap: wrap;
}
.ix-fright { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }


/* ─────────────────────────────────────────────
   §11  BADGES (.ix-badge-*)
   ───────────────────────────────────────────── */
.ix-fbadge {
  font-size: 8px; font-family: var(--ix-font-mono);
  padding: 3px 10px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.ix-fbadge.ready     { background: #e8f5e9; color: var(--ix-ok); }
.ix-fbadge.decision  { background: #f3e5f5; color: #8b2252; }
.ix-fbadge.assigned  { background: #e8f5e9; color: var(--ix-ok); }
.ix-fbadge.archived  { background: #f5f0e0; color: #8b7d3c; }
.ix-fbadge.hidden    { background: #f5f5f5; color: var(--ix-text-light); }
.ix-fbadge.draft     { background: var(--ix-cream); color: var(--ix-text-light); }
.ix-fbadge.pending   { background: #fff3e0; color: var(--ix-warn); }


/* ─────────────────────────────────────────────
   §12  MODAL / OVERLAY (.ix-overlay / .ix-modal)
   Shared modal shell — edit panels, assignment
   ───────────────────────────────────────────── */
.ix-overlay {
  position: fixed; inset: 0;
  background: rgba(26,58,58,0.7);
  z-index: var(--ix-z-modal);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.ix-modal {
  background: var(--ix-white);
  border-radius: var(--ix-radius);
  width: 100%; max-width: 760px;
  box-shadow: var(--ix-shadow-lg);
  overflow: hidden;
}
.ix-modal-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--ix-blue), var(--ix-gold), var(--ix-blue));
}
.ix-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--ix-border-soft);
}
.ix-modal-title {
  font-family: var(--ix-font-display);
  font-size: 17px; font-weight: 600; color: var(--ix-text-dark);
}
.ix-modal-sub {
  font-family: var(--ix-font-mono); font-size: 9px;
  color: var(--ix-text-light); text-transform: uppercase;
  letter-spacing: .04em; margin-top: 2px;
}
.ix-modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--ix-border);
  background: var(--ix-white); cursor: pointer;
  font-size: 14px; color: var(--ix-text-light);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
.ix-modal-close:hover { border-color: var(--ix-danger); color: var(--ix-danger); }
.ix-modal-files {
  padding: 10px 20px; background: var(--ix-cream);
  border-bottom: 1px solid var(--ix-border-soft);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ix-modal-file-chip {
  font-family: var(--ix-font-mono); font-size: 9px;
  padding: 3px 8px; background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius-sharp); color: var(--ix-text-mid);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ix-modal-body { padding: 20px; position: relative; }
.ix-modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--ix-border-soft);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ix-cream);
}


/* ─────────────────────────────────────────────
   §13  STEPS INDICATOR (.ix-steps)
   ───────────────────────────────────────────── */
.ix-steps { display: flex; gap: 4px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.ix-step {
  font-family: var(--ix-font-mono); font-size: 9px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 12px;
  background: var(--ix-cream); color: var(--ix-text-tiny);
  border: 1px solid var(--ix-border);
  transition: all var(--ix-ease);
}
.ix-step.active { background: var(--ix-blue); color: var(--ix-white); border-color: var(--ix-blue); }
.ix-step.done-s { background: #e8f5e9; color: var(--ix-ok); border-color: #d4eed4; }
.ix-step-arr { font-size: 9px; color: var(--ix-text-tiny); }


/* ─────────────────────────────────────────────
   §14  FORM FIELDS (.ix-fr / .ix-ff / .ix-fl)
   ───────────────────────────────────────────── */
.ix-fr { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ix-ff { flex: 1; min-width: 0; }
.ix-fl {
  display: block; font-size: 9px;
  font-family: var(--ix-font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ix-text-light); margin-bottom: 5px;
}
.ix-fl .req { color: var(--ix-danger); }

.ix-fsel, .ix-finp {
  width: 100%; font-family: var(--ix-font-body);
  font-size: 12px; color: var(--ix-text-dark);
  background: var(--ix-cream); border: 1.5px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sm); padding: 8px 12px;
  outline: none; transition: all var(--ix-ease);
}
.ix-fsel {
  appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238a8a7a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.ix-fsel:focus, .ix-finp:focus {
  border-color: var(--ix-blue);
  box-shadow: 0 0 0 3px var(--ix-teal-ghost);
}
/* CHANGED STATE — gold border signals pending edits at a glance */
.ix-fsel.changed, .ix-finp.changed {
  border-color: var(--ix-changed-border) !important;
  box-shadow: 0 0 0 3px var(--ix-changed-shadow) !important;
}

/* Checkbox label */
.ix-chk-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ix-font-mono); font-size: 10px;
  color: var(--ix-text-mid); cursor: pointer;
}
.ix-chk-label input { accent-color: var(--ix-blue); }


/* ─────────────────────────────────────────────
   §15  NESTED CREATE PANEL (.ix-nested)
   Dashed-border inline form for "+ New Customer"
   ───────────────────────────────────────────── */
.ix-nested {
  margin-top: 8px; padding: 12px 14px;
  background: var(--ix-surface); border: 1.5px dashed var(--ix-gold);
  border-radius: var(--ix-radius-sm);
}
.ix-nested-hdr {
  font-size: 11px; font-weight: 700; color: var(--ix-text-dark);
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.ix-nested-close {
  font-size: 10px; font-family: var(--ix-font-mono);
  color: var(--ix-danger); cursor: pointer; background: none; border: none;
}

/* New item form panel */
.ix-new-form {
  background: var(--ix-cream-warm); border: 1.5px solid var(--ix-border);
  border-radius: var(--ix-radius-sm); padding: 16px; margin-bottom: 12px;
}
.ix-new-form-title {
  font-size: 10px; font-family: var(--ix-font-mono);
  color: var(--ix-text-dark); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}


/* ─────────────────────────────────────────────
   §16  TAG / ELEMENT TYPE CHIPS (.ix-tag-*)
   Per-file element tagging in assignment panel
   ───────────────────────────────────────────── */
.ix-tag-list {
  margin-top: 16px; border-top: 1px dashed var(--ix-border);
  padding-top: 14px;
}
.ix-tag-label {
  font-size: 10px; font-family: var(--ix-font-mono);
  color: var(--ix-text-light); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 10px;
}
.ix-tag-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--ix-cream);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius-sm); margin-bottom: 4px;
}
.ix-tag-row.tagged { border-color: var(--ix-gold); background: #fdfcf8; }
.ix-tag-icon { font-size: 16px; flex-shrink: 0; }
.ix-tag-name {
  flex: 1; font-size: 11px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ix-echips { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.ix-echip {
  font-family: var(--ix-font-mono); font-size: 8px;
  letter-spacing: .04em; padding: 3px 10px;
  border-radius: 12px; border: 1px solid var(--ix-border);
  background: var(--ix-white); color: var(--ix-text-mid);
  cursor: pointer; transition: all 0.15s;
}
.ix-echip:hover { border-color: var(--ix-gold); }
.ix-echip.sel { background: var(--ix-blue); color: var(--ix-white); border-color: var(--ix-blue); }


/* ─────────────────────────────────────────────
   §17  NO-RESULTS / EMPTY / PLACEHOLDER
   ───────────────────────────────────────────── */
.ix-no-results {
  padding: 10px 12px; background: #fff8e1;
  border: 1px solid var(--ix-warn); border-radius: var(--ix-radius-sharp);
  font-size: 11px; color: var(--ix-warn);
  margin-top: 6px; display: flex; align-items: center; justify-content: space-between;
}
.ix-no-results button {
  font-family: var(--ix-font-mono); font-size: 10px;
  padding: 3px 10px; border-radius: var(--ix-radius-sharp);
  border: 1.5px solid var(--ix-blue); background: var(--ix-white);
  color: var(--ix-blue); cursor: pointer;
}

.ix-empty {
  text-align: center; padding: 48px 20px; color: var(--ix-text-light);
}
.ix-empty-icon { font-size: 32px; opacity: 0.3; margin-bottom: 10px; }
.ix-empty-title {
  font-size: 13px; font-weight: 600; color: var(--ix-text-mid); margin-bottom: 6px;
}
.ix-empty-text {
  font-size: 11px; font-family: var(--ix-font-mono);
  color: var(--ix-text-tiny); max-width: 400px; margin: 0 auto;
}

.ix-placeholder {
  text-align: center; padding: 60px 20px; color: var(--ix-text-light);
}
.ix-placeholder-icon { font-size: 36px; opacity: 0.3; margin-bottom: 12px; }
.ix-placeholder-title {
  font-family: var(--ix-font-display);
  font-size: 15px; font-weight: 600; color: var(--ix-text-mid); margin-bottom: 6px;
}
.ix-placeholder-text {
  font-size: 11px; font-family: var(--ix-font-mono);
  color: var(--ix-text-tiny); max-width: 400px; margin: 0 auto;
}


/* ─────────────────────────────────────────────
   §18  ERROR / LOADING STATES
   ───────────────────────────────────────────── */
.ix-error {
  padding: 10px 14px; background: #fde8e8;
  border: 1px solid var(--ix-danger); border-radius: var(--ix-radius-sm);
  font-size: 11px; font-family: var(--ix-font-mono); color: var(--ix-danger);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ix-error button {
  font-family: var(--ix-font-mono); font-size: 9px;
  padding: 3px 10px; border-radius: var(--ix-radius-sharp);
  border: 1.5px solid var(--ix-danger); background: var(--ix-white);
  color: var(--ix-danger); cursor: pointer;
}

.ix-loading { text-align: center; padding: 40px; color: var(--ix-text-light); font-family: var(--ix-font-mono); font-size: 10px; }
.ix-loading-spin { display: inline-block; font-size: 22px; animation: ix-spin 0.8s linear infinite; margin-bottom: 8px; }
@keyframes ix-spin { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────
   §19  BREADCRUMB (.ix-breadcrumb)
   ───────────────────────────────────────────── */
.ix-breadcrumb {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 0 10px; font-family: var(--ix-font-mono);
  font-size: 9px; color: var(--ix-text-tiny);
}
.ix-bc-icon { font-size: 11px; opacity: 0.5; }
.ix-bc-link {
  color: var(--ix-text-light); text-decoration: none;
  letter-spacing: .03em; transition: color 0.15s;
}
.ix-bc-link:hover { color: var(--ix-blue); text-decoration: underline; }
.ix-bc-arrow { font-size: 8px; opacity: 0.4; }
.ix-bc-filter { color: var(--ix-text-tiny); font-style: italic; letter-spacing: .02em; }


/* ─────────────────────────────────────────────
   §20  PREVIEW LIGHTBOX (.ix-preview-*)
   ───────────────────────────────────────────── */
.ix-preview-btn {
  font-size: 14px; background: none;
  border: 1px solid var(--ix-border); border-radius: var(--ix-radius-sharp);
  cursor: pointer; padding: 2px 6px; color: var(--ix-text-light);
  transition: all 0.15s; line-height: 1;
}
.ix-preview-btn:hover { border-color: var(--ix-blue); color: var(--ix-blue); background: var(--ix-cream); }

.ix-preview-overlay {
  position: fixed; inset: 0;
  background: rgba(26,58,58,0.8);
  z-index: var(--ix-z-lightbox);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.ix-preview-panel {
  background: var(--ix-white); border-radius: var(--ix-radius);
  width: 90vw; max-width: 900px; height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden;
}
.ix-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ix-border); flex-shrink: 0;
}
.ix-preview-title {
  font-family: var(--ix-font-mono); font-size: 11px;
  color: var(--ix-text-dark); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.ix-preview-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--ix-border); background: var(--ix-white);
  cursor: pointer; font-size: 14px; color: var(--ix-text-light);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.ix-preview-close:hover { border-color: var(--ix-danger); color: var(--ix-danger); }
.ix-preview-body { flex: 1; overflow: hidden; }
.ix-preview-iframe { width: 100%; height: 100%; border: none; }


/* ─────────────────────────────────────────────
   §21  CONVERTER PANEL (.ix-conv-*)
   ───────────────────────────────────────────── */
.ix-conv { padding: 16px 0; }
.ix-conv-title { font-family: var(--ix-font-display); font-size: 16px; font-weight: 600; color: var(--ix-text-dark); margin-bottom: 4px; }
.ix-conv-sub { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-text-light); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.ix-conv-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ix-conv-tool { padding: 12px 16px; background: var(--ix-white); border: 1.5px solid var(--ix-border); border-radius: var(--ix-radius-sm); cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 10px; min-width: 200px; }
.ix-conv-tool:hover { border-color: var(--ix-gold); }
.ix-conv-tool.active { border-color: var(--ix-blue); background: var(--ix-surface); box-shadow: 0 0 0 2px var(--ix-blue-ghost); }
.ix-conv-tool-icon { font-size: 20px; }
.ix-conv-tool-label { font-size: 12px; font-weight: 600; color: var(--ix-blue); }
.ix-conv-tool-desc { font-size: 9px; font-family: var(--ix-font-mono); color: var(--ix-text-light); }
.ix-conv-workspace { background: var(--ix-white); border: 1.5px solid var(--ix-border); border-radius: var(--ix-radius-sm); padding: 20px; min-height: 200px; }
.ix-conv-drop { width: 100%; min-height: 160px; border: 2px dashed var(--ix-border-input); border-radius: var(--ix-radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: border-color var(--ix-ease); background: var(--ix-cream); }
.ix-conv-drop:hover, .ix-conv-drop.drag-over { border-color: var(--ix-gold); background: var(--ix-surface); }
.ix-conv-drop-icon { font-size: 28px; opacity: 0.3; }
.ix-conv-drop-text { font-size: 12px; color: var(--ix-text-mid); }
.ix-conv-drop-hint { font-size: 9px; font-family: var(--ix-font-mono); color: var(--ix-text-tiny); }
.ix-conv-preview { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ix-conv-thumb { max-width: 200px; max-height: 200px; border-radius: var(--ix-radius-sm); border: 1px solid var(--ix-border); }
.ix-conv-info { flex: 1; min-width: 200px; }
.ix-conv-info-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--ix-border-soft); font-size: 11px; }
.ix-conv-info-label { font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-light); text-transform: uppercase; letter-spacing: .06em; }
.ix-conv-info-val { font-weight: 600; color: var(--ix-blue); }
.ix-conv-info-val.ok { color: var(--ix-ok); }
.ix-conv-info-val.bad { color: var(--ix-danger); }
.ix-conv-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.ix-conv-go { font-family: var(--ix-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 18px; border-radius: var(--ix-radius-pill); border: none; background: var(--ix-blue); color: var(--ix-white); cursor: pointer; transition: all 0.15s; }
.ix-conv-go:hover:not(:disabled) { background: var(--ix-blue-deep); }
.ix-conv-go:disabled { opacity: 0.35; cursor: not-allowed; }
.ix-conv-go.download { background: linear-gradient(135deg, var(--ix-gold), var(--ix-gold-warm)); color: var(--ix-text-dark); font-weight: 700; }
.ix-conv-go.download:hover { box-shadow: 0 4px 16px var(--ix-gold-shadow); }
.ix-conv-status { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-text-mid); }
.ix-conv-progress { width: 100%; height: 4px; background: var(--ix-border); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.ix-conv-progress-bar { height: 100%; background: linear-gradient(90deg, var(--ix-blue), var(--ix-gold)); border-radius: 2px; transition: width 0.3s; }
.ix-conv-result { margin-top: 14px; padding: 12px; background: #f4fbf4; border: 1px solid #d4eed4; border-radius: var(--ix-radius-sm); }
.ix-conv-result-title { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-ok); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }


/* ─────────────────────────────────────────────
   §22  TRANSCRIBER OVERRIDES
   SCT runs its own CSS; these override widths
   when mounted inside T-A tab pane
   v1.4.11 (S13 Step 2 polish #2): selectors extended
   to match both legacy #screenshot-transcriber-mount
   AND new Studio-hosted #std-transcriber-mount.
   ───────────────────────────────────────────── */
#screenshot-transcriber-mount .sct-hdr,
#std-transcriber-mount .sct-hdr { display: none; }
#screenshot-transcriber-mount .sct-root,
#std-transcriber-mount .sct-root { padding: 0; max-width: none; width: 100%; }
#screenshot-transcriber-mount .sct-card,
#std-transcriber-mount .sct-card { max-width: none; width: 100%; }
#screenshot-transcriber-mount .sct-steps,
#std-transcriber-mount .sct-steps { max-width: none; width: 100%; }
#screenshot-transcriber-mount .sct-paste-zone,
#std-transcriber-mount .sct-paste-zone { max-width: none; width: 100%; }
#screenshot-transcriber-mount .sct-tx-btn,
#std-transcriber-mount .sct-tx-btn { max-width: none; width: 100%; }
#screenshot-transcriber-mount .sct-results,
#std-transcriber-mount .sct-results { max-width: none; width: 100%; }

/* Transcriber notice banner */
.ix-transcribe-notice { padding: 12px 14px; background: var(--ix-surface); border: 1.5px solid var(--ix-gold); border-radius: var(--ix-radius-sm); margin-bottom: 12px; }
.ix-transcribe-notice-hdr { font-family: var(--ix-font-mono); font-size: 11px; font-weight: 600; color: var(--ix-text-dark); margin-bottom: 8px; }
.ix-transcribe-notice-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ix-transcribe-file { font-family: var(--ix-font-mono); font-size: 10px; padding: 3px 8px; background: var(--ix-white); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-sharp); color: var(--ix-text-mid); }
.ix-transcribe-notice-dismiss { font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-light); background: none; border: none; cursor: pointer; text-decoration: underline; }
.ix-transcribe-notice-dismiss:hover { color: var(--ix-blue); }


/* ─────────────────────────────────────────────
   §23  CHOICES.JS THEME (.ix-choices)
   ───────────────────────────────────────────── */
.ix-choices .choices__inner {
  font-family: var(--ix-font-body); font-size: 12px; color: var(--ix-text-dark);
  background: var(--ix-cream); border: 1.5px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sm); padding: 4px 8px; min-height: 36px;
}
.ix-choices .choices__inner .choices__item { font-size: 12px; }
.ix-choices.is-focused .choices__inner {
  border-color: var(--ix-blue); box-shadow: 0 0 0 3px var(--ix-blue-ghost);
}
.ix-choices .choices__list--dropdown {
  font-family: var(--ix-font-body); font-size: 12px;
  border: 1.5px solid var(--ix-border-input); border-radius: var(--ix-radius-sm);
  z-index: var(--ix-z-dropdown);
}
.ix-choices .choices__list--dropdown .choices__item { padding: 6px 10px; }
.ix-choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--ix-cream); color: var(--ix-text-dark);
}
.ix-choices .choices__input {
  font-family: var(--ix-font-body); font-size: 11px;
  color: var(--ix-text-dark); background: var(--ix-cream);
}
.ix-choices.has-selection .choices__inner {
  border-color: var(--ix-gold);
  box-shadow: 0 0 0 3px var(--ix-changed-shadow);
}
.ix-choices select.ix-fsel { display: none !important; }
.ix-choices { position: relative; }


/* ─────────────────────────────────────────────
   §24  FOOTER INFO BAR
   ───────────────────────────────────────────── */
.ix-sub-right { display: flex; align-items: center; gap: 12px; }
.ix-sub-info { font-size: 9px; font-family: var(--ix-font-mono); color: var(--ix-text-tiny); }
.ix-extras-toggle {
  font-family: var(--ix-font-mono); font-size: 10px;
  color: var(--ix-blue); background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 0;
}


/* ─────────────────────────────────────────────
   §25  RTE TOOLBAR + GENERATED H2 STATES
   (from ta-page-head-v1.1+)
   ───────────────────────────────────────────── */
.sct-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 5px 8px; background: var(--ix-cream-warm);
  border: 1.5px solid var(--ix-border-input); border-bottom: none;
  border-radius: var(--ix-radius-sm) var(--ix-radius-sm) 0 0;
}
.sct-tb-btn {
  font-family: var(--ix-font-mono); font-size: 10px; font-weight: 500;
  padding: 3px 8px; border-radius: var(--ix-radius-sharp);
  border: 1px solid transparent; background: transparent;
  color: var(--ix-text-mid); cursor: pointer; transition: all 0.12s;
  line-height: 1.4; white-space: nowrap;
}
.sct-tb-btn:hover { background: var(--ix-white); border-color: var(--ix-border-input); color: var(--ix-blue); }
.sct-tb-btn:active { background: var(--ix-cream-deep); }
.sct-tb-sep { width: 1px; height: 16px; background: var(--ix-border-input); margin: 0 2px; flex-shrink: 0; }
.sct-toolbar + .sct-rte { border-radius: 0 0 var(--ix-radius-sm) var(--ix-radius-sm); }
.sct-rte h2.sct-generated { color: var(--ix-danger) !important; }
.sct-rte h2.sct-transcribed { color: var(--ix-blue); }
.sct-char-counter.ok { color: var(--ix-ok); }
.sct-char-counter.under { color: var(--ix-warn); }
.sct-char-counter.warn { color: var(--ix-warn); }
.sct-char-counter.over { color: var(--ix-danger); }
.sct-hidden { display: none !important; }


/* ─────────────────────────────────────────────
   §26  LEGACY .cm- → .ix- ALIASES
   These ensure existing JS files that still use
   .cm- classes render correctly until migrated.
   Remove this section once all JS is on ix- prefix.
   ───────────────────────────────────────────── */
/* -- Header -- */
.cm-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; border-bottom: 1px solid var(--ix-border-soft); margin-bottom: 14px; }
.cm-hdr-left { display: flex; align-items: center; gap: 12px; }
.cm-hdr-icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, var(--ix-blue), var(--ix-blue-deep)); display: flex; align-items: center; justify-content: center; color: var(--ix-gold); font-size: 15px; box-shadow: 0 2px 8px var(--ix-blue-shadow); }
.cm-hdr h3 { font-family: var(--ix-font-display); font-size: 18px; font-weight: 600; color: var(--ix-text-dark); margin: 0; line-height: 1.15; }
.cm-hdr-sub { font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-light); letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
.cm-badge { font-family: var(--ix-font-mono); font-size: 9px; padding: 4px 10px; border-radius: var(--ix-radius-pill); background: var(--ix-blue); color: var(--ix-white); letter-spacing: .06em; }
/* -- Channels -- */
.cm-channels { display: flex; gap: 0; border-bottom: 1px solid var(--ix-border-soft); align-items: flex-end; margin-bottom: 0; }
.cm-channel { font-family: var(--ix-font-body); font-size: 13px; font-weight: 600; padding: 12px 20px 10px; border: none; background: transparent; color: var(--ix-text-light); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: all var(--ix-ease); }
.cm-channel:hover { color: var(--ix-text-dark); }
.cm-channel.active { color: var(--ix-blue); border-bottom-color: var(--ix-blue); background: var(--ix-white); border-radius: var(--ix-radius-sm) var(--ix-radius-sm) 0 0; }
/* -- Sub-tabs -- */
.cm-tabs { display: flex; gap: 6px; margin-top: 12px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.cm-tab { font-family: var(--ix-font-mono); font-size: 10px; letter-spacing: .04em; padding: 6px 16px; border-radius: var(--ix-radius-pill); border: 1.5px solid var(--ix-border); background: var(--ix-cream); color: var(--ix-text-mid); cursor: pointer; transition: all var(--ix-ease); display: flex; align-items: center; gap: 5px; }
.cm-tab:hover { border-color: var(--ix-blue); color: var(--ix-blue); background: var(--ix-white); }
.cm-tab.active { background: var(--ix-blue); color: var(--ix-white); border-color: var(--ix-blue); box-shadow: 0 2px 8px var(--ix-blue-shadow); }
.cm-tab .cm-tab-count { font-size: 9px; opacity: 0.6; }
.cm-tab.active .cm-tab-count { opacity: 0.8; }
.cm-tab-spacer { flex: 1; }
.cm-refresh { font-family: var(--ix-font-mono); font-size: 9px; padding: 4px 12px; border-radius: var(--ix-radius-pill); border: 1.5px solid var(--ix-border); background: var(--ix-white); color: var(--ix-text-light); cursor: pointer; transition: all var(--ix-ease); align-self: center; }
.cm-refresh:hover { border-color: var(--ix-blue); color: var(--ix-blue); }
/* -- Monitor -- */
.cm-monitor-inline { font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-light); display: flex; align-items: center; gap: 3px; margin-right: 10px; }
.cm-monitor-count { font-weight: 600; color: var(--ix-text-mid); }
.cm-monitor-count.warn { color: var(--ix-warn); }
.cm-monitor-count.alert { color: var(--ix-danger); font-weight: 700; }
/* -- Selection bar -- */
.cm-sel-bar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: linear-gradient(135deg, var(--ix-blue), var(--ix-blue-deep)); color: var(--ix-cream); border-radius: var(--ix-radius); margin-bottom: 14px; box-shadow: 0 4px 20px var(--ix-blue-shadow); font-size: 12px; }
.cm-sel-count { font-family: var(--ix-font-mono); font-size: 12px; font-weight: 600; }
.cm-sel-spacer { flex: 1; }
.cm-desel { font-family: var(--ix-font-mono); font-size: 9px; background: none; border: none; color: var(--ix-cream); cursor: pointer; opacity: 0.5; }
.cm-desel:hover { opacity: 1; }
.cm-assign-btn { font-family: var(--ix-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--ix-radius-pill); border: none; background: linear-gradient(135deg, var(--ix-gold), var(--ix-gold-warm)); color: var(--ix-text-dark); font-weight: 700; cursor: pointer; box-shadow: 0 2px 12px var(--ix-gold-shadow); transition: all 0.15s; }
.cm-assign-btn:hover { box-shadow: 0 4px 20px var(--ix-gold-shadow); }
.cm-archive-btn { font-family: var(--ix-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 16px; border-radius: var(--ix-radius-pill); border: 1.5px solid rgba(240,237,216,0.4); background: transparent; color: var(--ix-cream); cursor: pointer; transition: all 0.15s; }
.cm-archive-btn:hover { background: rgba(255,255,255,0.15); }
.cm-pdf-btn { font-family: var(--ix-font-mono); font-size: 10px; letter-spacing: .04em; padding: 5px 14px; border-radius: var(--ix-radius-pill); border: 1.5px solid rgba(240,237,216,0.4); background: transparent; color: var(--ix-cream); cursor: pointer; transition: all 0.15s; }
.cm-pdf-btn:hover { background: rgba(255,255,255,0.15); }
.cm-pdf-btn-transcribe { background: rgba(196,163,90,0.3); border-color: var(--ix-gold); }
.cm-pdf-btn-transcribe:hover { background: rgba(196,163,90,0.5); }
/* -- File rows -- */
.cm-flist { display: flex; flex-direction: column; gap: 4px; }
.cm-frow { background: var(--ix-cream); border: 1.5px solid var(--ix-border-soft); border-radius: var(--ix-radius-sm); transition: all var(--ix-ease); }
.cm-frow:hover { border-color: var(--ix-gold); box-shadow: 0 2px 8px var(--ix-gold-glow); }
.cm-frow.sel { border-color: var(--ix-gold); background: linear-gradient(135deg, #fdfcf8 0%, #faf6ec 100%); box-shadow: var(--ix-shadow-gold), 0 4px 16px var(--ix-gold-glow); }
.cm-frow.assigned { opacity: 0.65; background: #f4fbf4; border-color: #d4eed4; }
.cm-frow-main { display: grid; grid-template-columns: 32px 32px 1fr auto; align-items: center; padding: 10px 14px; cursor: pointer; }
.cm-frow-main.no-select { grid-template-columns: 32px 1fr auto; cursor: default; }
.cm-fcheck { width: 16px; height: 16px; accent-color: var(--ix-blue); cursor: pointer; }
.cm-ficon { font-size: 18px; text-align: center; }
.cm-finfo { min-width: 0; }
.cm-fname { font-size: 13px; font-weight: 600; color: var(--ix-text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-fmeta { font-size: 9px; font-family: var(--ix-font-mono); color: var(--ix-text-tiny); display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.cm-fright { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cm-fbadge { font-size: 8px; font-family: var(--ix-font-mono); padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: .06em; }
.cm-fbadge.ready { background: #e8f5e9; color: var(--ix-ok); }
.cm-fbadge.decision { background: #f3e5f5; color: #8b2252; }
.cm-fbadge.assigned { background: #e8f5e9; color: var(--ix-ok); }
.cm-fbadge.archived { background: #f5f0e0; color: #8b7d3c; }
.cm-fbadge.hidden { background: #f5f5f5; color: var(--ix-text-light); }
/* -- Empty / loading / error -- */
.cm-empty { text-align: center; padding: 48px; color: var(--ix-text-light); }
.cm-empty-icon { font-size: 32px; opacity: 0.3; margin-bottom: 10px; }
.cm-empty-text { font-size: 11px; font-family: var(--ix-font-mono); }
.cm-loading { text-align: center; padding: 40px; color: var(--ix-text-light); font-family: var(--ix-font-mono); font-size: 10px; }
.cm-loading-spin { display: inline-block; font-size: 22px; animation: ix-spin 0.8s linear infinite; margin-bottom: 8px; }
.cm-error { padding: 10px 14px; background: #fde8e8; border: 1px solid var(--ix-danger); border-radius: var(--ix-radius-sm); font-size: 11px; font-family: var(--ix-font-mono); color: var(--ix-danger); display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cm-error button { font-family: var(--ix-font-mono); font-size: 9px; padding: 3px 10px; border-radius: var(--ix-radius-sharp); border: 1.5px solid var(--ix-danger); background: var(--ix-white); color: var(--ix-danger); cursor: pointer; }
/* -- Placeholder -- */
.cm-placeholder { text-align: center; padding: 60px 20px; color: var(--ix-text-light); }
.cm-placeholder-icon { font-size: 36px; opacity: 0.3; margin-bottom: 12px; }
.cm-placeholder-title { font-family: var(--ix-font-display); font-size: 15px; font-weight: 600; color: var(--ix-text-mid); margin-bottom: 6px; }
.cm-placeholder-text { font-size: 11px; font-family: var(--ix-font-mono); color: var(--ix-text-tiny); max-width: 400px; margin: 0 auto; }
/* -- Breadcrumb -- */
.cm-breadcrumb { display: flex; align-items: center; gap: 5px; padding: 4px 0 10px; font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-tiny); }
.cm-bc-icon { font-size: 11px; opacity: 0.5; }
.cm-bc-link { color: var(--ix-text-light); text-decoration: none; letter-spacing: .03em; transition: color 0.15s; }
.cm-bc-link:hover { color: var(--ix-blue); text-decoration: underline; }
.cm-bc-arrow { font-size: 8px; opacity: 0.4; }
.cm-bc-filter { color: var(--ix-text-tiny); font-style: italic; letter-spacing: .02em; }
/* -- Preview -- */
.cm-preview-btn { font-size: 14px; background: none; border: 1px solid var(--ix-border); border-radius: var(--ix-radius-sharp); cursor: pointer; padding: 2px 6px; color: var(--ix-text-light); transition: all 0.15s; line-height: 1; }
.cm-preview-btn:hover { border-color: var(--ix-blue); color: var(--ix-blue); background: var(--ix-cream); }
.cm-preview-overlay { position: fixed; inset: 0; background: rgba(26,58,58,0.8); z-index: var(--ix-z-lightbox); display: flex; align-items: center; justify-content: center; padding: 30px; }
.cm-preview-panel { background: var(--ix-white); border-radius: var(--ix-radius); width: 90vw; max-width: 900px; height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; }
.cm-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ix-border); flex-shrink: 0; }
.cm-preview-title { font-family: var(--ix-font-mono); font-size: 11px; color: var(--ix-blue); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cm-preview-close { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ix-border); background: var(--ix-white); cursor: pointer; font-size: 14px; color: var(--ix-text-light); display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.cm-preview-close:hover { border-color: var(--ix-danger); color: var(--ix-danger); }
.cm-preview-body { flex: 1; overflow: hidden; }
.cm-preview-iframe { width: 100%; height: 100%; border: none; }
/* -- Modal -- */
.cm-overlay { position: fixed; inset: 0; background: rgba(26,58,58,0.7); z-index: var(--ix-z-modal); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.cm-modal { background: var(--ix-white); border-radius: var(--ix-radius); width: 100%; max-width: 760px; box-shadow: var(--ix-shadow-lg); overflow: hidden; }
.cm-modal-bar { height: 4px; background: linear-gradient(90deg, var(--ix-blue), var(--ix-gold), var(--ix-blue)); }
.cm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--ix-border-soft); }
.cm-modal-title { font-family: var(--ix-font-display); font-size: 17px; font-weight: 600; color: var(--ix-text-dark); }
.cm-modal-sub { font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-light); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.cm-modal-close { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ix-border); background: var(--ix-white); cursor: pointer; font-size: 14px; color: var(--ix-text-light); display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.cm-modal-close:hover { border-color: var(--ix-danger); color: var(--ix-danger); }
.cm-modal-files { padding: 10px 20px; background: var(--ix-cream); border-bottom: 1px solid var(--ix-border-soft); display: flex; flex-wrap: wrap; gap: 6px; }
.cm-modal-file-chip { font-family: var(--ix-font-mono); font-size: 9px; padding: 3px 8px; background: var(--ix-white); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-sharp); color: var(--ix-text-mid); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-modal-body { padding: 20px; position: relative; }
.cm-modal-footer { padding: 14px 20px; border-top: 1px solid var(--ix-border-soft); display: flex; align-items: center; justify-content: space-between; background: var(--ix-cream); }
/* -- Steps -- */
.cm-steps { display: flex; gap: 4px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.cm-step { font-family: var(--ix-font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 12px; background: var(--ix-cream); color: var(--ix-text-tiny); border: 1px solid var(--ix-border); transition: all var(--ix-ease); }
.cm-step.active { background: var(--ix-blue); color: var(--ix-white); border-color: var(--ix-blue); }
.cm-step.done-s { background: #e8f5e9; color: var(--ix-ok); border-color: #d4eed4; }
.cm-step-arr { font-size: 9px; color: var(--ix-text-tiny); }
/* -- Form fields -- */
.cm-fr { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cm-ff { flex: 1; min-width: 0; }
.cm-fl { display: block; font-size: 9px; font-family: var(--ix-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ix-text-light); margin-bottom: 5px; }
.cm-fl .req { color: var(--ix-danger); }
.cm-fsel, .cm-finp { width: 100%; font-family: var(--ix-font-body); font-size: 12px; color: var(--ix-text-dark); background: var(--ix-cream); border: 1.5px solid var(--ix-border-input); border-radius: var(--ix-radius-sm); padding: 8px 12px; outline: none; transition: all var(--ix-ease); }
.cm-fsel { appearance: none; cursor: pointer; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238a8a7a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.cm-fsel:focus, .cm-finp:focus { border-color: var(--ix-blue); box-shadow: 0 0 0 3px var(--ix-blue-ghost); }
.cm-fsel.changed, .cm-finp.changed { border-color: var(--ix-changed-border) !important; box-shadow: 0 0 0 3px var(--ix-changed-shadow) !important; }
/* -- Nested / new-form -- */
.cm-nested { margin-top: 8px; padding: 12px 14px; background: var(--ix-surface); border: 1.5px dashed var(--ix-gold); border-radius: var(--ix-radius-sm); }
.cm-nested-hdr { font-size: 11px; font-weight: 700; color: var(--ix-text-dark); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.cm-nested-close { font-size: 10px; font-family: var(--ix-font-mono); color: var(--ix-danger); cursor: pointer; background: none; border: none; }
.cm-no-results { padding: 10px 12px; background: #fff8e1; border: 1px solid var(--ix-warn); border-radius: var(--ix-radius-sharp); font-size: 11px; color: var(--ix-warn); margin-top: 6px; display: flex; align-items: center; justify-content: space-between; }
.cm-no-results button { font-family: var(--ix-font-mono); font-size: 10px; padding: 3px 10px; border-radius: var(--ix-radius-sharp); border: 1.5px solid var(--ix-blue); background: var(--ix-white); color: var(--ix-blue); cursor: pointer; }
/* -- Tag / element chips -- */
.cm-tag-list { margin-top: 16px; border-top: 1px dashed var(--ix-border); padding-top: 14px; }
.cm-tag-label { font-size: 10px; font-family: var(--ix-font-mono); color: var(--ix-text-light); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.cm-tag-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ix-cream); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-sm); margin-bottom: 4px; }
.cm-tag-row.tagged { border-color: var(--ix-gold); background: #fdfcf8; }
.cm-tag-icon { font-size: 16px; flex-shrink: 0; }
.cm-tag-name { flex: 1; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cm-echips { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.cm-echip { font-family: var(--ix-font-mono); font-size: 8px; letter-spacing: .04em; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--ix-border); background: var(--ix-white); color: var(--ix-text-mid); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.cm-echip:hover { border-color: var(--ix-gold); }
.cm-echip.sel { background: var(--ix-blue); color: var(--ix-white); border-color: var(--ix-blue); }
/* -- Misc legacy -- */
.cm-cancel { font-size: 10px; font-family: var(--ix-font-mono); color: var(--ix-danger); cursor: pointer; background: none; border: none; text-decoration: underline; }
.cm-cancel:hover { opacity: 0.6; }
.cm-sub-right { display: flex; align-items: center; gap: 12px; }
.cm-sub-info { font-size: 9px; font-family: var(--ix-font-mono); color: var(--ix-text-tiny); }
.cm-sub-btn { font-family: var(--ix-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 22px; border-radius: var(--ix-radius-pill); border: none; background: linear-gradient(135deg, var(--ix-gold), var(--ix-gold-warm)); color: var(--ix-text-dark); font-weight: 700; cursor: pointer; box-shadow: 0 2px 12px var(--ix-gold-shadow); transition: all var(--ix-ease); }
.cm-sub-btn:hover:not(:disabled) { box-shadow: 0 4px 20px var(--ix-gold-shadow); transform: translateY(-1px); }
.cm-sub-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.cm-link-btn { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-blue); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.cm-link-btn:hover { opacity: 0.7; }
.cm-new-form { background: var(--ix-cream-warm); border: 1.5px solid var(--ix-border); border-radius: var(--ix-radius-sm); padding: 16px; margin-bottom: 12px; }
.cm-new-form-title { font-size: 10px; font-family: var(--ix-font-mono); color: var(--ix-text-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.cm-extras-toggle { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-blue); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.cm-chk-label { display: flex; align-items: center; gap: 6px; font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-text-mid); cursor: pointer; }
.cm-chk-label input { accent-color: var(--ix-blue); }
/* -- Choices.js legacy -- */
.cm-choices .choices__inner { font-family: var(--ix-font-body); font-size: 12px; color: var(--ix-text-dark); background: var(--ix-cream); border: 1.5px solid var(--ix-border-input); border-radius: var(--ix-radius-sm); padding: 4px 8px; min-height: 36px; }
.cm-choices .choices__inner .choices__item { font-size: 12px; }
.cm-choices.is-focused .choices__inner { border-color: var(--ix-blue); box-shadow: 0 0 0 3px var(--ix-blue-ghost); }
.cm-choices .choices__list--dropdown { font-family: var(--ix-font-body); font-size: 12px; border: 1.5px solid var(--ix-border-input); border-radius: var(--ix-radius-sm); z-index: var(--ix-z-dropdown); }
.cm-choices .choices__list--dropdown .choices__item { padding: 6px 10px; }
.cm-choices .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--ix-cream); color: var(--ix-blue); }
.cm-choices .choices__input { font-family: var(--ix-font-body); font-size: 11px; color: var(--ix-text-dark); background: var(--ix-cream); }
.cm-choices.has-selection .choices__inner { border-color: var(--ix-gold); box-shadow: 0 0 0 3px var(--ix-changed-shadow); }
.cm-choices select.cm-fsel { display: none !important; }
.cm-choices { position: relative; }
/* -- Converter legacy -- */
.cm-conv { padding: 16px 0; }
.cm-conv-title { font-family: var(--ix-font-display); font-size: 16px; font-weight: 600; color: var(--ix-text-dark); margin-bottom: 4px; }
.cm-conv-sub { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-text-light); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.cm-conv-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cm-conv-tool { padding: 12px 16px; background: var(--ix-white); border: 1.5px solid var(--ix-border); border-radius: var(--ix-radius-sm); cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 10px; min-width: 200px; }
.cm-conv-tool:hover { border-color: var(--ix-gold); }
.cm-conv-tool.active { border-color: var(--ix-blue); background: var(--ix-surface); box-shadow: 0 0 0 2px var(--ix-blue-ghost); }
.cm-conv-tool-icon { font-size: 20px; }
.cm-conv-tool-label { font-size: 12px; font-weight: 600; color: var(--ix-blue); }
.cm-conv-tool-desc { font-size: 9px; font-family: var(--ix-font-mono); color: var(--ix-text-light); }
.cm-conv-workspace { background: var(--ix-white); border: 1.5px solid var(--ix-border); border-radius: var(--ix-radius-sm); padding: 20px; min-height: 200px; }
.cm-conv-drop { width: 100%; min-height: 160px; border: 2px dashed var(--ix-border-input); border-radius: var(--ix-radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: border-color var(--ix-ease); background: var(--ix-cream); }
.cm-conv-drop:hover, .cm-conv-drop.drag-over { border-color: var(--ix-gold); background: var(--ix-surface); }
.cm-conv-drop-icon { font-size: 28px; opacity: 0.3; }
.cm-conv-drop-text { font-size: 12px; color: var(--ix-text-mid); }
.cm-conv-drop-hint { font-size: 9px; font-family: var(--ix-font-mono); color: var(--ix-text-tiny); }
.cm-conv-preview { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cm-conv-thumb {
  /* v1.4.12 (S13 Step 3 polish): explicit width/height auto +
     object-fit: contain to preserve native aspect ratio inside
     the flex parent. max-width/max-height bumped 200 → 280 for
     a more useful preview. */
  max-width: 280px;
  max-height: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--ix-radius-sm);
  border: 1px solid var(--ix-border);
}
.cm-conv-info { flex: 1; min-width: 200px; }
.cm-conv-info-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--ix-border-soft); font-size: 11px; }
.cm-conv-info-label { font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-light); text-transform: uppercase; letter-spacing: .06em; }
.cm-conv-info-val { font-weight: 600; color: var(--ix-blue); }
.cm-conv-info-val.ok { color: var(--ix-ok); }
.cm-conv-info-val.bad { color: var(--ix-danger); }
.cm-conv-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.cm-conv-go { font-family: var(--ix-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 18px; border-radius: var(--ix-radius-pill); border: none; background: var(--ix-blue); color: var(--ix-white); cursor: pointer; transition: all 0.15s; }
.cm-conv-go:hover:not(:disabled) { background: var(--ix-blue-deep); }
.cm-conv-go:disabled { opacity: 0.35; cursor: not-allowed; }
.cm-conv-go.download { background: linear-gradient(135deg, var(--ix-gold), var(--ix-gold-warm)); color: var(--ix-text-dark); font-weight: 700; }
.cm-conv-go.download:hover { box-shadow: 0 4px 16px var(--ix-gold-shadow); }
.cm-conv-status { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-text-mid); }
.cm-conv-progress { width: 100%; height: 4px; background: var(--ix-border); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.cm-conv-progress-bar { height: 100%; background: linear-gradient(90deg, var(--ix-blue), var(--ix-gold)); border-radius: 2px; transition: width 0.3s; }
.cm-conv-result { margin-top: 14px; padding: 12px; background: #f4fbf4; border: 1px solid #d4eed4; border-radius: var(--ix-radius-sm); }
.cm-conv-result-title { font-family: var(--ix-font-mono); font-size: 10px; color: var(--ix-ok); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
/* -- Transcriber notice legacy -- */
.cm-transcribe-notice { padding: 12px 14px; background: var(--ix-surface); border: 1.5px solid var(--ix-gold); border-radius: var(--ix-radius-sm); margin-bottom: 12px; }
.cm-transcribe-notice-hdr { font-family: var(--ix-font-mono); font-size: 11px; font-weight: 600; color: var(--ix-text-dark); margin-bottom: 8px; }
.cm-transcribe-notice-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cm-transcribe-file { font-family: var(--ix-font-mono); font-size: 10px; padding: 3px 8px; background: var(--ix-white); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-sharp); color: var(--ix-text-mid); }
.cm-transcribe-notice-dismiss { font-family: var(--ix-font-mono); font-size: 9px; color: var(--ix-text-light); background: none; border: none; cursor: pointer; text-decoration: underline; }
.cm-transcribe-notice-dismiss:hover { color: var(--ix-blue); }

/* ── end of legacy aliases ── */


/* ─────────────────────────────────────────────
   §27  PUBLISHER WRAPPER OVERRIDE
   (was inline in ta-page-head)
   ───────────────────────────────────────────── */
.publisher-wrapper { height: auto !important; }


/* ─────────────────────────────────────────────
   §28  PUBPLAN OVERVIEW (.pp-*)
   Compact overview grid on T-A PubPlan tab.
   Replaces pubplan-overview-v1.0.10.css entirely.
   ───────────────────────────────────────────── */

/* ── Add PubPlan button (header right) ── */
.pp-add-btn {
  font-family: var(--ix-font-mono); font-size: 11px; letter-spacing: .04em;
  padding: 8px 18px; border: 1.5px solid var(--ix-blue);
  border-radius: var(--ix-radius-pill); background: transparent;
  color: var(--ix-blue); text-decoration: none;
  transition: all 0.15s; white-space: nowrap;
}
.pp-add-btn:hover {
  background: linear-gradient(135deg, var(--ix-blue), var(--ix-blue-deep));
  color: var(--ix-gold); border-color: var(--ix-blue);
}

/* ── Hide old Webflow layout ── */
.pub-plan-zone { margin-top: 0 !important; }

/* ── Overview container ── */
.pp-overview { overflow-x: auto !important; overflow-y: visible !important; padding-bottom: 16px; max-width: 100% !important; }
.pp-overview::-webkit-scrollbar { height: 6px; }
.pp-overview::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); border-radius: 3px; }
.pp-overview::-webkit-scrollbar-thumb { background: rgba(91,127,255,0.25); border-radius: 3px; }

/* ── Issue columns — horizontal scroll ── */
.pp-columns { display: flex; gap: 10px; width: max-content; }
.pp-col { width: 155px; flex-shrink: 0; }

/* ── Issue header (v1.4.6 — cream card, teal text, gold border) ── */
.pp-issue-hdr {
  text-align: center; padding: 10px 8px 8px; margin-bottom: 10px;
  background: var(--ix-cream);
  border: 1.5px solid var(--ix-gold);
  border-radius: var(--ix-radius-sm);
  color: var(--ix-teal);
  box-shadow: var(--ix-shadow-sm);
  transition: all var(--ix-ease);
}
.pp-issue-hdr:hover {
  border-color: var(--ix-blue);
  box-shadow: 0 2px 8px var(--ix-blue-glow);
}
.pp-issue-name {
  font-family: var(--ix-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em;
  color: var(--ix-teal);
}
.pp-issue-date {
  font-family: var(--ix-font-mono);
  font-size: 9px; color: rgba(26, 58, 58, 0.65); margin-top: 2px;
}
.pp-issue-link {
  display: block; font-family: var(--ix-font-mono); font-size: 8px;
  color: var(--ix-gold); text-decoration: none; margin-top: 4px;
  letter-spacing: .04em;
  font-weight: 600;
}
.pp-issue-link:hover { color: var(--ix-gold-bright); text-decoration: underline; }

/* ── Section header (inline label with color bar) ── */
.pp-section-hdr {
  font-family: var(--ix-font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; padding: 5px 8px;
  margin-bottom: 4px; border-radius: var(--ix-radius-sharp);
  display: flex; align-items: center; gap: 5px;
  height: 24px;
}
.pp-section-hdr .pp-sh-bar {
  width: 3px; height: 12px; border-radius: 2px; flex-shrink: 0;
}
.pp-section-hdr.sh-fa { color: #2d6a4f; }
.pp-section-hdr.sh-fa .pp-sh-bar { background: #2d6a4f; }
.pp-section-hdr.sh-ts { color: #7b2d8b; }
.pp-section-hdr.sh-ts .pp-sh-bar { background: #7b2d8b; }
.pp-section-hdr.sh-ba { color: #b8860b; }
.pp-section-hdr.sh-ba .pp-sh-bar { background: #b8860b; }
.pp-section-hdr.sh-tf { color: #8B5CF6; }
.pp-section-hdr.sh-tf .pp-sh-bar { background: #8B5CF6; }
.pp-section-hdr.sh-ev { color: #1a5276; }
.pp-section-hdr.sh-ev .pp-sh-bar { background: #1a5276; }
.pp-section-hdr.sh-re { color: #8b4513; }
.pp-section-hdr.sh-re .pp-sh-bar { background: #8b4513; }
.pp-section-hdr.sh-sb { color: var(--ix-blue); }
.pp-section-hdr.sh-sb .pp-sh-bar { background: var(--ix-teal); }

/* ── Tile (individual slot) ── */
.pp-slot {
  height: 58px; background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius-sm);
  margin-bottom: 2px; padding: 4px 8px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; transition: all var(--ix-ease);
}
.pp-slot:hover {
  border-color: var(--ix-gold);
  box-shadow: 0 2px 8px var(--ix-gold-glow);
}
.pp-slot.empty {
  background: var(--ix-cream);
  border-style: dashed;
  border-color: var(--ix-border-soft);
}

/* Tile top row — slot number + category + dots */
.pp-slot-top {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 2px;
}
.pp-slot-num {
  font-family: var(--ix-font-mono); font-size: 8px;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 8px; padding: 1px 5px; flex-shrink: 0;
}
/* Section color classes for slot numbers */
.sn-fa { background: #e8f0ec; color: #2d6a4f; }
.sn-ts { background: #f0edf4; color: #7b2d8b; }
.sn-ba { background: #f5f0e0; color: #b8860b; }
.sn-tf { background: #ede9fe; color: #8B5CF6; }
.sn-ev { background: #e0f0f5; color: #1a5276; }
.sn-re { background: #f5ebe0; color: #8b4513; }
.sn-sb { background: var(--ix-cream-warm); color: var(--ix-blue); }
.sn-empty { background: var(--ix-cream-warm); color: var(--ix-text-tiny); }

.pp-slot-cat {
  font-size: 9px; font-weight: 500; color: var(--ix-text-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.pp-slot-cat.empty-cat { color: var(--ix-text-tiny); }

/* Status dots row */
.pp-dots { display: flex; gap: 3px; flex-shrink: 0; }
.pp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ix-border);
}
.pp-dot.d-ok { background: var(--ix-ok); }
.pp-dot.d-bad { background: var(--ix-danger); }
.pp-dot.d-pending { background: var(--ix-warn); }
.pp-dot.d-na { background: var(--ix-border); }

/* Tile detail row — assignment info */
.pp-slot-detail {
  font-size: 8px; font-family: var(--ix-font-mono);
  color: var(--ix-text-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}

/* ── Section gap between tile groups ── */
.pp-section-gap { height: 8px; }

/* ── TF category label (small text above TF tiles) ── */
.pp-tf-cat {
  font-family: var(--ix-font-mono); font-size: 8px;
  color: #8B5CF6; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px;
  height: 16px; display: flex; align-items: center;
}

/* ── Section divider (visual separator between FA/TS/BA groups) ── */
.pp-section-div { height: 1px; background: var(--ix-border-soft); margin: 6px 0; }

/* ── Section label (left column replacement — inline in first column only) ── */
.pp-section-label {
  font-family: var(--ix-font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ix-text-tiny); text-align: center;
  padding: 4px 0; line-height: 1.3;
}
.pp-section-label.sl-fa { color: #2d6a4f; }
.pp-section-label.sl-ts { color: #7b2d8b; }
.pp-section-label.sl-ba { color: #b8860b; }
.pp-section-label.sl-tf { color: #8B5CF6; }
.pp-section-label.sl-ev { color: #1a5276; }
.pp-section-label.sl-re { color: #8b4513; }
.pp-section-label.sl-sb { color: var(--ix-blue); }

/* ── Legend ── */
.pp-legend {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; font-family: var(--ix-font-mono); font-size: 9px;
  color: var(--ix-text-tiny);
}
.pp-legend-item { display: flex; align-items: center; gap: 4px; }


/* ─────────────────────────────────────────────
   §29  WEBFLOW CHROME OVERRIDES
   Aggressive overrides for the T-A template page.
   Page bg: Indigo #1a293b. Sidebar: white.
   Banner: replaced with white card. All fonts bumped.
   Every rule uses !important — Webflow's generated
   classes and inline styles require it.
   ───────────────────────────────────────────── */

/* ── Page background — Indigo ── */
body,
body.body-67,
body[class*="body-"] {
  background: #1a293b !important;
  color: var(--ix-text-dark);
}

/* ══════ TOP NAV BAR ══════ */
section.publ-navmenu {
  background: var(--ix-white) !important;
  border-bottom: 1px solid var(--ix-border-soft) !important;
  padding: 0 28px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
}
section.publ-navmenu .navmenu-container {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
/* INBXIFY logo — 50% bigger */
.inbxify-logo {
  height: 54px !important;
  width: auto !important;
}
/* Publisher name — always one line */
.sign-in-div {
  font-family: var(--ix-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ix-text-mid) !important;
  white-space: nowrap !important;
  min-width: max-content !important;
}
.sign-in-div .text-block-111499 {
  font-size: 14px !important;
  white-space: nowrap !important;
}
.sign-in-div .div-block-20048144,
.sign-in-div .div-block-20048145 {
  white-space: nowrap !important;
  min-width: max-content !important;
}

/* ══════ TITLE BANNER — white card inside white container ══════ */
/* section.dashboard — controlled entirely by Webflow Designer */
section.publisher-wrapper {
  background: var(--ix-white) !important;
  background-color: var(--ix-white) !important;
  background-image: none !important;
  border: 1px solid var(--ix-border-soft) !important;
  border-radius: var(--ix-radius) !important;
  padding: 24px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
  height: auto !important;
  max-width: 100% !important;
  /* margin controlled by Webflow Designer */
}
section.publisher-wrapper,
section.publisher-wrapper *,
.publisher-wrapper,
section.dashboard section.publisher-wrapper,
section.dashboard > section.publisher-wrapper {
  background-color: var(--ix-white) !important;
  background-image: none !important;
}
section.publisher-wrapper > .div-block-20048152 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}
.title-admin-name-left {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}
/* Hide CSS ::before — JS injects .ta-title-circle with the letter instead */
.title-admin-name-left::before {
  display: none !important;
}
/* JS-injected circle with first letter */
.ta-title-circle {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ix-teal), var(--ix-teal-soft));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ix-font-display); font-weight: 700;
  font-size: 22px; color: var(--ix-gold);
  box-shadow: 0 3px 12px rgba(26,58,58,0.2);
  flex-shrink: 0;
}
h6.title-label {
  font-family: var(--ix-font-display) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--ix-text-dark) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
/* URL link */
section.publisher-wrapper a.link-615,
section.publisher-wrapper a[href*="wyckoffliving"] {
  font-family: var(--ix-font-mono) !important;
  font-size: 11px !important;
  color: var(--ix-blue) !important;
  text-decoration: none !important;
  letter-spacing: .03em !important;
}
section.publisher-wrapper a.link-615:hover,
section.publisher-wrapper a[href*="wyckoffliving"]:hover {
  text-decoration: underline !important;
}

/* ══════ MAIN LAYOUT CONTAINER — warm white bg, indigo only on gutters ══════ */
.w-layout-blockcontainer.container-200403 {
  background: #faf8f1 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.15) !important;
}

/* ══════ HORIZONTAL TAB MENU — Mockup C architecture ══════ */
.dashboard-tabs.w-tabs {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Tab strip — horizontal row, fits all tabs without scrolling, centered */
.vertical-tabs.w-tab-menu,
.w-tab-menu {
  background: transparent !important;
  border: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  min-width: unset !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
/* Hide scrollbar but keep function */
.vertical-tabs.w-tab-menu::-webkit-scrollbar,
.w-tab-menu::-webkit-scrollbar {
  height: 0 !important;
  display: none !important;
}
/* Individual tab links — browser-style tabs */
.pl-link-tabs.w-tab-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  border-radius: var(--ix-radius) var(--ix-radius) 0 0 !important;
  margin: 0 !important;
  padding: 8px 12px 6px !important;
  transition: all 0.2s !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  position: relative !important;
}
/* Hide any non-label children (icons, badges) inside tab links.
   If a tab uses an emoji prefix INSIDE .pl-label-sm text, that must
   be removed in Webflow Designer — CSS cannot strip text content. */
.pl-link-tabs.w-tab-link > *:not(.pl-label-sm) {
  display: none !important;
}
.pl-link-tabs.w-tab-link:hover {
  background: rgba(255,255,255,0.5) !important;
  color: var(--ix-text-dark) !important;
}
/* Active tab — white card top, merges with workspace below */
.pl-link-tabs.w-tab-link.w--current {
  background: var(--ix-white) !important;
  border-color: var(--ix-border-soft) !important;
  border-bottom: none !important;
  box-shadow: 0 -2px 8px rgba(91,127,255,0.06) !important;
  z-index: 2 !important;
}
/* White strip to merge active tab with workspace panel */
.pl-link-tabs.w-tab-link.w--current::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--ix-white) !important;
  z-index: 3 !important;
}
/* Tab label text */
.pl-label-sm {
  font-family: var(--ix-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ix-text-light) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.pl-link-tabs.w-tab-link:hover .pl-label-sm {
  color: var(--ix-text-dark) !important;
}
.pl-link-tabs.w-tab-link.w--current .pl-label-sm {
  color: var(--ix-blue) !important;
  font-weight: 700 !important;
}

/* ══════ TAB CONTENT / WORKSPACE PANEL ══════ */
/* The white workspace card that the active tab merges into */
#tabs-top,
.tabs-content-9,
.w-tab-content,
#tabs-top.tabs-content-9.w-tab-content {
  background: var(--ix-white) !important;
  border: 1px solid var(--ix-border-soft) !important;
  border-radius: 0 var(--ix-radius) var(--ix-radius) var(--ix-radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
}
/* Each tab pane — generous breathing room, contains horizontal scroll */
.w-tab-pane {
  padding: 32px 36px !important;
  overflow: hidden !important;
}

/* ══════ GLOBAL FONT SIZE + SPACING BUMPS ══════ */
/* ── These are LARGE. Breathing room everywhere. ── */

/* Tab header titles */
.cm-hdr h3,
.ix-hdr h3,
.ix-hdr-title {
  font-size: 26px !important;
}
/* Tab header subtitles */
.cm-hdr-sub,
.ix-hdr-sub {
  font-size: 12px !important;
  margin-top: 3px !important;
}
/* Header icon */
.cm-hdr-icon,
.ix-hdr-icon {
  width: 44px !important;
  height: 44px !important;
  font-size: 20px !important;
}
/* Header padding */
.cm-hdr,
.ix-hdr {
  padding: 16px 0 14px !important;
  margin-bottom: 20px !important;
}
/* Channel tabs */
.cm-channel,
.ix-channel {
  font-size: 16px !important;
  padding: 16px 28px 14px !important;
}
/* Sub-tab pills */
.cm-tab,
.ix-tab {
  font-size: 13px !important;
  padding: 9px 22px !important;
  border-radius: 24px !important;
}
.cm-tabs,
.ix-tabs {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
  gap: 8px !important;
}
/* File list — more gap between rows */
.cm-flist,
.ix-flist {
  gap: 6px !important;
}
/* File rows — taller */
.cm-frow-main,
.ix-frow-main {
  padding: 14px 18px !important;
  grid-template-columns: 36px 36px 1fr auto !important;
}
.cm-frow-main.no-select,
.ix-frow-main.no-select {
  grid-template-columns: 36px 1fr auto !important;
}
/* File icons bigger */
.cm-ficon,
.ix-ficon {
  font-size: 22px !important;
}
/* File names */
.cm-fname,
.ix-fname {
  font-size: 16px !important;
}
/* File meta */
.cm-fmeta,
.ix-fmeta {
  font-size: 11px !important;
  margin-top: 4px !important;
  gap: 12px !important;
}
/* Checkboxes bigger */
.cm-fcheck,
.ix-fcheck {
  width: 18px !important;
  height: 18px !important;
}
/* Badges */
.cm-fbadge,
.ix-fbadge {
  font-size: 11px !important;
  padding: 5px 14px !important;
  border-radius: 12px !important;
}
/* Version badge */
.cm-badge,
.ix-badge {
  font-size: 11px !important;
  padding: 6px 16px !important;
}
/* Monitor inline */
.cm-monitor-inline,
.ix-monitor-inline {
  font-size: 12px !important;
}
/* Refresh button */
.cm-refresh,
.ix-refresh {
  font-size: 12px !important;
  padding: 6px 18px !important;
}
/* Selection bar */
.cm-sel-bar,
.ix-sel-bar {
  padding: 14px 22px !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
}
.cm-sel-count,
.ix-sel-count {
  font-size: 15px !important;
}
/* Breadcrumb */
.cm-breadcrumb,
.ix-breadcrumb {
  font-size: 11px !important;
  padding: 6px 0 14px !important;
}
/* Modal title */
.cm-modal-title,
.ix-modal-title {
  font-size: 22px !important;
}
.cm-modal-sub,
.ix-modal-sub {
  font-size: 11px !important;
}
.cm-modal-body,
.ix-modal-body {
  padding: 28px !important;
}
.cm-modal-footer,
.ix-modal-footer {
  padding: 16px 28px !important;
}
/* Form labels */
.cm-fl,
.ix-fl {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}
/* Form selects/inputs */
.cm-fsel, .cm-finp,
.ix-fsel, .ix-finp {
  font-size: 15px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
}
/* Form rows spacing */
.cm-fr,
.ix-fr {
  margin-bottom: 16px !important;
  gap: 14px !important;
}
/* Steps */
.cm-step,
.ix-step {
  font-size: 10px !important;
  padding: 5px 14px !important;
}
/* Tag rows */
.cm-tag-row,
.ix-tag-row {
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
}
.cm-tag-name,
.ix-tag-name {
  font-size: 13px !important;
}
.cm-echip,
.ix-echip {
  font-size: 10px !important;
  padding: 4px 12px !important;
}
/* Submit button */
.cm-sub-btn,
.ix-btn-primary {
  font-size: 12px !important;
  padding: 10px 26px !important;
}
/* Placeholder */
.cm-placeholder-title,
.ix-placeholder-title {
  font-size: 18px !important;
}
.cm-placeholder-text,
.ix-placeholder-text {
  font-size: 13px !important;
}
/* Converter */
.cm-conv-title,
.ix-conv-title {
  font-size: 20px !important;
}
.cm-conv-sub,
.ix-conv-sub {
  font-size: 12px !important;
}
.cm-conv-drop-text,
.ix-conv-drop-text {
  font-size: 14px !important;
}
.cm-conv-drop-hint,
.ix-conv-drop-hint {
  font-size: 10px !important;
}
/* Empty state */
.cm-empty-text,
.ix-empty-text {
  font-size: 14px !important;
}
.cm-empty-icon,
.ix-empty-icon {
  font-size: 40px !important;
}
/* Error state */
.cm-error,
.ix-error {
  font-size: 13px !important;
  padding: 14px 18px !important;
}
/* Loading */
.cm-loading,
.ix-loading {
  font-size: 13px !important;
  padding: 48px !important;
}
/* Nested / new form */
.cm-nested,
.ix-nested {
  padding: 16px 18px !important;
}
.cm-new-form,
.ix-new-form {
  padding: 20px !important;
  border-radius: 10px !important;
}
.cm-new-form-title,
.ix-new-form-title {
  font-size: 12px !important;
  margin-bottom: 16px !important;
}
/* No results */
.cm-no-results,
.ix-no-results {
  font-size: 13px !important;
  padding: 12px 16px !important;
}
/* Preview button */
.cm-preview-btn,
.ix-preview-btn {
  font-size: 18px !important;
  padding: 4px 8px !important;
}

/* PubPlan overview — bigger */
.pp-col {
  width: 250px !important;
}
.pp-issue-hdr {
  padding: 8px 10px 6px !important;
  margin-bottom: 12px !important;
}
.pp-issue-name {
  font-size: 19px !important;
}
.pp-issue-date {
  font-size: 13px !important;
}
.pp-issue-link {
  font-size: 11px !important;
  margin-top: 4px !important;
}
.pp-section-hdr {
  font-size: 11px !important;
  padding: 6px 10px !important;
  height: 28px !important;
  margin-bottom: 10px !important;
}
.pp-slot {
  height: 64px !important;
  padding: 6px 10px !important;
  margin-bottom: 3px !important;
}
.pp-slot-num {
  font-size: 11px !important;
  padding: 2px 7px !important;
}
.pp-slot-cat {
  font-size: 13px !important;
}
.pp-slot-detail {
  font-size: 11px !important;
}
.pp-dot {
  width: 7px !important;
  height: 7px !important;
}
.pp-section-gap {
  height: 15px !important;
}
.pp-columns {
  gap: 12px !important;
}
/* Add PubPlan button */
.pp-add-btn {
  font-size: 13px !important;
  padding: 10px 22px !important;
}


/* ─────────────────────────────────────────────
   §30  SCREENSHOT TRANSCRIBER (.sct-*)
   Added v1.3.9 — structural rules previously missing.
   Existing narrow overrides retained above (§~24).
   ───────────────────────────────────────────── */

/* Root */
.sct-root {
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 0;
}

/* Header (hidden when mounted inside uploads-processor; see override above) */
.sct-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--ix-border-soft);
  margin-bottom: 14px;
}
.sct-hdr-left { display: flex; align-items: center; gap: 12px; }
.sct-hdr-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, var(--ix-blue), var(--ix-blue-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--ix-gold); font-size: 15px;
  box-shadow: 0 2px 8px var(--ix-blue-shadow);
}
.sct-hdr h3 {
  font-family: var(--ix-font-display);
  font-size: 18px; font-weight: 600; color: var(--ix-teal);
  margin: 0; line-height: 1.2;
}
.sct-hdr-sub {
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-text-light);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 2px;
}
.sct-badge {
  font-family: var(--ix-font-mono);
  font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--ix-radius-pill);
  background: var(--ix-blue); color: var(--ix-white);
}

/* Step tracker */
.sct-steps {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 14px;
  font-family: var(--ix-font-mono);
  font-size: 11px;
}
.sct-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
  color: var(--ix-text-light);
  letter-spacing: 0.02em;
  transition: all var(--ix-ease);
}
.sct-step-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ix-text-tiny);
  flex-shrink: 0;
}
.sct-step.active {
  background: var(--ix-blue-ghost);
  border-color: var(--ix-blue-light);
  color: var(--ix-blue-deep);
  font-weight: 500;
}
.sct-step.active .sct-step-dot {
  background: var(--ix-blue);
  box-shadow: 0 0 0 3px var(--ix-blue-glow);
}
.sct-step.done {
  background: rgba(39,174,96,0.08);
  border-color: rgba(39,174,96,0.25);
  color: var(--ix-ok);
}
.sct-step.done .sct-step-dot { background: var(--ix-ok); }
.sct-step-arr {
  color: var(--ix-text-tiny);
  font-size: 12px;
  user-select: none;
}

/* Cards */
.sct-card {
  background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--ix-shadow-sm);
}
.sct-card-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--ix-blue), var(--ix-blue-deep));
}
.sct-card-body { padding: 18px 20px; }
.sct-card-title {
  font-family: var(--ix-font-display);
  font-size: 16px; font-weight: 600;
  color: var(--ix-teal);
  margin-bottom: 2px;
}
.sct-card-sub {
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-text-light);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 14px;
}

/* Paste zone */
.sct-paste-zone {
  border: 2px dashed var(--ix-border-input);
  border-radius: var(--ix-radius-sm);
  padding: 36px 24px;
  text-align: center;
  background: var(--ix-cream);
  transition: all var(--ix-ease);
  cursor: default;
}
.sct-paste-zone.drag-over {
  border-color: var(--ix-blue);
  background: var(--ix-blue-ghost);
}
.sct-pz-icon {
  font-family: var(--ix-font-mono);
  font-size: 22px; font-weight: 500;
  color: var(--ix-blue);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.sct-pz-label {
  font-size: 14px; font-weight: 500;
  color: var(--ix-text-dark);
  margin-bottom: 6px;
}
.sct-pz-hint {
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-text-light);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  line-height: 1.5;
}
.sct-pz-or {
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-text-tiny);
  letter-spacing: 0.06em;
  margin: 10px 0 12px;
}

/* Browse button */
.sct-browse-btn {
  font-family: var(--ix-font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: var(--ix-radius-sharp);
  border: 1px solid var(--ix-blue);
  background: var(--ix-white);
  color: var(--ix-blue);
  cursor: pointer;
  transition: all var(--ix-ease);
}
.sct-browse-btn:hover {
  background: var(--ix-blue);
  color: var(--ix-white);
}

/* Transcribe button */
.sct-tx-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px 20px;
  font-family: var(--ix-font-body);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--ix-radius-sm);
  background: linear-gradient(135deg, var(--ix-blue), var(--ix-blue-deep));
  color: var(--ix-white);
  cursor: pointer;
  margin-bottom: 14px;
  box-shadow: var(--ix-shadow-md);
  transition: all var(--ix-ease);
}
.sct-tx-btn:hover { transform: translateY(-1px); box-shadow: var(--ix-shadow-lg); }
.sct-tx-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.sct-tx-btn span:first-child { font-size: 16px; color: var(--ix-gold-bright); }

/* Processing */
.sct-proc-wrap {
  background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius);
  overflow: hidden;
  margin-bottom: 14px;
}
.sct-proc-bar {
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--ix-blue) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: sct-proc-slide 1.8s ease-in-out infinite;
}
@keyframes sct-proc-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mode toggle (new / existing) */
.sct-mode-toggle {
  display: flex; gap: 6px;
  margin-bottom: 12px;
  padding: 3px;
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sharp);
  width: fit-content;
}
.sct-mode-opt {
  font-family: var(--ix-font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: var(--ix-radius-sharp);
  border: none;
  background: transparent;
  color: var(--ix-text-mid);
  cursor: pointer;
  transition: all var(--ix-ease);
}
.sct-mode-opt.active {
  background: var(--ix-white);
  color: var(--ix-blue-deep);
  box-shadow: var(--ix-shadow-sm);
}

/* Notice box */
.sct-notice-box {
  font-family: var(--ix-font-mono);
  font-size: 11px; color: var(--ix-text-mid);
  letter-spacing: 0.02em;
  padding: 8px 12px;
  background: var(--ix-blue-ghost);
  border-left: 3px solid var(--ix-blue);
  border-radius: var(--ix-radius-sharp);
  line-height: 1.5;
}

/* Results panel */
.sct-results {
  background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--ix-shadow-md);
}
.sct-results-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--ix-blue), var(--ix-gold));
}
.sct-results-body { padding: 18px 20px; }
.sct-results-title {
  font-family: var(--ix-font-display);
  font-size: 16px; font-weight: 600;
  color: var(--ix-teal);
  margin-bottom: 2px;
}
.sct-results-sub {
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-text-light);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 14px;
}

/* Form rows */
/* v1.4.10 (TD-165): bottom-margin 10px → 16px for breathing room
   between stacked rows. gap unchanged (only matters when wrap=true,
   which is rare on this surface). */
.sct-frow { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sct-ff   { flex: 1; min-width: 0; }
.sct-fl {
  display: block;
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-text-light);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.sct-fl .req { color: var(--ix-danger); }
.sct-finp, .sct-ftxt {
  width: 100%;
  font-family: var(--ix-font-body);
  font-size: 13px; color: var(--ix-text-dark);
  padding: 7px 10px;
  border: 1px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-cream);
  outline: none;
  transition: all var(--ix-ease);
}
.sct-ftxt { resize: vertical; min-height: 60px; line-height: 1.5; font-family: var(--ix-font-body); }
.sct-finp:focus, .sct-ftxt:focus {
  border-color: var(--ix-blue);
  background: var(--ix-white);
  box-shadow: var(--ix-shadow-blue);
}
.sct-finp.has-val, .sct-ftxt.has-val {
  border-color: var(--ix-gold);
  background: var(--ix-white);
}

/* Writers grid */
.sct-writers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* Divider */
/* v1.4.10 (TD-165): margin 14px → 20px for clearer visual section
   breaks in the stacked review layout. */
.sct-divider {
  border: none; border-top: 1px solid var(--ix-border-soft);
  margin: 20px 0;
}

/* Char counter */
.sct-char-counter {
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-text-tiny);
  letter-spacing: 0.04em;
  text-align: right;
  margin-top: 2px;
}

/* RTE body (the contenteditable) */
.sct-rte, #sct-f-body {
  width: 100%;
  min-height: 240px;
  padding: 14px 16px;
  font-family: var(--ix-font-body);
  font-size: 14px; line-height: 1.65; color: var(--ix-text-dark);
  border: 1px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-cream);
  outline: none;
  overflow-y: auto;
  transition: all var(--ix-ease);
}
.sct-rte:focus, #sct-f-body:focus {
  border-color: var(--ix-blue);
  background: var(--ix-white);
  box-shadow: var(--ix-shadow-blue);
}
.sct-rte.has-val, #sct-f-body.has-val {
  border-color: var(--ix-gold);
  background: var(--ix-white);
}
#sct-f-body p { margin: 0 0 12px; }
#sct-f-body h2 { font-family: var(--ix-font-display); font-size: 17px; font-weight: 600; margin: 16px 0 8px; color: var(--ix-teal); }
#sct-f-body ul, #sct-f-body ol { margin: 0 0 12px 20px; }
#sct-f-body li { margin: 0 0 4px; }
#sct-f-body a { color: var(--ix-blue); text-decoration: underline; }

/* Cancel / nav */
.sct-cancel {
  font-family: var(--ix-font-mono);
  font-size: 10px; color: var(--ix-danger);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity var(--ix-ease);
}
.sct-cancel:hover { opacity: 0.7; }

/* Save button footer */
.sct-save-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--ix-border-soft);
}
.sct-save-btn {
  font-family: var(--ix-font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 20px;
  border: none;
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-teal);
  color: var(--ix-cream);
  cursor: pointer;
  transition: all var(--ix-ease);
}
.sct-save-btn:hover { background: var(--ix-teal-soft); }
.sct-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Existing-article search results list */
.sct-article-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-white);
  margin-bottom: 8px;
}
.sct-art-item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ix-text-dark);
  cursor: pointer;
  border-bottom: 1px solid var(--ix-border-soft);
  transition: background var(--ix-ease);
}
.sct-art-item:last-child { border-bottom: none; }
.sct-art-item:hover, .sct-art-item.selected {
  background: var(--ix-blue-ghost);
  color: var(--ix-blue-deep);
}
.sct-replace-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sharp);
  font-size: 11px;
  color: var(--ix-text-mid);
}
.sct-replace-row label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Success panel */
.sct-success {
  background: var(--ix-white);
  border: 1px solid rgba(39,174,96,0.3);
  border-radius: var(--ix-radius);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--ix-shadow-md);
}
.sct-success-icon {
  font-size: 40px;
  color: var(--ix-ok);
  margin-bottom: 10px;
}
.sct-success-title {
  font-family: var(--ix-font-display);
  font-size: 18px; font-weight: 600;
  color: var(--ix-teal);
  margin-bottom: 6px;
}
.sct-success-sub {
  font-family: var(--ix-font-mono);
  font-size: 11px;
  color: var(--ix-text-mid);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

/* Lightbox (zoom screenshot) */
.sct-lightbox {
  position: fixed; inset: 0;
  background: rgba(26,42,58,0.85);
  z-index: var(--ix-z-lightbox);
  display: none;
  align-items: center; justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.sct-lightbox.active { display: flex; }
.sct-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--ix-radius-sm);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.sct-lb-close {
  position: absolute; top: 20px; right: 24px;
  font-size: 24px; color: var(--ix-white);
  cursor: pointer;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  transition: background var(--ix-ease);
}
.sct-lb-close:hover { background: rgba(255,255,255,0.2); }


/* ─────────────────────────────────────────────
   §30b  TRANSCRIBER REVIEW FOOTER (TD-165)
   Added v1.4.10 (S13 Step 2). Pairs with
   ta-page-body-v1.2.18.js — issues banner is the new
   source of truth for unmet-requirements display, and
   the .sct-sub-bar is given explicit alignment + gap.
   ───────────────────────────────────────────── */

/* Issues banner — appears above .sct-sub-bar when sctValidate()
   finds problems. Hidden in valid state via .sct-hidden. */
.sct-issues {
  margin: 4px 0 14px;
  padding: 12px 14px 12px 16px;
  background: var(--ix-cream);
  border: 1px solid var(--ix-border);
  border-left: 3px solid var(--ix-gold);
  border-radius: var(--ix-radius-sharp);
}
.sct-issues-hdr {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-text-mid);
  margin-bottom: 8px;
}
.sct-issues-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.sct-issues-list li {
  font-family: var(--ix-font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ix-text-dark);
  margin-bottom: 3px;
}
.sct-issues-list li:last-child {
  margin-bottom: 0;
}

/* Review footer (Save Draft / discard row) — explicit alignment.
   Was previously unscoped and relying on flex defaults; v1.4.10
   gives it real layout rules so nothing mashes regardless of
   #sct-ready-msg content (which is now always blank in v1.2.18). */
.sct-sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.sct-sub-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.sct-sub-info {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  color: var(--ix-text-light);
}


/* ─────────────────────────────────────────────
   §31  STUDIO SHELL (.std-*)
   Added v1.4.0. v1.4.1 note: header row uses SHARED .ix-hdr
   classes from §3 (not a custom .std-hdr block), so TA Studio's
   header matches Uploads Processor and every other tab.
   Sub-tab navigation for Input / Components / Assembler.
   Mount point: #studio-mount
   ───────────────────────────────────────────── */

.std-root {
  max-width: none;
  padding: 0;
}

/* Studio sub-tab bar */
/* ─────────────────────────────────────────────
   §31  STUDIO TAB STRIP (.std-subtabs)
   v1.4.9 (S13 / TD-166 / Q-G):
   Tab buttons render as `ix-btn ix-btn--tab` (added in
   ix-buttons-v1.0.2.css). The .std-subtabs strip wrapper
   provides the bottom rail (1px border) on which the tab
   underlines sit. Tabs handle their own horizontal spacing
   via internal margin-right; the wrapper just owns the
   row + the rail.
   .std-subtab-icon and .std-subtab-count selectors removed
   (dead — v1.2.10 ta-studio dropped icon/count emits at the
   strip level). .std-panel display rules unchanged.
   ───────────────────────────────────────────── */
.std-subtabs {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ix-border);
  background: transparent;
}

/* Sub-tab body containers */
.std-panel {
  display: none;
}
.std-panel.active {
  display: block;
}

/* Placeholder panel (Input and Components in Phase 1) */
.std-placeholder {
  text-align: center;
  padding: 80px 24px;
  background: var(--ix-cream);
  border: 1px dashed var(--ix-border-input);
  border-radius: var(--ix-radius);
}
.std-placeholder-icon {
  font-size: 40px;
  opacity: 0.4;
  margin-bottom: 12px;
}
.std-placeholder-title {
  font-family: var(--ix-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ix-teal);
  margin-bottom: 6px;
}
.std-placeholder-sub {
  font-family: var(--ix-font-mono);
  font-size: 11px;
  color: var(--ix-text-light);
  letter-spacing: 0.04em;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ─────────────────────────────────────────────
   §32  ASSEMBLER (.asm-*)
   Added v1.4.0 (Phase 1 read-only).
   Asset-centric editor for building CMS records from
   ready components.
   ───────────────────────────────────────────── */

/* Container */
.asm-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Asset type toggle + picker (top strip before picking) ── */
.asm-picker-wrap {
  background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius);
  overflow: hidden;
  box-shadow: var(--ix-shadow-sm);
}

.asm-picker-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--ix-border-soft);
  background: var(--ix-cream);
}

.asm-picker-title {
  font-family: var(--ix-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ix-teal);
  margin-bottom: 2px;
}

.asm-picker-sub {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  color: var(--ix-text-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Asset type toggle (segmented control) */
.asm-type-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--ix-cream-deep);
  padding: 3px;
  border-radius: var(--ix-radius-sharp);
  margin-top: 10px;
}
.asm-type-opt {
  font-family: var(--ix-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--ix-text-mid);
  cursor: pointer;
  border-radius: var(--ix-radius-sharp);
  transition: all var(--ix-ease);
}
.asm-type-opt.active {
  background: var(--ix-white);
  color: var(--ix-blue-deep);
  font-weight: 600;
  box-shadow: var(--ix-shadow-sm);
}

/* Filters row */
.asm-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 8px;
  padding: 10px 18px;
  align-items: end;
  background: var(--ix-white);
  border-bottom: 1px solid var(--ix-border-soft);
}

.asm-ff { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.asm-fl {
  font-family: var(--ix-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-text-light);
}

.asm-finp, .asm-fsel {
  width: 100%;
  font-family: var(--ix-font-body);
  font-size: 12px;
  color: var(--ix-text-dark);
  padding: 6px 9px;
  border: 1px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-cream);
  outline: none;
  transition: all var(--ix-ease);
}

.asm-finp:focus, .asm-fsel:focus {
  border-color: var(--ix-blue);
  background: var(--ix-white);
  box-shadow: var(--ix-shadow-blue);
}

.asm-fsel {
  cursor: pointer;
  padding-right: 22px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238a8a7a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.asm-sort-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
}

/* Asset result list */
.asm-results {
  max-height: 320px;
  overflow-y: auto;
  background: var(--ix-white);
}

.asm-result-count {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ix-text-light);
  padding: 8px 18px;
  border-bottom: 1px solid var(--ix-border-soft);
  background: var(--ix-cream);
  text-transform: uppercase;
}

.asm-result {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--ix-border-soft);
  cursor: pointer;
  transition: background var(--ix-ease);
}
.asm-result:last-child { border-bottom: none; }
.asm-result:hover {
  background: var(--ix-blue-ghost);
}

.asm-result-main { min-width: 0; }

.asm-result-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ix-text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asm-result-meta {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  color: var(--ix-text-light);
  letter-spacing: 0.02em;
  margin-top: 2px;
  display: flex;
  gap: 10px;
}
.asm-result-meta .sep { color: var(--ix-text-tiny); }

.asm-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.asm-status-dot.draft { background: var(--ix-warn); }
.asm-status-dot.live { background: var(--ix-ok); }
.asm-status-dot.assigned { background: var(--ix-blue); }

.asm-result-chevron {
  color: var(--ix-text-tiny);
  font-size: 14px;
  font-family: var(--ix-font-mono);
}

.asm-results-empty {
  padding: 40px 24px;
  text-align: center;
  font-family: var(--ix-font-mono);
  font-size: 11px;
  color: var(--ix-text-light);
  letter-spacing: 0.04em;
}


/* ── Open Assembler (asset selected) ── */

.asm-open {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.asm-back-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.asm-back-btn {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-white);
  color: var(--ix-text-mid);
  cursor: pointer;
  transition: all var(--ix-ease);
}
.asm-back-btn:hover {
  border-color: var(--ix-blue);
  color: var(--ix-blue-deep);
}

/* Metadata strip */
.asm-meta-strip {
  background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius);
  overflow: hidden;
  box-shadow: var(--ix-shadow-sm);
}

.asm-meta-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--ix-blue), var(--ix-blue-deep));
}

.asm-meta-body {
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 20px;
  align-items: center;
}

.asm-meta-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.asm-meta-label {
  font-family: var(--ix-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-text-light);
}

.asm-meta-value {
  font-size: 13px;
  color: var(--ix-text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asm-meta-value.primary {
  font-family: var(--ix-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ix-teal);
}

.asm-meta-value.empty {
  color: var(--ix-text-tiny);
  font-style: italic;
}

.asm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ix-radius-pill);
  font-family: var(--ix-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--ix-cream-deep);
  color: var(--ix-text-mid);
  width: fit-content;
}
.asm-status-pill.draft {
  background: rgba(232,160,48,0.14);
  color: #b87a10;
}
.asm-status-pill.live {
  background: rgba(39,174,96,0.12);
  color: var(--ix-ok);
}
.asm-status-pill.assigned {
  background: var(--ix-blue-ghost);
  color: var(--ix-blue-deep);
}


/* ── Three-column working area ── */

.asm-columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
}

@media (max-width: 1200px) {
  .asm-columns { grid-template-columns: 1fr 1fr; }
  .asm-columns .asm-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .asm-columns { grid-template-columns: 1fr; }
  .asm-columns .asm-col:last-child { grid-column: auto; }
}

.asm-col {
  background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius);
  overflow: hidden;
  box-shadow: var(--ix-shadow-sm);
}

.asm-col-head {
  padding: 10px 16px;
  background: var(--ix-cream);
  border-bottom: 1px solid var(--ix-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.asm-col-title {
  font-family: var(--ix-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ix-teal);
}

.asm-col-count {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ix-text-light);
  text-transform: uppercase;
}

.asm-col-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Subcomponent rows (read-only) */
.asm-sc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
}

.asm-sc-label {
  font-family: var(--ix-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-text-light);
}

.asm-sc-value {
  font-size: 13px;
  color: var(--ix-text-dark);
  line-height: 1.5;
  word-wrap: break-word;
}

.asm-sc-value.empty {
  color: var(--ix-text-tiny);
  font-style: italic;
  font-size: 11px;
}

.asm-sc-value.unbound {
  color: var(--ix-warn);
  font-family: var(--ix-font-mono);
  font-size: 10px;
  font-style: italic;
}

/* Long text (summary, teaser) */
.asm-sc-value.multiline {
  white-space: pre-wrap;
  max-height: 110px;
  overflow: auto;
}

/* Char count badge */
.asm-sc-badge {
  display: inline-block;
  font-family: var(--ix-font-mono);
  font-size: 9px;
  color: var(--ix-text-tiny);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Media column — main image slot */
.asm-img-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
}

.asm-img-slot-label {
  font-family: var(--ix-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-text-light);
}

.asm-img-thumb {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-cream-deep);
  display: block;
}

.asm-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ix-cream-deep);
  border: 1px dashed var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ix-font-mono);
  font-size: 10px;
  color: var(--ix-text-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.asm-img-alt {
  font-size: 12px;
  color: var(--ix-text-mid);
  font-style: italic;
}

.asm-img-alt.empty {
  color: var(--ix-text-tiny);
  font-family: var(--ix-font-mono);
  font-size: 10px;
  font-style: normal;
}

/* Interior image gallery (Phase 1: counts only, placeholder for grid) */
.asm-gallery-empty {
  padding: 18px;
  text-align: center;
  background: var(--ix-cream);
  border: 1px dashed var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  font-family: var(--ix-font-mono);
  font-size: 10px;
  color: var(--ix-text-tiny);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Body preview */
.asm-body-preview {
  padding: 12px 14px;
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sharp);
  font-size: 12px;
  color: var(--ix-text-mid);
  line-height: 1.6;
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.asm-body-preview.empty {
  color: var(--ix-text-tiny);
  font-style: italic;
  text-align: center;
  padding: 24px 14px;
}

.asm-body-launch {
  margin-top: 8px;
  font-family: var(--ix-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-white);
  color: var(--ix-text-mid);
  cursor: not-allowed;
  opacity: 0.6;
  width: 100%;
}

/* Inline switch display */
.asm-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sharp);
}
.asm-switch-label {
  font-size: 11px;
  color: var(--ix-text-dark);
}
.asm-switch-state {
  font-family: var(--ix-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--ix-radius-pill);
}
.asm-switch-state.on {
  background: rgba(39,174,96,0.14);
  color: var(--ix-ok);
}
.asm-switch-state.off {
  background: var(--ix-cream-deep);
  color: var(--ix-text-tiny);
}

/* Phase-1 notice banner */
.asm-phase-notice {
  padding: 10px 14px;
  background: var(--ix-blue-ghost);
  border: 1px solid var(--ix-blue-light);
  border-left: 3px solid var(--ix-blue);
  border-radius: var(--ix-radius-sharp);
  font-family: var(--ix-font-mono);
  font-size: 11px;
  color: var(--ix-blue-deep);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.asm-phase-notice strong {
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   §33  ASSEMBLER — EDIT MODE (.asm-* editable)
   Added v1.4.1 (Phase 2 Session 1).
   Extends §32 read-only layout with editable inputs,
   dirty-state visuals, grouped fields, switches,
   character counters, and the sticky save bar.
   ───────────────────────────────────────────── */

/* Required marker on labels */
.asm-sc-label .req {
  color: var(--ix-danger, #c0392b);
  margin-left: 2px;
}

/* ── Character counter (teaser, short summary) ── */
.asm-sc-counter {
  display: inline-block;
  font-family: var(--ix-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ix-text-tiny);
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--ix-radius-pill);
  background: var(--ix-cream-deep);
}
.asm-sc-counter.over {
  background: rgba(192, 57, 43, 0.12);
  color: var(--ix-danger, #c0392b);
  font-weight: 600;
}

/* ── Base editable input / textarea / select ── */
.asm-input,
.asm-textarea,
.asm-select {
  width: 100%;
  font-family: var(--ix-font-body);
  font-size: 13px;
  color: var(--ix-text-dark);
  padding: 7px 10px;
  border: 1px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-white);
  outline: none;
  transition: all var(--ix-ease);
  line-height: 1.4;
}

.asm-input:focus,
.asm-textarea:focus,
.asm-select:focus {
  border-color: var(--ix-blue);
  box-shadow: var(--ix-shadow-blue);
}

.asm-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: var(--ix-font-body);
}

.asm-select {
  cursor: pointer;
  padding-right: 24px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238a8a7a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ── Dirty state — gold border + subtle glow ── */
/*
 * Dirty = field's current value differs from loaded value.
 * Gold border signals "this will be sent on Save."
 * Applied to the wrap (.asm-sc) so both label and input get the treatment.
 */
.asm-sc.dirty,
.asm-inline-ff.dirty,
.asm-switch-row.dirty {
  background: linear-gradient(
    to right,
    rgba(196, 163, 90, 0.06),
    transparent 40%
  ), var(--ix-cream);
  border-color: var(--ix-gold-muted, #C4A35A);
  box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.12);
  transition: all var(--ix-ease);
}

.asm-sc.dirty .asm-input,
.asm-sc.dirty .asm-textarea,
.asm-sc.dirty .asm-select,
.asm-inline-ff.dirty .asm-input {
  border-color: var(--ix-gold-muted, #C4A35A);
}

/*
 * Has-value (select/field with a current selection, even if not dirty).
 * Subtle indigo hint on left to signal "this field has a value set"
 * — different from the stronger gold "has pending change."
 * Per product UX rule: dropdowns that have a selection should have
 * a distinctive border.
 */
.asm-sc.has-value:not(.dirty) {
  border-left: 2px solid var(--ix-blue-light, #9CB5FF);
}

/* ── Grouped field blocks (Writers, CTA) ── */
.asm-sc-group {
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sharp);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.asm-sc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 600px) {
  .asm-sc-row { grid-template-columns: 1fr; }
}

/* ── Inline field (used in grouped blocks) ── */
.asm-inline-ff {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 6px;
  border-radius: var(--ix-radius-sharp);
  border: 1px solid transparent;
  background: transparent;
  transition: all var(--ix-ease);
  min-width: 0;
}

.asm-inline-label {
  font-family: var(--ix-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-text-light);
}

.asm-input-inline {
  padding: 5px 8px;
  font-size: 12px;
  background: var(--ix-white);
}

/* ── Editable switch row ── */
.asm-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--ix-cream);
  border: 1px solid var(--ix-border-soft);
  border-radius: var(--ix-radius-sharp);
  transition: all var(--ix-ease);
}

.asm-switch-row.on {
  background: rgba(39, 174, 96, 0.04);
}

.asm-switch-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.asm-switch-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ix-blue);
  flex-shrink: 0;
}

/* Already have .asm-switch-label base in §32 — keep consistent */

/* ── Readonly section (Identifiers) ── */
.asm-sc-readonly {
  opacity: 0.75;
  background: var(--ix-cream-deep);
}

/* ── Save bar (sticky at bottom of open-assembler view) ── */
.asm-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--ix-white);
  border: 1px solid var(--ix-border);
  border-top: 3px solid var(--ix-border);
  border-radius: var(--ix-radius);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.04);
  margin-top: 4px;
  transition: all var(--ix-ease);
}

.asm-save-bar.has-changes {
  border-top-color: var(--ix-gold-muted, #C4A35A);
  background: linear-gradient(
    to right,
    rgba(196, 163, 90, 0.05),
    var(--ix-white) 60%
  );
}

.asm-save-bar.saving {
  opacity: 0.7;
  pointer-events: none;
}

.asm-save-bar.just-saved {
  border-top-color: var(--ix-ok);
  background: linear-gradient(
    to right,
    rgba(39, 174, 96, 0.08),
    var(--ix-white) 60%
  );
}

/* v1.4.5: Error state — mirrors .has-changes / .just-saved pattern
   but in red. Applied by ta-studio-v1.1.5.js on save failure. */
.asm-save-bar.has-error {
  border: 1px solid var(--ix-danger);
  border-top: 3px solid var(--ix-danger);
  background: linear-gradient(
    to right,
    rgba(192, 57, 43, 0.08),
    var(--ix-white) 60%
  );
  box-shadow: 0 -4px 14px rgba(192, 57, 43, 0.10);
}

.asm-cancel-link {
  font-family: var(--ix-font-mono);
  font-size: 11px;
  color: var(--ix-danger, #c0392b);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  letter-spacing: 0.02em;
}
.asm-cancel-link:hover {
  opacity: 0.7;
}

.asm-save-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.asm-save-info {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  color: var(--ix-text-light);
  letter-spacing: 0.04em;
}

.asm-save-bar.has-changes .asm-save-info {
  color: var(--ix-gold-muted, #C4A35A);
  font-weight: 600;
}

.asm-save-bar.just-saved .asm-save-info {
  color: var(--ix-ok);
  font-weight: 600;
}

/* v1.4.5: Error-state info text — bold red, pairs with .has-error */
.asm-save-bar.has-error .asm-save-info {
  color: var(--ix-danger);
  font-weight: 600;
}

.asm-reset-btn {
  font-family: var(--ix-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--ix-border-input);
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-white);
  color: var(--ix-text-mid);
  cursor: pointer;
  transition: all var(--ix-ease);
}
.asm-reset-btn:hover:not(:disabled) {
  border-color: var(--ix-gold-muted, #C4A35A);
  color: var(--ix-text-dark);
  background: var(--ix-cream);
}
.asm-reset-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.asm-save-btn {
  font-family: var(--ix-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: none;
  border-radius: var(--ix-radius-sharp);
  background: var(--ix-blue);
  color: var(--ix-white);
  cursor: pointer;
  transition: all var(--ix-ease);
  font-weight: 600;
}
.asm-save-btn:hover:not(:disabled) {
  background: var(--ix-blue-deep);
}
.asm-save-btn:disabled {
  background: var(--ix-cream-deep);
  color: var(--ix-text-tiny);
  cursor: not-allowed;
}

.asm-save-bar.has-changes .asm-save-btn:not(:disabled) {
  box-shadow: 0 2px 8px rgba(91, 127, 255, 0.25);
}

/* ── Body launch button override (was always-disabled in Phase 1) ── */
.asm-body-launch:not([disabled]) {
  opacity: 1;
  cursor: pointer;
  border-color: var(--ix-blue);
  color: var(--ix-blue-deep);
  background: var(--ix-blue-ghost);
  font-weight: 600;
}
.asm-body-launch:not([disabled]):hover {
  background: var(--ix-blue);
  color: var(--ix-white);
}

/* ─────────────────────────────────────────────
   v1.4.3: Hide publisher header while Studio Assembler
   has an article open. Class is toggled by
   ta-studio-v1.1.3.js based on S.selectedAssetId state.
   Applies across all T-A pages, all publishers, all titles
   (multi-tenant — driven by state, not by per-publisher
   selector hardcoding).
   ───────────────────────────────────────────── */
body.studio-editing .publisher-wrapper {
  display: none;
}

/* ─────────────────────────────────────────────
   v1.4.4: Studio toast notification.
   Floating pill rendered into <body> by ta-studio-v1.1.4.js
   when a body save via Scenario G Route 3 succeeds.
   Fixed to bottom-right. Slides up + fades in.
   Auto-removes after ~2.2s.
   ───────────────────────────────────────────── */
.studio-toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--ix-blue-deep);
  color: var(--ix-white);
  font-family: var(--ix-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(91,127,255,0.32), 0 2px 8px rgba(30,42,58,0.18);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
.studio-toast.visible {
  opacity: 1;
  transform: translateY(0);
}