/* ============================================================ ta-studio-components-v1.0.12.css INBXIFY TA Studio — Components tab styles + Assembler picker + post-CMS-write reload banner Complete replacement for ta-studio-components-v1.0.11.css. Delete the v1.0.11 link from the Webflow and load ONLY this file. Per the project versioning rule: increment filenames and remove old versions — never mix versions. v1.0.12 (Sub-session A — v1.0.4 fixes): Companion stylesheet for ta-components-tab-v1.0.4.js. One surgical change: bulkbar surface rewrite. v1.0.11's solid- teal-with-overrides approach forced .cmp-bulkbar .ix-btn--* rules that inverted text colors, violating the ix-buttons- v1.0.4 contract (canonical buttons expect cream/white surfaces). Surface is now cream #FAF9F5 with a 3px gold #C4A35A left-border accent — same visual language as has-pending field treatment and DOCX callouts. ix-btn--ghost and ix-btn--secondary now render as designed; all override blocks DELETED. Inner sub-panel (.cmp-bulk-edit) recolored from translucent-white-on-teal to white-on-cream with a muted border. Universal Rule 2 (.has-pending gold border) preserved. No other rules touched. Webflow head deploy: SWAP: ta-studio-components-v1.0.11.css → ta-studio-components-v1.0.12.css SWAP: ta-components-tab-v1.0.3.js (or v1.0.2 if v1.0.3 was never shipped) → ta-components-tab-v1.0.4.js v1.0.11 (Sub-session A — v1.0.2 fixes): superseded. v1.0.10 (Sub-session A — v1.0.1 fixes): superseded. v1.0.9 (Sub-session A — first ship): superseded. v1.0.8 (S11.5b Wave 1 — TD-160 button system migration): Strips the v1.0.7 .cmp-btn--primary specificity-bump + !important armor block (was at line ~469). All Studio buttons now emit BOTH legacy "cmp-btn cmp-btn--primary" AND new "ix-btn ix-btn--primary" classes per the additive migration approach. The new ix-buttons-v1.0.0.css module provides the visual rules with its own armor pattern (specificity + !important + dual background-color/background-image). Two scoped :disabled rules at lines ~760 (cmp-attach-actions) and ~1045 (asm-pick-footer) are NOT removed in this version — they're harmless legacy that the new module's :disabled rules override via specificity + !important. They will be deleted alongside the broader legacy class strip in S11.5c (title-admin-page-design v1.4.7). Webflow head deploy: ADD: ix-buttons-v1.0.0.css (load AFTER design + components CSS) SWAP: ta-studio-components-v1.0.7.css → ta-studio-components-v1.0.8.css SWAP: ta-studio-v1.2.7.js → ta-studio-v1.2.8.js v1.0.7 (S11 — primary button color fix): Bumps selector specificity on .cmp-btn--primary (Attach buttons) to defeat a recently-introduced cascade override that was leaving the button face white and the white text invisible. The previous (0,1,0) selectors now use `button.cmp-btn--primary` (0,1,1) plus !important on background/color/border-color, which is sufficient to win over any element-level `button { background: transparent }` reset coming in from Webflow's compiled CSS. Reported by Jeff in S11 prep — regression appeared within a 3-day window. Most likely cause: a Webflow chrome update shipping a stricter button reset. !important is defensive; the fix is robust either way. Same treatment applied to: .cmp-btn--primary:hover .cmp-btn--primary:disabled / .cmp-btn--disabled so the disabled and hover states stay legible too. No other classes changed in v1.0.7. v1.0.6 (Session 8 polish — reload banner): Adds the persistent banner shown by ta-studio-v1.2.4.js during the post-CMS-write reload wait window. Replaces the brief success toast with something the user sees continuously until the page actually reloads, so the ~1.5s gap doesn't feel like a hang. Classes added in v1.0.6: .studio-reload-banner fixed-position banner at top of viewport .studio-reload-banner.visible fade-in modifier .studio-reload-banner-msg message row (spinner + text) .studio-reload-banner-spinner small rotating spinner .studio-reload-banner-text label text .studio-reload-banner-progress progress bar track .studio-reload-banner-progress-fill animated fill (0→100% over reload delay) Design tokens used (consistent with rest of file): Gold: #C4A35A banner border + progress fill Teal: #1A3A3A banner text Cream: #FAF9F5 banner background v1.0.5 (Session 8 — Assembler field-level Attach): Adds classes for the in-Assembler picker UI used by ta-studio-v1.2.0+ when the user clicks [Attach Main Image] or [+ Attach Interior Image] inside the Assembler's Media column. The picker reuses .cmp-card chrome from the Components tab (same thumb / name / meta / status-dot pattern) and adds a wrapper class .asm-pick-card with selection state and compact spacing. New classes are NS-prefixed asm- to keep them out of the cmp- block. Classes added in v1.0.5: .asm-img-slot--picking slot container modifier when picker is open .asm-img-slot-actions action row (Attach / Replace buttons) inside an asm-img-slot .asm-link-btn small inline text link button (Replace, Cancel) .asm-gallery grid container for attached Interior Images .asm-gallery-item single attached card .asm-gallery-thumb thumbnail in gallery item .asm-gallery-name name caption in gallery item .asm-pick picker root (lives inside slot) .asm-pick-head header strip with title + locks .asm-pick-title "Pick a Main Image" headline .asm-pick-locks container for locked-filter pills .asm-pick-lock single locked-filter pill .asm-pick-filters user-toggleable narrowing filters (Customer + Product) row .asm-pick-filter label + select pair .asm-pick-filter-lbl small mono label above each select .asm-pick-list scrollable candidates list .asm-pick-empty empty state inside picker .asm-pick-card candidate card (extends .cmp-card) .asm-pick-card--selected gold-border editing-state contract .asm-pick-error inline red error bar (mirrors .cmp-attach-error styling for Assembler half-committed state) .asm-pick-footer Cancel + Confirm row at bottom v1.0.4 (Session 6B patch): Attach-failed UX (Option X). When a Route 4 attach attempt fails, State B card stays open with an inline red error bar and the Attach button is disabled. User must click Cancel to clear. Classes added in v1.0.4: .cmp-attach-error inline red error bar inside the editing panel .cmp-card--attach-failed card container modifier (subtle red border accent) v1.0.3 (Session 6B): Attach UI classes added for State B (editing) rendering and enrichment of State A / State C cards (Media ID / Article ID surfaces, Attached-to line). Classes added in v1.0.3: .cmp-card--editing State B card container modifier .cmp-card-attached "→ Article Title" line in State C .cmp-card-ids IDs meta row (Media: xxx · Article: xxx) .cmp-card-id-mono mono-font id value span .cmp-attach-edit editing-state panel replacing actions .cmp-attach-label "Attach to Article:" label .cmp-attach-row 2-col grid: status filter + picker .cmp-attach-status container around Status filter .cmp-attach-picker container around Article picker .cmp-picker--active gold-border modifier on picker w/ selection .cmp-attach-actions action row: Attach button + Cancel link .cmp-attach-cancel gold underlined Cancel text link v1.0.2 (2026-04-23): Added .cmp-search* classes for the new search-by-name input bar above the filter row. Search input gets the gold 2px border when non-empty (editing-state contract). v1.0.1 (2026-04-23): Drawer z-index bumped to 10000 / 10001 to match the project-wide popover standard (Content Library modal uses 10000). Previous values 1000/1001 were below sticky publisher-wrapper banner which punched through the backdrop. Backdrop opacity bumped .35 → .45 for clearer dim. Supplement to title-admin-page-design-v1.4.5.css. Contains all .cmp-* AND .asm-* classes used by ta-studio-v1.2.0.js. Load this file AFTER title-admin-page-design-v1.4.5.css in Webflow . Design system tokens used: Primary: #5b7fff (electric blue — attached-state dot, editing-card border accent) Accent: #C4A35A (gold — pending-save border, cancel link, clear-all, asm-pick selected card) Success: #10b981 (green — available status dot) Muted: #9ca3af (gray — archived status dot) Card BG: #FFFFFF Body BG: #FAF9F5 (inherited from T-A page) Text 1°: #1A3A3A (legacy teal — matches existing DS headings) Text 2°: #5a6a5a Text 3°: #8a8a7a Typography: DM Sans body, DM Mono for mono pills/counters. ============================================================ */ /* ─── Root container ─── */ .cmp-root { padding: 16px 0; font-family: 'DM Sans', system-ui, sans-serif; color: #1a3a3a; position: relative; } /* ─── Header ─── */ .cmp-header { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid #e8e4d8; margin-bottom: 16px; gap: 16px; } .cmp-header-left { flex: 1; min-width: 0; } .cmp-title { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; color: #1a3a3a; } .cmp-subtitle { font-size: 12px; color: #8a8a7a; line-height: 1.4; } .cmp-header-right { flex-shrink: 0; } .cmp-count { font-family: 'DM Mono', monospace; font-size: 11px; color: #5a6a5a; padding: 4px 10px; background: #f4f1ea; border-radius: 4px; letter-spacing: 0.03em; } /* ─── Search row (v1.0.2) ─── */ .cmp-searchrow { margin-bottom: 12px; } .cmp-search { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #ffffff; border: 1px solid #d4cfbf; border-radius: 6px; min-height: 38px; transition: border-color 0.15s; } .cmp-search:focus-within { border-color: #5b7fff; } .cmp-search--active { border: 2px solid #C4A35A; padding: 7px 11px; /* compensate for 2px border */ } .cmp-search-icon { color: #8a8a7a; flex-shrink: 0; } .cmp-search-input { flex: 1; min-width: 0; border: none; background: transparent; font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; color: #1a3a3a; padding: 0; outline: none; } .cmp-search-input::placeholder { color: #a8a59c; } .cmp-search-clear { font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; padding: 3px 7px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: #5a6a5a; cursor: pointer; line-height: 1; flex-shrink: 0; } .cmp-search-clear:hover { background: #f4f1ea; border-color: #d4cfbf; color: #1a3a3a; } /* ─── Filter bar ─── */ .cmp-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; background: #f4f1ea; border-radius: 6px; margin-bottom: 16px; } .cmp-fc { display: flex; flex-direction: column; gap: 4px; min-width: 120px; } .cmp-fc-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a; padding-left: 2px; } .cmp-fc-select { font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; padding: 7px 10px; background: #ffffff; color: #1a3a3a; border: 1px solid #d4cfbf; border-radius: 4px; cursor: pointer; min-height: 34px; transition: border-color 0.15s; } .cmp-fc-select:hover { border-color: #1a3a3a; } .cmp-fc-select:focus { outline: none; border-color: #5b7fff; box-shadow: 0 0 0 2px rgba(91, 127, 255, 0.15); } /* Active-filter gold border — the editing-state contract visual */ .cmp-fc.cmp-fc--active .cmp-fc-select { border: 2px solid #C4A35A; padding: 6px 9px; /* compensate for 2px border */ } .cmp-clear-all { margin-left: auto; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: #C4A35A; background: none; border: none; padding: 8px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; align-self: center; } .cmp-clear-all:hover { color: #8a6f35; } /* ─── Grid ─── */ .cmp-grid-wrap { position: relative; } .cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } @media (max-width: 899px) { .cmp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } @media (max-width: 599px) { .cmp-grid { grid-template-columns: 1fr; } } /* ─── Card ─── */ .cmp-card { background: #ffffff; border: 1px solid #e8e4d8; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; position: relative; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .cmp-card:hover { border-color: #c4bfb0; box-shadow: 0 2px 8px rgba(26, 58, 58, 0.06); } .cmp-card--archived { opacity: 0.65; } .cmp-card--busy { opacity: 0.5; pointer-events: none; } /* Thumbnail (Image-type) */ .cmp-thumb { aspect-ratio: 16 / 9; background: #f4f1ea; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cmp-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmp-thumb-empty { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a; } /* Text preview (Text-type) */ .cmp-text-preview { aspect-ratio: 16 / 9; background: #f4f1ea; border-radius: 6px; padding: 10px 12px; font-size: 11px; line-height: 1.5; color: #5a6a5a; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } /* Card body */ .cmp-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cmp-card-name { font-size: 13px; font-weight: 600; color: #1a3a3a; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cmp-card-meta { font-size: 11px; color: #5a6a5a; display: flex; align-items: center; gap: 6px; } .cmp-card-sub { font-size: 11px; color: #8a8a7a; } /* Status dot */ .cmp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .cmp-dot--available { background: #10b981; } .cmp-dot--attached { background: #5b7fff; } .cmp-dot--archived { background: #9ca3af; } .cmp-dot--unknown { background: #d4cfbf; } /* Card actions row */ .cmp-card-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; position: relative; } .cmp-btn { font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; font-weight: 500; padding: 6px 12px; background: #ffffff; color: #1a3a3a; border: 1px solid #d4cfbf; border-radius: 4px; cursor: pointer; transition: background 0.1s, border-color 0.1s; line-height: 1.2; } .cmp-btn:hover { background: #f4f1ea; border-color: #8a8a7a; } /* v1.0.7 (S11) → v1.0.8 (S11.5b Wave 1) — REMOVED. The .cmp-btn--primary specificity-bump + !important armor block that lived here in v1.0.7 has been removed. Every consumer now emits BOTH the legacy "cmp-btn cmp-btn--primary" classes AND the new "ix-btn ix-btn--primary" classes (additive migration per TD-160-Button-Audit.docx). The ix-buttons-v1.0.0.css module provides the visual rules with its own armor (specificity + !important + dual background-color/background-image). The legacy classes are now orphan style-wise but harmless — they will be stripped from the JS emits in S11.5c cleanup pass. */ .cmp-btn--icon { padding: 6px 9px; margin-left: auto; font-size: 14px; line-height: 1; } /* Overflow menu */ .cmp-overflow { position: absolute; right: 0; bottom: calc(100% + 4px); background: #ffffff; border: 1px solid #d4cfbf; border-radius: 6px; box-shadow: 0 4px 12px rgba(26, 58, 58, 0.12); min-width: 180px; z-index: 10; padding: 4px; } .cmp-overflow[hidden] { display: none; } .cmp-overflow-item { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; color: #1a3a3a; cursor: pointer; border-radius: 4px; } .cmp-overflow-item:hover { background: #f4f1ea; } .cmp-overflow-danger { color: #c0392b; } .cmp-overflow-danger:hover { background: #fdebea; color: #8a2a20; } /* ─── Empty state ─── */ .cmp-empty { padding: 48px 20px; text-align: center; } .cmp-empty-inner { max-width: 400px; margin: 0 auto; } .cmp-empty-title { font-size: 15px; font-weight: 600; color: #1a3a3a; margin-bottom: 6px; } .cmp-empty-sub { font-size: 13px; color: #8a8a7a; line-height: 1.5; } .cmp-empty-clear { display: inline-block; margin-top: 12px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: #C4A35A; background: none; border: none; padding: 6px 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .cmp-empty-clear:hover { color: #8a6f35; } /* ─── Detail drawer ─── */ .cmp-drawer-backdrop { position: fixed; inset: 0; background: rgba(26, 58, 58, 0.45); z-index: 10000; animation: cmpFadeIn 0.15s ease; } .cmp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #ffffff; border-left: 1px solid #d4cfbf; box-shadow: -4px 0 16px rgba(26, 58, 58, 0.18); z-index: 10001; transform: translateX(100%); transition: transform 0.22s ease; overflow-y: auto; font-family: 'DM Sans', system-ui, sans-serif; color: #1a3a3a; } .cmp-drawer--open { transform: translateX(0); } .cmp-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e8e4d8; position: sticky; top: 0; background: #ffffff; z-index: 2; } .cmp-drawer-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: #1a3a3a; } .cmp-drawer-close { font-size: 16px; padding: 4px 8px; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: #5a6a5a; flex-shrink: 0; line-height: 1; } .cmp-drawer-close:hover { background: #f4f1ea; border-color: #d4cfbf; } .cmp-drawer-preview { padding: 16px 20px; background: #faf9f5; border-bottom: 1px solid #e8e4d8; } .cmp-drawer-img { width: 100%; height: auto; display: block; border-radius: 6px; background: #e8e4d8; } .cmp-drawer-html-wrap { max-height: 360px; overflow-y: auto; } .cmp-drawer-html { font-size: 13px; line-height: 1.55; color: #1a3a3a; } .cmp-drawer-html p { margin: 0 0 0.8em; } .cmp-drawer-html p:last-child { margin-bottom: 0; } .cmp-drawer-html img { max-width: 100%; height: auto; border-radius: 4px; } .cmp-drawer-preview-empty { font-size: 12px; color: #8a8a7a; font-style: italic; text-align: center; padding: 32px 20px; } .cmp-drawer-fields { padding: 16px 20px; margin: 0; display: grid; grid-template-columns: 100px 1fr; gap: 10px 16px; } .cmp-drawer-fields dt { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a; padding-top: 2px; } .cmp-drawer-fields dd { margin: 0; font-size: 13px; color: #1a3a3a; line-height: 1.45; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; } .cmp-drawer-fields dd strong { font-weight: 600; } .cmp-drawer-mono { font-family: 'DM Mono', monospace; font-size: 11px; color: #5a6a5a; } @keyframes cmpFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ─── v1.0.3: State B (editing) card ─── */ .cmp-card--editing { border-color: #5b7fff; box-shadow: 0 2px 12px rgba(91, 127, 255, 0.12); } /* Editing panel replacing the action row */ .cmp-attach-edit { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 10px 2px 2px; border-top: 1px dashed #e8e4d8; } .cmp-attach-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #1a3a3a; font-weight: 600; } .cmp-attach-row { display: grid; grid-template-columns: minmax(0, 90px) 1fr; gap: 8px; align-items: end; } .cmp-attach-status, .cmp-attach-picker { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cmp-attach-status .cmp-fc-select, .cmp-attach-picker .cmp-fc-select { width: 100%; min-height: 30px; font-size: 12px; padding: 6px 8px; } /* Gold-border contract — picker with selection held. Same 2px + padding compensation as .cmp-fc--active in v1.0.2. */ .cmp-picker--active .cmp-fc-select { border: 2px solid #C4A35A; padding: 5px 7px; } /* Action row */ .cmp-attach-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .cmp-attach-actions .cmp-btn { font-size: 11px; padding: 6px 14px; } /* Cancel text link — small gold underlined */ .cmp-attach-cancel { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: #C4A35A; background: none; border: none; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; margin-left: auto; line-height: 1.2; } .cmp-attach-cancel:hover { color: #8a6f35; } /* Disabled Attach button during fetch keeps appearance but removes hover */ .cmp-attach-actions .cmp-btn--primary:disabled { background: #e8e4d8; color: #8a8a7a; border-color: #d4cfbf; cursor: not-allowed; } /* ─── v1.0.4: Attach failure UX (Option X) ─── */ /* Card container modifier — subtle red border accent to signal failed state */ .cmp-card--attach-failed { border-color: #c0392b; box-shadow: 0 2px 12px rgba(192, 57, 43, 0.12); } /* Inline red error bar inside the editing panel */ .cmp-attach-error { background: #fdebea; border: 1px solid #e7b4af; border-left: 4px solid #c0392b; border-radius: 4px; color: #8a2a20; font-size: 11.5px; line-height: 1.45; padding: 8px 10px; margin-top: 2px; } /* ════════════════════════════════════════════════════════════ v1.0.5: Assembler field-level Attach (S8) ════════════════════════════════════════════════════════════ The picker lives inside an existing .asm-img-slot in the Assembler's Media column. When open, the slot gains .asm-img-slot--picking and renders the .asm-pick block below the image preview / placeholder + alt-text input. ════════════════════════════════════════════════════════════ */ /* Slot in picking state — visible cue that this slot is the active picker */ .asm-img-slot--picking { background: #faf9f5; border: 1px dashed #d4cfbf; border-radius: 6px; padding: 12px; margin: 4px -4px; /* slight outset so the picking state visually expands */ } /* Action row inside a slot — Attach button (empty) or Replace link (populated) */ .asm-img-slot-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* Small inline text-link button — Replace, Cancel inside picker footer */ .asm-link-btn { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: #C4A35A; background: none; border: none; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; line-height: 1.2; } .asm-link-btn:hover { color: #8a6f35; } /* ─── Interior Images gallery (attached MEDIA) ─── */ .asm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 4px; } .asm-gallery-item { background: #ffffff; border: 1px solid #e8e4d8; border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .asm-gallery-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 4px; background: #f4f1ea; } .asm-gallery-thumb--empty { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a; display: flex; align-items: center; justify-content: center; } .asm-gallery-name { font-size: 10.5px; color: #5a6a5a; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ─── Picker root ─── */ .asm-pick { margin-top: 12px; padding: 12px; background: #ffffff; border: 1px solid #5b7fff; /* electric blue — same accent as cmp State B */ border-radius: 6px; box-shadow: 0 2px 12px rgba(91, 127, 255, 0.10); display: flex; flex-direction: column; gap: 12px; } /* Picker header */ .asm-pick-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed #e8e4d8; } .asm-pick-title { font-size: 13px; font-weight: 700; color: #1a3a3a; } .asm-pick-locks { display: flex; gap: 6px; flex-wrap: wrap; } .asm-pick-lock { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: #5a6a5a; background: #f4f1ea; border: 1px solid #d4cfbf; border-radius: 3px; padding: 3px 7px; white-space: nowrap; } /* Picker filters row (Customer + Product narrowing) */ .asm-pick-filters { display: flex; flex-wrap: wrap; gap: 10px; } .asm-pick-filter { display: flex; flex-direction: column; gap: 3px; min-width: 140px; flex: 1; } .asm-pick-filter-lbl { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a; padding-left: 2px; } .asm-pick-filter select { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; padding: 6px 8px; background: #ffffff; color: #1a3a3a; border: 1px solid #d4cfbf; border-radius: 4px; cursor: pointer; min-height: 32px; width: 100%; } .asm-pick-filter select:hover { border-color: #1a3a3a; } .asm-pick-filter select:focus { outline: none; border-color: #5b7fff; box-shadow: 0 0 0 2px rgba(91, 127, 255, 0.15); } /* Candidates list — scrollable, capped height */ .asm-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px 2px; } @media (max-width: 599px) { .asm-pick-list { grid-template-columns: 1fr; } } /* Picker empty state */ .asm-pick-empty { grid-column: 1 / -1; padding: 24px 16px; text-align: center; font-size: 12.5px; color: #8a8a7a; background: #faf9f5; border: 1px dashed #d4cfbf; border-radius: 4px; line-height: 1.5; } /* Picker card — extends .cmp-card. Compact spacing, no hover boost. */ .asm-pick-card { cursor: pointer; padding: 8px; gap: 6px; } .asm-pick-card:hover { border-color: #5b7fff; box-shadow: 0 1px 6px rgba(91, 127, 255, 0.10); } /* Selected — site-wide editing-state contract: gold 2px border */ .asm-pick-card--selected { border: 2px solid #C4A35A; padding: 7px; /* compensate for 2px border */ background: #fdfbf3; } .asm-pick-card--selected:hover { border-color: #C4A35A; /* override hover blue when selected */ box-shadow: 0 2px 12px rgba(196, 163, 90, 0.14); } /* Tighten cmp-card sub-elements when nested inside a picker card */ .asm-pick-card .cmp-thumb, .asm-pick-card .cmp-text-preview { aspect-ratio: 16 / 10; } .asm-pick-card .cmp-card-name { font-size: 12px; -webkit-line-clamp: 1; } /* Inline red error bar inside the picker — mirrors .cmp-attach-error */ .asm-pick-error { background: #fdebea; border: 1px solid #e7b4af; border-left: 4px solid #c0392b; border-radius: 4px; color: #8a2a20; font-size: 11.5px; line-height: 1.45; padding: 8px 10px; } /* Picker footer — Cancel + Confirm */ .asm-pick-footer { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed #e8e4d8; } .asm-pick-footer .asm-link-btn { margin-right: auto; } .asm-pick-footer .cmp-btn { font-size: 11px; padding: 6px 14px; } .asm-pick-footer .cmp-btn--primary:disabled { background: #e8e4d8; color: #8a8a7a; border-color: #d4cfbf; cursor: not-allowed; } /* ════════════════════════════════════════════════════════════ v1.0.6: Reload banner (post-CMS-write wait window) ════════════════════════════════════════════════════════════ Rendered by ta-studio-v1.2.4+ studioReloadAfterCMSWrite(). Replaces the brief success toast with a persistent banner that stays visible until the page actually reloads (~1500ms), so the wait doesn't feel like a hang. Layout: position:fixed at the top of the viewport, full width. Cream background, gold left accent, teal text. Includes a small spinner and a thin progress bar that fills 0→100% over the reload delay window. z-index 11000: above the cmp drawer (10001) and above any modals so the user always sees the reload affordance. ════════════════════════════════════════════════════════════ */ .studio-reload-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 11000; background: #FAF9F5; border-bottom: 1px solid #e8e4d8; border-left: 4px solid #C4A35A; box-shadow: 0 2px 12px rgba(26, 58, 58, 0.10); font-family: 'DM Sans', system-ui, sans-serif; color: #1a3a3a; padding: 0; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; /* purely informational, don't block clicks */ } .studio-reload-banner.visible { opacity: 1; transform: translateY(0); } .studio-reload-banner-msg { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; } .studio-reload-banner-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e8e4d8; border-top-color: #C4A35A; animation: studioReloadSpin 0.8s linear infinite; flex-shrink: 0; } @keyframes studioReloadSpin { to { transform: rotate(360deg); } } .studio-reload-banner-text { color: #1a3a3a; } .studio-reload-banner-progress { height: 3px; width: 100%; background: #f0ece0; overflow: hidden; } .studio-reload-banner-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #C4A35A 0%, #d4b878 100%); animation: studioReloadProgressFill 1500ms ease-out forwards; transform-origin: left center; } @keyframes studioReloadProgressFill { from { width: 0%; } to { width: 100%; } } /* ============================================================ ta-studio-components-v1.0.11.css — v1.0.2 ADDITIONS ============================================================ APPENDED to v1.0.8 contents to form v1.0.11. Companion stylesheet for ta-components-tab-v1.0.2.js. v1.0.11 (vs v1.0.10): • Body lock + side-panel-only drawer host. Drawer no longer covers full viewport — only the right side. Underlying page stays visually intact behind the backdrop. body.cmp-detail- locked freezes scroll while drawer is open. • Bulk toolbar contrast strengthened — solid teal (no gradient fade), brighter cream text, visible shadow. • Card uses fixed grid layout: thumbnail + body + actions. Actions row pinned to bottom regardless of body content. • Title clamps to 2 lines deterministically; no variable height. • Customer row is a flex line with name growing + ellipsis + pencil edit button at the right end. • Card body font scale reduced 2px overall (font-size: 11px baseline; meta and customer follow). ──────────────────────────────────────────────────────────── */ /* ─── Universal dirty-state border for field hosts ─── */ .has-pending { border-color: var(--ix-gold) !important; box-shadow: 0 0 0 1px var(--ix-gold) inset; } /* ─── Filter bar (single-row, wraps on narrow viewports) ─── */ .cmp-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 14px; } .cmp-filter-row .cmp-fc { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cmp-filter-row .cmp-fc-lbl { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ix-text-mid, #5a6478); } .cmp-filter-row .cmp-fc-select { height: 30px; padding: 0 8px; background: #fff; border: 1px solid var(--ix-border-input, #ddd9c8); border-radius: 4px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; color: var(--ix-text-dark, #1e2a3a); min-width: 110px; } .cmp-filter-row .cmp-fc.has-pending .cmp-fc-select { border-color: var(--ix-gold) !important; box-shadow: 0 0 0 1px var(--ix-gold) inset; } .cmp-filter-reset { margin-left: auto; align-self: center; } /* ============================================================ § CARD — fixed grid layout (v1.0.11) ============================================================ The card is a vertical grid with three rows: [auto] thumbnail [1fr] body (name + meta + customer) — flexes [auto] actions (Details… / Status…) pinned to bottom Min-height ensures consistent card heights across the grid even when one card has more content than another. Actions row sits at the bottom of every card regardless of body content density. ──────────────────────────────────────────────────────────── */ /* v1.0.8 already styles .cmp-card with flex column. v1.0.11 converts to grid for predictable internal alignment. */ .cmp-card { display: grid !important; grid-template-rows: auto 1fr auto !important; min-height: 360px; gap: 10px !important; } /* Thumbnail uses existing v1.0.8 .cmp-thumb (16:9 aspect-ratio). No overrides needed. */ /* Card body — fills the middle row */ .cmp-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 11px; /* v1.0.11: -2px overall */ line-height: 1.4; color: var(--ix-text-mid, #5a6478); } /* Card name — clamp to 2 lines, no variable height */ .cmp-card-name { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; /* v1.0.11: -1px (was 13px in v1.0.8) */ font-weight: 600; color: var(--ix-text-dark, #1a3a3a); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* Reserve exactly 2 lines worth of space so cards align */ min-height: calc(1.3em * 2); } /* Meta row — single line with separators */ .cmp-card-meta { display: flex; align-items: center; gap: 5px; font-size: 10px; /* v1.0.11: -1px */ color: var(--ix-text-mid, #5a6478); flex-wrap: wrap; min-width: 0; } .cmp-card-meta-sep { color: var(--ix-text-light, #8a8e9a); } .cmp-card-meta-pdf { background: var(--ix-gold-glow, rgba(196, 163, 90, 0.12)); color: #8a6f35; border: 1px solid var(--ix-border, #e4e0d4); border-radius: 3px; padding: 1px 5px; font-size: 9px; font-weight: 600; margin-left: 4px; } /* Customer row — single line with ellipsis + pencil edit button. Layout: [LABEL] [NAME-grows-truncates] [PENCIL-fixed-right] */ .cmp-card-customer { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; } .cmp-card-customer-lbl { font-family: 'DM Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ix-text-light, #8a8e9a); flex-shrink: 0; } .cmp-card-customer-val { font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; font-weight: 500; color: var(--ix-text-dark, #1e2a3a); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pencil edit button — small icon, sits at right end of customer row */ .cmp-card-edit-btn { flex-shrink: 0; width: 22px; height: 22px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 3px; color: var(--ix-text-light, #8a8e9a); font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, color 0.15s; } .cmp-card-edit-btn:hover { background: var(--ix-cream, #FAF9F5); border-color: var(--ix-gold); color: var(--ix-gold); } /* When customer is empty, the Assign… ghost button replaces the row layout — still uses ix-btn--ghost but inline. */ .cmp-card-link-btn.ix-btn--ghost { padding: 0 !important; min-height: 0 !important; font-size: 11px !important; } /* Card actions row — pinned to bottom of grid */ .cmp-card-actions { display: flex; gap: 6px; align-items: center; /* Grid-row-3 alignment, but also flex's auto-margin works */ margin-top: 0; } /* Card-action buttons (Details / Status) sized to fit the row */ .cmp-card-action.ix-btn--secondary { padding: 5px 10px !important; min-height: 28px !important; font-size: 10px !important; flex: 0 0 auto; } /* Selection ring on cards (Pattern B) */ .cmp-card--selected { border-color: var(--ix-blue, #5b7fff) !important; box-shadow: 0 0 0 2px rgba(91, 127, 255, 0.16) !important; } /* Editing-state ring (gold, dirty) */ .cmp-card--editing { border-color: var(--ix-gold) !important; box-shadow: 0 0 0 2px var(--ix-gold-glow, rgba(196, 163, 90, 0.18)) !important; } /* ============================================================ § INLINE-EDIT PANEL ============================================================ */ .cmp-inline-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 8px; margin-top: 4px; background: var(--ix-surface, #fdfcf9); border: 1px solid var(--ix-border, #e4e0d4); border-radius: 4px; /* Take up the actions row slot when editing */ grid-row: 3; } .cmp-inline-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; min-width: 0; } .cmp-inline-field-lbl { font-family: 'DM Mono', ui-monospace, monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ix-text-light, #8a8e9a); } .cmp-inline-field-select { height: 28px; padding: 0 6px; background: #fff; border: 1px solid var(--ix-border-input, #ddd9c8); border-radius: 4px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; color: var(--ix-text-dark, #1e2a3a); min-width: 0; } .cmp-inline-field.has-pending .cmp-inline-field-select { border-color: var(--ix-gold) !important; box-shadow: 0 0 0 1px var(--ix-gold) inset; } .cmp-inline-actions { display: flex; align-items: center; gap: 6px; } /* ============================================================ § BULK-ACTION TOOLBAR — cream + gold left-border ============================================================ v1.0.12 (Sub-session A · v1.0.4 fixes): Rewritten from solid-teal-with-overrides to cream-with- gold-left-border. Same visual language as has-pending field treatment and DOCX callouts: "action-pending bar". Why the rewrite: v1.0.11's teal surface forced .cmp-bulkbar .ix-btn--* overrides to invert text colors (white on teal), which violates the ix-buttons-v1.0.4 contract. ix-buttons expects cream/white surfaces. With the surface now cream, ix-btn--ghost (§4 gold underline) and ix-btn--secondary (§3 outline-gold on white) both render correctly without any override. Prominence comes from the gold left-border accent + sticky position + the gold Apply CTA — not from inverting button colors. DELETED in this rewrite: .cmp-bulkbar .ix-btn.ix-btn--ghost (override) .cmp-bulkbar .ix-btn.ix-btn--ghost:hover (override) .cmp-bulkbar .ix-btn.ix-btn--secondary (override) .cmp-bulkbar .ix-btn.ix-btn--secondary:hover (override) Universal Rule 2 (dirty fields show .has-pending gold border) is preserved on .cmp-bulk-field.has-pending — no change to that selector. ──────────────────────────────────────────────────────────── */ .cmp-bulkbar { position: sticky; top: 0; z-index: 10; margin: 0 0 14px; padding: 12px 16px 12px 18px; /* extra left to balance the 3px accent */ background: var(--ix-cream, #FAF9F5); border: 1px solid var(--ix-border, #e4e0d4); border-left: 3px solid var(--ix-gold, #C4A35A); border-radius: 6px; box-shadow: 0 2px 8px rgba(26, 58, 58, 0.06); color: var(--ix-text-dark, #1e2a3a); display: none; } .cmp-bulkbar--visible { display: block; } .cmp-bulkbar[hidden] { display: none !important; } .cmp-bulk-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; } .cmp-bulk-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cmp-bulk-right { display: flex; align-items: center; } .cmp-bulk-count { font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var(--ix-text-dark, #1e2a3a); } /* No .cmp-bulkbar .ix-btn--* overrides. ix-buttons-v1.0.4 §3 (secondary) and §4 (ghost) render correctly on the cream surface. If a future regression needs a tweak, edit the canonical module — not here. */ .cmp-bulk-actions { display: flex; gap: 8px; } .cmp-bulk-edit { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: #FFFFFF; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--ix-border, #e4e0d4); } .cmp-bulk-field { display: flex; flex-direction: column; gap: 3px; min-width: 200px; } .cmp-bulk-field-lbl { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #5A6478; /* muted dark, matches pill inactive */ } .cmp-bulk-field-select { height: 32px; padding: 0 8px; background: #fff; border: 1px solid var(--ix-border-input, #ddd9c8); border-radius: 4px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; color: var(--ix-text-dark, #1e2a3a); } .cmp-bulk-field.has-pending .cmp-bulk-field-select { border-color: var(--ix-gold) !important; box-shadow: 0 0 0 1px var(--ix-gold) inset; } .cmp-bulk-confirm-text { font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; color: var(--ix-text-dark, #1e2a3a); } /* ============================================================ § DETAIL DRAWER — side-panel only, body locked ============================================================ Critical fix for v1.0.11: drawer host no longer covers the full viewport. Backdrop is overlaid only over the side panel region; underlying page content remains visible to the left. body.cmp-detail-locked freezes page scroll. ──────────────────────────────────────────────────────────── */ /* Body lock — prevents background scroll while drawer is open */ body.cmp-detail-locked { overflow: hidden; } /* Drawer host — fixed but only on the right side of the viewport */ .cmp-detail-host { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); pointer-events: none; z-index: 1100; } .cmp-detail-host.cmp-detail-host--open { pointer-events: auto; } .cmp-detail-host:not(.cmp-detail-host--open) { display: none; } /* Backdrop — lives at viewport scope so user can click outside the panel to close. Sits behind the drawer panel via z-index. */ .cmp-detail-host .cmp-detail-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 20, 20, 0.32); cursor: pointer; z-index: 1099; /* below the drawer */ } .cmp-detail-host .cmp-detail-drawer { position: relative; height: 100%; width: 100%; background: #fff; box-shadow: -4px 0 18px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; z-index: 1100; /* slide-in animation */ animation: cmp-detail-slide-in 0.18s ease-out; } @keyframes cmp-detail-slide-in { from { transform: translateX(20px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } .cmp-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ix-border, #e4e0d4); } .cmp-detail-title { font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--ix-text-dark, #1e2a3a); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmp-detail-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; } .cmp-detail-thumb { display: block; width: 100%; max-height: 240px; object-fit: contain; background: var(--ix-cream); border: 1px solid var(--ix-border); border-radius: 6px; margin: 0 0 16px; } .cmp-detail-dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0 0 18px; } .cmp-detail-dl dt.cmp-detail-key { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ix-text-light, #8a8e9a); padding-top: 2px; } .cmp-detail-dl dd.cmp-detail-val { margin: 0; color: var(--ix-text-dark, #1e2a3a); font-size: 12px; word-break: break-word; } .cmp-detail-deferred { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--ix-surface, #fdfcf9); border: 1px solid var(--ix-border); border-left: 3px solid var(--ix-gold); border-radius: 4px; font-size: 11px; color: var(--ix-text-mid, #5a6478); line-height: 1.45; } .cmp-detail-deferred-icon { font-size: 14px; line-height: 1; flex-shrink: 0; } /* ============================================================ § TOAST ============================================================ */ .cmp-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 1200; padding: 10px 18px; background: var(--ix-teal); color: var(--ix-cream); border-radius: 6px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .cmp-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ § EMPTY STATE ============================================================ */ .cmp-empty-action { margin-top: 14px; }