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

   v1.4.16 (T-A header-row hierarchy, Row 2): §31 .std-subtabs
            gets the cream rail (--ix-cream) + 14px side padding
            + top radius, and its ix-btn--tab labels switch to
            Fraunces (--ix-font-display), scoped to the strip so
            ix-btn--tab elsewhere is unaffected. Completes the
            three-row treatment: Row 1 .ix-hdr stays white page
            chrome, Row 2 cream + serif tabs, Row 3 .bdl-l1
            lighter tint + DM Mono pill tabs (ta-intake-manager
            v3.0.4). No other rules modified.

   v1.4.15 (patch on v1.4.14): §7b .ix-refresh-icon RECONCILED to
            match the proven .bdl-refresh-icon treatment already
            live (gold border, blue hover, 20px glyph) instead of
            the untested plain-gold guess from v1.4.14. Pairs with
            ix-buttons v1.0.6 (38px/radius-8). No other rules
            modified.

   v1.4.14 (Refresh-button standardization, patch on v1.4.13):
            NEW §7b .ix-refresh-icon — canonical icon+spin
            refresh control for every data/file display tab.
            Pairs with ix-buttons v1.0.5 (.ix-btn--icon-lg,
            34px circular) and new ix-refresh-helper-v1.0.0.js
            (window.IxRefresh.wire). Reuses existing .ix-spin
            keyframe — no new animation defined. .bdl-refresh-icon
            kept as compat alias, so Intake/Bundles inherits the
            canonical look with zero markup change; adoption of
            the new class name + IxRefresh.wire() on Intake and
            other tabs is a SEPARATE follow-up pass, not part of
            this bump. Footprint: §7b only. No other rules
            modified.

   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
   ============================================================ 
   v1.4.21 (Aug 23, 2026) — PAGE WIDTH. §34.
           The T-A page had NO width cap anywhere — every ancestor
           measured max-width:none — but it also never claimed the
           viewport, and 176px of horizontal padding was being spent
           on gutters before any tab got width (dashboard 20+20,
           publisher-wrapper 32+32, tab pane 36+36).

           Now: 100vw up to a 1600px cap, centred, with the gutters
           roughly halved. Applies to EVERY T-A tab, not one surface.

           Also fixes a latent bug in §27: publisher-wrapper carries
           align-items:center, so any injected child that does not
           declare width:100% shrinks to its content width. Every
           mount point is now explicitly stretched — this is why a
           panel could look narrow for no visible reason.

   v1.4.22 (Aug 23, 2026) — TOP NAV ALIGNMENT. §34 extended.
           v1.4.21 capped .dashboard at 1600 and centred it but left
           section.publ-navmenu with no width rules at all, so the two
           stopped agreeing: the logo no longer sat above the left
           edge of the page content.

           Correct pattern for a capped page is a FULL-BLEED band with
           CAPPED CONTENTS — the white bar and its bottom rule run the
           full viewport, while the logo and publisher name align to
           the same 1600 column as everything below. Capping the band
           itself would leave the page background showing either side
           of the header, which is not the intent.






   v1.4.28 (Aug 25, 2026) — THE WHITE BOX WAS MY OWN TILE.

           Console check on the live page returned
             getComputedStyle(.publisher-wrapper).backgroundColor
             -> "rgba(0, 0, 0, 0)"
           The wrapper WAS transparent. v1.4.27 WAS loaded. The
           §36 rule WAS winning. Every theory from v1.4.25 through
           v1.4.27 was aimed at the wrong element.

           The white box is `.div-block-20048152` — the element
           v1.4.25 turned INTO a card. It does not hold the title
           alone; the tab block is inside it too. So the card I
           built to isolate the title was wrapping the title AND
           the tabs, which is the single white box in every
           screenshot since. I built the bug in v1.4.25 and then
           spent three versions looking for it somewhere else.

           FIX — put the card on the smallest element that holds
           the title and nothing else: `.title-admin-name-left`,
           the circle-plus-name row. Given `width: 100%` it becomes
           the full-width white bar in the reference. Its parent
           column goes back to transparent.

           WHY THIS SHAPE IS SAFE EITHER WAY: it does not matter
           whether the tab block is a child of .div-block-20048152
           or its sibling. The card is now on a row that provably
           contains only the circle and the title, and every
           ancestor above it is transparent, so the canvas shows
           through around it in both DOM shapes.

           PROCESS NOTE, and the expensive lesson of this run:
           when a fix does not land, verify the CURRENT STATE of
           the live page before writing the next version. One
           getComputedStyle call would have ended this at v1.4.25.
           Three versions were spent theorising instead — ancestry,
           tag qualifiers, cache — while the actual cause sat in
           the rule I had just added.

   v1.4.27 (Aug 25, 2026) — §36 CORRECTED AGAIN. THE ELEMENT
           QUALIFIER WAS THE BUG, twice over.

           v1.4.26 fixed the ancestry problem but kept `section.`
           on the front of the wrapper selector. §27 forces the
           wrapper white through FIVE selectors, and one of them —
           line ~1861 — is BARE:

             .publisher-wrapper { background-color: white !important }

           A bare class selector paints the element whatever its
           TAG is. Every §36 rule that tried to undo it was written
           `section.publisher-wrapper…`, so if that element is a
           DIV rather than a SECTION, none of them ever matched and
           the bare rule won by walkover. §27's own card rule is
           also section-qualified — so the white came from the bare
           forcing rule while the radius and shadow came from
           Webflow Designer. That is why v1.4.25 and v1.4.26 failed
           IDENTICALLY: same miss, twice.

           The give-away was in this file the whole time: line 1571
           carries `.publisher-wrapper { height: auto !important }`
           with no element. Somebody already knew the tag could not
           be relied on.

           §36 now qualifies NOTHING. The class is tripled for
           specificity and stands alone:
             .publisher-wrapper.publisher-wrapper.publisher-wrapper
             (0,3,0) — beats the bare (0,1,0) and §27's (0,2,2).

           STANDING LESSON, third strike on the same rule: a
           selector must MATCH before specificity means anything,
           and an element qualifier is a MATCH condition, not a
           specificity boost. On this page, do not qualify
           .publisher-wrapper by tag.

           APPEARANCE also corrected to the reference: the tile is
           borderless white on canvas with generous padding, canvas
           visible above AND below it. The border added in v1.4.25
           and v1.4.26 is dropped — at 1.3:1 it was never doing the
           work, and the reference does not have one. The canvas
           does the separating.

   v1.4.26 (Aug 25, 2026) — §36 CORRECTED. The tile still didn't
           render. Two causes, both mine:

           1. THE SELECTOR REQUIRED AN ANCESTOR IT MAY NOT HAVE.
              v1.4.25 wrote
                section.dashboard section.publisher-wrapper.publisher-wrapper
              at (0,3,2). That beats §27 — but ONLY if section.dashboard
              is actually an ancestor of the wrapper. If it isn't, the
              rule matches NOTHING and §27's white card wins untouched,
              which is exactly what the screenshot shows: one white box
              with the title floating in it and no tile edge anywhere.
              Now
                section.publisher-wrapper.publisher-wrapper.publisher-wrapper
              at (0,3,1) — three classes beats §27's two, with no
              ancestry requirement at all. Wins whatever the DOM shape.

           2. NOTHING WAS PAINTING THE CANVAS. Making the wrapper
              transparent only reveals whatever is behind it, and
              section.dashboard has never had a background in this
              file — §27 says it is "controlled entirely by Webflow
              Designer", and Designer paints it white. So transparent
              revealed white, a white tile sat on white, and the 1px
              --ix-border edge at 1.32:1 was invisible. §36 now paints
              --ix-canvas on every ancestor that could be the white:
              section.dashboard, the layout container, and the wrapper.

           ALSO: the tile and panel edges move from --ix-border-soft /
           --ix-border to a border that can actually be seen against
           white. A 1.2:1 hairline is not an edge; the tile reads
           because the CANVAS behind it differs, and the border only
           sharpens that.

           DIAGNOSTIC NOTE FOR NEXT TIME: when a rule "does nothing",
           check that its selector MATCHES before re-checking that it
           WINS. Specificity arithmetic is worthless on a selector that
           never matched an element.

   v1.4.25 (Aug 25, 2026) — TITLE TILE ISOLATED. §36 NEW.
           The mockup showed the title as its OWN tile floating on
           the canvas, with air above and below it. The v1.4.24
           build did not look like that, and the reason is structural
           rather than cosmetic:

           section.publisher-wrapper is the white card, and the tab
           block lives INSIDE it. So the title and the tabs were
           always in one continuous white box — there was nothing for
           the title to be isolated FROM. Adding padding inside that
           box could never produce the mockup, because the separation
           in the mockup is between two tiles on a visible canvas.

           §36 inverts it. The WRAPPER stops being the card and
           becomes transparent, letting --ix-canvas through. The
           title group (.div-block-20048152) becomes a card in its
           own right — white, bordered, rounded, with its own
           padding — and carries a bottom margin. The tab block
           below it is the second tile. Two tiles, canvas between.

           SPECIFICITY: §27 forces the wrapper white through five
           selectors, the strongest being
             section.dashboard > section.publisher-wrapper  (0,2,2)
           §36 overrides at (0,3,2) by repeating the class. §27 is
           left intact and untouched — including the `*` wildcard,
           which is still doing its job on descendants and is still
           the hazard documented everywhere else in this file.
           Reverting §36 restores the single-card look exactly.

           Gutters still come from §34. Only the vertical rhythm and
           the surface assignment change here.

   v1.4.24 (Aug 25, 2026) — TOKEN UNIFICATION + DARK TAB RAIL.
           §1 DELETED, §29 canvas, §35 recoloured. Pairs with
           ix-tokens v1.0.3 and ta-chrome v1.0.3.

           1. §1 DELETED — THE HEADLINE. This file carried its own
              :root with 47 tokens, 28 of which disagreed with
              ix-tokens. Two sources of truth, winner decided by
              script order. That block is gone; ix-tokens v1.0.3
              is now genuinely what it claims to be. ix-tokens
              MUST load before this file. Do not add a :root here
              again — add missing values to ix-tokens.

           2. --ix-text-tiny is a SIZE (11px), not a colour. This
              file read it as a colour 36 times and as a background
              once. All 37 remapped: colours to --ix-text-mid, the
              step-dot background to --ix-text-light. The old value
              #a8abb4 is preserved nowhere — 2.5:1 on white was
              never a legal text colour.

           3. --ix-text-light changed value in ix-tokens
              (#8A8E9A → #6B7280, 3.27:1 → 4.83:1). This file uses
              it 61 times. Every small label, meta row and empty
              state gets legible with no edit here — which is the
              argument for tokens in one sentence.

           4. THE W CIRCLE, two bugs. (a) its gradient read
              --ix-teal-soft, which is a 10% TINT in ix-tokens, so
              the gradient faded to nothing; it now reads the new
              --ix-teal-mid. (b) the rule sat at (0,1,0) with no
              !important and LOST to `section.publisher-wrapper *`
              at (0,1,1) — which is why it rendered as a WHITE
              circle with a gold letter. Now scoped to its parent
              for (0,2,0) with !important. Textbook wildcard
              casualty; see ix-tokens' neutraliser note.

           5. PAGE CANVAS. body was indigo #1a293b. Once v1.4.23
              uncapped the page, that indigo survived only as a
              16px sliver — no longer a frame, just a stray edge.
              Canvas is now --ix-canvas #E8E3D6, a warm grey the
              white workspace card reads as sitting ON (1.28:1;
              cream was 1.05:1, which is no boundary at all).

           6. §35 RAIL GOES DARK TEAL. Cream rail against white
              panel measured 1.05:1 and resting labels 3.11:1 —
              the rail and the content were one continuous pale
              field with nothing for the eye to anchor on. Now:
              --ix-rail bed, resting label 6.8:1, active label
              12.3:1 on --ix-rail-lift with a gold-bright spine.
              Same teal as the Cadence Board's app bar, so the
              platform has ONE dark surface, not two that drift.

              The seam strip is SUPPRESSED rather than deleted —
              the rule must still exist to cancel §29's offsets,
              or the horizontal bottom-edge strip returns as a
              white bar across the active row.

              §35b reverts colour along with layout below 900px.
              A dark strip across the top is a different idea from
              a dark rail down the side, and not one we chose.

           NOT IN THIS BUMP, deliberately: --ix-blue as text
           measures 3.54:1 on white and appears 62 times in this
           file. Fixing it means auditing 62 sites for whether each
           sits on light or on a blue gradient, and it does not
           block the rail. Logged as a TD instead of smuggled in.

   v1.4.23 (Aug 25, 2026) — FULL-BLEED WIDTH + LEFT TAB RAIL.
           §34 amended, §35 added. Two changes, one file, no
           Webflow Designer work and no ta-chrome bump.

           1. WIDTH. The 1600px cap is removed. section.dashboard
              is now 100% of the viewport less its 16px gutters,
              and section.publ-navmenu .navmenu-container drops
              from 1600 to 100% IN THE SAME BUMP — §34's own note
              says the two caps move together or the logo stops
              sitting above the page's left edge. The indigo body
              colour is now only visible above and below the
              content column, not either side of it.

              Trade-off accepted knowingly: past ~1800px the
              Cadence Board's three lanes stretch and Assets
              titles get long. That readability ceiling was the
              original reason for the cap. If it bites, the fix
              is a max-width on the board's own grid in
              ta-cadence-board, NOT a re-cap of the page.

           2. LEFT RAIL. The top-level T-A tabs move from a
              centred horizontal strip to a 208px vertical rail
              on the left of the workspace card. Placement is
              option A: the rail lives INSIDE the white card,
              below the title banner, so publisher-wrapper's
              structure is untouched.

              .dashboard-tabs.w-tabs becomes a flex row; the
              menu is a non-shrinking 208px column; the content
              panel takes flex:1 with min-width:0 so a wide
              child (the board's lanes) cannot push the rail
              off-screen.

              The browser-tab merge INVERTS. In §29 the active
              tab painted a 3px white strip along its BOTTOM
              edge (::after) to dissolve the seam into the panel
              below. In a rail that seam is vertical, so the
              strip moves to the RIGHT edge and the active tab
              additionally carries a 3px gold left spine — the
              same scope-spine vocabulary the Cadence Board uses.

              THREE HAZARDS, all handled below, do not "simplify"
              the selectors:
              (a) `section.publisher-wrapper *` forces
                  background-color !important at (0,1,1) on every
                  descendant, INCLUDING .pl-label-sm inside the
                  link. Every rail background rule here is at
                  (0,3,0) or better and neutralises wholesale via
                  a trailing `*` before re-applying.
              (b) position:sticky is dead on this page (TD-229,
                  overflow:hidden ancestor stack). The rail
                  scrolls with the page. Do not add sticky.
              (c) ta-chrome injects .ta-tab-icon with INLINE
                  font-size/margin. Author !important beats an
                  inline non-important declaration, which is how
                  §35 resizes the icons without a JS bump.

              Below 900px the rail folds back to the horizontal
              row from §29 so laptops and tablets are unaffected.
*/


/* ─────────────────────────────────────────────
   §1  DESIGN TOKENS — DELETED v1.4.24

   This section used to carry a :root block with 47 tokens. It was
   a SECOND source of truth competing with ix-tokens, and 28 of its
   values disagreed with that file. Whichever stylesheet loaded last
   won, for the whole page and every ix module below it. That is the
   mechanism behind the recurring contrast and white-on-white
   failures — not one careless rule, but two files each certain they
   owned the palette.

   Tokens now live in ONE place: ix-tokens-v1.0.3.css, which MUST
   load before this file. See its v1.0.3 header for how each of the
   28 conflicts was resolved.

   DO NOT ADD A :root BLOCK HERE. If a value is missing, add it to
   ix-tokens — that is the whole point.
   ───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   §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-mid); 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-mid);
  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-mid); }


/* ─────────────────────────────────────────────
   §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-mid); 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-mid); 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-mid);
}
.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-mid); 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-mid); }
.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-mid); }
.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-mid); 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-mid); 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-mid); }
.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-mid); 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-mid); 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-mid); }
/* -- 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-mid); }
.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-mid); }
.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-ink); text-decoration: none; margin-top: 4px;
  letter-spacing: .04em;
  font-weight: 600;
}
.pp-issue-link:hover { color: var(--ix-gold-warm); 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-mid); }

.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-mid); }

/* 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-mid); 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-mid);
}
.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-"] {
  /* v1.4.24: was indigo #1a293b. With the page uncapped at v1.4.23 the
     indigo survived only as a 16px sliver, so it stopped being a frame
     and became a stray edge. The canvas is now a warm grey the white
     workspace card can actually sit on top of. */
  background: var(--ix-canvas) !important;
  color: var(--ix-text-dark);
}

/* ══════ TOP NAV BAR ══════ */
/* v1.4.22 — the BAND is full-bleed; its CONTENTS are capped to the
   same column as .dashboard so the logo sits above the page's left
   edge. Cap the band instead and the page background shows either
   side of the header. */
section.publ-navmenu {
  background: var(--ix-white) !important;
  border-bottom: 1px solid var(--ix-border-soft) !important;
  padding: 0 16px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
}
section.publ-navmenu .navmenu-container {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;     /* matches §34 — change both together */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px !important;     /* matches publisher-wrapper's gutter */
}
@media (max-width: 1100px) {
  section.publ-navmenu { padding: 0 10px !important; }
  section.publ-navmenu .navmenu-container { padding: 0 12px !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 */
/* v1.4.24 — TWO fixes. (a) --ix-teal-soft is a 10% TINT in ix-tokens;
   the gradient wants the solid, which is now --ix-teal-mid. (b) this
   rule sat at (0,1,0) with no !important and LOST to
   `section.publisher-wrapper *` at (0,1,1), so the circle rendered
   WHITE with a gold letter on it. Scoped to the parent for (0,2,0). */
.title-admin-name-left .ta-title-circle,
.ta-title-circle {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ix-teal), var(--ix-teal-mid)) !important;
  background-color: var(--ix-teal) !important;
  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: var(--ix-canvas) !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-light);
  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-mid);
  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-mid);
  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-mid);
  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.std-subtabs {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ece8dc;
  background-color: #FAF9F5 !important;
  border-radius: 0;
}

/* v1.4.20 — values are the APPROVED mockup's, verbatim. Do not
   substitute tokens or "improve" contrast here.
   Specificity 0,3,1 beats ix-buttons' own
   `button.ix-btn.ix-btn--tab { font-family: DM Sans !important }`
   (0,2,1), which loads AFTER this file.
   The trailing `*` selector is required: the
   `section.publisher-wrapper *` wildcard (0,1,2) whitewashes the
   label element INSIDE each button, not just the button, which
   painted an opaque white box behind every tab label. 0,2,2 wins. */
.std-subtabs button.ix-btn.ix-btn--tab,
.std-subtabs .ix-btn.ix-btn--tab {
  font-family: var(--ix-font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 18px 20px 16px !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
}
.std-subtabs button.ix-btn.ix-btn--tab *,
.std-subtabs .ix-btn.ix-btn--tab * {
  background-color: transparent !important;
  background-image: none !important;
}

/* v1.4.20 — zero gap between the three header rows. Scoped to
   .std-root so other tabs' .ix-hdr spacing is untouched. */
.std-root .ix-hdr {
  margin-bottom: 0 !important;
}

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

.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-mid);
  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-mid);
  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-mid);
  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-mid);
  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-mid);
  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-mid);
  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-mid);
  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-mid);
  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-mid);
}

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


/* ─────────────────────────────────────────────
   §34  PAGE WIDTH  (added v1.4.21)

   ONE PLACE. Every T-A tab reads its width from here — Studio,
   PubPlan, Asset Library, Clients, Obligations, Newsletters,
   Default Layout, Processor, Maker, Sponsorships, Magazine,
   Performance. Do not widen a single tab from that tab's own
   stylesheet; a page-level dimension set in one surface's file is
   how surfaces drift apart.

   TARGET (v1.4.23): 100% of the viewport, less a 16px gutter each
   side. No cap. v1.4.21–22 capped at 1600px; that cap is gone.

   THE TOP NAV IS PART OF THIS. Its band is full-bleed and its
   CONTENTS now share the same uncapped column, so the logo still
   aligns with the page's left edge. The two widths must change
   together — see the note on section.publ-navmenu above.

   THE CAP'S ORIGINAL RATIONALE, PRESERVED: the board's three lanes
   and every T-A table are comfortably readable at 1600. Past that,
   line lengths in the Assets and Components lanes get long. That
   is a per-surface concern now. If a surface reads badly on a very
   wide monitor, cap THAT SURFACE'S grid in ITS OWN stylesheet —
   do not re-cap the page here, and do not widen a single tab from
   that tab's file either. Page dimensions live in this section
   only; that is the whole point of §34.
   ───────────────────────────────────────────── */

section.dashboard {
  width: 100% !important;
  max-width: none !important;   /* v1.4.23 — was 1600px */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

section.publisher-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* §27 sets align-items:center on the wrapper, which makes any child
   that does not declare a width shrink to its content. Tab panes and
   mount points must stretch or a surface renders narrow with nothing
   in its own CSS to explain why. */
section.publisher-wrapper > * {
  width: 100% !important;
  align-self: stretch !important;
}

.dashboard-tabs,
.tabs-content-9,
.w-tab-content,
.w-tab-pane {
  width: 100% !important;
}

.w-tab-pane {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Below the cap the page is fluid, so the gutters tighten as the
   viewport does rather than eating a fixed 176px on a laptop. */
@media (max-width: 1100px) {
  section.dashboard        { padding-left: 10px !important; padding-right: 10px !important; }
  section.publisher-wrapper { padding-left: 12px !important; padding-right: 12px !important; }
  .w-tab-pane              { padding-left: 10px !important; padding-right: 10px !important; }
}


/* ─────────────────────────────────────────────
   §35  LEFT TAB RAIL  (added v1.4.23)

   The top-level T-A tabs — Studio, Pub Plans, Asset Library,
   Clients, Obligations, Newsletters, Default Layout, Processor,
   Maker, Sponsorships, Magazine, Performance — run down the LEFT
   of the workspace card instead of across the top of it.

   PLACEMENT (option A): the rail is INSIDE the white card, below
   the title banner. section.publisher-wrapper's structure is
   untouched, so this is CSS-only — no Webflow Designer work.

   MECHANISM: .dashboard-tabs.w-tabs is Webflow's tab wrapper and
   is display:block by default. Turning it into a flex row puts
   .w-tab-menu (the strip) and .w-tab-content (the panel) side by
   side. Webflow's own JS is untouched; every data-w-tab hook, the
   w--current swap, ta-chrome's icon injection and ta-page-body's
   scroll-to-top all keep working exactly as before.

   THIS SECTION OVERRIDES §29 AND §34 BY SOURCE ORDER. Where the
   specificity ties, later wins — that is deliberate, so §29's
   horizontal rules stay readable as the pre-rail baseline and the
   media query at the bottom can hand control back to them.

   HAZARDS — see the v1.4.23 changelog. Short version:
     (a) `section.publisher-wrapper *` (0,1,1) whitewashes
         backgrounds on every descendant including the LABEL
         inside the link. Rail backgrounds are set at (0,3,0)+
         and the trailing `*` selectors neutralise wholesale
         before re-applying. Never force one container at a time.
     (b) position:sticky is DEAD here (TD-229). The rail scrolls.
     (c) .ta-tab-icon carries INLINE styles from ta-chrome.
         Author !important beats an inline non-important
         declaration — that is how the icons resize here without
         a ta-chrome bump.
   ───────────────────────────────────────────── */

/* ── Wrapper becomes a two-column flex row ── */
.dashboard-tabs.w-tabs {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
}

/* ── The rail itself — fixed 208px column, never shrinks ──
   208px fits "Default Layout" and "Sponsorships" on one line at
   12px with the icon and padding. Widen this and the panel loses
   the space; narrow it and the two longest labels wrap. */
.dashboard-tabs.w-tabs .vertical-tabs.w-tab-menu,
.dashboard-tabs.w-tabs .w-tab-menu {
  flex: 0 0 208px !important;
  width: 208px !important;
  min-width: 208px !important;
  max-width: 208px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  padding: 12px 0 12px 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background-color: var(--ix-rail) !important;
  background-image: none !important;
  border: 1px solid var(--ix-rail) !important;
  border-right: none !important;
  border-radius: var(--ix-radius) 0 0 var(--ix-radius) !important;
  align-self: stretch !important;
  position: static !important;   /* hazard (b) — sticky is dead */
}

/* ── Tab link — full-width row, left aligned ── */
.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  text-align: left !important;
  padding: 11px 14px 11px 15px !important;
  margin: 0 !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  position: relative !important;
  transition: background-color .15s, border-color .15s !important;
}
/* hazard (a) — kill the whitewash on the label inside the link */
.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link * {
  background-color: transparent !important;
  background-image: none !important;
}

.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link:hover {
  background-color: rgba(255,255,255,0.07) !important;
  border-left-color: rgba(255,255,255,0.25) !important;
}

/* ── Active tab — white bed, gold spine, blue label ──
   The white bed plus the right-edge strip below is what makes the
   active tab read as continuous with the panel beside it. */
.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link.w--current {
  background-color: var(--ix-rail-lift) !important;
  background-image: none !important;
  border-left: 4px solid var(--ix-gold-bright) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

/* ── Seam strip — SUPPRESSED at v1.4.24 ──
   §29 painted a white strip along the active tab's bottom edge to
   dissolve the seam into the panel below, and v1.4.23 rotated that
   strip to the right edge for the rail. On a DARK rail the merge is
   wrong: the active tab is meant to read as a lit row on a dark
   surface, not as a tongue of the white panel poking into it. The
   bed and the gold spine carry the selected state instead. The rule
   still has to exist to cancel §29's offsets — remove it and the
   bottom-edge strip comes back as a white bar across the row. */
.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link.w--current::after {
  content: none !important;
  display: none !important;
}

/* ── Labels ──
   SPECIFICITY: §29 sets the active label to blue at
   `.pl-link-tabs.w-tab-link.w--current .pl-label-sm` = (0,4,0).
   These are (0,5,0) and (0,6,0). Verified, not eyeballed. */
.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link .pl-label-sm {
  color: var(--ix-rail-text) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link:hover .pl-label-sm {
  color: var(--ix-rail-text-on) !important;
}
.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link.w--current .pl-label-sm {
  color: var(--ix-rail-text-on) !important;
  font-weight: 700 !important;
}

/* ── Icons — hazard (c): beats ta-chrome's inline styles ──
   Fixed-width box so every label starts on the same x, which is
   the whole readability gain of a rail over a strip. */
.dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link .ta-tab-icon {
  display: inline-block !important;
  width: 18px !important;
  min-width: 18px !important;
  margin-right: 10px !important;
  font-size: 15px !important;
  text-align: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ── Content panel — takes the rest of the row ──
   min-width:0 is load-bearing. Without it a wide child (the
   Cadence Board's three lanes, a wide table) sets the flex item's
   min-content width and shoves the rail off-screen. §34 sets
   width:100% on .w-tab-content at (0,1,0); this wins at (0,3,0). */
.dashboard-tabs.w-tabs > .w-tab-content,
.dashboard-tabs.w-tabs .tabs-content-9.w-tab-content {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  border-radius: 0 var(--ix-radius) var(--ix-radius) 0 !important;
  border-left: none !important;   /* the rail IS the boundary */
  margin: 0 !important;
}

/* Panes fill the panel; §29/§34 padding is preserved. */
.dashboard-tabs.w-tabs .w-tab-pane {
  width: 100% !important;
  min-width: 0 !important;
}

/* ─────────────────────────────────────────────
   §35b  RAIL → STRIP FALLBACK
   Below 900px a 208px rail costs a quarter of the viewport. Hand
   control back to §29's horizontal strip by resetting only the
   properties §35 changed.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .dashboard-tabs.w-tabs {
    display: block !important;
  }
  .dashboard-tabs.w-tabs .vertical-tabs.w-tab-menu,
  .dashboard-tabs.w-tabs .w-tab-menu {
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
  }
  /* colours revert with the layout — a dark strip across the top is
     not the same idea as a dark rail down the side */
  .dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link .pl-label-sm {
    color: var(--ix-text-light) !important;
  }
  .dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link.w--current .pl-label-sm {
    color: var(--ix-blue-deep) !important;
  }
  .dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link {
    width: auto !important;
    border-left: none !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: var(--ix-radius) var(--ix-radius) 0 0 !important;
    padding: 8px 12px 6px !important;
  }
  .dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link.w--current {
    background-color: var(--ix-white) !important;
    border: 1px solid var(--ix-border-soft) !important;
    border-bottom: none !important;
    box-shadow: 0 -2px 8px rgba(91,127,255,0.06) !important;
  }
  .dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link.w--current::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    bottom: -2px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 3px !important;
    background: var(--ix-white) !important;
  }
  .dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link.w--current::after {
    top: auto !important;
    bottom: -2px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 3px !important;
  }
  .dashboard-tabs.w-tabs > .w-tab-content,
  .dashboard-tabs.w-tabs .tabs-content-9.w-tab-content {
    width: 100% !important;
    border-radius: 0 var(--ix-radius) var(--ix-radius) var(--ix-radius) !important;
  }
  .dashboard-tabs.w-tabs .pl-link-tabs.w-tab-link .ta-tab-icon {
    width: auto !important;
    min-width: 0 !important;
    margin-right: 6px !important;
    font-size: 14px !important;
  }
}


/* ─────────────────────────────────────────────
   §36  TITLE TILE  (added v1.4.25)

   The title is its own tile on the canvas, with air above and
   below. Two tiles — title, then tabs — not one white box holding
   both.

   READ §27 BEFORE EDITING. That section makes
   section.publisher-wrapper the white card and forces it white
   through five selectors. This section takes the card treatment
   OFF the wrapper and puts it on the title group instead. It wins
   on specificity, deliberately, rather than by editing §27 — so
   deleting §36 restores the old look with no other change.

   SPECIFICITY ARITHMETIC (verified, not eyeballed):
     section.dashboard > section.publisher-wrapper        (0,2,2)  §27
     section.dashboard section.publisher-wrapper.publisher-wrapper
                                                          (0,3,2)  here
   The class is repeated to buy the point. It matches the same
   element either way — the repetition exists only for the cascade,
   the same trick ix-tokens' [class] neutraliser uses.
   ───────────────────────────────────────────── */

/* ── 0. PAINT THE CANVAS ──
   Making the wrapper transparent only reveals what is BEHIND it.
   section.dashboard has no background in this file (§27: "controlled
   entirely by Webflow Designer"), and Designer paints it white — so
   v1.4.25 revealed white, put a white tile on it, and the edge
   vanished. Every candidate ancestor is painted here. Belt and
   braces on purpose: which one is actually the white box depends on
   the Designer tree, and this stops mattering if it is all canvas. */
body,
body.body-67,
section.dashboard,
.w-layout-blockcontainer.container-200403 {
  background-color: var(--ix-canvas) !important;
  background-image: none !important;
}

/* ── 1. The wrapper stops being a card ──
   SELECTOR NOTE: the class is repeated THREE times and no ancestor
   is named. v1.4.25 used `section.dashboard section.publisher-wrapper
   .publisher-wrapper` — higher specificity, but it only applies if
   section.dashboard is genuinely an ancestor. When it isn't, the rule
   matches nothing and §27 wins by default. (0,3,1) with no ancestry
   requirement beats §27's (0,2,2) on class count alone and cannot
   miss. Check that a selector MATCHES before checking that it WINS. */
.publisher-wrapper.publisher-wrapper.publisher-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* ── 2. The title group becomes the tile ──
   §27 already sets its display/flex/gap/width. Surface, spacing and
   edge only. The edge is --ix-border-input (#DDD9C8) rather than
   --ix-border: both are faint against white, but the tile reads
   primarily because the CANVAS behind it is different, and the
   border only sharpens that boundary. */
/* The COLUMN is not the card — it holds the tab block too, which is
   what made the whole page one white box from v1.4.25 to v1.4.27. */
.publisher-wrapper > .div-block-20048152 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* THE TILE. .title-admin-name-left is the circle-plus-name row and
   holds nothing else, so the card cannot swallow the tabs again.
   width:100% turns a centred content-width row into the full-width
   white bar in the reference. Works whether the tab block is this
   element's sibling or its uncle. */
.publisher-wrapper .title-admin-name-left {
  width: 100% !important;
  background-color: var(--ix-white) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--ix-radius) !important;
  box-shadow: 0 1px 3px rgba(26,58,58,0.04) !important;
  padding: 34px 32px !important;
  margin: 0 0 22px 0 !important;
  box-sizing: border-box !important;
}

/* ── 3. Tabs are the second tile ──
   §34 stretches every wrapper child to full width; nothing more is
   needed than making sure no stray top margin closes the gap. */
.publisher-wrapper > .dashboard-tabs,
.publisher-wrapper .dashboard-tabs.w-tabs {
  margin-top: 0 !important;
  background-color: transparent !important;
}
/* the panel is the second tile's white face — §29 gave it
   --ix-border-soft (1.21:1), which is not an edge */
.dashboard-tabs.w-tabs > .w-tab-content,
.dashboard-tabs.w-tabs .tabs-content-9.w-tab-content {
  border-color: var(--ix-border-input) !important;
}

/* ── 4. Tighter rhythm on small viewports ──
   Matches §34's gutter media query so the two agree. */
@media (max-width: 1100px) {
  .publisher-wrapper.publisher-wrapper.publisher-wrapper {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .publisher-wrapper .title-admin-name-left {
    padding: 22px 20px !important;
    margin-bottom: 14px !important;
  }
}